<template>
  <div>
    <Modal v-model="showbaseInfoModal" :mask-closable="false" :width="1100" class="modal-index">
      <p slot="header">
        {{ modalTitle }}
      </p>
      <div>
        <Form
          id="edit-form-edit"
          ref="formObj"
          :model="formObj"
          :rules="ruleValidate"
          :label-width="90"
          inline
        >
          <Alert style="text-align: center">
            仪器基本信息
          </Alert>
          <Form-item label="仪器名称" prop="name" class="width-48">
            <label
              style="width: 10%;display: inline-block;float: right;text-align: right;line-height: 38px;cursor: pointer"
            >
              <el-button type="primary" style="height: 70%" @click="_selEquip">选择</el-button>
            </label>
            <label style="width: 90%;display: inline-block">
              <Input v-model="formObj.name" name="name" placeholder="请选择或输入仪器名称" /></Input>
            </label>
          </Form-item>
          <Form-item label="规格型号" prop="spec" class="width-48">
            <autoComplete
              name="spec"
              :down-data="specList"
              :value="formObj.spec"
              placeholder="请选择规格型号"
              @on-result-change="_specChange"
            />
          </Form-item>
          <Form-item label="供应商" prop="supplierName" class="width-48">
            <autoComplete
              name="supplierName"
              placeholder="请输入供应商"
              :down-data="supplierList"
              :value="formObj.supplierName"
              @on-result-change="_supplierChange"
            />
          </Form-item>
          <Form-item label="制造厂商" prop="productPlace" class="width-48">
            <autoComplete
              name="productPlace"
              :down-data="productPlaceList"
              :value="formObj.productPlace"
              placeholder="请选择制造厂商"
              @on-result-change="_productPlaceChange"
            />
            <!-- <Input name="productPlace" v-model="formObj.productPlace" placeholder="请输入产地" :readonly="isReadonly"/>-->
          </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="price" class="width-48">
            <Input v-model="formObj.price" name="price" placeholder="请输入单价" />
          </Form-item>
          <input v-model="formObj.purchaseId" name="purchaseId" type="hidden">
        </Form>
      </div>
      <div slot="footer" class="btn-width">
        <Button type="ghost" style="margin-left: 8px" @click="_cancel">
          取消
        </Button>
        <Button type="primary" @click="_ok">
          确定
        </Button>
      </div>
    </Modal>
    <!--选择仪器信息-->
    <RelLmsEquipProduct ref="equipModal" @on-result-change="_equipData" />
  </div>
</template>
<script>
import autoComplete from '../../../../components/base/autoComplete.vue'
import { equip } from '../../../../api'
import RelLmsEquipProduct from './RelLmsEquipProduct.vue'

const defVal = {
  purchaseId: '',
  productId: '',
  counts: 1,
  uses: '',
  remark: '',
  name: '',
  spec: '',
  productPlace: '',
  supplierName: '',
  relatedStandards: '',
  price: ''
}
export default {
  components: { RelLmsEquipProduct, autoComplete },
  data() {
    return {
      id: '',
      modalTitle: '',
      formObj: defVal,
      ruleValidate: {
        counts: [
          {
            required: true,
            message: '数量不能为空',
            trigger: 'blur',
            type: 'number'
          }
        ],
        relatedStandards: [
          { required: true, message: '相关标准不能为空', trigger: 'blur' }
        ]
      },
      showbaseInfoModal: false,
      isReadonly: false,
      supplierList: [],
      specList: [],
      productPlaceList: []
    }
  },
  mounted() {},
  methods: {
    _supplierChange(msg, data) {
      switch (msg) {
        case 'select':
          this.formObj.supplierName = data
          break
        default:
          this.formObj.supplierName = data
          this._supplier(data)
          break
      }
    },
    _supplier(name = '') {
      // 供应商
      // const data = {}
      // data.name = name
      // this.$store.dispatch('LmsSupplier/list', data).then(() => {
      //   const supplierList = this.$store.state.LmsSupplier.page.records
      //   const supplierArray = []
      //   for (let i = 0; i < supplierList.length; i++) {
      //     supplierArray.push(supplierList[i].name)
      //   }
      //   this.supplierList = supplierArray
      // })
    },
    // 仪器规格型号
    _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.formObj.spec = data
          break
        default:
          this.formObj.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.formObj.productPlace = data
          break
        default:
          this.formObj.productPlace = data
          this._openSearchProductName(data)
          break
      }
    },
    _resultChange(data) {
      if (data !== undefined) {
        this.$Message.success('添加成功')
        $('#edit-form-edit')
          .find('input')
          .each(function() {
            $(this).val('')
          })
        this.$emit('on-result-change', this.formObj.purchaseId)
        this.showbaseInfoModal = false
      }
    },
    _ok() {
      this.$refs.formObj.validate(valid => {
        if (valid) {
          const data = this.$serialize('edit-form-edit')
          console.log('-----ad--a-a-p-----', data)
          this.$extend(data, { productId: this.formObj.productId })
          this._save(data)
        } else {
          this.$Message.error('表单验证失败!')
        }
      })
    },

    _save: async function(data) {
      const result = await equip.addDetail(data)
      if (result) {
        this._resultChange('成功')
      }
    },

    _cancel() {
      this.showbaseInfoModal = false
    },
    _open(purchaseId) {
      /* $("#edit-form-edit").find('input').each(function () {
           $(this).val('');
         }); */
      this.formObj = defVal
      this.isReadonly = false
      this.showbaseInfoModal = true
      this.$refs.formObj.resetFields()
      this.formObj.counts = 1
      this.formObj.purchaseId = purchaseId
      this.modalTitle = '添加仪器采购明细'
      this._supplier()
      this._openSearchSpecName()
      this._openSearchProductName()
    },
    _selEquip() {
      this.$refs.equipModal._open()
    },
    _equipData(result) {
      console.log('result---', result)
      this.formObj.productId = result.id
      this.formObj.name = result.name
      this.formObj.supplierName = result.supplierName
      this.formObj.spec = result.spec
      this.formObj.productPlace = result.productPlace
      this.formObj.price = result.price
      this.isReadonly = true
    }
  }
}
</script>
