<!--
  Description: 管线监测-详情
  Author: 李亚光
  Date: 2023-09-09
 -->
 <script lang="ts" setup name="WellDetail">
 import { ElMessage } from 'element-plus'
 import detailData from './detailData.vue'
 import { getDictByCode } from '@/api/system/dict'
 import showPosition from '@/views/home/device/device/components/showPosition.vue'
import { getTemporaryDetail } from '@/api/home/temporary/temporary'
import dayjs from 'dayjs'
 const $router = useRouter()
 const $route = useRoute()
 // 页面详情数据
 const detailInfo = ref<{ [key: string]: string }>({})
 // 描述列表数据
 const descriptionsList = ref([
 {
    text: '监测点编号',
    value: 'tagNumber',
    align: 'center'
  },
  {
    text: '监测点类型',
    value: 'locationCategoryName',
    align: 'center'
  },
  {
    text: '设备编号',
    value: 'devcode',
    align: 'center'
  },
  {
    text: '厂商',
    value: 'manufactureName',
    align: 'center'
  },

  //  {
  //    text: '安装位号',
  //    value: 'tagNumber',
  //    align: 'center',
  //  },
  //  {
  //    text: '设备编号',
  //    value: 'devcode',
  //    align: 'center',
  //  },
   {
     text: '设备类型',
     value: 'typeName',
     align: 'center',
   },
   {
     text: '设备型号',
     value: 'modelName',
     align: 'center',
   },
  //  {
  //    text: '厂商',
  //    value: 'manufactureName',
  //    align: 'center',
  //  },
   {
     text: '管理单位',
     value: 'deptName',
     align: 'center',
   },
   {
     text: '安装日期',
     value: 'installDate',
     align: 'center',
   },
   {
     text: '所在区域',
     value: 'area',
     align: 'center',
   },
   {
     text: '详细位置',
     value: 'position',
     align: 'center',
   },
   {
     text: '经度',
     value: 'lngGaode',
     align: 'center',
   },
   {
     text: '纬度',
     value: 'latGaode',
     align: 'center',
   },
   {
     text: '设备在用状态',
     value: 'onState',
     align: 'center',
   },
   {
     text: '监控状态',
     value: 'monitorStateName',
     align: 'center',
   },
 ])
 const showDeviceTips = ref(false) // 展示设备编号提示
 // 页面loading
 const loading = ref(false)
 // 获取闸井详情数据
 const fetchWellDetail = async () => {
  const res = await getDictByCode('locationType')
  const locationTypeList = res.data
   loading.value = true
   // 设备在用情况
   // getDictByCode('useStatus').then((res1) => {
   // const data = JSON.parse($route.query.row as string)
   // detailInfo.value = data
   getTemporaryDetail({
     id: $route.query.id,
     devcode: $route.query.deviceCode,
   }).then((res) => {
     detailInfo.value = res.data
     // 处理所在区域字段
     if(detailInfo.value.area && window.localStorage.getItem('areaCode')) {
        const areaCode = JSON.parse(localStorage.getItem('areaCode') as string)
        detailInfo.value.area = areaCode[detailInfo.value.area] ? areaCode[detailInfo.value.area] : '其他'
     }
     loading.value = false
     if (detailInfo.value.typeName && detailInfo.value.manufactureName) {
       showDeviceTips.value = true
     }
     if (res.data.typeName === '智能警示桩' || res.data.typeName === '燃气监测桩') {
       descriptionsList.value.push({
         text: '左侧指示带长度',
         value: 'leftLength',
         align: 'center',
       })
       descriptionsList.value.push({
         text: '右侧指示带长度',
         value: 'rightLength',
         align: 'center',
       })
     }
     if(res.data.locationCategory) {
      detailInfo.value.locationCategoryName = locationTypeList.filter(citem => citem.value === res.data.locationCategory)[0]?.name || ''
     }
     if(res.data.installDate) {
      detailInfo.value.installDate = dayjs(res.data.installDate).format('YYYY-MM-DD')
     }
   }).catch(() => {
     loading.value = false
   })
   // }).catch(() => {
   //   loading.value = false
   // })
 }
 // 点击经纬度展示地图
 const mapRef = ref()
 const showMap = (data: any) => {
   if (data.text === '设备编号') {
     if (!detailInfo.value.devcode || !detailInfo.value.typeName) {
       ElMessage.warning('缺少设备关键信息')
       return
     }
     $router.push({
       name: 'DeviceManageDetail',
       params: {
         type: 'detail',
       },
       query: {
         row: JSON.stringify({
           devcode: detailInfo.value.devcode,
           deviceType: detailInfo.value.typeName,
           deviceTypeName: detailInfo.value.typeName,
           devTypeName: detailInfo.value.typeName,
         }),
       },
     })
     return
   }
   if (data.text !== '详细位置' || !detailInfo.value[data.value]) {
     return
   }
   if (!detailInfo.value.lngGaode || !detailInfo.value.latGaode) {
     ElMessage.warning('该数据缺少坐标信息')
     return
   }
   mapRef.value.initDialog([detailInfo.value.lngGaode, detailInfo.value.latGaode])
 }
 onMounted(() => {
   fetchWellDetail()
 })
 </script>

 <template>
   <!-- 布局 -->
   <app-container v-loading="loading" class="container">
     <show-position ref="mapRef" />
     <!-- <detail-page title="管线监测详情">
       <template #btns>
         <el-button type="info" @click="$router.back()">
           关闭
         </el-button>
       </template>
 </detail-page> -->
     <detail-block-com>
       <el-descriptions :column="2" border>
         <el-descriptions-item v-for="item in descriptionsList" :key="item.text" :align="item.align">
           <template #label>
             <span class="label">
               {{ item.text }}
             </span>
           </template>
           <span :class="`${item.text === '详细位置' || item.text === '设备编号' ? 'pointer' : ''}`" @click="showMap(item)">
             <el-tooltip v-if="showDeviceTips && item.text === '设备编号'" class="box-item" effect="dark"
               :content="`${detailInfo.typeName}(${detailInfo.manufactureName})`" placement="top">
               {{ detailInfo[item.value] || '' }}
             </el-tooltip>
            <template v-else> {{ detailInfo[item.value] || '' }}</template>
           </span>
         </el-descriptions-item>
       </el-descriptions>
     </detail-block-com>
     <detail-block-com>
       <detail-data />
     </detail-block-com>
   </app-container>
 </template>

 <style lang="scss" scoped>
 ::v-deep(.el-descriptions__label) {
   width: 15%;
 }

 ::v-deep(.el-descriptions__content) {
   width: 35%;
 }

 .pointer {
   color: #0d76d4;

   &:hover {
     cursor: pointer;
   }
 }
 </style>