<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" :label-width="100">
          <Form-item label="存储条件:">
            <el-select :value="formObj.conditions" @change="selCondi" style="width:100%" size="small">
              <el-option v-for="item in conditionList" :value="item.name" :key="item.name">{{ item.name }}
              </el-option>
            </el-select>
          </Form-item>
          <Form-item label="备样位置:" prop="backupLocation">
            <Input v-model="formObj.backupLocation" clearable placeholder="请输入备样位置"></Input>
          </Form-item>
          <Form-item label="备样数量">
            <Input v-model="formObj.quantity" clearable placeholder="请输入备样数量"></Input>
          </Form-item>
          <Form-item label="备样人:">
          <el-select :value="formObj.backupUser" @change="selUser" style="width:100%" size="small">
            <el-option v-for="item in backupUserList" :value="item.id" :label="item.realname" :key="item.id">{{ 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'

export default {
  components: {},
  data() {
    return {
      ids: [], // 委托ids
      showModal: false,
      formObj: {},
      ruleValidate: {
        backupLocation: [
          { required: true, message: '备样位置不能为空', trigger: 'blur' }
        ]
      },
      footerList: [
        { id: '', name: '取消', type: '' },
        { id: '', name: '保存', type: 'primary' }
      ],
      conditionList: [],
      locList: [],
      backupUserList: [],
      sampleUnit: ''
    }
  },
  mounted() {
    this._getConditionList()
    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
      }
    },
    selCondi(data) {
      this.$forceUpdate()
      this.formObj.conditions = data
    },
    selUser(data) {
      this.$forceUpdate()
      if (data) {
        for (let i = 0; i < this.backupUserList.length; i++) {
          if (this.backupUserList[i].id === data) {
            this.formObj.backupUser = this.backupUserList[i].realname
          }
        }
      } else {
        this.getPage.records[this.currentIndex].backupUser = ''
      }
      this.formObj.backupUserId = 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.$refs.footerModal._hideLoading()
      this.ids = data
      // 循环遍历数据
    },
    _getConditionList: async function() {
      const result = await soilSample.getDictList('存储条件')
      if (result) {
        this.conditionList = 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) {
          const data = this.$serializeForm(this.formObj)
          data.ids = this.ids.join(',')
          this._saveInfo(data)
        } else {
          this.$Message.error('表单验证失败!')
          this.$refs.footerModal._hideLoading()
        }
      })
    },
    _saveInfo: async function(data) {
      const result = await soilSample.bathUpdateBackupInfo(data)
      if (result) {
        this.$Message.success('保存成功')
        this.$emit('on-result-change')
        this.showModal = false
      }
    }
  }
}
</script>
