<template>
  <div>
    <Modal v-model="showModal" v-drag :mask-closable="false">
      <p slot="header">填写试验项目信息</p>
      <div>
        <Form id="storage-location-form" ref="formObj" :model="formObj" :rules="ruleValidate" :label-width="100">
          <Form-item label="英文简写:" prop="shortName">
              <el-input v-model="formObj.shortName" name="shortName" placeholder="请输入英文简写">
              </el-input>
          </Form-item>
          <Form-item label="大类:" prop="mainType">
            <el-input v-model="formObj.mainType" name="mainType" placeholder="请输入大类">
            </el-input>
          </Form-item>
          <Form-item label="小类:" prop="smallType">
            <el-input v-model="formObj.smallType" name="smallType" placeholder="请输入小类">
            </el-input>
          </Form-item>
          <Form-item label="试验方法:" prop="testMethod">
            <el-input v-model="formObj.testMethod" name="testMethod" placeholder="请输入试验方法">
            </el-input>
          </Form-item>
          <Form-item label="试验科室:">
          <el-select :value="formObj.groupName" @change="selGroupName" style="width:100%" size="small">
            <el-option v-for="item in groupoptions" :value="item.id" :label="item.name" :key="item.name">{{ item.name }}
            </el-option>
          </el-select>
          </Form-item>
          <Form-item label="检测依据:">
          <AutoCompletes v-model="formObj.testBasis"  :down-data="testBasisList" @on-result-change="_selTestBasis"
                         style="editable:false" clearable
                         placeholder="请选择检测依据" show-key="name"></AutoCompletes>
          </Form-item>
        </Form>
      </div>
      <div slot="footer">
        <modal-footer ref="footerModal" @on-result-change="_footerResult" :footer="footerList"></modal-footer>
      </div>
    </Modal>
  </div>
</template>
<script>
import { soilAptitude, soilSample } from '../../../api'
import AutoCompletes from '../../../components/base/AutoCompletes'
export default {
  components: { AutoCompletes },
  data() {
    return {
      ids: [], // 委托ids
      showModal: false,
      formObj: {},
      ruleValidate: {},
      footerList: [
        { id: '', name: '取消', type: '' },
        { id: '', name: '保存', type: 'primary' }
      ],
      conditionList: [],
      locList: [],
      backupUserList: [],
      prepareWayList: [],
      keepWayList: [],
      keepContainerList: [],
      groupoptions: [],
      testBasisList: [],
      sampleUnit: ''
    }
  },
  mounted() {
    this._getGroupList()
    this._getTestBasisList()
  },
  methods: {
    _locChange(msg, data) {
      switch (msg) {
        case 'select':
          this.formObj.backupPlace = data.backupPlace
          this._getCondition(data.backupPlace)
          break
        case 'query':
          this.formObj.backupPlace = data.backupPlace
          this._getLocList(data.backupPlace)
          break
      }
    },
    _getGroupList: async function() {
      const result = await soilAptitude.getGroupList()
      if (result) {
        this.groupoptions = result
        console.log('试验科室', result)
      }
    },
    _getTestBasisList: async function() {
      const result = await soilAptitude.getBasisList()
      if (result) {
        this.testBasisList = result
      }
    },
    _selTestBasis(msg, data) {
      if (msg === 'select') {
        this.formObj.testBasis = data.name
      } else if (msg === 'query') {
        this.formObj.testBasis = data.name
      }
    },
    channelInputLimit(e) {
      const key = e.key
      // 不允许输入'e'和'.'
      if (key === 'e' || key === '.') {
        e.returnValue = false
        return false
      }
      return true
    },
    selPrepareWay(data) {
      this.$forceUpdate()
      this.formObj.prepareWay = data
    },
    selKeepWay(data) {
      this.$forceUpdate()
      this.formObj.keepWay = data
    },
    selKeepContainer(msg, data) {
      this.$forceUpdate()
      if (msg === 'select') {
        this.formObj.keepContainer = data.name
      } else if (msg === 'query') {
        this.formObj.keepContainer = data.name
      }
    },
    selGroupName(data) {
      this.$forceUpdate()
      if (data) {
        for (let i = 0; i < this.groupoptions.length; i++) {
          if (this.groupoptions[i].id === data) {
            this.formObj.groupName = this.groupoptions[i].name
          }
        }
      } else {
        this.getPage.records[this.currentIndex].groupName = ''
      }
      this.formObj.groupId = data
      // this.$forceUpdate()
      // this.getPage.records[this.currentIndex].backupUser = data
      // this.getPage.records[this.currentIndex].backupUser = data
    },
    // 存储条件 回调
    _locChangeCondition(msg, data) {
      switch (msg) {
        case 'select':
          this.formObj.storageCondition = data.name
          this._getLocCondition(data.name)
          break
        case 'query':
          this.formObj.storageCondition = data.name
          this._getLocConditionList(data.name)
          break
      }
    },
    _footerResult(name) {
      switch (name) {
        case '取消':
          this._cancel()
          break
        case '保存':
          this._ok()
          break
      }
    },
    _open(data) {
      this.showModal = true
      this.formObj = this.$resetFields(this.formObj)
      this.sampleUnit = ''
      this.formObj.testBasis = ''
      this.$refs.footerModal._hideLoading()
      this.ids = data
      // 循环遍历数据
    },
    _getPrepareWay: async function() {
      const result = await soilSample.getDictList('制备方式')
      if (result) {
        this.prepareWayList = result
      }
    },
    _getkeepWayList: async function() {
      const result = await soilSample.getDictList('保存方式')
      if (result) {
        this.keepWayList = result
      }
    },
    _getkeepContainerList: async function() {
      const result = await soilSample.getDictList('保存容器')
      if (result) {
        this.keepContainerList = result
      }
    },
    _getUserList: async function() {
      const result = await soilSample.getUserList()
      if (result) {
        console.log(result)
        this.backupUserList = result.records
      }
    },
    //
    _dateChange(data) {
      this.formObj.endDate = data
    },
    _cancel() {
      this.showModal = false
      this.$refs.footerModal._hideLoading()
    },
    _hideLoading() {
      this.$refs.footerModal._hideLoading()
    },
    _ok() {
      this.$refs.formObj.validate(valid => {
        if (valid) {
          console.log(this.formObj)
          const tempData = this.$serializeForm(this.formObj)
          tempData.ids = this.ids.join(',')
          this._saveInfo(tempData)
        } else {
          this.$Message.error('表单验证失败!')
          this.$refs.footerModal._hideLoading()
        }
      })
    },
    _saveInfo: async function(data) {
      const result = await soilSample.editItem(data)
      if (result) {
        this.showModal = false
        this.$refs.footerModal._hideLoading()
        this.$emit('on-result-change')
        this.$Message.success('保存成功')
      }
    }
  }
}
</script>
