<template>
  <div>
    <!-- 执行顺序 -->
    <Alert class="equip_alert">
      <div>
        <table class="tableClass">
          <tbody>
            <tr>
              <th colspan="6" style="text-align: center;font-size: 15px">
                耗材使用申请单
              </th>
            </tr>
            <tr>
              <th>编号</th>
              <td>{{ getOrder.num }}</td>
              <th>申请人</th>
              <td>{{ getOrder.applyer }}</td>
              <th>申请时间</th>
              <td>{{ this.$dateformat(getOrder.ctime, 'yyyy-mm-dd HH:MM') }}</td>
            </tr>
            <tr>
              <th>申请原因</th>
              <td colspan="5">
                {{ getOrder.remark }}
              </td>
            </tr>
          </tbody>
        </table>
      </div>
      <Form inline :label-width="80">
        <FormItem label="审批批注：" style="width:70%;margin-top: 10px">
          <Input name="postil" placeholder="请输入审批批注..." size="large" value="同意" />
        </FormItem>
        <!--操作-->
        <div align="left" style="display: inline-block;margin-top: 13px;">
          <Button type="success" style="margin-left:15px" @click="_approve(3,'确定通过？')">
            同意
          </Button>
          <Button type="error" style="margin-left:15px" @click="_approve(5,'确定驳回？')">
            驳回
          </Button>
          <Button type="error" style="margin-left:15px" @click="_approve(2,'确定终止？')">
            终止
          </Button>
        </div>
      </Form>
    </Alert>
    <!--内容-->
    <div>
      <element-table
        ref="pageTable"
        :table-height="300"
        :get-page="getPage"
        @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.key==='quantity'">
              <el-input
                v-model="scope.row.quantity"
                placeholder="请输入出库数量"
                size="medium"
                @focus="_handleRow(scope)"
                @blur="_save"
              />
            </div>
            <div v-else-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>
        <el-table-column
          slot="col"
          label="操作"
          align="center"
          :width="160"
          fixed="right"
        >
          <template slot-scope="scope">
            <div v-if="scope.row.state===1">
              已拒绝
            </div>
            <icon-list v-else :msg="iconMsg" :row-data="scope.row" @on-result-change="_iconClick" />
          </template>
        </el-table-column>
      </element-table>
    </div>
    <!--编辑-->
    <Modal v-model="showModal" width="360">
      <p slot="header">
        拒绝
      </p>
      <div>
        <Form ref="formObj" :model="formObj" :label-width="50">
          <Form-item label="备注" prop="remark">
            <Input v-model="formObj.remark" name="remark" placeholder="请输入备注" />
          </Form-item>
        </Form>
      </div>
      <div slot="footer">
        <Button @click="_cancel">
          取消
        </Button>
        <Button type="primary" @click="_refuseOk">
          确定
        </Button>
      </div>
    </Modal>
  </div>
</template>
<script>
import global from '../../../api/config'

import { consumeRelDelivery, consumeDeliveryOrder } from '../../../api'

export default {
  data() {
    return {
      currentRow: {},
      id: {},
      step: '',
      pageColumns: [
        { title: '耗材编号', key: 'chemicalNum', width: 160 },
        { title: '耗材名称', key: 'chemicalName', width: 160 },
        { title: '出库数量', key: 'quantity', width: 100 },
        { title: '库存量', key: 'stock', width: 100 },
        { title: '计量单位', key: 'unit', width: 100 },
        { title: '规格', key: 'spec', width: 100 },
        { title: '有效期', key: 'validDate', width: 140, date: true },
        { title: '生产批次', key: 'batchNum', width: 120 },
        { title: '商品编码', key: 'productCode', width: 200 },
        { title: '制造厂商', key: 'manufacturer', width: 200 },
        { title: '备注', key: 'remark', width: 200 }
      ],
      showModal: false,
      formObj: {
        id: '',
        remark: ''
      },
      purchaseId: '', // 编辑、删除id
      getPage: {},
      getOrder: {},
      iconMsg: [{ type: 'pt-back', id: '', name: '拒绝' }]
    }
  },
  mounted() {
    this.id = this.$route.query.id
    this.step = this.$route.query.step
    this._page()
    this._deliveryOrder(this.id)
  },
  methods: {
    _handleRow(data) {
      this.currentRow = data.row
    },
    _save: async function() {
      const result = await consumeRelDelivery.applyTempEdit({
        id: this.currentRow.id,
        obj: { quantity: this.currentRow.quantity }
      })
      if (result) {
        this._page()
      }
    },
    _page: async function() {
      const obj = Object.assign(
        { orderId: this.id },
        this.$refs.pageTable._searchParams()
      )
      const result = await consumeRelDelivery.pageApprove(
        this.$serializeForm(obj)
      )
      if (result) {
        this.getPage = result
        this.$refs.pageTable._initTable()
      }
    },
    _tableResultChange(msg, data) {
      switch (msg) {
        case 'page':
          this._page()
          break
      }
    },
    _iconClick(res, data) {
      switch (res) {
        case '拒绝':
          this.showModal = true
          this.formObj.remark = ''
          this.formObj.id = data.id
          break
      }
    },
    _deliveryOrder: async function(id) {
      const result = await consumeDeliveryOrder.getById(id)
      if (result) {
        this.getOrder = result
      }
    },
    _approve(allow, content) {
      this.$Modal.confirm({
        title: '提示',
        content: content,
        onOk: () => {
          const data = {}
          data.id = $('#flowFrame', parent.document).attr('data-tid')
          data.allow = allow
          data.step = this.step
          data.postil = $('input[name="postil"]').val()
          this._approveOk(data)
        }
      })
    },
    _approveOk: async function(data) {
      const result = await consumeDeliveryOrder.approve(data)
      if (result) {
        this.$Message.success('审批成功！')
        setTimeout(() => {
          parent.location.replace(global.webURL + '/sys/work_flow/my_task')
        }, 200)
      }
    },
    _cancel() {
      this.showModal = false
    },
    _refuseOk: async function() {
      const result = await consumeRelDelivery.rejectPurchase(this.formObj)
      if (result) {
        this.showModal = false
        this.$Message.success('操作成功')
        this._page()
      }
    }
  }
}
</script>
