<!--
  Description: 放外力破坏监测
  Author: 李亚光
  Date: 2025-03-25
 -->
 <script lang="ts" setup name="ForceMonitor">
 import { ElMessage, ElMessageBox } from 'element-plus'
 import { ArrowUpBold } from '@element-plus/icons-vue'
 import { getDictByCode } from '@/api/system/dict'
 import { keepSearchParams } from '@/utils/keepQuery'
 import MapCom from './components/map.vue'
 import { indexDBHandler } from '@/utils/sessionData'
 import indexDB from '@/utils/indexDB'
 import { treeToArr } from '@/utils/structure'

 // 表格标识  地图或普通
 const mapRef = ref()
 const tableFlag = ref('map')
 const mapLoading = ref(false)
 const mapLoaded = ref(true)
 const cache = ref('')

 // 表格数据
 const list = ref([])
 const total = ref(0)
 const deptRef = ref()
 // 地图数据
 const mapList = ref([])
 const mapAllList = ref([])
 const tableHeight = ref(window.innerHeight - 60 - 50 - 10 - 350 - 98 - 10 - 52 - 10)
 const cacheRow = ref<any>({})

 // 初始展示列
 const columns = ref<any>([
   { text: '位号', value: '', align: 'center' },
   { text: '设备编号', value: '', align: 'center' },
   { text: '设备类型', value: '', align: 'center' },
   { text: '详细位置', value: '', align: 'center' },
   { text: '管理单位', value: '', align: 'center' },
   { text: '监控状态', value: '', align: 'center' },
   { text: '电量', value: '', align: 'center' },
   { text: '最新时间', value: '', align: 'center' },
 ])
 // 最终展示列
 const columnsConfig = ref([])
 // 修改列
 const editColumns = (data: any) => {
   columnsConfig.value = data
 }
 const loadingTable = ref(false)
 //  查询条件
 const listQuery = ref({
   limit: 5,
   offset: 1,
   monitor: '',
   tagName: '',
   deptId: '',
   montorStatus: '',
   tagNumber: '',
   code: '',
   propertyOwner: '', // 产权单位
   manageType: '', // 管理方式
 } as { [key: string]: string | number })

 // 查询数据
 const fetchData = () => {
   // loadingTable.value = true
   // mapLoading.value = true
   // // 判断是否有查询条件(是地图展示20条  否地图展示所有)
   // const queryList = [] as Boolean[] // 长度大于2 即为是
   // for (const i in listQuery.value) {
   //   if (listQuery.value[i]) {
   //     queryList.push(true)
   //   }
   // }
   // if (queryList.length === 2) {
   //   mapLoading.value = false
   // if(mapAllList.value.length) {
   //     mapList.value = JSON.parse(JSON.stringify(mapAllList.value))
   //     setTimeout(() => {
   //     if (tableFlag.value === 'map') {
   //       mapRef.value?.resetDraw()
   //       mapRef.value?.resetDrawLine()
   //     }
   //     // mapLoading.value = false
   //   }, 500)
   //   }
   // }
   // getWellListPage(listQuery.value).then((res) => {
   //   list.value = res.data.rows.map((item: any) => ({ ...item, bfztName: item.bfzt === '1' ? '布防' : '撤防' }))
   //   total.value = res.data.total
   //   loadingTable.value = false
   //   if (tableFlag.value === 'normal') {
   //     tableHeight.value = list.value.length >= 15 ? window.innerHeight - 60 - 50 - 10 - 98 - 10 - 52 - 20 : list.value.length * 40 + 40
   //   }
   // }).catch(() => {
   //   loadingTable.value = false
   //   mapLoading.value = false
   // })
   // if (queryList.length > 2) {
   //   mapLoading.value = true
   //   mapList.value = mapAllList.value
   //   // 找查询条件
   //   for (const i in listQuery.value) {
   //     if (i !== 'limit' && i !== 'offset') {
   //       // 找出有值的查询条件
   //       if (listQuery.value[i]) {
   //         // 安装位号
   //         if (i === 'tagNumber') {
   //           mapList.value = mapList.value.filter((item: any) => item.tagNumber.includes(listQuery.value[i]))
   //         }
   //         // 闸井编号
   //         if (i === 'ledgerCode') {
   //           mapList.value = mapList.value.filter((item: any) => item.ledgerCode.includes(listQuery.value[i]))
   //         }
   //         // 闸井名称
   //         if (i === 'ledgerName') {
   //           mapList.value = mapList.value.filter((item: any) => item.ledgerName.includes(listQuery.value[i]))
   //         }
   //         // 管理单位
   //         if (i === 'deptid') {
   //           // 找到当前选择的单位，判断当前单位是否含有子单位
   //           const data = deptRef.value.fetchDeptTree()
   //           if (data.length) {
   //             const res = deptRef.value.findAllChildren(listQuery.value[i])
   //             const result = treeToArr(res).map((item: any) => item.id)
   //             result.push(listQuery.value[i])
   //             mapList.value = mapList.value.filter((item: any) => result.some(citem => citem === item.deptid))
   //           }
   //         }
   //         // 产权单位
   //         if (i === 'propertyOwner') {
   //           mapList.value = mapList.value.filter((item: any) => item.propertyOwner.includes(listQuery.value[i]))
   //         }
   //         // 管理方式
   //         if (i === 'manageType') {
   //           mapList.value = mapList.value.filter((item: any) => item.manageType === (listQuery.value[i]))
   //         }
   //         // 使用状态
   //         if (i === 'onState') {
   //           mapList.value = mapList.value.filter((item: any) => item.onState === (listQuery.value[i]))
   //         }
   //         // 监控状态
   //         if (i === 'monitorState') {
   //           mapList.value = mapList.value.filter((item: any) => item.monitorState === (listQuery.value[i]))
   //         }
   //         // 标签
   //         if (i === 'marker') {
   //           mapList.value = mapList.value.filter((item: any) => item.marker.includes(listQuery.value[i]))
   //         }
   //       }
   //     }
   //   }
   //   setTimeout(() => {
   //     if (tableFlag.value === 'map') {
   //       mapRef.value?.resetDraw()
   //     }
   //     mapLoading.value = false
   //   }, 500)

   // }
   // if (queryList.length > 2 || !mapLoaded.value) { return }
   // // 获取地图全部数据
   // mapLoading.value = true
   // if (mapAllList.value.length) {
   //   mapList.value = mapAllList.value
   //   mapLoading.value = false
   //   setTimeout(() => {
   //     if (tableFlag.value === 'map') {
   //       mapRef.value?.resetDraw()
   //     }
   //   }, 500)
   //   return
   // }
   // const fetch = () => {
   //   getWellList(listQuery.value).then((res) => {
   //     mapList.value = res.data
   //     mapAllList.value = JSON.parse(JSON.stringify(res.data))
   //     indexDBHandler('all-well-list', JSON.stringify(res.data))
   //     mapLoaded.value = false
   //     setTimeout(() => {
   //       if (tableFlag.value === 'map') {
   //         mapRef.value?.resetDraw()
   //       }
   //       mapLoading.value = false
   //     }, 500)
   //   }).catch(() => {
   //     mapLoading.value = false
   //   })
   // }
   // // 先判断缓存中是否含有
   // indexDB.getAll().then(allData => {
   //   if (allData.filter((item: any) => item.name === 'all-leakage-list').length) {
   //     mapList.value = JSON.parse(allData.filter((item: any) => item.name === 'all-leakage-list')[0].data)
   //     mapAllList.value = JSON.parse(allData.filter((item: any) => item.name === 'all-leakage-list')[0].data)
   //     setTimeout(() => {
   //       if (tableFlag.value === 'map') {
   //         mapRef.value?.resetDraw()
   //       }
   //       mapLoading.value = false
   //       mapLoaded.value = false
   //     }, 2000)
   //   }
   //   else {
   //     fetch()
   //   }
   // })
 }
 // 重置查询条件
 const reset = () => {
   mapLoaded.value = true
   listQuery.value = {
     limit: 5,
     offset: 1,
     monitor: '',
     tagName: '',
     deptId: '',
     montorStatus: '',
     tagNumber: '',
     code: '',
     propertyOwner: '', // 产权单位
     manageType: '', // 管理方式
   }
   fetchData()
   if (mapAllList.value.length) {
     mapList.value = mapAllList.value
     setTimeout(() => {
       mapRef.value?.resetDraw()
     }, 500);
   }
 }
 // 页数发生变化后的操作，可能是页码变化，可能是每页容量变化，此函数必写
 const changePage = (val: { size: number; page: number }) => {
   if (val && val.size) {
     listQuery.value.limit = val.size
   }
   if (val && val.page) {
     listQuery.value.offset = val.page
   }
   fetchData()
 }
 // 获取字典
 const manageTypeList = ref<{ id: string; name: string; value: string }[]>([]) // 管理方式
 const fetchDict = () => {
   // 管理方式
   getDictByCode('manageType').then((res) => {
     manageTypeList.value = res.data
   })
 }
 // 切换地图标识
 const switchMode = (type: string) => {
   tableFlag.value = type
 }
 // 点击数据行
 const rowClick = (data: any) => {
   if (tableFlag.value === 'normal') { return }
   if (!data.lngGaode || !data.latGaode) {
     ElMessage.warning('该数据缺少坐标信息')
     return
   }
   cacheRow.value = data
   // mapRef.value.map.setZoom(15)
   // 打开地图弹窗
   mapRef.value.openInfoDetail({
     lnglat: [data.lngGaode, data.latGaode],
     id: data.id,
     name: data.ledgerName,
     row: data,
   })
 }
 // 查看/编辑
 const $router = useRouter()
 const editRef = ref()
 const editRow = (type: string, row: any) => {
   // $router.push({
   //   path: `/well/${type}`,
   //   query: {
   //     id: row.id,
   //     row: JSON.stringify(row),
   //   },
   // })
 }
 // 表格高度
 window.addEventListener('resize', () => {
   if (tableFlag.value === 'map') {
     tableHeight.value = window.innerHeight - 60 - 50 - 10 - 350 - 98 - 10 - 52 - 20
   }
   else {
     tableHeight.value = list.value.length >= 15 ? window.innerHeight - 60 - 50 - 10 - 98 - 10 - 52 - 20 : list.value.length * 40 + 40
   }
 })
 onBeforeUnmount(() => {
   window.addEventListener('resize', () => { })
 })
 // 监听地图高度
 const observer = ref()
 const watchMapHeight = () => {
   // 创建一个ResizeObserver实例
   observer.value = new ResizeObserver((entries: any) => {
     for (const entry of entries) {
       // 获取div元素的新高度
       const newHeight = entry.contentRect.height
       // 执行相应的操作，比如更新UI或调用其他函数
       // console.log(`元素新高度为:${newHeight}`)
       const map = document.getElementById('map') as HTMLElement
       if (!map) {
         return
       }
       // if(map) {
       map.style.height = `${newHeight}px`
       // }
       if (newHeight < 350) {
         if (tableFlag.value === 'map') {
           tableHeight.value = window.innerHeight - 60 - 50 - 10 - 350 - 98 - 10 - 52 - 10 + (350 - newHeight)
         }
         else {
           // tableHeight.value = null
           tableHeight.value = list.value.length >= 15 ? window.innerHeight - 60 - 50 - 10 - 98 - 10 - 52 - 20 : list.value.length * 40 + 40
         }

       }
     }
   })
   // 监听目标div元素的宽度变化
   const targetDiv = document.getElementById('map-container-height') as Element
   observer.value.observe(targetDiv)
 }
 watch(() => tableFlag.value, (newVal) => {
   if (newVal === 'map') {
     tableHeight.value = window.innerHeight - 60 - 50 - 10 - 350 - 98 - 10 - 52 - 10
     setTimeout(() => {
       watchMapHeight()
     })
   }
   else if (newVal === 'normal') {
     // tableHeight.value = null
     tableHeight.value = list.value.length >= 15 ? window.innerHeight - 60 - 50 - 10 - 98 - 10 - 52 - 20 : list.value.length * 40 + 40
   }
 })
 onMounted(() => {
   fetchDict()
   fetchData()
   watchMapHeight()
   switchMode('table')
   setTimeout(() => {
     switchMode('map')
   })
 })
 const { proxy } = getCurrentInstance() as any
 onBeforeRouteLeave((to: any) => {
   keepSearchParams(to.path, 'ForceMonitor')
   cache.value = tableFlag.value
   // 销毁ResizeObserver实例
   if (observer.value) {
     observer.value.disconnect()
   }
 })
 onActivated(() => {
   // 从编辑或者新增页面回来需要重新获取列表数据
   // $router.options.history.state.back 上一次路由地址
   if (!($router.options.history.state.back as string || '').includes('detail')) {
     // console.log('需要重新获取列表')
     fetchData()
   }
   if (cache.value === 'map') {
     // console.log('重置地图')
     tableFlag.value = 'normal'
     setTimeout(() => {
       switchMode('map')
       if (cacheRow.value.id) {
         let timer = setInterval(() => {
           if (mapRef.value?.mapRef) {
             clearInterval(timer)
             setTimeout(() => {
               rowClick(cacheRow.value)
             }, 2000)
           }
         }, 500);
       }
     })
   }
 })
 const clickMarker = (data: any) => {
   cacheRow.value = data
 }
 </script>
 <template>
   <!-- 布局 -->
   <app-container class="container">
     <div v-if="tableFlag === 'map'" id="map-container-height" style="position: relative;">
       <!-- 地图 -->
       <map-com @clickMarker="clickMarker" ref="mapRef" v-drag-height="100" v-loading="mapLoading" :height="350"
         :data="mapList" />
       <!-- 收起地图-图标 -->
       <div class="icon" @click="switchMode('normal')">
         <el-icon :size="25">
           <arrow-up-bold />
         </el-icon>
       </div>
     </div>
     <!-- 筛选条件 -->
     <search-area :need-clear="true" :needSearchMore="true" @search="fetchData" @clear="reset">
       <search-item>
         <el-select v-model="listQuery.monitorStatus" placeholder="设备类型" clearable class="select"
           style="width: 192px !important;">
           <el-option v-for="item in []" :key="item.id" :label="item.name" :value="item.value" />
         </el-select>
       </search-item>
       <search-item>
         <el-input v-model.trim="listQuery.propertyOwner" placeholder="位置" clearable style="width: 192px !important;" />
       </search-item>
       <search-item>
         <dept-select ref="deptRef" v-model="listQuery.deptid" placeholder="管理单位" :clearable="true"
           style="width: 192px !important;" />
       </search-item>
       <search-item>
         <el-select v-model="listQuery.monitorStatus" placeholder="监控状态" clearable class="select"
           style="width: 192px !important;">
           <el-option v-for="item in []" :key="item.id" :label="item.name" :value="item.value" />
         </el-select>
       </search-item>
       <template #searchMore>
         <search-item>
           <el-input v-model.trim="listQuery.propertyOwner" placeholder="位号" clearable
             style="width: 192px !important;" />
         </search-item>
         <!-- <search-item>
           <el-input v-model.trim="listQuery.propertyOwner" placeholder="编号" clearable
             style="width: 192px !important;" />
         </search-item>
         <search-item>
           <el-select v-model="listQuery.manageType" placeholder="管理方式" clearable class="select"
             style="width: 192px !important;">
             <el-option v-for="item in manageTypeList" :key="item.id" :label="item.name" :value="item.value" />
           </el-select>
         </search-item>
         <search-item>
           <el-input v-model.trim="listQuery.propertyOwner" placeholder="产权单位" clearable
             style="width: 192px !important;" />
         </search-item> -->
       </template>
     </search-area>
      <!-- 表头标题 -->
      <table-container :is-config="true" config-title="force-monitor" :columns="columns" :config-columns="columnsConfig"
       :edit="editColumns">
       <template #btns-left>
         <!-- 操作 -->
         <div v-show="tableFlag === 'normal'" style="margin-left: 15px;position: relative;z-index: 901;">
           <el-button type="primary" plain :disabled="loadingTable" @click="switchMode('map')">
             切换地图模式
           </el-button>
         </div>
       </template>
       <template #btns-right>
         <!-- 操作 -->
         <div>
           <!-- <el-button v-if="proxy.hasPerm('/well/export')" type="primary">
             导出
           </el-button> -->
         </div>
       </template>
       <!-- 查询结果Table显示 -->
       <normal-table :data="list" :total="total" :columns="columnsConfig" :query="listQuery" :list-loading="loadingTable"
         :height="tableHeight" @change="changePage" @rowDbClick="rowClick">
         <template #preColumns>
           <!-- <el-table-column label="选择" width="55" align="center">
               <template #default="scope">
                 <el-radio v-model="select" :label="scope.$index + 1" class="radio" />
               </template>
   </el-table-column> -->1
           <el-table-column label="序号" width="75" align="center">
             <template #default="scope">
               {{ (listQuery.offset as number - 1) * (listQuery.limit as number) + scope.$index + 1 }}
             </template>
           </el-table-column>
         </template>
         <template #columns>
           <!-- <el-table-column label="布/撤防" align="center" width="80">
             <template #default="scope">
               <el-button type="primary" link size="small" @click="changeDefense(scope.row)">
                 {{ scope.row.bfzt === '1' ? '撤防' : '布防' }}
               </el-button>
             </template>
   </el-table-column> -->
           <el-table-column label="操作" align="center" width="80">
             <template #default="scope">
               <el-button v-if="proxy.hasPerm('/well/detail')" type="primary" link size="small"
                 @click="editRow('detail', scope.row)">
                 查看
               </el-button>
               <!-- <el-button v-if="proxy.hasPerm('/well/update')" type="primary" link size="small"
                 @click="editRow('edit', scope.row)">
                 编辑
               </el-button> -->
             </template>
           </el-table-column>
         </template>
       </normal-table>
     </table-container>
   </app-container>
 </template>

 <style lang="scss" scoped>
 .container {
   position: relative;

   .map {
     position: fixed;
     z-index: 99;
   }

   .icon {
     position: absolute;
     bottom: 0;
     left: 50%;
     transform: translate(-50%, 30%);
     z-index: 999;

     &:hover {
       cursor: pointer;
     }
   }

   .search-area {
     position: fixed;
     z-index: 99;
   }
 }
 </style>

 <style>
 .select {
   width: 192px;
 }
 </style>