<template>
     <div v-if="detailLoading" class="loading">
            <el-spin description="加载中..." />
        </div>
        <div v-else>
    <el-descriptions :column="2" border>
        <el-descriptions-item label="计划名称">
            {{ detailData.workPlanName }}
        </el-descriptions-item>
        <el-descriptions-item label="监督单位">
            {{ detailData.supvOrgName }}
        </el-descriptions-item>
        <el-descriptions-item label="计划编制单位">
            {{ detailData.planOrgName }}
        </el-descriptions-item>
        <el-descriptions-item label="监督类型">
            {{
                supvTypeList.find(item => {
                    return item.id == detailData.supvType
                })?.name
            }}
        </el-descriptions-item>
        <el-descriptions-item label="监督阶段">
            {{
                supvStageList.find(item => {
                    return item.id == detailData.supvStage
                })?.name
            }}
        </el-descriptions-item>
        <el-descriptions-item label="计划监督时间">
            {{ formatDate(detailData.planSupvDate, 'YYYY-MM-DD') }}
        </el-descriptions-item>
        <!--文件地址-->
        <el-descriptions-item label="监督对象类型" v-if="detailData.lineFilePath">
            {{
                supvTypeList.find(item => {
                    return item.id == detailData.supvObjType
                })?.name
            }}
        </el-descriptions-item>
        <el-descriptions-item label="监督对象名称">
            {{ detailData.supvObjName }}
        </el-descriptions-item>
        <el-descriptions-item label="监督对象电压等级">
            {{
                voltageLevelList.find(item => {
                    return item.id == detailData.objVoltageLevel
                })?.name
            }}
        </el-descriptions-item>
        <el-descriptions-item label="监督对象属性">
            {{
                objTypeList.find(item => {
                    return item.id == detailData.objType
                })?.name
            }}
        </el-descriptions-item>
        <el-descriptions-item label="监督对象属性名称">
            {{ detailData.objTypeName }}
        </el-descriptions-item>
        <el-descriptions-item label="监督对象协议容量(MVA)">
            {{ detailData.objCapacity }}
        </el-descriptions-item>
        <el-descriptions-item label="监督对象关联电站">
            {{ detailData.substationName }}
        </el-descriptions-item>
        <el-descriptions-item label="监督对象关联电站电压等级">
            {{
                voltageLevelList.find(item => {
                    return item.id == detailData.substationVoltageLevel
                })?.name
            }}
        </el-descriptions-item>
        <el-descriptions-item label="实施状态">
            {{
                effectStatusList.find(item => {
                    return item.id == detailData.effectStatus
                })?.name
            }}
        </el-descriptions-item>
        <el-descriptions-item label="开始实施时间">
            {{ detailData.effectStartTime }}
        </el-descriptions-item>
        <el-descriptions-item label="结束实施时间">
            {{ detailData.effectEndTime }}
        </el-descriptions-item>
        <el-descriptions-item label="报告出具时间">
            {{ detailData.reportIssueTime }}
        </el-descriptions-item>
        <el-descriptions-item label="电能质量问题发生时间">
            {{ detailData.problemOcTime }}
        </el-descriptions-item>
        <el-descriptions-item label="实施人员">
            {{
                effectUserIdList.find(item => {
                    return item.id == detailData.effectUserId
                })?.name
            }}
        </el-descriptions-item>
        <el-descriptions-item label="计划状态">
            {{
                planStatusList.find(item => {
                    return item.id == detailData.planStatus
                })?.name
            }}
        </el-descriptions-item>
        <el-descriptions-item label="其他要求">
            {{ detailData.otherRemark }}
        </el-descriptions-item>
        <el-descriptions-item label="盖章报告" v-if="detailData.factoryInspectionReport">
            <el-icon class="elView" v-if="detailData?.factoryInspectionReport.name ">
                <View @click="openFile(detailData?.factoryInspectionReport.name)" />
            </el-icon>
          <span  class="aLoad" @click="download(detailData?.factoryInspectionReport.keyName)">
                {{ detailData?.factoryInspectionReport.name }}
            </span >
        </el-descriptions-item>
        <el-descriptions-item label="佐证材料" v-if="detailData?.informationSecurityTestReport">
            <el-icon class="elView" v-if="detailData?.informationSecurityTestReport.name ">
                <View @click="openFile(detailData?.informationSecurityTestReport.name)" />
            </el-icon>
          <span  class="aLoad" @click="download(detailData?.informationSecurityTestReport.keyName)">
                {{ detailData?.informationSecurityTestReport.name }}
            </span >
        </el-descriptions-item>
        <el-descriptions-item label="计划变更材料" v-if="detailData?.otherAttachments">
            <el-icon class="elView" v-if="detailData?.otherAttachments.name ">
                <View @click="openFile(detailData?.otherAttachments.name)" />
            </el-icon>
          <span  class="aLoad" @click="download(detailData?.otherAttachments.keyName)">{{ detailData?.otherAttachments.name }}</span >
        </el-descriptions-item>
        <el-descriptions-item label="告预警单材料" v-if="detailData?.performanceTestReport">
            <el-icon class="elView" v-if="detailData?.performanceTestReport.name ">
                <View @click="openFile(detailData?.performanceTestReport.name)" />
            </el-icon>
          <span  class="aLoad" @click="download(detailData?.performanceTestReport.keyName)">{{ detailData?.performanceTestReport.name }}</span >
        </el-descriptions-item>
        <el-descriptions-item label="告预警单反馈材料" v-if="detailData?.typeExperimentReport">
            <el-icon class="elView" v-if="detailData?.typeExperimentReport.name ">
                <View @click="openFile(detailData?.typeExperimentReport.name)" />
            </el-icon>
          <span  class="aLoad" @click="download(detailData?.typeExperimentReport.keyName)">{{ detailData?.typeExperimentReport.name }}</span >
        </el-descriptions-item>
        <el-descriptions-item label="评估报告" v-if="detailData?.performanceTestReport">
            <el-icon class="elView" v-if="detailData?.performanceTestReport.name ">
                <View @click="openFile(detailData?.performanceTestReport.name)" />
            </el-icon>
          <span  class="aLoad" @click="download(detailData?.performanceTestReport.keyName)">{{ detailData?.performanceTestReport.name }}</span >
        </el-descriptions-item>
    </el-descriptions>
    </div>
</template>
<script lang="ts" setup>
import { onMounted, ref, reactive } from 'vue'
import { useRoute } from 'vue-router'
import { formatDate } from '@/utils/formatTime'
import { propTypes } from '@/utils/propTypes'
import { useDictData } from '@/stores/dictData'
import { getFileNameAndFilePath } from '@/api/system-boot/file'
import { getUserByDeptId, getPlanDetailsById } from '@/api/supervision-boot/plan/index'
import { Link, View } from '@element-plus/icons-vue'
import { useAdminInfo } from '@/stores/adminInfo'
import {download} from '@/utils/fileDownLoad'
defineOptions({ name: 'BpmUserReportDetail' })
const { query } = useRoute() // 查询参数
const props = defineProps({
    id: propTypes.string.def(undefined)
})

const detailLoading = ref(false) // 表单的加载中
const detailData = ref<any>({}) // 详情数据
const queryId = query.id as unknown as string // 从 URL 传递过来的 id 编号
const dictData = useDictData()
//字典获取监督类型
const supvTypeList = dictData.getBasicData('supv_type')
//字典获取监督阶段
const supvStageList = dictData.getBasicData('supv_stage')
//字典获取实施状态
const effectStatusList = dictData.getBasicData('effect_status')
//字典获取计划状态
const planStatusList = dictData.getBasicData('plan_status')
//监督对象类型
const objTypeList = [
    {
        id: '1',
        name: '在运站'
    },
    {
        id: '2',
        name: '新（改、扩）建站'
    }
]
//字典获取监测点电压等级
const voltageLevelList = dictData.getBasicData('Dev_Voltage_Stand')
//获取登陆用户姓名和部门
const adminInfo = useAdminInfo()
//根据当前登陆用户的部门id查询实施人员
const effectUserIdList = ref([])
const getEffectUserList = () => {
    getUserByDeptId({ deptId: adminInfo.$state.deptId }).then(res => {
        effectUserIdList.value = res.data
    })
}
getEffectUserList()
/** 获得数据 */
const getInfo = async () => {
    detailLoading.value = true
    console.log(props.id, queryId, '流程详情内部的id')
    try {
        await getPlanDetailsById({ id: props.id || queryId }).then(res => {
            detailData.value = res.data
            getFileName()
        })
    } finally {
        detailLoading.value = false
    }
}
const getFileName = async () => {
    //验收检验报告
    if (detailData.value.acceptanceInspectionReport) {
        await getFileNamePath(detailData.value.acceptanceInspectionReport, 'acceptanceInspectionReport')
    }
    //验收检验报告单
    if (detailData.value.acceptanceInspectionReportSingle) {
        await getFileNamePath(detailData.value.acceptanceInspectionReportSingle, 'acceptanceInspectionReportSingle')
    }
    //出厂检验报告
    if (detailData.value.factoryInspectionReport) {
        await getFileNamePath(detailData.value.factoryInspectionReport, 'factoryInspectionReport')
    }
    //信息安全检测报告
    if (detailData.value.informationSecurityTestReport) {
        await getFileNamePath(detailData.value.informationSecurityTestReport, 'informationSecurityTestReport')
    }
    //监测点台账信息
    if (detailData.value.lineFilePath) {
        await getFileNamePath(detailData.value.lineFilePath, 'lineFilePath')
    }
    //其他附件
    if (detailData.value.otherAttachments) {
        await getFileNamePath(detailData.value.otherAttachments, 'otherAttachments')
    }
}
//根据文件名请求
const getFileNamePath = async (val: any, pathName: any) => {
    await getFileNameAndFilePath({ filePath: val }).then(res => {
        if (res.data) {
            //可研报告
            if (pathName == 'acceptanceInspectionReport' && detailData.value.acceptanceInspectionReport) {
                detailData.value.acceptanceInspectionReport = {
                    name: res.data.fileName,
                    keyName:res.data.name,
                    url: res.data.url
                }
            }
            //终端台账信息
            else if (
                pathName == 'acceptanceInspectionReportSingle' &&
                detailData.value.acceptanceInspectionReportSingle
            ) {
                detailData.value.acceptanceInspectionReportSingle = {
                    name: res.data.fileName,
                    keyName:res.data.name,
                    url: res.data.url
                }
            }
            //预测评估报告
            else if (pathName == 'factoryInspectionReport' && detailData.value.factoryInspectionReport) {
                detailData.value.factoryInspectionReport = {
                    name: res.data.fileName,
                    keyName:res.data.name,
                    url: res.data.url
                }
            }
            //预测评估评审意见报告
            else if (pathName == 'informationSecurityTestReport' && detailData.value.informationSecurityTestReport) {
                detailData.value.informationSecurityTestReport = {
                    name: res.data.fileName,
                    keyName:res.data.name,
                    url: res.data.url
                }
            }
            //用户接入变电站主接线示意图
            else if (pathName == 'lineFilePath' && detailData.value.lineFilePath) {
                detailData.value.lineFilePath = {
                    name: res.data.fileName,
                    keyName:res.data.name,
                    url: res.data.url
                }
            }
            //主要敏感终端清单
            else if (pathName == 'otherAttachments' && detailData.value.otherAttachments) {
                detailData.value.otherAttachments = {
                    name: res.data.fileName,
                    keyName:res.data.name,
                    url: res.data.url
                }
            }
        }
    })
}

const openFile = (name: any) => {
    window.open(window.location.origin + '/#/previewFile?/supervision/' + name)
}
defineExpose({ open: getInfo }) // 提供 open 方法，用于打开弹窗
/** 初始化 **/
onMounted(() => {
    getInfo()
})
</script>
<style lang="scss">
.default-main {
    //   height: calc(100vh - 100px);
    overflow: auto;
}
::v-deep.el-icon svg {
    // margin: 5px !important;
    // position: absolute !important;
    // top: 20px !important;
}
.elView {
    cursor: pointer;
    margin-right: 10px;
}
</style>
