<template>
  <div>
    <Modal v-model="showEditModal" :mask-closable="false">
      <p slot="header">{{modalTitle}}</p>
      <div v-show="isLoad">
        <Spin fix>
          <Icon type="load-c" size=18 class="file-spin-icon-load"></Icon>
          <div>正在上传,请稍后...</div>
        </Spin>
      </div>
      <div>
        <Form id="edit-form" ref="formObj" :model="formObj" :rules="ruleValidate" :label-width="95">
          <Form-item label="类别" prop="classType">
            <!--            <Input v-model="formObj.classType" @on-keyup="_onKeyUp" name="classType" placeholder="请选择类别" icon="plus-circled"-->
            <!--                   ></Input>-->
            <el-select v-model="formObj.classType" placeholder="请选择类别" size="small" clearable>
              <el-option :label="item.value" :value="item.value" v-for="(item,index) in typeList"
                         :key="index"></el-option>
            </el-select>
          </Form-item>
          <Form-item label="原始记录名称" prop="name">
            <Input v-model="formObj.name" @on-keyup="_onKeyUp" name="name" placeholder="请输入原始记录名称"></Input>
          </Form-item>
          <Form-item label="备注" prop="remark">
            <Input v-model="formObj.remark" @on-keyup="_onKeyUp" name="remark" placeholder="请输入备注"></Input>
          </Form-item>
        </Form>
      </div>
      <div slot="footer" class="btn-width clearfix">
        <Button @click="_cancel" style="margin-left: 8px;">取消</Button>
        <label style="margin-bottom: 0;float: right">
          <Upload
            :action="action"
            :on-success="_handelsuccess"
            :before-upload="_beupload"
            :on-progress="_handelprogress"
            :on-format-error="_formatError"
            :data="dataObj"
            :with-credentials="true"
            :show-upload-list="false"
            :format="format"
          >
            <Button :disabled="isDisable" type="primary">导入文件</Button>
          </Upload>
        </label>
      </div>
    </Modal>
    <!--类别弹出树-->
<!--    <LmsTemplateClassifyZTree ref="ztreeModal" @on-result-change="_ztree"></LmsTemplateClassifyZTree>-->
  </div>
</template>
<script>
/**
 * 添加编辑
 */
// import LmsTemplateClassifyZTree from '../lms-template-classify/LmsTemplateClassifyZTree.vue'
import global from '../../api/config'

const defVal = {
  name: '',
  remark: '',
  classType: '',
  classifyId: 0
}

export default {
  // components: { LmsTemplateClassifyZTree },
  data() {
    return {
      modalTitle: '添加',
      formObj: defVal,
      ruleValidate: {
        name: [{ required: true, message: '名称不能为空', trigger: 'blur' }],
        classType: [
          { required: true, message: '类别不能为空', trigger: 'blur' }
        ]
      },
      typeList: [
        {
          value: '力学'
        },
        {
          value: '物性'
        },
        {
          value: '高级'
        }
      ],
      showEditModal: false,
      dataObj: {
        file: ''
      },
      pname: '',
      action: '',
      isLoad: false,
      isDisable: true,
      format: ['docx', 'xlsx', 'xls']
    }
  },
  methods: {
    _onKeyUp() {
      if (this.formObj.name === '' || this.formObj.classType === '') {
        this.isDisable = true
      } else {
        this.isDisable = false
        this.action =
          global.baseURL +
          '/soil/v1/original_template/upload_template/?name=' +
          this.formObj.name +
          '&remark=' +
          this.formObj.remark +
          '&classType=' +
          this.formObj.classType
      }
    },
    _selectZtree() {
      // this.$refs.ztreeModal._openZtree()
    },
    _cancel() {
      this.showEditModal = false
    },
    _open() {
      this.showEditModal = true
      this.isLoad = false
      this.formObj.name = ''
      this.formObj.alias = ''
      this.formObj.remark = ''
      this.formObj.classType = ''
      this.modalTitle = '添加模板'
    },
    _beupload(file) {
      this.dataObj.file = file.name
    },
    _handelprogress(event, file, fileList) {
      this.isLoad = true
    },
    _handelsuccess(response, file, fileList) {
      // 上传成功
      if (response.success) {
        this.isLoad = false
        this.$Message.success('上传成功！')
        this.$emit('on-result-change')
        this.showEditModal = false
      } else {
        this.isLoad = true
        this.$Message.error(response.msg)
      }
    },
    _formatError(file) {
      this.$Notice.error({
        title: '文件格式不正确',
        duration: 10,
        desc:
          '文件 ' +
          file.name +
          ' 格式不正确，请上传格式为 docx、xlsx、xls 的文件！'
      })
    },
    _ztree(result) {
      this.pname = ''
      if (result === undefined) {
        this.formObj.classifyId = '0'
        this.pname = ''
      } else {
        this.formObj.classifyId = result.id
        this.pname = result.name
      }
      // 判断必填项是否为空
      this._onKeyUp()
    }
  }
}
</script>
<style scoped>
.clearfix:after {
  content: '';
  clear: both;
  display: block;
}
</style>
