<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="80">
          <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="alias">
            <Input v-model="formObj.alias" name="alias" placeholder="请输入别名"></Input>
          </Form-item>
          <Form-item label="项目代号" prop="remark">
            <Input v-model="formObj.remark" name="remark" placeholder="请输入项目代号"></Input>
          </Form-item>
        </Form>
      </div>
      <div slot="footer" class="btn-width clearfix">
        <Button @click="_cancel" style="margin-left: 8px;">取消</Button>
        <Button @click="_ok" type="primary" style="margin-bottom: 0;float: right">保存</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'
import { meterTemplate } from '../../../api'

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

export default {
  // components: { LmsTemplateClassifyZTree },
  data() {
    return {
      modalTitle: '添加',
      formObj: defVal,
      ruleValidate: {
        alias: [{ required: true, message: '别名不能为空', trigger: 'blur' }],
        remark: [
          { required: true, message: '项目代号不能为空', trigger: 'blur' }
        ],
        classType: [
          { required: true, message: '类别不能为空', trigger: 'blur' }
        ]
      },
      typeList: [
        {
          value: '检定证书'
        },
        {
          value: '校准证书'
        }
      ],
      id: '',
      showEditModal: false,
      dataObj: {
        file: ''
      },
      pname: '',
      action: '',
      isLoad: false,
      isDisable: true,
      format: ['docx', 'xlsx', 'xls']
    }
  },
  methods: {
    _onKeyUp() {
      if (
        this.formObj.alias === '' ||
        this.formObj.classType === '' ||
        this.formObj.remark === ''
      ) {
        this.isDisable = true
      } else {
        this.isDisable = false
        this.action =
          global.baseURL +
          '/meter/v1/file_template/upload_template/?classType=' +
          this.formObj.classType +
          '&alias=' +
          this.formObj.alias +
          '&remark=' +
          this.formObj.remark
      }
    },
    _selectZtree() {
      // this.$refs.ztreeModal._openZtree()
    },
    _cancel() {
      this.showEditModal = false
    },
    _ok: async function() {
      const result = await meterTemplate.edit({
        id: this.id,
        formObj: this.formObj
      })
      if (result) {
        this.$message.success('编辑成功')
        this.showEditModal = false
        this.$emit('on-result-change')
      }
    },
    _open(data) {
      console.log(data)
      this.showEditModal = true
      this.isLoad = false
      this.id = data.id
      this.formObj.alias = data.alias
      this.formObj.remark = data.remark
      this.formObj.classType = data.classType
      this.modalTitle = '编辑模板'
      console.log(this.id)
    },
    _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
      }
      // 判断必填项是否为空
    }
  }
}
</script>
<style scoped>
.clearfix:after {
  content: '';
  clear: both;
  display: block;
}
</style>
