<!--
  Description: 设备管理-详情
  Author: 李亚光
  Date: 2023-09-03
 -->
<script lang="ts" setup name="WellDetail">
import dayjs from 'dayjs'
import { ElMessage } from 'element-plus'
import detailData from './detailData.vue'
import showPosition from './showPosition.vue'
import { getDeviceTypeListPage } from '@/api/home/device/type'
import { getDeviceListPage } from '@/api/home/device/device'
const $router = useRouter()
const $route = useRoute()
// 页面详情数据
const detailInfo = ref<{ [key: string]: string }>({})
// 描述列表数据
const descriptionsList = ref([
  {
    text: '设备编号',
    value: 'devcode',
    align: 'center',
  },
  {
    text: '设备类型',
    value: 'deviceTypeName',
    align: 'center',
  },
  {
    text: '设备型号',
    value: 'deviceModel',
    align: 'center',
  },
  {
    text: '设备厂商',
    value: 'manufactureName',
    align: 'center',
  },
  {
    text: '安装位号',
    value: 'tagNumber',
    align: 'center',
  },
  {
    text: '管理单位',
    value: 'deptName',
    align: 'center',
  },
  {
    text: '详细位置',
    value: 'position',
    align: 'center',
  },
  {
    text: '经纬度',
    value: 'lnglat',
    align: 'center',
  },
  {
    text: '安装日期',
    value: 'installDate',
    align: 'center',
  },
  {
    text: '在用状态',
    value: 'validName',
    align: 'center',
  },
])

// 页面loading
const loading = ref(true)
// 获取闸井详情数据
const fetchWellDetail = () => {
  loading.value = true
  getDeviceTypeListPage({ offset: 1, limit: 99999 }).then(async (res) => {
    try {
      const row = await getDeviceListPage({ offset: 1, limit: 999, devCode: JSON.parse($route.query.row as string).devcode })
      detailInfo.value = row.data.rows[0] || {}
      detailInfo.value.installDate = row.data.rows[0]?.installDate ? dayjs(row.data.rows[0]?.installDate || '').format('YYYY-MM-DD') : ''

      detailInfo.value.lnglat = detailInfo.value.lng ? `${detailInfo.value.lng},${detailInfo.value.lat}` : ''
      detailInfo.value.deviceTypeName = res.data.rows.filter((item: any) => item.id === detailInfo.value.deviceType)[0]?.typeName || detailInfo.value.devTypeName || ''
      loading.value = false
      if (detailInfo.value.deviceTypeName === '燃气监测桩' || detailInfo.value.deviceTypeName === '智能警示桩') {
        descriptionsList.value.push(
          {
            text: '左侧指示带长度',
            value: 'leftLength',
            align: 'center',
          },
        )
        descriptionsList.value.push(
          {
            text: '右侧指示带长度',
            value: 'rightLength',
            align: 'center',
          },
        )
      }
      descriptionsList.value.push(
        {
          text: '备注',
          value: 'remark',
          align: 'center',
        })
    }
    catch (err) {
      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.lng || !detailInfo.value.lat) {
    ElMessage.warning('该数据缺少坐标信息')
    return
  }
  mapRef.value.initDialog([detailInfo.value.lng, detailInfo.value.lat])
}
onMounted(() => {
  fetchWellDetail()
})
</script>

<template>
  <!-- 布局 -->
  <app-container v-loading="loading" class="container">
    <!-- 地图展示位置弹窗 -->
    <show-position ref="mapRef" />
    <detail-block-com>
      <div style="display: flex;width: 100%;justify-content: space-between;">
        <div style="width: 75%;">
          <detail-data />
        </div>
        <div style="width: 24%;padding-top: 40px;">
          <el-descriptions :column="1" 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>
        </div>
      </div>
    </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>