<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.applyer }}</td>
              <th>申请时间</th>
              <td>{{ this.$dateformat(getOrder.applyDate, 'yyyy-mm-dd HH:MM') }}</td>
            </tr>
            <tr>
              <th>耗材名称/编号</th>
              <td colspan="3">
                {{ getOrder.chemicalNameNum }}
              </td>
            </tr>
            <tr>
              <th>处理方式</th>
              <td>{{ getOrder.handleMethod }}</td>
              <th>处理原因</th>
              <td>{{ getOrder.handleReason }}</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(2,'确定驳回？')">
            驳回
          </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.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>
    </div>
    <Form id="edit-form" :label-width="90" inline v-if="getOrder.fileName">
      <Form-item label="附件" style="width: 98.6%;">
        <div class="file-upload-list">
          <div>
            <div class="file-upload-list-cover" @click="_downloadFile(getOrder)">
              <!--<Icon type="ios-eye-outline" @click.native="_handleView(getOrder)" />-->
              <Icon type="ios-cloud-download-outline" />
            </div>
          </div>
          {{ getOrder.fileName }}
        </div>
      </Form-item>
    </Form>
  </div>
</template>
<script>
import global from '../../../api/config'

import { chemicalHandleApply } from '../../../api'

export default {
  data() {
    return {
      id: {},
      step: '',
      pageColumns: [
        { title: '耗材类别', key: 'category', width: 160 },
        { title: '耗材编号', key: 'num', width: 160 },
        { title: '耗材名称', key: 'name', width: 160 },
        { title: '存储位置', key: 'storehouse', width: 100 },
        { title: '库存量', key: 'stock', width: 100 },
        { title: '有效期', key: 'validDate', width: 140, date: true },
        { title: '生产批次', key: 'batchNum', width: 120 },
        { title: '制造厂商', key: 'manufacturer', width: 200 },
        { title: '备注', key: 'remark', width: 200 }
      ],
      showModal: false,
      formObj: {
        id: '',
        remark: ''
      },
      purchaseId: '', // 编辑、删除id
      getPage: {},
      getOrder: {}
    }
  },
  mounted() {
    this.id = this.$route.query.id
    this.step = this.$route.query.step
    this._page()
    this._deliveryOrder(this.id)
  },
  methods: {
    _page: async function() {
      const obj = Object.assign(
        { id: this.id },
        this.$refs.pageTable._searchParams()
      )
      const result = await chemicalHandleApply.pageApprove(
        this.$serializeForm(obj)
      )
      if (result) {
        this.getPage = result
        this.$refs.pageTable._initTable()
      }
    },
    _tableResultChange(msg, data) {
      switch (msg) {
        case 'page':
          this._page()
          break
      }
    },
    _deliveryOrder: async function(id) {
      const result = await chemicalHandleApply.getApproveInfoById(id)
      if (result) {
        this.getOrder = result
      }
    },
    _handleView(file) {
      this.filePath =
        global.baseURL +
        '/res/v1/chemical_handle_apply/download?fileName=' +
        file.fileName +
        '&objectKey=' +
        file.objectKey +
        '&type=' +
        file.type
      const index1 = this.filePath.lastIndexOf('.')
      const index2 = this.filePath.length
      const suffix = this.filePath.substring(index1 + 1, index2) // 后缀名
      if (suffix === 'png' || suffix === 'jpg' || suffix === 'jpeg') {
        this.visible = true
      } else {
        this.$Message.warning({
          content: '非图片文件无法查看，请下载查看',
          duration: 3
        })
        this.visible = false
      }
    },
    _downloadFile(file) {
      // 下载文件
      this.$Modal.confirm({
        title: '提示',
        content: '确定要下载？',
        onOk: () => {
          const url =
            global.baseURL +
            '/res/v1/chemical_handle_apply/download?fileName=' +
            file.fileName +
            '&objectKey=' +
            file.objectKey +
            '&type=' +
            file.type
          window.open(url)
        }
      })
    },
    _approve(allow, content) {
      this.$Modal.confirm({
        title: '提示',
        content: content,
        onOk: () => {
          const data = {}
          data.taskId = $('#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 chemicalHandleApply.approve(data)
      if (result) {
        this.$Message.success('审批成功！')
        setTimeout(() => {
          parent.location.replace(global.webURL + '/sys/workflow/flow_task')
        }, 200)
      }
    },
    _cancel() {
      this.showModal = false
    }
  }
}
</script>
