<template>
  <Modal
    v-model="showEditModal"
    :title="modalTitle"
    width="400px"
  >
    <div>
      <el-form
        ref="formObj"
        onsubmit="return false"
        class="common-form"
        :model="formObj"
        label-width="90px"
        :rules="rules"
      >
        <el-form-item label="文件夹名称" prop="name" style="width: 90%; margin-bottom: 0">
          <el-input v-model="formObj.name" placeholder="" clearable @keyup.enter.native="_ok"></el-input>
        </el-form-item>
      </el-form>
    </div>
    <div slot="footer">
      <modalFooter ref="footerModal" :footer="footerList" @on-result-change="_footerResult"></modalFooter>
    </div>
  </Modal>
</template>

<script>
import modalFooter from '../../components/base/modalFooter'
import { fileManage } from '../../api'
export default {
  name: 'FileEdit',
  components: { modalFooter },
  data() {
    return {
      showEditModal: false,
      modalTitle: '',
      formObj: {
        name: '',
        folderId: undefined
      },
      folderId: undefined,
      rules: {
        name: [{ required: true, trigger: 'blur', message: '名称不能为空' }]
      },
      footerList: [
        { type: '', id: '', name: '取消' },
        { type: 'warning', id: '', color: '#ff9900', name: '确定' }
      ]
    }
  },
  methods: {
    _open(folderId) {
      this.$refs.formObj.resetFields()
      this.folderId = folderId
      this.formObj.folderId = folderId
      this.showEditModal = true
      this.modalTitle = '添加文件夹'
    },
    _footerResult(name) {
      switch (name) {
        case '取消':
          this.showEditModal = false
          break
        case '确定':
          this._ok()
          break
      }
    },
    async _ok() {
      const userData = this.formObj
      if (undefined === userData.id) {
        const result = await fileManage.addFolder(
          this.$serializeForm(this.formObj)
        )
        if (result) {
          this.$message({
            type: 'success',
            message: '添加成功!'
          })
          this.$emit('on-result-change')
          this.showEditModal = false
        } else {
          this.$message({
            type: 'info',
            message: '添加失败'
          })
        }
        console.log(result)
      }
    }
  }
}
</script>

<style scoped>
.el-dialog__body {
  padding: 5px 20px 0 !important;
  color: #606266;
  font-size: 14px;
}
</style>
