<template>
    <el-dialog title="详情" :close-on-click-modal="false" append-to-body :visible.sync="visible"
        class="JNPF-dialog JNPF-dialog_center" lock-scroll width="600px">
        <template v-if="!loading">
            <div class="title">信息</div>
            <el-row :gutter="15" class="">
                <el-form ref="formRef" :model="dataForm" size="small" label-width="100px"
                    label-position="right">
                    <el-col :span="24">
                        <jnpf-form-tip-item label="机房名称" prop="computerRoom">
                            <JnpfInput v-model="dataForm.computerRoom" placeholder="请输入" disabled
                                detailed clearable :style='{"width":"100%"}'>
                            </JnpfInput>
                        </jnpf-form-tip-item>
                    </el-col>
                    <el-col :span="24">
                        <jnpf-form-tip-item label="申请人" prop="createBy">
                            <JnpfInput v-model="dataForm.createBy" placeholder="请输入" disabled
                                detailed clearable :style='{"width":"100%"}'>
                            </JnpfInput>
                        </jnpf-form-tip-item>
                    </el-col>
                    <el-col :span="24">
                        <jnpf-form-tip-item label="单位" prop="orgName">
                            <JnpfInput v-model="dataForm.orgName" placeholder="请输入" disabled
                                detailed clearable :style='{"width":"100%"}'>
                            </JnpfInput>
                        </jnpf-form-tip-item>
                    </el-col>
                    <el-col :span="24">
                        <jnpf-form-tip-item label="手机号" prop="phone">
                            <JnpfInput v-model="dataForm.phone" placeholder="请输入" disabled detailed
                                clearable :style='{"width":"100%"}'>
                            </JnpfInput>
                        </jnpf-form-tip-item>
                    </el-col>
                    <el-col :span="24">
                        <jnpf-form-tip-item label="资源池" prop="resourcePool">
                            {{getComputerRoomManagementLabel(dataForm.resourcePool)  }}
                        </jnpf-form-tip-item>
                    </el-col>
                    <el-col :span="24">
                        <jnpf-form-tip-item label="进出事由" prop="accessThing">
                            <JnpfInput v-model="dataForm.accessThing" placeholder="请输入" disabled
                                detailed clearable :style='{"width":"100%"}'>
                            </JnpfInput>
                        </jnpf-form-tip-item>
                    </el-col>
                    <el-col :span="24">
                        <jnpf-form-tip-item label="附件" prop="enable">
                            <div style="color: #1890ff;cursor: pointer;" class="value file-value"
                                v-for="(item2, index2) in dataForm.attachment.result.fileList"
                                :key="index2" @click="pcDownloadFile(item2.minioPath,item2.name)">
                                {{ item2.name }}（点击下载）
                            </div>
                            <div v-for="(item2, index2) in dataForm.attachment.result.imageList">
                                <el-image style="width: 100px; height: 100px" :src="item2.minioPath"
                                    :preview-src-list="[item2.minioPath]">
                                </el-image>
                            </div>
                        </jnpf-form-tip-item>
                    </el-col>

                    <el-col :span="24">
                        <jnpf-form-tip-item label="申请时间" prop="createTime">
                            <JnpfInput v-model="dataForm.createTime" placeholder="请输入" disabled
                                detailed clearable :style='{"width":"100%"}'>
                            </JnpfInput>
                        </jnpf-form-tip-item>
                    </el-col>
                    <el-col :span="24">
                        <jnpf-form-tip-item label="审核人" prop="auditBy">
                            {{dataForm.auditBy || '无数据'}}
                        </jnpf-form-tip-item>
                    </el-col>
                    <el-col :span="24">
                        <jnpf-form-tip-item label="审核时间" prop="auditTime">
                            <JnpfInput v-model="dataForm.auditTime" placeholder="请输入" disabled
                                detailed clearable :style='{"width":"100%"}'>
                            </JnpfInput>
                        </jnpf-form-tip-item>
                    </el-col>
                </el-form>
            </el-row>

            <div class="title" v-if="activities.length">时间线</div>
            <el-row :gutter="15" class="">
                <el-timeline style="margin-left: 20px;">
                    <el-timeline-item v-for="(activity, index) in activities" :key="index"
                        :icon="activity.icon" :type="activity.type" :color="activity.color"
                        :size="activity.size" :timestamp="activity.timestamp">
                        {{activity.content}}
                    </el-timeline-item>
                </el-timeline>
            </el-row>
        </template>
        <span slot="footer" class="dialog-footer">
            <el-button @click="visible = false"> 关 闭</el-button>
        </span>
    </el-dialog>
</template>
<script>
import request from '@/utils/request'
import dayjs from 'dayjs'
import { getDictionaryDataSelector } from '@/api/systemData/dictionary'
import { processUploadPreview } from '@/api/governmentCloud/entryAndExitRegis/entryAndExitRegis'
import { minioPath } from '@/utils/apiUrl'


export default {
    components: {},
    props: [],
    data() {
        return {
            minioPath: minioPath,
            visible: false,
            detailVisible: false,
            loading: false,
            //定位属性
            locationScope: {
            },

            dataForm: {
            },
            activities: [{
                content: '支持使用图标',
                timestamp: '2018-04-12 20:46',
                size: 'large',
                type: 'primary',
                icon: 'el-icon-more'
            }, {
                content: '支持自定义颜色',
                timestamp: '2018-04-03 20:46',
                color: '#0bbd87'
            }, {
                content: '支持自定义尺寸',
                timestamp: '2018-04-03 20:46',
                size: 'large'
            }, {
                content: '默认样式的节点',
                timestamp: '2018-04-03 20:46'
            }],
            computerRoomManagementResourcePool: []

        }
    },
    computed: {},
    watch: {},
    created() {
        this.getComputerRoomManagementResourcePool()
    },
    mounted() { },
    methods: {
        getComputerRoomManagementLabel(str) {
            let arr = str.split(',')
            console.log(arr)
            arr.forEach((item, index) => {
                arr[index] = this.computerRoomManagementResourcePool.filter(o => o.enCode == item)[0].fullName
            })
            return arr.join(',')
        },
        getComputerRoomManagementResourcePool() {
            getDictionaryDataSelector('590926334151100741').then(res => {
                this.computerRoomManagementResourcePool = res.data.list
            })
        },
        dataInfo(dataAll) {
            let _dataAll = dataAll
            this.dataForm = _dataAll
            this.dataForm.auditTime = this.getDate(this.dataForm.auditTime)
            this.dataForm.computerRoom = this.dataForm.qRCode.computerRoom
            this.dataForm.attachment = JSON.parse(this.dataForm.attachment)
        },
        getMinioPath(item) {
            let getImageMinioPathList = [];
            let getFileMinioPathList = [];
            // 获取图片minioPath
            getImageMinioPathList = this.getMinio(item.result.imageList);
            getFileMinioPathList = this.getMinio(item.result.fileList);

            Promise.all(getImageMinioPathList).then((res) => {
                Promise.all(getFileMinioPathList).then((res) => {
                    this.loading = false
                });
            });
        },
        getMinio(list) {
            let requestList = [];
            list.map((item) => {
                requestList.push(
                    new Promise((resolve, reject) => {
                        let params = {
                            itsmFileId: item.id
                        };
                        processUploadPreview(params).then((res) => {
                            if (res.data) {
                                item.minioPath = minioPath + res.data.fileUrl;
                                resolve(minioPath + res.data.fileUrl);
                            } else {
                                this.$message.error(`附件：${item.name}寻找失败`);
                                resolve(null);
                            }
                        });
                    })
                );
            });

            return requestList;
        },
        getDate(time) {
            let str = time ? dayjs(time).format('YYYY-MM-DD HH:mm:ss') : '无数据'
            return str
        },
        pcDownloadFile(url, name) {
            console.log(url)
            //保存到本地
            try {
                const x = new window.XMLHttpRequest();
                x.open('GET', url, true);
                x.responseType = 'blob';
                x.onload = () => {
                    const url = window.URL.createObjectURL(x.response);
                    const a = document.createElement('a');
                    a.href = url;
                    a.download = name;
                    a.click();
                };
                x.send();


                this.$message({
                    message: '下载成功',
                    type: 'success',
                    duration: 1000,
                })
            } catch (error) {
                this.$message({
                    message: '下载失败',
                    type: 'warning',
                    duration: 1000,
                })
            }
        },
        init(obj) {
            console.log(obj)
            this.dataForm.id = obj.id || 0;
            this.visible = true;
            this.$nextTick(() => {
                if (this.dataForm.id) {
                    this.loading = true
                    request({
                        url: '/api/ComputerRoomManagement/ComputerRoomManagement/detail/' + this.dataForm.id,
                        method: 'get',
                        data: {
                            code: obj.qRCode.code,
                            createBy: obj.createBy
                        }
                    }).then((res) => {
                        this.dataInfo(res.data)

                        // 获取进出信息
                        request({
                            url: '/api/ComputerRoomManagementSign/ComputerRoomManagementSign/getList',
                            method: 'post',
                            data: {
                                computerRoomManagementId: this.dataForm.id
                            }
                        }).then(async (res) => {
                            this.activities = []
                            res.data.list.forEach(element => {
                                let obj = {
                                    content: element.message,
                                    timestamp: this.getDate(element.createTime_jnpfId),
                                    size: 'large',
                                    type: 'primary',
                                    color: '#0bbd87'
                                }
                                this.activities.push(obj)
                            });
                            this.getMinioPath(this.dataForm.attachment)
                        })
                    })
                }
            })
        },
    },
}

</script>


<style scoped>
.jnpf-code-box {
    background: #848484;
    padding: 15px;
    color: #fff;
    font-size: 12px;
    border-radius: 4px;
}
.title {
    margin-bottom: 20px;
    font-weight: bold;
    font-size: 18px;
    color: #000;
}
</style>
