<template>
  <div>
    <Modal v-model="showModal" v-drag :mask-closable="false">
      <p slot="header">填写制备信息</p>
      <div>
        <Form ref="formObj" :id="formId" :model="formObj" :rules="ruleValidate" :label-width="100">
          <Form-item label="制备方式:" prop="prepareWay">
            <el-select :value="formObj.prepareWay" @change="selPrepareWay" style="width:100%" size="small">
              <el-option v-for="item in prepareWayList" :value="item.name" :key="item.name">{{ item.name }}
              </el-option>
            </el-select>
          </Form-item>
          <Form-item label="制备数量:" prop="quantity">
            <el-input
              v-model="formObj.quantity"
              @keydown.native="channelInputLimit"
              clearable
              type="number"
              placeholder="请输入或选择数量"
            />
          </Form-item>
          <Form-item label="单位:">
            <Input v-model="formObj.unit" clearable placeholder="请输入单位"></Input>
          </Form-item>
          <Form-item label="保存方式:">
            <el-select :value="formObj.keepWay" @change="selKeepWay" style="width:100%" size="small">
              <el-option v-for="item in keepWayList" :value="item.name" :key="item.name">{{ item.name }}
              </el-option>
            </el-select>
          </Form-item>

          <Form-item label="保存容器:">
            <AutoCompletes v-model="formObj.keepContainer" :handle-obj="formObj" :down-data="keepContainerList" @on-result-change="selKeepContainer"
                           style="editable:false" clearable
                           placeholder="请选择保存容器" show-key="name"></AutoCompletes>
<!--            <el-select :value="formObj.keepContainer" @change="selKeepContainer" style="width:100%" size="small">-->
<!--              <el-option v-for="item in keepContainerList" :value="item.name" :key="item.name">{{ item.name }}-->
<!--              </el-option>-->
<!--            </el-select>-->
          </Form-item>
          <Form-item label="制备人:">
          <el-select :value="formObj.preparer" @change="selUser" style="width:100%" size="small">
            <el-option v-for="(item,index) in backupUserList" :value="item.id" :label="item.realname" :key="index">{{ item.realname }}
            </el-option>
          </el-select>
          </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 { soilSample } from '../../../api'
import AutoCompletes from '../../../components/base/AutoCompletes'
export default {
  components: { AutoCompletes },
  data() {
    return {
      ids: [], // 委托ids
      showModal: false,
      formObj: {},
      ruleValidate: {},
      formId: '',
      footerList: [
        { id: '', name: '取消', type: '' },
        { id: '', name: '保存', type: 'primary' }
      ],
      conditionList: [],
      locList: [],
      backupUserList: [],
      prepareWayList: [],
      keepWayList: [],
      keepContainerList: [],
      sampleUnit: ''
    }
  },
  mounted() {
    this._getPrepareWay()
    this._getkeepWayList()
    this._getkeepContainerList()
    this._getUserList()
  },
  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
      }
    },
    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
      }
    },
    selUser(data) {
      this.$forceUpdate()
      if (data) {
        for (let i = 0; i < this.backupUserList.length; i++) {
          if (this.backupUserList[i].id === data) {
            this.formObj.preparer = this.backupUserList[i].realname
          }
        }
      } else {
        this.getPage.records[this.currentIndex].preparer = ''
      }
      this.formObj.preparerId = 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.formId = 'edit-form-batchEdit'
      this.formObj = this.$resetFields(this.formObj)
      this.sampleUnit = ''
      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('formObj', this.$serializeForm(this.formObj))
          this.$emit('on-result-change', this.$serializeForm(this.formObj))
          this.showModal = false
          this.$refs.footerModal._hideLoading()
        } else {
          this.$Message.error('表单验证失败!')
          this.$refs.footerModal._hideLoading()
        }
      })
    },
    _saveInfo: async function(data) {
      const result = await soilSample.editBackup(data)
      if (result) {
        this.$Message.success('保存成功')
      }
    }
  }
}
</script>
