<template>
    <!--工作流view的路径：/pqs/supervise/retire/detail-->
    <div class='default-main'>
         <div v-if="detailLoading" class="loading">
            <el-spin description="加载中..." />
        </div>
        <div v-else>
        <!--        <h1>详细信息回显</h1>-->
        <el-descriptions :column='2' border>
            <el-descriptions-item label='供电公司'>
                {{ detailData.gdName }}
            </el-descriptions-item>
            <el-descriptions-item label='变电站'>
                {{ detailData.subName }}
            </el-descriptions-item>
            <template v-if='detailData.deviceType == 1'>
                <el-descriptions-item label='终端终端' :span='2'>
                    {{ detailData.deviceName }}
                </el-descriptions-item>
            </template>
            <template v-else>
                <el-descriptions-item label='母线'>
                    {{ detailData.volName }}
                </el-descriptions-item>
                <el-descriptions-item label='监测点'>
                    {{ detailData.deviceName }}
                </el-descriptions-item>
            </template>
            <!--      <el-descriptions-item label='当前状态'>-->
            <!--        <el-tag :type='getDeviceStatusType(detailData.deviceStatus)'>-->
            <!--          {{ getDeviceStatus(detailData.deviceStatus) }}-->
            <!--        </el-tag>-->
            <!--      </el-descriptions-item>-->
            <el-descriptions-item label='变更前状态'>
                <el-tag :type='getDeviceStatusType(detailData.devOriginalStatus)'>
                    {{ getDeviceStatus(detailData.devOriginalStatus) }}
                </el-tag>
            </el-descriptions-item>
            <el-descriptions-item label='目标状态'>
                <el-tag :type='getDeviceStatusType(detailData.devStatus)'>
                    {{ getDeviceStatus(detailData.devStatus) }}
                </el-tag>
            </el-descriptions-item>
            <el-descriptions-item :span='2' label='变更原因'>
                {{ detailData.propertyNo }}
            </el-descriptions-item>
        </el-descriptions>
        </div>
    </div>
</template>
<script setup lang='ts'>
import { onMounted, ref } from 'vue'
import { useRoute } from 'vue-router'
import { propTypes } from '@/utils/propTypes'
import { getRunningDeviceById } from '@/api/supervision-boot/device/quitRunningDev'

defineOptions({ name: 'QuitRunningDeviceDetail' })
const { query } = useRoute() // 查询参数

const props = defineProps({
    id: propTypes.string.def(undefined)
})
const detailLoading = ref(false) // 表单的加载中
const detailData = ref({}) // 详情数据
const queryId = query.id// 从 URL 传递过来的 id 编号
const getDeviceStatus = (status: number) => {
    if (status === 0) {
        return '运行'
    }
    if (status === 1) {
        return '检修'
    }
    if (status === 2) {
        return '停运'
    }
    if (status === 3) {
        return '调试'
    }
    if (status === 4) {
        return '退运'
    }
    return '运行'
}

const getDeviceStatusType = (status: number) => {
    if (status === 0) {
        return 'success'
    }
    if (status === 1) {
        return 'warning'
    }
    if (status === 2) {
        return 'danger'
    }
    if (status === 3) {
        return 'warning'
    }
    if (status === 4) {
        return 'info'
    }
    return 'success'
}

/** 获得数据 */
const getInfo = async () => {
    detailLoading.value = true
    try {
        await getRunningDeviceById(props.id || queryId).then(res => {
            detailData.value = res.data
        })
    } finally {
        detailLoading.value = false
    }
}
defineExpose({ open: getInfo }) // 提供 open 方法，用于打开弹窗

/** 初始化 **/
onMounted(() => {
    getInfo()
})

</script>