<template>
  <div class="detailsPage" style="height: calc(100% - 60px);">
    <el-container>
      <el-aside width="40px" style="text-align: center;">
        <div style="font-size: 24px;" @click="handleTarget(1)">
          <el-tooltip content="回到基本信息" placement="right">
            <i class="el-icon-document"></i>
          </el-tooltip>
        </div>
        <div style="font-size: 24px;" @click="handleTarget(2)">
          <el-tooltip content="回到文件" placement="right">
            <i class="el-icon-folder"></i>
          </el-tooltip>

        </div>
        <div style="font-size: 24px;" @click="handleTarget(3)">
          <el-tooltip content="回到审核历史" placement="right">
            <i class="el-icon-alarm-clock"></i>
          </el-tooltip>
        </div>
      </el-aside>
      <el-main class="main">

        <div class="message">
          <el-descriptions title="" :column="2" size="" border style="margin-bottom: 20px;">
            <el-descriptions-item>
              <template slot="label">
                <i class="el-icon-user"></i> 任务名称
              </template>
              <span v-html="getColumnData(detailsMessage, 'name')"></span>
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                <i class="el-icon-user"></i> 创建人
              </template>
              <span v-html="getColumnData(detailsMessage, 'createName')"></span>
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                <i class="el-icon-user"></i> 处理人
              </template>
              <span v-html="getColumnData(detailsMessage, 'handlerName')"></span>
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                <i class="el-icon-mobile-phone"></i> 所属项目
              </template>
              <span v-html="getColumnData(detailsMessage, 'projectName')"></span>
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                <i class="el-icon-location-outline"></i> 所属流程
              </template>
              {{ pathOptions.filter(item => { return item.value == detailsMessage.processId })[0].label}}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                <i class="el-icon-tickets"></i> 截止时间
              </template>
              <span v-html="getColumnData(detailsMessage, 'deadLineTime')"></span>
            </el-descriptions-item>
          </el-descriptions>
        </div>
        <div class="fileTable">
          <el-table :data="tableData" border>
            <el-table-column prop="originalName" label="文件名称" align="center"></el-table-column>
            <el-table-column prop="createName" label="上传人" align="center"></el-table-column>
            <el-table-column prop="createTime" label="上传时间" align="center"> </el-table-column>
            <el-table-column prop="type" label="文件类型" align="center"> </el-table-column>
            <el-table-column label="操作" align="center" width="120px">
              <template slot-scope="scope">
                <el-button type="text" @click="handleCommand(1, scope.row)">预览</el-button>
                <el-button type="text" @click="handleCommand(2, scope.row)">下载</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>

        <div class="history">
          <p>审核历史：</p>
          <el-timeline :reverse="false" style="padding: 10px 0 0 10px;cursor: pointer;">
            <template>
              <div v-if="timelineList.length > 0">
                <el-timeline-item v-for="item in timelineList" :key="item.id" timestamp="" placement="top">
                  <el-card>
                    <div style="margin-bottom: 5px;">
                      <span>处理人：</span>
                      <span>{{ item.taskHandleResultVO ? item.taskHandleResultVO.createName : '--' }}</span>
                    </div>
                    <div>
                      <span>说明：</span>
                      <span>{{ item.taskHandleResultVO ? item.taskHandleResultVO.description : '--' }}</span>
                    </div>
                  </el-card>
                </el-timeline-item>

              </div>
              <div v-else>
                <el-timeline-item timestamp="2018/4/12" placement="top">
                  <el-card>
                    <span>暂无数据</span>
                  </el-card>
                </el-timeline-item>
              </div>
            </template>

          </el-timeline>
        </div>

      </el-main>
    </el-container>
  </div>
</template>

<script>
import { downLoad2 } from "@/utils"
import { optionsData } from '../mixins/index2'
export default {
  mixins: [optionsData],
  props: ['row'],
  data() {
    return {
      // 分配任务详情
      detailsMessage: {},
      //文件
      tableData: [],
      //审核历史
      timelineList: [],
    }
  },
  watch: {},
  computed: {},
  mounted() {
    this.getDetails()
  },
  methods: {
    // 点击左侧图标回到指定位置
    handleTarget(val) {
      let dom = ''
      switch (val) {
        case 1:
          dom = '.message'
          this.getTarget(dom)
          break;
        case 2:
          dom = '.fileTable'
          this.getTarget(dom)
          break;
        case 3:
          dom = '.history'
          this.getTarget(dom)
          break;

        default:
          break;
      }
    },
    // 页面滚动到某个位置
    getTarget(dom) {
      let target = document.querySelector(dom)
      target.scrollIntoView({
        block: 'start',
        inline: 'nearest',
        behavior: 'smooth'
      })
    },
    // 获取数据
    getDetails() {
      let params = {
        taskId: this.row.id
      }
      this.$api.queryAuditHistory(params).then(res => {
        if (res.code == 200) {
          this.detailsMessage = res.data.projectTaskVO//分配任务信息
          this.tableData = res.data.systemFileList//文件
          this.timelineList = res.data.auditHistoryVOS//审查历史
        }
      })
    },
    // 下拉菜单等处理
    handleCommand(ev, row) {
      switch (ev) {
        case 1://预览
          this.preview(row)
          break;
        case 2://下载
          this.downloads(row)
          break;

        default:
          break;
      }
    },
    // 预览
    preview(data) {
      let guid = data.guid
      var item = JSON.parse(JSON.stringify(data))

      var arr = ['png', 'jpeg', 'bmp', 'jpg']
      if (arr.includes(item.type)) {
        var FileUrl = this.$commonJS.checkViewer(guid)
        var isPicture = 1
      } else {
        let http = '139.224.24.90'
        var url = this.$commonJS.checkViewer(guid)
        // var FileUrl = `http://${this.$c.hostname}:8012/onlinePreview?url=`+ btoa(encodeURIComponent(this.$commonJS.checkViewer(guid)+ '&fullfilename=test.'+item.type))
        var FileUrl = `http://${http}:8012/onlinePreview?url=`+ btoa(encodeURIComponent(url + '&fullfilename=test.'+item.type))
        var isPicture = 0
      }
      // return
      const router = this.$router.resolve({
        path: '/checkFile',
        query: {
          row: JSON.stringify(item),
          FileUrl: FileUrl,
          isPicture: isPicture
        }
      })
      window.open(router.href, '_blank');
    },
    // 下载
    downloads(data) {
      downLoad2(data.guid)
    },
    // 处理数据
    getColumnData(data, key) {
      if (data && data[key]) {
        return data[key]
      } else {
        return '--'
      }
    },
  },
}
</script>

<style lang="scss" scoped>
.detailsPage {
  .div_margin {
    margin: 20px 0 10px 0;
  }
}
</style>