<template>
  <div>
    <Modal v-model="showModal" width="1200" footer-hide>
      <p slot="header">
        库存详情
      </p>
      <Row>
        <!--查询-->
        <Col span="24" />
        <Form id="search-form-chemical-stock" inline onsubmit="return false" :label-width="80">
          <label class="label-sign" />
          <Form-item class="search-item" label="CAS编号">
            <el-input v-model="formObj.casNum" placeholder="请输入CAS编号" clearable @keyup.enter.native="_formSearch" />
          </Form-item>
          <Form-item class="search-item" label="生产批号">
            <el-input v-model="formObj.batchNum" placeholder="请输入生产批号" clearable @keyup.enter.native="_formSearch" />
          </Form-item>

          <Form-item label="有效期:" style="width: 36%;">
            <DatePicker
              ref="ValidDate"
              :value="dateValue"
              format="yyyy-MM-dd"
              type="daterange"
              placement="bottom-end"
              placeholder="请选择有效期"
              style="width: 200px;"
              @on-change="_dateChange"
            />
            <input name="beginValidDate" type="hidden">
            <input name="endValidDate" type="hidden">
          </Form-item>
          <Form-item class="marleft-90">
            <Button type="primary" @click="_formSearch">
              搜索
            </Button>
          </Form-item>
        </Form>
        </Col>
        <!-- 耗材基本信息 -->
        <Col span="24" style="margin-bottom: 10px" />
        <table class="tableClass">
          <tbody>
            <tr>
              <th>耗材编号</th>
              <td>{{ chemical.num }}</td>
              <th>耗材名称</th>
              <td>{{ chemical.name }}</td>
              <th>耗材类别</th>
              <td>{{ chemical.category }}</td>
              <th>仓库位置</th>
              <td>{{ chemical.storehouse }}</td>
            </tr>
            <tr>
              <th>库存量</th>
              <td>{{ chemical.stock }}</td>
              <th>计量方式</th>
              <td>{{ chemical.unit }}</td>
              <th>规格</th>
              <td>{{ chemical.spec }}</td>
              <th>备注</th>
              <td>{{ chemical.remark }}</td>
            </tr>
          </tbody>
        </table>
        </Col>
        <Col span="24" />
        <!--        <BtnList :msg="btn" class="contHide" @on-result-change="_btnClick" />-->
        <Button type="success" style="margin-bottom: 5px;margin-top: 5px" @click="_firstIn">
          首次入库
        </Button>
        <Button type="success" style="margin-bottom: 5px;margin-top: 5px" @click="_applyHandle">
          申请处理
        </Button>
        </Col>
        <Col span="24" />
        <element-table
          ref="pageTable"
          :page-columns="pageColumnsStorage"
          :table-height="tableHeight"
          :get-page="getPage"
          :icon-msg="iconMsg1"
          :opt-col-width="70"
          @on-result-change="_tableResultChange"
        >
          <el-table-column
            v-for="item in pageColumnsStorage"
            :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">
                <span v-if="scope.row.validDay <=0" class="red-color">
                  {{ scope.row[item.key]?$dateformat(scope.row[item.key],'yyyy-mm-dd '):'' }}
                </span>
                <span v-else>{{ scope.row[item.key]?$dateformat(scope.row[item.key],'yyyy-mm-dd '):'' }}</span>
              </div>
              <div v-else-if="item.key==='state'">
                <span v-if="scope.row[item.key]===0">
                  {{ '正常' }}
                </span>
                <span v-else-if="scope.row[item.key]===1">
                  {{ '处理审批中' }}
                </span>
                <span v-else-if="scope.row[item.key]===2">
                  {{ '审批驳回' }}
                </span>
                <span v-else-if="scope.row[item.key]===3">
                  {{ '作废' }}
                </span>
                <span v-else-if="scope.row[item.key]===4">
                  {{ '降级' }}
                </span>
              </div>
              <div v-else>
                {{ scope.row[item.key] }}
              </div>
            </template>
          </el-table-column>
        </element-table>
        </Col>
      </Row>
    </Modal>
    <!--    &lt;!&ndash; 耗材入库 &ndash;&gt;-->
    <LmsChemicalStockIn ref="chemicalStockInModal" @on-result-change="_search" />
    <!--    &lt;!&ndash; 耗材出库 &ndash;&gt;-->
    <LmsChemicalStockOut ref="chemicalStockOutModal" @on-result-change="_search" />
    <!--    &lt;!&ndash;库存校正&ndash;&gt;-->
    <ChemicalStocChange ref="changeModal" @on-result-change="_search" />
    <!--    &lt;!&ndash; 耗材归还 &ndash;&gt;-->
    <LmsChemicalStockGiveBack ref="chemicalStockGiveBackModal" @on-result-change="_search" />
    <!-- 出入库使用记录 -->
    <LmsChemicalBatchStockUserecord
      ref="chemicalStockUserecordModal"
      @on-result-change="_search"
    />
    <LmsChemicalStockAdd
      ref="chemicalStockAddModal"
      :chemical="chemical"
      @on-result-change="_search"
    />
    <!--    &lt;!&ndash;申请处理&ndash;&gt;-->
    <!--    <ChemicalApplyDeal ref="dealModal" @on-result-change="_search" />-->
  </div>
</template>
<script>
import { consumeStock } from '../../../api'
import LmsChemicalStockIn from './stock/LmsChemicalStockIn.vue'
import LmsChemicalStockOut from './stock/LmsChemicalStockOut.vue'
import ChemicalStocChange from './stock/ChemicalStocChange'
import LmsChemicalStockGiveBack from './stock/LmsChemicalStockGiveBack'
import LmsChemicalBatchStockUserecord from './stock/LmsChemicalBatchStockUserecord.vue'
import LmsChemicalStockAdd from './stock/LmsChemicalStockAdd'
// import ChemicalApplyDeal from './stock/ChemicalApplyDeal'

export default {
  components: {
    // ChemicalApplyDeal,
    LmsChemicalStockIn,
    LmsChemicalStockOut,
    ChemicalStocChange,
    LmsChemicalStockGiveBack,
    LmsChemicalBatchStockUserecord,
    LmsChemicalStockAdd
  },
  data() {
    return {
      showModal: false,
      formObj: {
        chemicalId: '',
        casNum: ''
      },
      iconMsg1: [
        // 正常
        { type: 'pt-a-edit', id: '', name: '库存校正' },
        { type: 'pt-a-edit', id: '', name: '入库' },
        { type: 'pt-a-edit', id: '', name: '出库' },
        { type: 'pt-a-edit', id: '', name: '归还' },
        { type: 'pt-a-edit', id: '', name: '重新提交', disabled: true },
        {
          type: 'pt-a-edit',
          id: '',
          name: '使用记录'
        }
      ],
      iconMsg2: [
        // 处理审批中
        { type: 'pt-a-edit', id: '', name: '库存校正', disabled: true },
        {
          type: 'pt-a-edit',
          id: '',
          name: '入库',
          disabled: true
        },
        {
          type: 'pt-a-edit',
          id: '',
          name: '出库',
          disabled: true
        },
        {
          type: 'pt-a-edit',
          id: '',
          name: '归还',
          disabled: true
        },
        { type: 'pt-a-edit', id: '', name: '重新提交', disabled: true },
        {
          type: 'pt-a-edit',
          id: '',
          name: '使用记录'
        }
      ],
      iconMsg3: [
        // 审批驳回
        { type: 'pt-a-edit', id: '', name: '库存校正' },
        { type: 'pt-a-edit', id: '', name: '入库' },
        { type: 'pt-a-edit', id: '', name: '出库' },
        { type: 'pt-a-edit', id: '', name: '归还' },
        { type: 'pt-a-edit', id: '', name: '重新提交' },
        {
          type: 'pt-a-edit',
          id: '',
          name: '使用记录'
        }
      ],
      iconMsg4: [
        // 作废
        { type: 'pt-a-edit', id: '', name: '库存校正', disabled: true },
        {
          type: 'pt-a-edit',
          id: '',
          name: '入库',
          disabled: true
        },
        { type: 'pt-a-edit', id: '', name: '出库' },
        {
          type: 'pt-a-edit',
          id: '',
          name: '归还',
          disabled: true
        },
        { type: 'pt-a-edit', id: '', name: '重新提交', disabled: true },
        {
          type: 'pt-a-edit',
          id: '',
          name: '使用记录'
        }
      ],
      iconMsg5: [
        // 降级
        { type: 'pt-a-edit', id: '', name: '库存校正', disabled: true },
        {
          type: 'pt-a-edit',
          id: '',
          name: '入库',
          disabled: true
        },
        { type: 'pt-a-edit', id: '', name: '出库' },
        { type: 'pt-a-edit', id: '', name: '归还' },
        { type: 'pt-a-edit', id: '', name: '重新提交', disabled: true },
        {
          type: 'pt-a-edit',
          id: '',
          name: '使用记录'
        }
      ],
      btn: [
        { type: 'success', id: '', name: '首次入库' },
        { type: '', id: '', name: '申请处理' }
      ],
      getPage: {},
      selectIds: [],
      dateValue: [], // 有效期
      chemical: {
        id: '',
        num: '',
        category: '',
        name: '',
        storehouse: '',
        stock: ''
      },
      RelQuoteList: [],
      manufacturer: '',
      pageColumnsStorage: [
        { title: 'CAS编号', width: 120, key: 'casNum', fixed: 'left' },
        { title: '商品编码', width: 150, key: 'productCode' },
        { title: '状态', width: 150, key: 'state' },
        { title: '库存量', width: 100, key: 'stock' },
        { title: '有效期', key: 'validDate', width: 110, date: true },
        { title: '距离有效期（/天）', key: 'validDay', width: 150 },
        { title: '单价', key: 'unitPrice', width: 80 },
        { title: '生产批号（批次）', width: 150, key: 'batchNum' },
        { title: '规格型号', width: 120, key: 'spec' },
        {
          title: '已使用量',
          width: 100,
          key: 'exused'
        },
        {
          title: '供应商',
          width: 180,
          key: 'supplier'
        },
        {
          title: '制造厂商',
          width: 150,
          key: 'manufacturer'
        },
        { title: '备注', key: 'remark' }
      ]
    }
  },
  computed: {
    tableHeight: function() {
      return '400'
    }
  },
  methods: {
    _iconClick(res, data) {
      switch (res) {
        case '库存校正':
          this.$refs.changeModal._open(data)
          break
        case '入库':
          this._chemicalStockInModal(data)
          break
        case '出库':
          this._chemicalStockOutModal(data)
          break
        case '归还':
          this._chemicalStockGiveBackModal(data)
          break
        case '使用记录':
          this._chemicalStockUserecordModal(data.chemicalId, data.id)
          break
        case '重新提交':
          this._reSubmit(data)
          break
      }
    },

    _firstIn() {
      this.$refs.chemicalStockAddModal._open(this.chemical.id)
    },

    _reSubmit(data) {
      // this.$store
      //   .dispatch('ChemicalHandleApply/getByStockId', { stockId: data.id })
      //   .then(() => {
      //     if (this.$store.state.ChemicalHandleApply.model) {
      //       this.$refs.dealModal._open(
      //         [data.id],
      //         this.$store.state.ChemicalHandleApply.model
      //       )
      //     }
      //   })
    },
    _btnClick(msg) {
      switch (msg) {
        case '首次入库':
          this.$refs.chemicalStockAddModal._open(this.chemical.id)
          break
        case '申请处理':
          if (this.selectIds.length === 0) {
            this.$Message.warning('请至少选择一条数据！')
          } else {
            this.$refs.dealModal._open(this.selectIds)
          }
          break
      }
    },
    _page: async function() {
      Object.assign(this.formObj, this.$refs.pageTable._searchParams())
      const result = await consumeStock.page(this.$serializeForm(this.formObj))
      if (result) {
        this.getPage = result
        this.$refs.pageTable._initTable()
      }
    },
    _formSearch() {
      // this.$refs.pageTable._pageChange(1)
    },
    _chemicalStockInModal(data) {
      // 入库
      this.$refs.chemicalStockInModal._open(data)
    },
    _chemicalStockOutModal(data) {
      // 出库
      this.$refs.chemicalStockOutModal._open(data)
    },
    _chemicalStockGiveBackModal(data) {
      // 归还
      this.$refs.chemicalStockGiveBackModal._open(data, this.chemical.exchange)
    },
    _chemicalStockUserecordModal(chemicalId, id) {
      // 详情
      this.$refs.chemicalStockUserecordModal._open(chemicalId, id)
    },
    _search() {
      this._page()
      this.$emit('on-result-change', this.chemical.id)
    },
    _openStorage(data) {
      this.formObj.chemicalId = data.id
      this.manufacturer = data.manufacturer
      this.chemical = data
      // $('#search-form-chemical-stock')
      //   .find('input')
      //   .each(function() {
      //     $(this).val('')
      //   })
      // $('input[name=chemicalId]').val(data.id)
      this._page()
      this.showModal = true
    },
    _dateChange(data) {
      // 有效期
      if (data[0] === '') {
        // 开始和结束为同一天
        $('input[name=beginValidDate]').val(data[0])
        $('input[name=endValidDate]').val(data[0])
      } else {
        $('input[name=beginValidDate]').val(data[0])
        $('input[name=endValidDate]').val(data[1])
      }
    },
    _tableResultChange(msg, data) {
      switch (msg) {
        case 'page':
          // this.getPage = this.$store.state.LmsChemicalStock.page
          // let stock = 0
          // this.getPage.records.forEach((item, value) => {
          //   stock += item.stock
          // })
          // this.chemical.stock = Number(this.$returnFloat(stock))
          break
        case 'selectIds':
          this.selectIds = data
          break
        case 'iconClick':
          this._iconClick(data.name, data.rowData)
          break
        default:
          this._page()
      }
    }
  }
}
</script>
