<template>
  <div>
    <Modal v-model="showModal" :mask-closable="false" :width="1200">
      <p slot="header">
        {{ modalTitle }}
      </p>
      <div>
        <Form
          id="maintain-detail-form-edit"
          ref="formObj"
          :model="formObj"
          :rules="ruleValidate"
          :label-width="120"
          inline
        >
          <Alert style="text-align: center">
            仪器基本信息
          </Alert>
          <Form-item label="仪器名称" prop="name" class="width-23">
            <Input
              v-model="formObj.name"
              name="name"
              placeholder="请选择仪器名称"
              icon="plus-circled"
              readonly
              style="width: 100%"
              @click.native="_selEquip"
            />
          </Form-item>
          <Form-item label="供应商" prop="supplierName" class="width-23">
            <Input v-model="formObj.supplierName" name="supplierName" placeholder="请输入供应商" readonly />
          </Form-item>
          <Form-item label="仪器类型" prop="className" class="width-23">
            <Input v-model="formObj.className" name="className" placeholder="请输入仪器类型" readonly />
          </Form-item>
          <Form-item label="规格型号" prop="spec" class="width-23">
            <Input v-model="formObj.spec" name="spec" placeholder="请输入规格型号" readonly />
          </Form-item>
          <Form-item label="仪器品牌" prop="brand" class="width-23">
            <Input v-model="formObj.brand" name="brand" placeholder="请输入品牌" readonly />
          </Form-item>
          <Form-item label="仪器单价" prop="price" class="width-23">
            <Input v-model="formObj.price" name="price" placeholder="请输入报价" readonly />
          </Form-item>
          <Form-item label="制造厂商" prop="productPlace" class="width-23">
            <Input v-model="formObj.productPlace" name="productPlace" placeholder="请输入产地" readonly />
          </Form-item>
          <Form-item label="计量类别" prop="meterType" class="width-23">
            <Input v-model="formObj.meterType" name="meterType" placeholder="请输入计量类别" readonly />
          </Form-item>
          <Form-item label="不确定度" prop="uncertainty" class="width-23">
            <Input v-model="formObj.uncertainty" name="uncertainty" placeholder="请输入不确定度" readonly />
          </Form-item>
          <Form-item label="仪器精度" prop="accuracy" class="width-23">
            <Input v-model="formObj.accuracy" name="accuracy" placeholder="请输入精度" readonly />
          </Form-item>
          <Form-item label="使用范围" prop="range" class="width-23">
            <Input v-model="formObj.range" name="range" placeholder="请输入使用范围" readonly />
          </Form-item>
          <Form-item label="仪器编号" prop="equipNum" class="width-23">
            <Input v-model="formObj.equipNum" name="equipNum" placeholder="请输入仪器编号" readonly />
          </Form-item>
          <Form-item label="证书编号" prop="ceNum" class="width-23">
            <Input v-model="formObj.ceNum" name="ceNum" placeholder="请输入证书编号" readonly />
          </Form-item>
          <Form-item label="实验室编号" prop="labNum" class="width-23">
            <Input v-model="formObj.labNum" name="labNum" placeholder="请输入实验室编号" readonly />
          </Form-item>
          <Form-item label="使用科别" prop="departmentName" class="width-23">
            <Input v-model="formObj.departmentName" name="departmentName" placeholder="请输入使用科别" readonly />
          </Form-item>
          <Form-item label="使用地点" prop="locationName" class="width-23">
            <Input v-model="formObj.locationName" name="locationName" placeholder="请输入使用地点" readonly />
          </Form-item>
          <Form-item label="检定周期（月）" prop="period" class="width-23">
            <Input v-model="formObj.period" name="period" placeholder="请输入检定周期" readonly />
          </Form-item>
          <Form-item label="购买日期" prop="buyDate" class="width-23">
            <Date-picker
              v-model="formObj.buyDate"
              name="buyDate"
              type="date"
              placeholder="有效日期"
              format="yyyy-MM-dd"
              style="width: 100%;"
              readonly
            />
          </Form-item>
          <Form-item label="有效日期" prop="effectDate" class="width-23">
            <Date-picker
              v-model="formObj.effectDate"
              name="effectDate"
              type="date"
              placeholder="有效日期"
              format="yyyy-MM-dd"
              style="width: 100%;"
              readonly
            />
          </Form-item>
          <Alert type="success" style="text-align: center;">
            仪器维保信息
          </Alert>
          <Form-item label="维保项目名称" prop="projectName" class="width-48">
            <Input v-model="formObj.projectName" name="projectName" placeholder="请输入维保项目名称" />
          </Form-item>
          <Form-item label="维保内容" prop="maintainContent" class="width-48">
            <Input v-model="formObj.maintainContent" name="maintainContent" placeholder="请输入维保内容" />
          </Form-item>
          <Form-item label="计划保养开始时间" prop="maintainStartTimePlan" class="width-48">
            <Date-picker
              v-model="formObj.maintainStartTimePlan"
              name="maintainStartTimePlan"
              type="datetime"
              placeholder="保养开始时间"
              style="width: 100%;"
            />
          </Form-item>
          <Form-item label="计划保养结束时间" prop="maintainEndTimePlan" class="width-48">
            <Date-picker
              v-model="formObj.maintainEndTimePlan"
              name="maintainEndTimePlan"
              type="datetime"
              placeholder="保养结束时间"
              style="width: 100%;"
            />
          </Form-item>
          <Form-item label="维保保养人" prop="maintainerIds" style="width: 98%;">
            <Select v-model="maintainerList" filterable multiple :label-in-value="true" @on-change="_maintainChange">
              <Option v-for="item in userList" :key="item.id" :value="item.id">
                {{ item.realname }}
              </Option>
            </Select>
          </Form-item>
          <Form-item label="备注" prop="remark" style="width: 98%;">
            <Input v-model="formObj.remark" name="remark" placeholder="请输入产品备注" type="textarea" :rows="1" />
          </Form-item>
          <input v-model="formObj.equipId" name="equipIds" type="hidden">
          <input v-model="formObj.maintainId" name="maintainId" type="hidden">
          <input v-model="formObj.maintainerIds" name="maintainerIds" type="hidden">
          <input v-model="formObj.maintainerNames" name="maintainerNames" type="hidden">
        </Form>
      </div>
      <div slot="footer">
        <Button style="margin-left: 8px" @click="_cancel">
          取消
        </Button>
        <Button type="primary" @click="_ok">
          确定
        </Button>
      </div>
    </Modal>
    <!--选择仪器信息-->
    <selectEquip ref="equipModal" @on-result-change="_equipData" />
  </div>
</template>
<script>
import { sysUser, equipMaintain } from '../../../../api'

import selectEquip from './selectEquip'

export default {
  components: { selectEquip },
  data() {
    const validateStartDate = (rule, value, callback) => {
      if (this.formObj.maintainStartTimePlan === '') {
        callback(new Error('计划保养开始时间不能为空'))
      } else {
        callback()
      }
    }
    const validateEndDate = (rule, value, callback) => {
      if (this.formObj.maintainEndTimePlan === '') {
        callback(new Error('计划保养结束时间不能为空'))
      } else {
        callback()
      }
    }
    return {
      id: '',
      modalTitle: '',
      formObj: {
        name: '',
        supplierName: '',
        className: '',
        spec: '',
        brand: '',
        price: '',
        productPlace: '',
        meterType: '',
        uncertainty: '',
        accuracy: '',
        range: '',
        equipNum: '',
        ceNum: '',
        labNum: '',
        departmentName: '',
        locationName: '',
        period: '',
        buyDate: '',
        effectDate: '',

        equipId: '',
        maintainId: '',
        projectName: '',
        maintainContent: '',
        remark: '',
        maintainStartTimePlan: '',
        maintainEndTimePlan: '',
        maintainerIds: '',
        maintainerNames: ''
      },
      ruleValidate: {
        name: [
          { required: true, message: '仪器名称不能为空', trigger: 'change' }
        ],
        projectName: [
          { required: true, message: '维保项目名称', trigger: 'blur' }
        ],
        maintainContent: [
          { required: true, message: '维保内容', trigger: 'blur' }
        ],
        maintainStartTimePlan: [
          { required: true, validator: validateStartDate, trigger: 'change' }
        ],
        maintainEndTimePlan: [
          { required: true, validator: validateEndDate, trigger: 'change' }
        ],
        maintainerIds: [
          { required: true, message: '维保保养人不能为空', trigger: 'change' }
        ]
      },
      showModal: false,
      userList: [],
      maintainerList: []
    }
  },
  methods: {
    _getUserList: async function() {
      this.userList = await sysUser.list()
    },
    _validateDate() {
      const date = new Date()
      if (this.formObj.maintainStartTimePlan <= date) {
        this.$Message.warning('保养开始时间不能早于当前系统时间')
        return false
      } else if (
        this.formObj.maintainStartTimePlan >= this.formObj.maintainEndTimePlan
      ) {
        this.$Message.warning('保养结束时间不能早于保养开始时间')
        return false
      } else {
        return true
      }
    },
    _ok() {
      this.$refs.formObj.validate(valid => {
        valid = this._validateDate()
        if (valid) {
          const data = this.$serialize('maintain-detail-form-edit')
          this._save(data)
        } else {
          this.$Message.error('表单验证失败!')
        }
      })
    },
    _save: async function(data) {
      const result = await equipMaintain.addDetail(data)
      if (result) {
        this.$Message.success('添加成功')
        this.showModal = false
        this.$emit('on-result-change')
      }
    },
    _cancel() {
      this.showModal = false
    },
    _open(maintainId) {
      this._getUserList()
      this.$refs.formObj.resetFields()
      this.maintainerList = []

      this.formObj.maintainId = maintainId
      this.id = ''
      this.modalTitle = '新增仪器维保明细'

      this.showModal = true
    },
    _selEquip() {
      this.$refs.equipModal._open()
    },
    _equipData(result) {
      this.formObj.equipId = result.id
      this.formObj.name = result.name
      this.formObj.supplierName = result.supplierName
      this.formObj.className = result.className
      this.formObj.spec = result.spec
      this.formObj.brand = result.brand
      this.formObj.price = result.price
      this.formObj.productPlace = result.productPlace
      this.formObj.meterType = result.meterType
      this.formObj.uncertainty = result.uncertainty
      this.formObj.accuracy = result.accuracy
      this.formObj.range = result.range
      this.formObj.equipNum = result.equipNum
      this.formObj.ceNum = result.ceNum
      this.formObj.labNum = result.labNum
      this.formObj.departmentName = result.departmentName
      this.formObj.locationName = result.locationName
      this.formObj.period = result.period
      this.formObj.buyDate = result.buyDate ? new Date(result.buyDate) : ''
      this.formObj.effectDate = result.effectDate
        ? new Date(result.effectDate)
        : ''
    },
    _maintainChange(obj) {
      let ids = ''
      let names = ''
      obj.forEach(function(item) {
        ids = ids + item.value + ','
        names = names + item.label + ','
      })

      this.formObj.maintainerIds = ids.substring(0, ids.length - 1)
      this.formObj.maintainerNames = names.substring(0, names.length - 1)
    }
  }
}
</script>
