<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" inline class="inputBox">
          <Form-item label="类别" prop="classType" style="width: 100%">
            <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" style="width: 100%">
            <Input v-model="formObj.alias" name="alias" placeholder="请输入报告模板名称"></Input>
          </Form-item>
          <Form-item label="备注" prop="remark" style="width: 100%">
            <Input v-model="formObj.remark" name="remark" placeholder="请输入备注"></Input>
          </Form-item>
          <Form-item label="样品开始行" prop="sampleBeginRow" class="width-48">
            <el-input
              v-model="formObj.sampleBeginRow"
              @keydown.native="channelInputLimit"
              name="sampleBeginRow"
              type="number"
              onmousewheel="return false"
              placeholder="请输入样品开始行"
            />
          </Form-item>
          <Form-item label="数据占用行" prop="dataTotalRow" class="width-48">
            <el-input
              v-model="formObj.dataTotalRow"
              @keydown.native="channelInputLimit"
              name="sampleBeginCol"
              type="number"
              onmousewheel="return false"
              placeholder="请输入数据占用行"
            />
          </Form-item>
          <Form-item label="总列数" prop="totalColumn" class="width-48">
            <el-input
              v-model="formObj.totalColumn"
              @keydown.native="channelInputLimit"
              name="sampleMergerNum"
              type="number"
              onmousewheel="return false"
              placeholder="请输入总列数"
            />
          </Form-item>
          <Form-item label="模板样品数" prop="templateSampleNum" class="width-48">
            <el-input
              v-model="formObj.templateSampleNum"
              @keydown.native="channelInputLimit"
              name="templateSampleNum"
              type="number"
              onmousewheel="return false"
              placeholder="请输入模板样品数"
            />
          </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>
      </div>
    </Modal>
  </div>
</template>
<script>
/**
 * 添加编辑
 */
import { soilAptitude } from '../../../api'

const defVal = {
  alias: undefined,
  classType: undefined,
  dataTotalRow: undefined,
  totalColumn: undefined,
  remark: undefined,
  sampleBeginRow: undefined,
  sampleBeginCol: undefined,
  sampleMergerNum: undefined,
  templateSampleNum: undefined,
  classifyId: 0
}

export default {
  data() {
    const validatesampleBeginRow = (rule, value, callback) => {
      if (this.formObj.sampleBeginRow === '') {
        callback(new Error('内容不能为空'))
      } else {
        callback()
      }
    }
    const validatetemplateSampleNum = (rule, value, callback) => {
      if (this.formObj.templateSampleNum === '') {
        callback(new Error('内容不能为空'))
      } else {
        callback()
      }
    }
    return {
      modalTitle: '编辑',
      formObj: defVal,
      ruleValidate: {
        alias: [
          { required: true, message: '模板名称不能为空', trigger: 'blur' }
        ],
        sampleBeginRow: [
          {
            required: true,
            validator: validatesampleBeginRow,
            message: '样品开始行不能为空',
            trigger: 'blur'
          }
        ],
        templateSampleNum: [
          {
            required: true,
            validator: validatetemplateSampleNum,
            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.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
      }
    },
    channelInputLimit(e) {
      const key = e.key
      // 不允许输入'e'和'.'
      if (key === 'e' || key === '.') {
        e.returnValue = false
        return false
      }
      return true
    },
    _selectZtree() {
      // this.$refs.ztreeModal._openZtree()
    },
    _cancel() {
      this.showEditModal = false
    },
    _ok() {
      this.$refs.formObj.validate(valid => {
        console.log('valid', valid)
        if (valid) {
          this._editOk()
        } else {
          this.$Message.error('请输入必填值')
        }
      })
    },
    _editOk: async function() {
      const result = await soilAptitude.expReportTemplateEdit({
        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.formObj.sampleBeginRow = data.sampleBeginRow
      this.formObj.sampleBeginCol = data.sampleBeginCol
      this.formObj.sampleMergerNum = data.sampleMergerNum
      this.formObj.templateSampleNum = data.templateSampleNum
      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;
}
.inputBox >>> input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none !important;
}
.inputBox >>> input[type='number'] {
  -moz-appearance: textfield !important;
}
</style>
