<template>
  <div>
    <Modal v-model="showModal" :mask-closable="false" :width="1000" class="modal-index">
      <p slot="header">
        {{ modalTitle }}
      </p>
      <div>
        <Form
          :id="formId"
          ref="formObj"
          :model="formObj"
          :rules="ruleValidate"
          :label-width="90"
          inline
        >
          <Alert style="text-align: center">
            仪器基本信息
          </Alert>
          <Form-item label="仪器名称" prop="name" class="width-48">
            <autoCompletes
              name="name"
              :down-data="nameList"
              :value="formObj.name"
              show-key="name"
              placeholder="请选择仪器名称"
              @on-result-change="_nameChange"
            />
          </Form-item>
          <Form-item label="规格型号" prop="spec" class="width-48">
            <autoCompletes
              name="spec"
              :down-data="specList"
              :value="formObj.spec"
              show-key="spec"
              placeholder="请选择规格型号"
              @on-result-change="_specChange"
            />
          </Form-item>
          <Form-item label="供应商" prop="supplierName" class="width-48">
            <autoCompletes
              name="supplierName"
              placeholder="请输入供应商"
              :down-data="supplierList"
              :value="formObj.supplierName"
              show-key="name"
              @on-result-change="_supplierChange"
            />
          </Form-item>
          <Form-item label="制造厂商" prop="productPlace" class="width-48">
            <autoCompletes
              name="productPlace"
              :down-data="productPlaceList"
              :value="formObj.productPlace"
              placeholder="请选择制造厂商"
              show-key="productPlace"
              @on-result-change="_productPlaceChange"
            />
          </Form-item>
          <Alert type="success" style="text-align: center;">
            采购信息
          </Alert>
          <Form-item label="数量" prop="counts" class="width-48">
            <InputNumber v-model.number="formObj.counts" name="counts" :min="1" style="width:100%" />
          </Form-item>
          <Form-item label="用途" prop="uses" class="width-48">
            <Input v-model="formObj.uses" name="uses" placeholder="请输入用途" />
          </Form-item>
          <Form-item label="相关标准" prop="relatedStandards" class="width-48">
            <Input v-model="formObj.relatedStandards" name="relatedStandards" placeholder="请输入相关标准" />
          </Form-item>
          <Form-item label="备注" prop="remark" class="width-48">
            <Input v-model="formObj.remark" name="remark" placeholder="请输入备注" />
          </Form-item>
          <input v-model="formObj.purchaseId" name="purchaseId" type="hidden">
        </Form>
      </div>
      <div slot="footer">
        <Button style="margin-left: 8px" @click="_cancel">
          取消
        </Button>
        <Button type="primary" @click="_ok">
          确定
        </Button>
      </div>
    </Modal>
  </div>
</template>
<script>
import { supplier, equipInfo, equipPurchase } from '../../../../api'
import autoCompletes from '../../../../components/base/autoCompletes'

export default {
  components: { autoCompletes },
  data() {
    return {
      id: '',
      modalTitle: '',
      formObj: {
        name: '',
        spec: '',
        supplierName: '',
        productPlace: '',
        counts: 1,
        uses: '',
        relatedStandards: '',
        remark: '',
        purchaseId: ''
      },
      ruleValidate: {
        counts: [
          {
            required: true,
            message: '数量不能为空',
            trigger: 'blur',
            type: 'number'
          }
        ],
        relatedStandards: [
          {
            required: true,
            message: '相关标准不能为空',
            trigger: 'blur'
          }
        ]
      },
      showModal: false,
      supplierList: [],
      specList: [],
      productPlaceList: [],
      usesList: [],
      nameList: [],
      formId: 'edit-form-edit' + this.$randomCode()
    }
  },
  methods: {
    _open(purchaseId, formObj) {
      this.showModal = true
      this.$refs.formObj.resetFields()
      this.formObj.purchaseId = purchaseId
      this._supplier()
      const list = [
        { key: 'name', listKey: 'nameList' },
        { key: 'spec', listKey: 'specList' },
        { key: 'purpose', listKey: 'purposeList' },
        { key: 'product_place', listKey: 'productPlaceList' }
      ]
      for (let i = 0; i < list.length; i++) {
        this._getParamList(list[i])
      }
      if (this.$string(formObj).isEmpty()) {
        this.modalTitle = '新增仪器采购明细'
      } else {
        this.formObj.name = formObj.name ? formObj.name : ''
        this.formObj.counts = formObj.counts ? formObj.counts : ''
        this.formObj.spec = formObj.spec ? formObj.spec : ''
        this.formObj.supplierName = formObj.supplierName
          ? formObj.supplierName
          : ''
        this.formObj.productPlace = formObj.productPlace
          ? formObj.productPlace
          : ''
        this.formObj.uses = formObj.uses ? formObj.uses : ''
        this.formObj.relatedStandards = formObj.relatedStandards
          ? formObj.relatedStandards
          : ''
        this.formObj.remark = formObj.productRemark ? formObj.productRemark : ''
        this.modalTitle = '复制仪器采购明细'
      }
    },
    _getParamList: async function(obj, name = '') {
      const data = {
        item: obj.key,
        name: name
      }
      this[obj.listKey] = await equipInfo.getParamListByName(data)
    },
    _supplier: async function(name = '') {
      const result = await supplier.page({ name: name })
      this.supplierList = result.records
    },
    _supplierChange(msg, data) {
      switch (msg) {
        case 'select':
          this.formObj.supplierName = data.name
          break
        default:
          this.formObj.supplierName = data.name
          this._supplier(data.name)
          break
      }
    },

    _specChange(msg, data) {
      switch (msg) {
        case 'select':
          this.formObj.spec = data.spec
          break
        case 'query':
          this.formObj.spec = data.spec
          this._getParamList({ key: 'spec', listKey: 'specList' }, data.spec)
          break
      }
    },
    _nameChange(msg, data) {
      switch (msg) {
        case 'select':
          this.formObj.name = data.name
          break
        case 'query':
          this.formObj.name = data.name
          this._getParamList({ key: 'name', listKey: 'nameList' }, data.name)
          break
      }
    },

    _productPlaceChange(msg, data) {
      switch (msg) {
        case 'select':
          this.formObj.productPlace = data.productPlace
          break
        case 'query':
          this.formObj.productPlace = data.productPlace
          this._getParamList(
            { key: 'productPlace', listKey: 'productPlaceList' },
            data.productPlace
          )
          break
      }
    },
    _resultChange(data) {
      if (data !== undefined) {
        this.$message.success('添加成功')
        this.$emit('on-result-change')
      }
    },
    _ok() {
      this.$refs.formObj.validate(valid => {
        if (valid) {
          const data = this.$serialize(this.formId)
          this._save(data)
        } else {
          this.$message.error('表单验证失败!')
        }
      })
    },
    _save: async function(data) {
      const result = await equipPurchase.addDetail(data)
      if (result) {
        this.$message.success('操作成功')
        this.$emit('on-result-change')
        this.showModal = false
      }
    },
    _cancel() {
      this.showModal = false
    }
  }
}
</script>
