<template>
    <el-dialog v-model="dialogVisible" draggable title="详情" width="1300">

        <el-descriptions :column="2" border>

            <el-descriptions-item label="电能质量事件名称">{{ tableData.name }}</el-descriptions-item>
            <el-descriptions-item label="事件经过">{{ tableData.process }}</el-descriptions-item>
            <el-descriptions-item label="处理措施">{{ tableData.measures }}</el-descriptions-item>
            <el-descriptions-item label="治理效果">{{ tableData.effect }}</el-descriptions-item>
            <el-descriptions-item label="附件"  :span="3">
                <div v-for="item in tableData.urlList">
                    <div style="display: flex;align-items: center;">
                        <div>{{ item.name }}</div>

                        <el-icon class="elView" v-if="item.name" @click="view(item)">
                            <View />
                        </el-icon>
                        <el-icon class="elView" v-if="item.name" @click="download(item)">
                            <Download />
                        </el-icon>
                    </div>
                </div>
            </el-descriptions-item>]
            <div>
                <el-descriptions-item label="事件简介">
                    <div class='editor' v-html="tableData.summary"></div>
                </el-descriptions-item>
            </div>
        </el-descriptions>







        <!-- <vxe-table v-bind="defaultAttribute" ref="vxeRef" height="500px" :data="tableData">
            <vxe-column field="name" title="名称"></vxe-column>
            <vxe-column title="操作" width="150">
                <template #default="{ row }">
                    <el-button type="primary" link @click="view(row)">查看</el-button>
                    <el-button type="primary" link @click="download(row)">下载</el-button>
                </template>
</vxe-column>
</vxe-table> -->
    </el-dialog>
</template>
<script setup lang="ts">
import { ref, reactive } from 'vue'
import { defaultAttribute } from '@/components/table/defaultAttribute'
import { getFileNameAndFilePath, downloadFile } from '@/api/system-boot/file'
import { Download, View } from '@element-plus/icons-vue'

const dialogVisible = ref(false)
const tableData: any = ref({

})
const open = (row: any) => {
    tableData.value = {}
    tableData.value = row
    tableData.value.urlList = []
    row.url.split(',').map((v: any) => {
        tableData.value.urlList.push({ name: v.split('/supervision/')[1], url: v })
    })
    dialogVisible.value = true
}
const view = (row: any) => {
    window.open(window.location.origin + '/#/previewFile?' + row.url)
}
const download = (row: any) => {
    let url = row.url
    let urls = url
    let name = url.match(/\/([^/]+)\.(\w+)$/)[1]
    downloadFile({ filePath: url }).then((res: any) => {
        let blob = new Blob([res], {
            type: urls.includes('.pdf')
                ? 'application/pdf'
                : urls.includes('.docx')
                    ? 'application/vnd.openxmlformats-officedocument.wordprocessingml.document'
                    : urls.includes('.xls')
                        ? 'application/vnd.ms-excel'
                        : urls.includes('.xlsx')
                            ? 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
                            : urls.includes('.png')
                                ? 'image/png'
                                : urls.includes('.jpeg')
                                    ? 'image/jpeg'
                                    : urls.includes('.jpg')
                                        ? 'image/jpg'
                                        : ''
        })
        const url = window.URL.createObjectURL(blob)
        const link = document.createElement('a')
        link.href = url
        link.download = name
        document.body.appendChild(link)
        link.click()
        link.remove()
    })
}
defineExpose({ open })
</script>
<style lang="scss" scoped>
:deep(.el-descriptions__label) {
    width: 160px;
}

.elView {
    cursor: pointer;
    margin-left: 10px;
    color: #0000EE;
}
.editor {
    table {
        width: 100%;
        border-collapse: collapse;
    }

    th,
    td {
        border: 1px solid black;
        padding: 8px;
        text-align: center;
    }

    th {
        background-color: #f2f2f2;
        font-weight: bold;
    }

    td {
        background-color: #ffffff;
    }
}
</style>
