<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.complaintUnit }}</td>
              <th>投/申诉时间</th>
              <td>{{ obj.complaintTime?$dateformat(obj.complaintTime,'yyyy-mm-dd'):'' }}</td>
            </tr>
            <tr>
              <th>投/申诉人</th>
              <td>{{ obj.complaintName }}</td>
              <th>联系方式</th>
              <td>{{ obj.complaintTel }}</td>
            </tr>
            <tr>
              <th>送检日期</th>
              <td>{{ obj.checkTime?$dateformat(obj.checkTime,'yyyy-mm-dd'):'' }}</td>
              <th>报告编号</th>
              <td>{{ obj.reportNum }}</td>
            </tr>
            <tr>
              <th>投/申诉方式</th>
              <td>{{ obj.complaintType }}</td>
              <th>投/申诉内容</th>
              <td>{{ obj.complaintContentText }}</td>
            </tr>
            <tr>
              <th>接受人</th>
              <td>{{ obj.receiverName }}</td>
              <th>接受日期</th>
              <td>{{ obj.receiverTime?$dateformat(obj.receiverTime,'yyyy-mm-dd'):'' }}</td>
            </tr>
            <!-- <tr>
              <th>处理人</th>
              <td colspan="3">{{obj.dealName}}</td>
            </tr>
            <tr>
              <th>处理意见</th>
              <td colspan="3">{{obj.dealAdviceText}}</td>
            </tr>
            <tr>
              <th>批准日期</th>
              <td colspan="3">{{date.dealTime}}</td>
            </tr>-->
            <tr>
              <th>备注</th>
              <td colspan="3">
                {{ 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.fileName }}
          </div>
        </Form-item>
      </Form>
      <Modal v-model="visible" title="查看图片" footer-hide>
        <img v-if="visible" :src="objectKey" style="width: 100%">
      </Modal>
      <Form inline :label-width="100">
        <FormItem label="最终处理意见：" style="width: 97.6%;background: white;margin-top: 10px">
          <editor ref="editorModal" @on-result-change="_editorData" />
        </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 { ComplaintRegister } from '../../../api'
import editor from '../../../components/base/editor'
export default {
  components: { editor },
  data() {
    return {
      obj: {},
      id: {},
      dealAdviceText: '',
      showModal: false,
      visible: false,
      objectKey: ''
    }
  },
  mounted() {
    this.id = this.$route.query.id
    this._complaintRegister()
  },
  methods: {
    _complaintRegister: async function() {
      const obj = await ComplaintRegister.getById(this.id)
      if (obj) {
        this.obj = obj
      }
      if (obj.lmsFrameFileList) {
        this.obj.lmsFrameFileList = obj.lmsFrameFileList
      } else {
        this.obj.lmsFrameFileList = []
      }
    },
    _editorData(data) {
      this.dealAdviceText = data.content
    },
    _dateChange(data) {
      this.signDate = data
    },
    _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 = this.dealAdviceText
          this._approveOk(data)
        }
      })
    },
    _approveOk: async function(data) {
      const result = await ComplaintRegister.approve(data)
      if (result) {
        this.$Message.success('审批成功！')
        setTimeout(() => {
          parent.location.replace(global.webURL + '/sys/workflow/flow_task')
        }, 200)
      }
    },
    _handleView(data) {
      this.objectKey = data.objectKey
      if (
        this.objectKey.indexOf('jpg') > -1 ||
        this.objectKey.indexOf('png') > -1 ||
        this.objectKey.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_complaint_register/downLoadFile?id=' +
            file.id
          window.open(url)
        }
      })
    },
    _cancel() {
      this.showModal = false
    }
  }
}
</script>
