<template>
  <super-dialog
    v-bind="$attrs"
    v-if="visible"
    v-model="visible"
    width="60%"
    title="流程日志"
    :modal="false"
    top="8vh"
    @closed="handleClose"
  >
     <el-table :data="tableData" v-loading="loading" border style="width: 100%">
            <el-table-column label="序号" type="index" align="center" width="60"/>
            <el-table-column
                show-overflow-tooltip
                prop="approvalNode"
                label="审批节点"
                align="center"
                width="140"
            >
            </el-table-column>
            <el-table-column
                show-overflow-tooltip
                prop="approvalDate"
                label="审批时间"
                align="center"
                width="200"
            >
            </el-table-column>
            <el-table-column
                show-overflow-tooltip
                prop="processingTime"
                label="办理时长"
                align="center"
            >
                <template slot-scope="{row}">
                    {{ transTime(row.processingTime) }}
                </template>
            </el-table-column>
            <el-table-column
                show-overflow-tooltip
                prop="approvalResult"
                label="审批结果"
                align="center"
                width="100"
            >
                <template slot-scope="{row}">
                    <el-tag :type="row.approvalResult === 0 ? 'danger' : ''">{{
                        transResult(row.approvalResult)
                    }}</el-tag>
                </template>
            </el-table-column>
            <el-table-column
                show-overflow-tooltip
                prop="approvalUserName"
                label="审批人"
                align="center"
                width="120"
            >
            </el-table-column>
            <el-table-column
                show-overflow-tooltip
                prop="intranetPort"
                label="审批意见"
                align="center"
            >
                <template slot-scope="{row}">
                    {{ row.intranetPort || '-' }}
                </template>
            </el-table-column>
            <el-table-column label="附件" width="300" align="center">
                <template slot-scope="{row}" v-if="row.applyRecordFile">
                    <div
                        v-for="file in row.applyRecordFile"
                        :key="file.id"
                        class="file-wrapper"
                        @click="handleDownload(file)"
                    >
                        <span class="text" :title="file.name">{{ file.name }}</span>
                        <i class="download el-icon-download"></i>
                    </div>
                </template>
            </el-table-column>
        </el-table>
  </super-dialog>
</template>
<script>
import moment from 'moment'
import {downLoadUpload, getRecordDetail} from '@/api/publicBasic/resourceBid'
import SuperDialog from '@/components/SuperDialog/index.vue'
// import req from '@/request.js'
export default {
    name: 'applyRecord',
  components: {SuperDialog},
    data() {
        return {
            visible: false,
            loading: false,
            tableData: [],
            bizPath: 'resourceApply', // 上传时文件储存path
        }
    },
    methods: {
        handleOpen(row) {
            this.tableData = []
            this.visible = true
            this.loading = true
            const { value = [],state } = getRecordDetail(row.id)
            if(state){
              this.tableData = value
              this.loading = false
            }else {
              this.loading = false
            }
        },
        handleClose() {
            this.visible = false
            this.tableData = []
        },
        handleDownload(file) {
            if (file.id) {
                downLoadUpload(this.bizPath,file.id)
                this.$message.success('下载成功')
            } else {
                this.$message.info('文件信息缺失，无法下载！')
            }
        },
        transTime(time) {
            let text
            if (time) {
                let duration = moment.duration(time)
                let days = duration.get('days')
                let hours = duration.get('hours')
                let minutes = duration.get('minutes')
                let seconds = duration.get('seconds')
                days = days ? days + '天' : ''
                hours = hours ? hours + '小时' : ''
                minutes = minutes ? minutes + '分钟' : ''
                seconds = seconds ? seconds + '秒' : ''
                text = days + hours + minutes + seconds
            } else {
                text = '-'
            }
            return text
        },
        transResult(status) {
            let text
            if (status === -1) {
                text = '未处理'
            } else if (status === 0) {
                text = '驳回'
            } else if (status === 1) {
                text = '同意'
            } else if (status === 3) {
                text = '发起'
            } else if (status === 4) {
                text = '完成'
            }
            return text
        },
    },
}
</script>
<style lang="scss" scoped>
.file-wrapper{
    display: flex;
    justify-content: space-between;
    align-items: center;
    .text{
        flex: 1;
        text-align: left;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .download{
        cursor: pointer;
        width: 36px;
    }
}
.file-wrapper:hover{
    .text{
        color: #409eff;
    }
    .download{
        color: #409eff;
    }
}
</style>
