<template>
  <div>
    <Modal v-model="showModal" :mask-closable="false" :width="1000">
      <p slot="header">
        {{ modalTitle }}
      </p>
      <div>
        <Form
          id="scrap-detail-form-edit"
          ref="formObj"
          :model="formObj"
          :rules="ruleValidate"
          :label-width="120"
          inline
        >
          <Alert style="text-align: center">
            仪器基本信息
          </Alert>
            <Row>
              <Col span="24">
              <Form id="equipInfo-search-form" inline onsubmit="return false" :label-width="90">
                <Form-item class="search-item" label="仪器名称:">
                  <Input v-model="name" placeholder="请输入仪器名称" @on-enter="_formSearch" />
                </Form-item>
                <Form-item class="search-btn">
                  <Button type="primary" @click="_formSearch">
                    搜索
                  </Button>
                </Form-item>
              </Form>
              </Col>
              <!-- 表格 -->
              <Col span="24" style="margin-bottom: 10px">
              <element-table
                ref="pageTable"
                :table-height="300"
                :get-page="getPage"
                show-check-box
                @on-result-change="_tableResultChange"
              >
                <el-table-column
                  v-for="item in pageColumns"
                  :key="item.key"
                  show-overflow-tooltip
                  sortable
                  :prop="item.key"
                  :label="item.title"
                  :min-width="item.width"
                  :fixed="item.fixed?item.fixed:undefined"
                >
                  <template slot-scope="scope">
                    <div v-if="item.date">
                      {{ scope.row[item.key]?$dateformat(scope.row[item.key],'yyyy-mm-dd'):'' }}
                    </div>
                    <div v-else>
                      {{ scope.row[item.key] }}
                    </div>
                  </template>
                </el-table-column>
              </element-table>
              </Col>
            </Row>

          <Alert type="success" style="text-align: center;">
            仪器报废信息
          </Alert>
          <Form-item label="金额" prop="money" style="width: 30.5%;">
            <InputNumber
              v-model.number="formObj.money"
              name="money"
              :min="0"
              placeholder="请输入金额"
              style="width:100%"
            />
          </Form-item>
          <Form-item label="报废原因" prop="reason" style="width: 30.5%;">
            <autoCompletes
              v-model="formObj.reason"
              name="reason"
              :down-data="reasonList"
              show-key="reason"
              placeholder="请选择故障原因内容"
              @on-result-change="_reasonChange"
            />
          </Form-item>
          <Form-item label="备注" prop="remark" style="width: 38%;">
            <Input v-model="formObj.remark" name="remark" placeholder="请输入产品备注" type="textarea" :rows="1" />
          </Form-item>
          <input v-model="formObj.scrapId" name="scrapId" type="hidden">
          <input v-model="formObj.equipId" name="equipId" 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 { equipInfo, equipScrapDetail, equipScrap } from '../../../../api'
import autoCompletes from '../../../../components/base/autoCompletes'

export default {
  components: { autoCompletes },
  data() {
    return {
      id: '',
      modalTitle: '',
      formObj: {
        name: '',
        supplierName: '',
        className: '',
        spec: '',
        brand: '',
        price: '',
        productPlace: '',
        meterType: '',
        uncertainty: '',
        accuracy: '',
        range: '',
        equipNum: '',
        ceNum: '',
        labNum: '',
        departmentName: '',
        locationName: '',
        period: '',
        buyDate: '',
        effectDate: '',

        equipId: '',
        scrapId: '',
        money: 0,
        reason: '',
        remark: ''
      },
      ruleValidate: {
        name: [
          { required: true, message: '仪器名称不能为空', trigger: 'change' }
        ],
        reason: [
          { required: true, message: '报废原因不能为空', trigger: 'change' }
        ]
      },
      showModal: false,
      pageColumns: [
        { title: '仪器类别', key: 'className', width: 160 },
        { title: '仪器名称', key: 'name', width: 160 },
        { title: '仪器编号', key: 'labNum', width: 160 },
        { title: '规格型号', key: 'spec', width: 160 },
        { title: '仪器品牌', key: 'brand', width: 160 },
        { title: '出厂编号', key: 'equipNum', width: 160 },
        { title: '证书编号', key: 'ceNum', width: 160 },
        { title: '使用科别', key: 'departmentName', width: 160 },
        { title: '使用地点', key: 'locationName', width: 160 },
        { title: '检定周期（月）', key: 'period', width: 160 },
        { title: '购买日期', key: 'buyDate', width: 160, date: true },
        { title: '有效日期', key: 'effectDate', width: 160, date: true },
        { title: '供应商名称', key: 'supplierName', width: 160 }
      ],
      name: '',
      getPage: {},
      selectIds: [],
      reasonList: []
    }
  },
  methods: {
    _ok() {
      this.$refs.formObj.validate(valid => {
        if (valid) {
          const data = this.$serialize('scrap-detail-form-edit')
          if (this.$string(this.id).isEmpty()) {
            this._save(data)
          }
        } else {
          this.$Message.error('表单验证失败!')
        }
      })
    },
    _save: async function(data) {
      const result = await equipScrap.equipScrapDetailAdd({
        equipIds: this.selectIds,
        obj: data
      })
      if (result) {
        this.showModal = false
        this.$Message.success('添加成功')
        this.$emit('on-result-change')
      }
    },
    _cancel() {
      this.showModal = false
    },
    // 故障原因
    _reasonChange(msg, data) {
      switch (msg) {
        case 'select':
          this.formObj.reason = data.reason
          break
        default:
          this.formObj.reason = data.reason
          this._getReasonList(data.reason)
          break
      }
    },
    // 报废原因 reason
    _getReasonList: async function(reason = '') {
      const data = {
        name: '报废原因',
        value: reason
      }
      this.reasonList = await equipScrapDetail.equipScrapSearch(data)
    },
    _open(scrapId) {
      this.showModal = true
      this.$refs.formObj.resetFields()
      this.name = ''
      this._page()
      this._getReasonList()
      this.selectIds = []
      this.formObj.scrapId = scrapId
      this.id = ''
      this.modalTitle = '新增仪器报废明细'
    },
    _formSearch() {
      this.$refs.pageTable._pageChange(1)
    },
    _page: async function() {
      const result = await equipInfo.page(
        this.$serializeForm({ name: this.name })
      )
      if (result) {
        this.getPage = result
        this.$refs.pageTable._initTable()
      }
    },
    _tableResultChange(msg, data) {
      switch (msg) {
        case 'page':
          this._page()
          break
        case 'selectIds':
          this.selectIds = data
          break
      }
    }
  }
}
</script>
