<!--
  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 { getPipelineDetail } from '@/api/home/pipeline/pipeline'
const $router = useRouter()
const $route = useRoute()
// 页面详情数据
const detailInfo = ref<{ [key: string]: string }>({})
// 描述列表数据
const descriptionsList = ref([
  {
    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: 'area',
    align: 'center',
  },
  {
    text: '详细位置',
    value: 'position',
    align: 'center',
  },
  {
    text: '经度',
    value: 'lngGaode',
    align: 'center',
  },
  {
    text: '纬度',
    value: 'latGaode',
    align: 'center',
  },
  {
    text: '关联管线',
    value: 'manageType',
    align: 'center',
  },
  {
    text: '管理方式',
    value: 'manageType',
    align: 'center',
  },
  {
    text: '管径(mm)',
    value: 'pipeDiameter',
    align: 'center',
  },
  {
    text: '压力级制',
    value: 'pressType',
    align: 'center',
  },
  {
    text: '建设年代',
    value: 'constructEra',
    align: 'center',
  },
  {
    text: '管线材质',
    value: 'material',
    align: 'center',
  },
  // {
  //   text: '负责人',
  //   value: 'marker',
  //   align: 'center',
  // },
  // {
  //   text: '负责人联系方式',
  //   value: 'marker',
  //   align: 'center',
  // },
  {
    text: '设备在用状态',
    value: 'onState',
    align: 'center',
  },
  {
    text: '设备运行状态',
    value: 'status',
    align: 'center',
  },
])

// 页面loading
const loading = ref(false)
// 获取闸井详情数据
const fetchWellDetail = () => {
  loading.value = true
  // 设备在用情况
  // getDictByCode('useStatus').then((res1) => {
  // const data = JSON.parse($route.query.row as string)
  // detailInfo.value = data
  getPipelineDetail({
    id: $route.query.id,
    devcode: $route.query.deviceCode,
  }).then((res) => {
    detailInfo.value = res.data
    loading.value = false
    if (res.data.typeName === '智能警示桩' || res.data.typeName === '燃气监测桩') {
      descriptionsList.value.push({
        text: '左侧指示带长度',
        value: 'leftLength',
        align: 'center',
      })
      descriptionsList.value.push({
        text: '右侧指示带长度',
        value: 'rightLength',
        align: 'center',
      })
    }
  }).catch(() => {
    loading.value = false
  })
  // }).catch(() => {
  //   loading.value = false
  // })
}
// 点击经纬度展示地图
const mapRef = ref()
const showMap = (data: any) => {
  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 === '详细位置' ? 'pointer' : ''}`" @click="showMap(item)">
            {{ detailInfo[item.value] || '' }}
          </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 {
  &:hover {
    cursor: pointer;
  }
}
</style>