<template>
  <div class='default-main'>
     <div v-if="detailLoading" class="loading">
            <el-spin description="加载中..." />
        </div>
        <div v-else>
    <el-descriptions :column='2' label-width="140px" border>
      <el-descriptions-item label='技术监督计划名称'>
        {{ detailData?.planName }}
      </el-descriptions-item>
      <el-descriptions-item label='普测负责单位'>
        {{ detailData?.deptName }}
      </el-descriptions-item>
      <el-descriptions-item label='监督类型'>
        {{  
          supvTypeList.find(item => {
            return item.id == detailData?.supvType
          })?.name
        }}
      </el-descriptions-item>
      <el-descriptions-item label='监督对象名称'>
        {{ detailData?.supvObjectName }}
      </el-descriptions-item>

      <el-descriptions-item label='计划开始时间'>
        {{ detailData?.planStartTime }}
      </el-descriptions-item>
      <el-descriptions-item label='计划结束时间'>
        {{ detailData?.planEndTime }}
      </el-descriptions-item>
      <el-descriptions-item label='流程状态'>
        <el-tag :type='getDeviceStatusType(detailData?.status)'>
          {{ getDeviceStatus(detailData?.status) }}
        </el-tag>
      </el-descriptions-item>
    </el-descriptions>
    <div style='height: 300px'>
      <vxe-table
          v-bind='defaultAttribute'
          ref='vxeRef'
          class='mt10'
          height='auto'
          :data='detailData?.surveySubstationList'
      >
        <vxe-column field='substationName' title='变电站名称'></vxe-column>
        <vxe-column field='voltageLevel' title='变电站电压等级'></vxe-column>
        <vxe-column field='dataSource' title='变电站来源' :formatter='formatterSource'></vxe-column>
      </vxe-table>
    </div>
    </div>
  </div>
</template>
<script setup lang='ts'>
import { onMounted, ref } from 'vue'

defineOptions({ name: 'QuitRunningDeviceDetail' })
import { propTypes } from '@/utils/propTypes'
import { defaultAttribute } from '@/components/table/defaultAttribute'
import { useDictData } from '@/stores/dictData'
import { getPlanById } from '@/api/supervision-boot/survey/plan'
const openFile = (name:any) => {
    window.open(window.location.origin + '/#/previewFile?'+name)
}
const { query } = useRoute() // 查询参数
const props = defineProps({
  id: propTypes.string.def(undefined)
})
const dictData = useDictData()
const detailLoading = ref(false) // 表单的加载中
const detailData: any = ref({}) // 详情数据
const supvTypeList = dictData.getBasicData('supv_type')
const queryId = query.id // 从 URL 传递过来的 id 编号

/** 获得数据 */
const getInfo = async () => {
  detailLoading.value = true
  try {
    await getPlanById(props.id || queryId).then(res => {
      detailData.value = res.data
    })
  } finally {
    detailLoading.value = false
  }
}

const getDeviceStatus = (status: number) => {
  if (status === 1) {
    return '审批中'
  }
  if (status === 2) {
    return '审批通过'
  }
  if (status === 3) {
    return '审批不通过'
  }
  if (status === 4) {
    return '已取消'
  }
  return '审批通过'
}

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


const formatterSource = (row: any) => {
  if (row.column.field == 'dataSource') {
    if (row.cellValue == 0) {
      return '系统内台账变电站'
    } else {
      return '自定义变电站'
    }
  } else {
    return row.cellValue
  }
}


defineExpose({ open: getInfo }) // 提供 open 方法，用于打开弹窗

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