<template>
  <div>
    <p slot="header" style="font-size: 14px;color: #1c2438;font-weight: 700;line-height: 20px;">
      采购单耗材详情列表
    </p>
    <div>
      <Row :gutter="16">
        <!-- 采购单基本信息 -->
        <Col span="12" />
        <Form inline onsubmit="return false" :label-width="70">
          <label class="label-sign" />
          <Form-item class="search-item" label=" 耗材名称:">
            <Input v-model="formObj.chemicalName" placeholder="请输入耗材名称" @on-enter="_formSearch" ></Input>
          </Form-item>
          <Form-item class="search-btn">
            <Button type="primary" @click="_formSearch">
              搜索
            </Button>
          </Form-item>
        </Form>
        <element-table
          ref="pageTable"
          :page-columns="pageColumns"
          :table-height="tableHeight"
          :get-page="getPage"
          :icon-msg="iconMsg"
          :opt-col-width="70"
          @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.detail">
                <a @click.stop="_detailModal(scope.row.id)">{{ scope.row[item.key] }}</a>
              </div>
              <div v-else>
                {{ scope.row[item.key] }}
              </div>
            </template>
          </el-table-column>
          <el-table-column
            label="操作"
            align="center"
            :width="100"
            fixed="right"
          >
            <template slot-scope="scope">
              <IconList
                :msg="scope.row.stateDisplay==='采购完成'?iconMsg:scope.row.stateDisplay!=='结束'?iconMsg1:iconMsg2"
                :row-data="scope.row"
                @on-result-change="_iconClick"
              />
            </template>
          </el-table-column>
        </element-table>
        </Col>
        <Col span="12" />
        <!-- 耗材批次列表 -->
        <LmsChemicalStockList ref="rightModal" @on-result-change="_stockResult" />
        </Col>
      </Row>
    </div>
    <!--入库、全部入库所要添加的信息-->
    <SingleStorage ref="storageModal" @on-result-change="_page" />
    <!--结束采购单-->
    <EndPurchase ref="endPurchaseModal" @on-result-change="_endInStore" />
    <!--首次入库-->
    <LmsChemicalStockAdd ref="chemicalStockAddModal" @on-result-change="_page" />
  </div>
</template>
<script>
import LmsChemicalStockAdd from './LmsChemicalStockAdd.vue'
import SingleStorage from './SingleStorage.vue'
import EndPurchase from './EndPurchase.vue'
import LmsChemicalStockList from './LmsChemicalStockList'

export default {
  components: {
    SingleStorage,
    EndPurchase,
    LmsChemicalStockAdd,
    LmsChemicalStockList
  },
  data() {
    return {
      iconMsg: [
        {
          type: 'ios-checkmark-outline',
          id: '',
          name: '采购完成',
          disabled: true
        },
        { type: 'checkmark-round', id: '', name: '结束' }
      ],
      iconMsg1: [
        { type: 'ios-checkmark-outline', id: '', name: '采购完成' },
        { type: 'checkmark-round', id: '', name: '结束' }
      ],
      iconMsg2: [
        {
          type: 'ios-checkmark-outline',
          id: '',
          name: '采购完成',
          disabled: true
        },
        { type: 'checkmark-round', id: '', name: '结束', disabled: true }
      ],
      formObj: {
        chemicalName: ''
      },
      rowSeleted: false,
      rightSelect: {},
      purchaseId: '',
      pageColumns: [
        { title: '编号', width: 120, key: 'chemicalNum', fixed: 'left' },
        { title: '耗材名称', key: 'chemicalName', width: 150 },
        { title: '状态', key: 'stateDisplay', width: 120 },
        { title: '单价', key: 'price', width: 100 },
        { title: '采购量', key: 'quantity', width: 100 },
        { title: '已入库数量', key: 'alreadyQuantity', width: 130 },
        { title: '计量单位', key: 'unit', width: 100 },
        { title: '规格', key: 'spec', width: 100 },
        { title: '等级（纯度）', key: 'quality', width: 120 },
        { title: '供应商', width: 120, key: 'supplier' },
        { title: '制造厂商', key: 'manufacturer', width: 200 },
        { title: '备注', key: 'remark' }
      ],
      getPage: {
        records: []
      }
    }
  },
  methods: {
    _open(data) {
      this.rowSeleted = false
      this.formObj = this.$resetFields(this.formObj)
      this.purchaseId = data.id
      this._page()
    },
    _page() {
      const obj = {
        purchaseId: this.purchaseId,
        obj: this.$serializeFormSearch(this.formObj)
      }
      this.$refs.pageTable._page(
        '',
        'LmsChemicalPurchase/purchaseChemicalInStorePage',
        obj
      )
    },
    _formSearch() {
      this.$refs.pageTable._pageChange(1)
    },
    _tableResultChange(msg, data) {
      switch (msg) {
        case 'page':
          this.getPage = []
          if (Object.keys(this.rightSelect).length !== 0) {
            if (this.getPage.records.length === 0) {
              this.$emit('on-result-change')
              this.$refs.rightModal.getPage = {}
              this.rowSeleted = false
              return
            }
            if (this.rowSeleted) {
              // 对右边页面刷新和状态的改变
              this.$refs.rightModal._page()
              this.$refs.rightModal.state = 3
              this.$refs.rightModal.showAdd = false
            }
          }
          break
        case 'selectIds':
          this.selectIds = data
          break
        case 'select':
          this.rightSelect = data
          this.$refs.rightModal._open(data, this.purchaseId)
          break
        case 'iconClick':
          this._iconClick(data.name, data.rowData)
          break
        default:
          this._page()
      }
    },
    _iconClick(res, data) {
      switch (res) {
        case '结束':
          this._end(data.id)
          break
        case '采购完成':
          this._finish(data.id)
          break
      }
    },
    // 上面的表格刷新是  清空下面左右两个表格数据
    _clearPage() {
      this.getPage.records = []
      this.$refs.rightModal.getPage.records = []
    },
    _end(id) {
      // 结束
      this.optionId = id
      this.$refs.endPurchaseModal._open(id)
    },
    _finish(id) {},
    _endInStore() {
      if (this.rightSelect.id === this.optionId) {
        this.$refs.rightModal._page()
        this.$refs.rightModal.state = 3
        this.$refs.rightModal.showAdd = false
      }
      this.$emit('on-result-change')
      this._page()
    },
    _allClose() {
      // 全部结束时后返回
      this._page()
      this.$emit('on-result-change')
    },
    _stockResult() {
      this._page()
      this.$emit('on-result-change')
    }
  }
}
</script>
