<template>
  <div>
    <Modal v-model="chemicalStockInModal" :mask-closable="false" :width="800" class="zIndex-1100">
      <p slot="header">
        耗材直接首次入库
      </p>
      <div>
        <Form
          id="storage-form"
          ref="formObj"
          :model="formObj"
          :rules="ruleValidate"
          :label-width="80"
          inline
        >
          <Form-item label="入库数量" prop="stock" class="width-48">
            <InputNumber v-model.number="formObj.stock" :min="1" name="stock" style="width: 100%" />
          </Form-item>
          <Form-item label="有效期" prop="validDate" class="width-48">
            <DatePicker
              v-model="formObj.validDate"
              type="date"
              placeholder="请选择有效期"
              style="width: 100%"
              :options="optionDate"
              @on-change="_validDateChange"
            />
            <input name="validDate" type="hidden">
          </Form-item>
          <Form-item label="生产批号" prop="batchNum" class="width-48">
            <Input v-model="formObj.batchNum" name="batchNum" placeholder="请输入生产批号" /></Input>
          </Form-item>
          <Form-item label="规格型号" prop="spec" class="width-48">
            <Input v-model="formObj.spec" name="spec" placeholder="请输入规格型号" /></Input>
          </Form-item>
          <Form-item label="CAS编号" prop="casNum" class="width-48">
            <Input v-model="formObj.casNum" name="casNum" placeholder="请输入CAS编号" /></Input>
          </Form-item>
          <Form-item label="商品编码" prop="productCode" class="width-48">
            <Input v-model="formObj.productCode" name="productCode" placeholder="请输入商品编码" /></Input>
          </Form-item>
          <!--<Form-item label="精度范围" prop="accuracyRange" class="width-48">
            <Input name="accuracyRange" v-model="formObj.accuracyRange" placeholder="请输入精度范围"></Input>
          </Form-item>-->
          <Form-item label="供应商" prop="supplier" class="width-48">
            <autoComplete
              name="supplier"
              placeholder="请输入供应商"
              :down-data="supplierList"
              :value="formObj.supplier"
              @on-result-change="_SupplierChange"
            />
          </Form-item>
          <Form-item label="价格" prop="unitPrice" class="width-48">
            <InputNumber
              v-model.number="formObj.unitPrice"
              name="unitPrice"
              :min="0"
              placeholder="请输入价格"
              style="width: 100%"
            />
          </Form-item>
          <Form-item label="制造厂商" prop="manufacturer" class="width-48">
            <autoComplete
              v-model="formObj.manufacturer"
              name="manufacturer"
              :down-data="manufacturerList"
              placeholder="请输入制造厂商"
              @on-result-change="_manufacturerChange"
            />
            <!-- <Input name="manufacturer" v-model="formObj.manufacturer" placeholder="请输入制造厂商"></Input>-->
          </Form-item>
          <Form-item label="入库人" prop="realname" class="width-48">
            <Select
              v-model="formObj.realname"
              clearable
              style="width:100%"
              filterable
              name="realname"
              placeholder="请选择入库人员"
            >
              <Option v-for="item in salesmanList" :key="item" :value="item">
                {{ item }}
              </Option>
            </Select>
          </Form-item>
          <Form-item label="入库时间" prop="regdate" class="width-48">
            <DatePicker
              v-model="formObj.regdate"
              type="datetime"
              placeholder="请选择入库时间"
              style="width: 100%"
              :options="optionDate"
              @on-change="_stockTimeChange"
            />
            <input name="regdate" type="hidden">
          </Form-item>
          <Form-item label="入库原因" prop="reason" class="width-48">
            <Input v-model="formObj.reason" name="reason" placeholder="请输入入库原因" /></Input>
          </Form-item>
          <Form-item label="备注" prop="remark" class="width-48">
            <Input v-model="formObj.remark" name="remark" placeholder="请输入备注" /></Input>
          </Form-item>
        </Form>
      </div>
<!--      <div slot="footer">-->
<!--        <ModalFooter ref="footerModal" :footer="footerList" @on-result-change="_footerResult" />-->
<!--      </div>-->
      <div slot="footer">
        <Button @click="_cancel" type="warning" style="margin-left: 8px">取消</Button>
        <Button @click="_ok" type="primary">提交</Button>
      </div>
    </Modal>
  </div>
</template>
<script>
/**
 * 添加编辑试验耗材库存表
 */
import global from '../../../../api/config'
import autoComplete from '../../../../components/base/autoComplete.vue'
import { consumeStock } from '../../../../api'

export default {
  components: {
    autoComplete
  },
  props: {
    chemical: null // 耗材信息
  },
  data() {
    const validateNumber = (rule, value, callback) => {
      const reg = /^\d+(\.\d{0,2})?$/
      if (reg.test(value)) {
        callback()
      } else {
        callback(new Error('小数点后只能输入两位'))
      }
    }
    return {
      id: '',
      formObj: {
        spec: '',
        remark: '',
        stock: 1,
        validDate: '',
        accuracyRange: '',
        casNum: '',
        productCode: '',
        batchNum: '',
        manufacturer: '',
        supplier: '',
        unitPrice: 1,
        realname: '',
        regdate: new Date(),
        reason: ''
      },
      chemicalStockInModal: false,
      ruleValidate: {
        stock: [
          {
            required: true,
            validator: validateNumber,
            trigger: 'blur',
            type: 'number'
          }
        ]
        // validDate: [{required: true, message: '有效期不能为空', trigger: 'change', type: 'date'}],
        // batchNum: [{required: true, message: '生产批号不能为空', trigger: 'blur'}],
        //  productCode: [{required: true, message: '商品编码不能为空', trigger: 'blur'}],
        // manufacturer: [{required: true, message: '制造厂商不能为空', trigger: 'change'}],
      },
      chemicalId: '',
      optionDate: {
        // 今天之前的日期被禁用
        disabledDate(date) {
          return date && date.valueOf() < Date.now() - 86400000
        }
      },
      regdate: '',
      salesmanList: [],
      salesmanListTemp: [],
      supplierList: [],
      manufacturerListTemp: [],
      manufacturerList: [],
      footerList: [
        { name: '取消', type: '' },
        { name: '提交', type: 'primary' }
      ],
      flag: true
    }
  },
  methods: {
    _footerResult(name) {
      switch (name) {
        case '取消':
          this._cancel()
          break
        case '提交':
          if (this.flag) {
            this._ok()
          }
          break
      }
    },
    _resultChange(msg) {
      this.chemicalStockInModal = false
      this.$Message.success(msg)
      this.flag = true
      this.$emit('on-result-change')
    },
    // 人员列表
    _getSalesmanList() {
      // const data = {}
      // this.$store.dispatch('LmsEquipInfo/userList', data).then(() => {
      //   const salesmanList = this.$store.state.LmsEquipInfo.userList
      //   const salesmanListTemp = []
      //   for (let i = 0; i < salesmanList.length; i++) {
      //     salesmanListTemp.push(salesmanList[i].realname)
      //   }
      //   if (salesmanListTemp.indexOf(this.formObj.realname) === -1) {
      //     salesmanListTemp.push(global.getUserInfo().realname)
      //   }
      //   this.salesmanList = salesmanListTemp
      //   this.salesmanListTemp = this.salesmanList
      // })
    },
    // 供应商
    _getSupplier(supplier = '') {
      // const data = {
      //   value: supplier
      // }
      // this.$store
      //   .dispatch('LmsChemicalStock/getSupplierName', data)
      //   .then(() => {
      //     this.supplierList = this.$store.state.LmsChemicalStock.list
      //   })
    },
    _SupplierChange(msg, data) {
      switch (msg) {
        case 'select':
          this.formObj.supplier = data
          break
        default:
          this.formObj.supplier = data
          this._getSupplier(data)
      }
    },
    // 制造厂商
    _openSearchManufacturer(manufacturer = '') {
      // const data = {
      //   item: 'manufacturer',
      //   name: manufacturer
      // }
      // this.$store.dispatch('LmsBaseDict/getManufacturer', data).then(() => {
      //   const manufacturerList = this.$store.state.LmsBaseDict.item
      //   const manufacturerArray = []
      //   for (let i = 0; i < manufacturerList.length; i++) {
      //     manufacturerArray.push(manufacturerList[i].manufacturer)
      //   }
      //   this.manufacturerList = manufacturerArray
      // })
    },
    // 制造厂商
    _manufacturerChange(msg, data) {
      switch (msg) {
        case 'select':
          this.formObj.manufacturer = data
          break
        default:
          this.formObj.manufacturer = data
          this._openSearchManufacturer(data)
          break
      }
    },
    _ok() {
      this.flag = false
      this.$refs.formObj.validate(valid => {
        if (valid) {
          const data = this.$serialize('storage-form')
          data.chemicalId = this.chemicalId
          data.validDate = this.validDate
          data.spec = this.formObj.spec
          if (this.$string(this.chemicalId).isEmpty()) {
            this.$Message.error('请选择耗材!')
          } else {
            this._save(data)
            // this.$store.dispatch('LmsChemicalStock/addTz', data).then(() => {
            //   this._resultChange('添加成功!')
            //   this.$refs.footerModal._hideLoading()
            // })
          }
        } else {
          this.$Message.error('表单验证失败!')
        }
      })
    },

    _save: async function(data) {
      const result = await consumeStock.tzInStock(data)
      if (result) {
        this._resultChange('入库成功')
      }
    },

    _cancel() {
      this.chemicalStockInModal = false
    },
    _open(id) {
      this.chemicalStockInModal = true
      this.$refs.formObj.resetFields()
      this.chemicalId = id
      this.formObj.validDate = ''
      $('input[name=validDate]').val('')
      this._getUser()
      this._getSalesmanList()
      this._openSearchManufacturer()
      this._getSupplier()
      // 耗材的规格型号
      if (this.chemical && this.chemical.spec) {
        this.$set(this.formObj, 'spec', this.chemical.spec)
      } else {
        this.$set(this.formObj, 'spec', '')
      }
    },
    _getUser() {
      const user = global.getUserInfo()
      this.formObj.realname = user.realname
    },
    _validDateChange(data) {
      $('input[name=validDate]').val(data)
    },
    _stockTimeChange(data) {
      $('input[name=regdate]').val(data)
    }
  }
}
</script>
