<template>
  <div>
    <!-- 执行顺序 -->
    <Alert class="equip_alert">
      <div>
        <table class="tableClass">
          <tbody>
            <tr>
              <th colspan="4" style="text-align: center;font-size: 15px">
                管理评审计划
              </th>
            </tr>
            <tr>
              <th>评审目的</th>
              <td>{{ obj.checkPlanPurpose !== undefined? obj.checkPlanPurpose:'' }}</td>
              <th>评审时间</th>
              <td>{{ obj.checkPlanDate !== undefined?$dateformat(obj.checkPlanDate,'yyyy-mm-dd'):'' }}</td>
            </tr>
            <tr>
              <th>评审地点</th>
              <td>{{ obj.checkPlanPlace !== undefined? obj.checkPlanPlace:'' }}</td>
              <th>评审依据</th>
              <td>{{ obj.checkPlanBasis !== undefined? obj.checkPlanBasis:'' }}</td>
            </tr>
            <tr>
              <th>评审组长</th>
              <td colspan="3">
                {{ obj.checkGroupLeaderName !== undefined? obj.checkGroupLeaderName:'' }}
              </td>
            </tr>
            <tr>
              <th>评审组成员</th>
              <td colspan="3">
                {{ obj.checkGroupMemberNames !== undefined? obj.checkGroupMemberNames:'' }}
              </td>
            </tr>
            <tr>
              <th>评审内容</th>
              <td />
              <td>{{ obj.checkGroupMemberNames !== undefined? obj.checkGroupMemberNames:'' }}</td>
            </tr>
            <tr>
              <th>编制人</th>
              <td>{{ obj.applyName !== undefined? obj.applyName:'' }}</td>
              <th>编制日期</th>
              <td>{{ obj.applyTime !== undefined?$dateformat(obj.applyTime,'yyyy-mm-dd'):'' }}</td>
            </tr>
            <tr>
              <th>批准人</th>
              <td>{{ obj.auditName !== undefined? obj.auditName:'' }}</td>
              <th>批准日期</th>
              <td>{{ obj.auditTime !== undefined?$dateformat(obj.auditTime,'yyyy-mm-dd'):'' }}</td>
            </tr>
            <tr>
              <th>备注</th>
              <td colspan="3">
                {{ obj.remark !== undefined?obj.remark:'' }}
              </td>
            </tr>
          </tbody>
        </table>
      </div>
      <Form v-show="obj.lmsFrameFileList!=''" :label-width="90" inline style="margin-top:10px;margin-left: -50px">
        <Form-item label="附件" style="width: 98.6%;">
          <div v-for="item in obj.lmsFrameFileList" :key="item" class="file-upload-list">
            <div>
              <div class="file-upload-list-cover">
                <Icon type="ios-eye-outline" @click.native="_handleView(item)" />
                <Icon type="ios-cloud-download-outline" @click.native="_downloadFile(item)" />
              </div>
            </div>
            {{ item.orginName }}
          </div>
        </Form-item>
      </Form>
      <Modal v-model="visible" title="查看图片" footer-hide>
        <img v-if="visible" :src="filePath" style="width: 100%">
      </Modal>
      <Form inline :label-width="80">
        <FormItem label="审批意见：" style="width:70%;margin-top: 10px">
          <Input name="reason" placeholder="请输入审批意见..." size="large" value="同意" />
        </FormItem>
        <div align="left" style="margin-top: 12px;display: inline-block;">
          <Button type="success" style="margin-left: 15px" @click="_approve('pass','确定通过？')">
            同意
          </Button>
          <Button style="margin-left: 15px" type="error" @click="_approve('back','确定驳回？')">
            驳回
          </Button>
        </div>
      </Form>
    </Alert>
  </div>
</template>
<script>
import global from '../../../api/config'
import { ManageCheck } from '../../../api'
export default {
  components: {},
  data() {
    return {
      obj: {},
      id: {},
      showModal: false,
      filePath: '',
      visible: false
    }
  },
  mounted() {
    this.id = this.$route.query.id
    this._innerCheck()
  },
  methods: {
    _innerCheck: async function() {
      const obj = await ManageCheck.getById(this.id)
      if (obj) {
        this.obj = obj
      }
      if (obj.lmsFrameFileList) {
        this.obj.lmsFrameFileList = obj.lmsFrameFileList
      } else {
        this.obj.lmsFrameFileList = []
      }
    },
    _approve(status, content) {
      this.$Modal.confirm({
        title: '提示',
        content: content,
        onOk: () => {
          const data = {}
          data.taskId = $('#flowFrame', parent.document).attr('data-tid')
          data.status = status
          data.reason = $('input[name="reason"]').val()
          this._approveOk(data)
        }
      })
    },
    _approveOk: async function(data) {
      const result = await ManageCheck.approve(data)
      if (result) {
        this.$Message.success('审批成功！')
        setTimeout(() => {
          parent.location.replace(global.webURL + '/sys/workflow/flow_task')
        }, 200)
      }
    },
    _handleView(data) {
      this.filePath = data.filePath
      if (
        this.filePath.indexOf('jpg') > -1 ||
        this.filePath.indexOf('png') > -1 ||
        this.filePath.indexOf('jpeg') > -1
      ) {
        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/frame_check_plan/downLoadFile?id=' +
            file.id
          window.open(url)
        }
      })
    },
    _cancel() {
      this.showModal = false
    }
  }
}
</script>
