<!-- 点位详情 -->
<script name="LocateInfoDetail" lang="ts" setup>
import { ElMessage, ElMessageBox } from 'element-plus'
import type { IDictType } from '../common-interface'
import type { IDeviceInfo } from '../device/device-info'
import type { ILocateInfo } from './locate-info'
import type { TableColumn } from '@/components/NormalTable/table_interface'
import { getDeviceListPage } from '@/api/basic/device'
import { findDictNameByCode } from '@/utils/composables/useDictCheck'

// 从路由中传过来的参数
const type = ref<string>('')
const id = ref<string>('')

const route = useRoute()
const router = useRouter()
const title = ref('')

const basicFormRef = ref()

const locateInfo = ref<ILocateInfo>({
  id: '',
  wellCode: '',
  wellName: '',
  wellType: '',
  wellTypeName: '',
  area: '',
  bfzt: '',
  coordinateX: '',
  coordinateY: '',
  deep: '',
  deptid: '',
  deptName: '',
  latBaidu: '',
  latGaode: '',
  lngBaidu: '',
  lngGaode: '',
  notes: '',
  photos: '',
  position: '',
  responsibleDept: '',
  responsibleDeptName: '',
  staff: '',
  tel: '',
  ts: '',
})

const bfztDict = ref<Array<IDictType>>([])

const deviceList = ref<Array<IDeviceInfo>>([])
// 表头
const devColumns = ref<TableColumn[]>([
  { text: '状态', value: 'onlineStateName', align: 'center', width: '100' },
  { text: '设备编号', value: 'devcode', align: 'center', width: '200' },
  { text: '监测类型', value: 'watchType', align: 'center', width: '200' },
  { text: '设备类型', value: 'deviceTypeName', align: 'center', width: '200' },
  { text: '设备型号', value: 'modelName', align: 'center', width: '200' },
  { text: '安装时间', value: 'installDate', align: 'center', width: '200' },
  { text: '最新数据', value: 'latestData', align: 'center' },
  { text: '最新上线时间', value: 'latestTime', align: 'center', width: '200' },
])

// 逻辑
const resetForm = () => {
  sessionStorage.removeItem('locateInfo')
  router.go(-1)
}

const getDeviceListByLocate = () => {
  getDeviceListPage({ keywords: locateInfo.value.wellCode, limit: 100, offset: 1 }).then((res) => {
    if (res.code === 200) {
      deviceList.value = res.data.rows
    }
  })
}

const getBfztDict = async () => {
  if (sessionStorage.getItem('bfzt') !== undefined && sessionStorage.getItem('bfzt') !== '') {
    bfztDict.value = JSON.parse(sessionStorage.getItem('bfzt')!)
  }
}

const initDialog = (params: any) => {
  // 从路由中获取参数
  type.value = params.type
  id.value = params.id !== undefined ? params.id : ''

  switch (params.type) {
    case 'detail':
      title.value = '点位详情'
      id.value = params.id

      // 点位基本信息
      locateInfo.value = JSON.parse(sessionStorage.getItem('locateInfo')!)

      // 点位关联的设备列表
      getDeviceListByLocate()

      break
    default:
      title.value = ''
      break
  }
}

onMounted(async () => {
  getBfztDict()
  initDialog(route.query)
})
</script>

<template>
  <app-container>
    <detail-page :title="`${title}`">
      <template #btns>
        <el-button type="info" @click="resetForm()">
          关闭
        </el-button>
      </template>

      <el-form ref="basicFormRef" :model="locateInfo" label-position="right" label-width="110px" stripe>
        <el-row :gutter="24">
          <!-- 第一行 第一列 -->
          <el-col :span="6">
            <el-form-item label="点位编号：">
              {{ locateInfo.wellCode }}
            </el-form-item>
            <el-form-item label="权属单位：">
              {{ locateInfo.deptName }}
            </el-form-item>
          </el-col>

          <!-- 第一行 第二列 -->
          <el-col :span="6">
            <el-form-item label="点位名称：">
              {{ locateInfo.wellName }}
            </el-form-item>

            <el-form-item label="维护单位：">
              {{ locateInfo.responsibleDeptName }}
            </el-form-item>
          </el-col>

          <!-- 第一行 第三列 -->
          <el-col :span="6">
            <el-form-item label="点位类型：">
              {{ locateInfo.wellTypeName }}
            </el-form-item>

            <el-form-item label="联系人">
              {{ locateInfo.staff }}
            </el-form-item>
          </el-col>

          <!-- 第一行 第四列 -->
          <el-col :span="6">
            <el-form-item label="布防状态：">
              {{ findDictNameByCode(locateInfo.bfzt!, bfztDict) }}
            </el-form-item>

            <el-form-item label="联系电话">
              {{ locateInfo.tel }}
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="24">
          <el-col :span="18">
            <el-form-item label="详细位置">
              {{ locateInfo.position }}
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </detail-page>

    <table-container title="关联设备列表">
      <!-- 表格区域 -->
      <normal-table
        :data="deviceList" :columns="devColumns"
        :pagination="false"
        :is-showmulti-select="type !== 'detail'"
      >
        <template #preColumns>
          <el-table-column label="序号" width="55" align="center">
            <template #default="scope">
              {{ scope.$index + 1 }}
            </template>
          </el-table-column>
        </template>
      </normal-table>
    </table-container>
  </app-container>
</template>