<template>
  <div>
    <Modal v-model="showEditModal" :mask-closable="false" width="700">
      <p slot="header">
        {{ modalTitle }}
      </p>
      <div>
        <Form
          id="edit-copy-form"
          ref="formObjs"
          :model="formObjs"
          :rules="ruleValidate"
          :label-width="90"
          inline
        >
          <Form-item label="仪器名称" prop="name" class="width-48">
            <autoComplete
              name="name"
              :down-data="nameList"
              :value="formObjs.name"
              placeholder="请选择仪器名称"
              @on-result-change="_nameChange"
            />
          </Form-item>
          <Form-item label="数量" prop="counts" class="width-48">
            <InputNumber v-model="formObjs.counts" name="counts" :min="1" style="width:100%" />
          </Form-item>
          <Form-item label="规格型号" prop="spec" class="width-48">
            <autoComplete
              name="spec"
              :down-data="specList"
              :value="formObjs.spec"
              placeholder="请选择规格型号"
              @on-change="_specChange"
            />
          </Form-item>
          <Form-item label="供应商名称" prop="supplierName" class="width-48">
            <Select
              v-model="formObjs.supplierName"
              name="supplierName"
              filterable
              clearable
              placeholder="请选择供应商"
              style="width:100%"
            >
              <Option v-for="item in supplierList" :key="item.name" :value="item.name">
                {{ item.name }}
              </Option>
            </Select>
          </Form-item>
          <Form-item label="制造厂商" prop="productPlace" class="width-48">
            <autoComplete
              name="productPlace"
              :down-data="productPlaceList"
              :value="formObjs.productPlace"
              placeholder="请选择制造厂商"
              @on-result-change="_productPlaceChange"
            />
          </Form-item>
          <Form-item label="用途" prop="uses" class="width-48">
            <Input v-model="formObjs.uses" name="uses" placeholder="请输入用途" />
          </Form-item>
          <Form-item label="相关标准" prop="relatedStandards" class="width-48">
            <Input v-model="formObjs.relatedStandards" name="relatedStandards" placeholder="请输入相关标准" />
          </Form-item>
          <Form-item label="单价" prop="price" class="width-48">
            <Input v-model="formObjs.price" name="price" placeholder="请输入单价" />
          </Form-item>
          <Form-item label="备注" prop="remark" style="width:98.6%">
            <Input v-model="formObjs.remark" name="remark" placeholder="请输入备注" />
          </Form-item>
        </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 autoComplete from '../../../../components/base/autoComplete.vue'
const defVal = {
  name: '',
  counts: 1,
  spec: '',
  supplierId: '',
  productPlace: '',
  uses: '',
  remark: '',
  supplierName: '',
  price: '',
  relatedStandards: ''
}

export default {
  components: {
    autoComplete
  },
  data() {
    return {
      id: '',
      modalTitle: '',
      formObjs: defVal,
      ruleValidate: {
        counts: [
          {
            required: true,
            message: '数量不能为空',
            trigger: 'blur',
            type: 'number'
          }
        ],
        // uses: [{required: true, message: '用途不能为空', trigger: 'blur'}],
        relatedStandards: [
          { required: true, message: '相关标准不能为空', trigger: 'blur' }
        ]
      },
      showEditModal: false,
      nameList: [],
      specList: [],
      supplierList: [],
      productPlaceList: [],
      rangeList: [],
      purchaseId: ''
    }
  },
  methods: {
    _supplier(name) {
      // 供应商
      const data = {}
      data.name = name
      this.$store.dispatch('LmsSupplier/page', data).then(() => {
        const supplierList = this.$store.state.LmsSupplier.page.records
        this.supplierList = supplierList
      })
    },
    // 供应商
    _supplierChange(data) {
      this._supplier(data)
    },
    _open(formObjs, id) {
      this.showEditModal = true
      this.$refs.formObjs.resetFields()
      this.purchaseId = id
      this.formObjs.name = formObjs.name
      this.formObjs.counts = formObjs.counts
      this.formObjs.spec = formObjs.spec
      this.formObjs.supplierName = formObjs.supplierName
      this.formObjs.productPlace = formObjs.productPlace
      this.formObjs.uses = formObjs.uses
      this.formObjs.remark = formObjs.productRemark
      this.formObjs.price = formObjs.price
      this.formObjs.relatedStandards = formObjs.relatedStandards
      this.modalTitle = '添加仪器采购单申请'
      this._openSearch()
    },
    _openSearch() {
      this._openSearchEquipName()
      this._openSearchSpecName()
      this._openSearchRangeName()
      this._openSearchProductName()
      this._supplierChange()
    },
    // 仪器名称
    _openSearchEquipName(name = '') {
      const data = {
        item: 'name',
        name: name
      }
      this.$store.dispatch('LmsEquipInfo/equipNameList', data).then(() => {
        const nameList = this.$store.state.LmsEquipInfo.list
        const nameArray = []
        for (let i = 0; i < nameList.length; i++) {
          nameArray.push(nameList[i].name)
        }
        this.nameList = nameArray
      })
    },
    _nameChange(msg, data) {
      switch (msg) {
        case 'select':
          this.formObjs.name = data
          break
        default:
          this.formObjs.name = data
          this._openSearchEquipName(data)
          break
      }
    },
    // 仪器规格型号
    _openSearchSpecName(spec = '') {
      const data = {
        item: 'spec',
        name: spec
      }
      this.$store.dispatch('LmsEquipInfo/specNameList', data).then(() => {
        const specList = this.$store.state.LmsEquipInfo.list
        const specArray = []
        for (let i = 0; i < specList.length; i++) {
          specArray.push(specList[i].spec)
        }
        this.specList = specArray
      })
    },
    _specChange(msg, data) {
      switch (msg) {
        case 'select':
          this.formObjs.spec = data
          break
        default:
          this.formObjs.spec = data
          this._openSearchSpecName(data)
          break
      }
    },
    // 制造厂商
    _openSearchProductName(product = '') {
      const data = {
        item: 'product_place',
        name: product
      }
      this.$store.dispatch('LmsEquipInfo/productNameList', data).then(() => {
        const productList = this.$store.state.LmsEquipInfo.list
        const productArray = []
        for (let i = 0; i < productList.length; i++) {
          productArray.push(productList[i].productPlace)
        }
        this.productPlaceList = productArray
      })
    },
    _productPlaceChange(msg, data) {
      switch (msg) {
        case 'select':
          this.formObjs.productPlace = data
          break
        default:
          this.formObjs.productPlace = data
          this._openSearchProductName(data)
          break
      }
    },
    // 用途
    _openSearchRangeName(range = '') {
      const data = {
        item: 'purpose',
        name: range
      }
      this.$store.dispatch('LmsEquipInfo/rangeNameList', data).then(() => {
        const rangeList = this.$store.state.LmsEquipInfo.list
        const rangeArray = []
        for (let i = 0; i < rangeList.length; i++) {
          rangeArray.push(rangeList[i].range)
        }
        this.rangeList = rangeArray
      })
    },
    _rangeChange(msg, data) {
      switch (msg) {
        case 'select':
          this.formObjs.range = data
          break
        default:
          this.formObjs.range = data
          this._openSearchRangeName(data)
          break
      }
    },
    _ok() {
      this.$refs.formObjs.validate(valid => {
        if (valid) {
          const data = this.$serialize('edit-copy-form')
          this.$extend(data, { purchaseId: this.purchaseId })
          this.$store.dispatch('LmsEquipPurchase/addDetail', data).then(() => {
            this._resultChange(this.$store.state.LmsEquipPurchase.success)
            this.showEditModal = false
          })
        } else {
          this.$Message.error('表单验证失败!')
        }
      })
    },
    _cancel() {
      this.showEditModal = false
    },
    _resultChange(data) {
      if (data !== undefined) {
        this.$Message.success('添加成功')
        this.$emit('on-result-change')
        this.showEditModal = false
      }
    }
  }
}
</script>
