<!--
  Description: 设备监控
  Author: 李亚光
  Date: 2025-03-19
 -->

<script lang="ts" setup name="DeviceMonitor">
import type { TableColumn } from '@/components/NormalTable/table_interface'
import AMap from '@/components/map/index.vue'
import { toTreeList } from '@/utils/structure'
const { proxy } = getCurrentInstance() as any
const pageHeight = ref(0) // 液面高度

// 计算液面高度
const calcHeight = () => {
  pageHeight.value = window.innerHeight - 60 - 50 - 150 - 10 - 6 - 48 - 10 - 15
}
// 当前展示标识  map/list
const currentShow = ref('map')
// 切换展示
const changeShow = () => {
  if (currentShow.value === 'map') {
    currentShow.value = 'list'
  }
  else {
    currentShow.value = 'map'
  }
}
onMounted(() => {
  calcHeight()
})



// --------------------------列表操作-------------------------
const loadingTable = ref(false)
const tableData = ref([])
const total = ref(0)
const columns = ref<TableColumn[]>([
  { text: '位号', value: 'bfztName', align: 'center', },
  { text: '监测对象', value: 'bfztName', align: 'center', },
  { text: '名称', value: 'bfztName', align: 'center', },
  { text: '浓度', value: 'bfztName', align: 'center', },
  { text: '外力破坏', value: 'bfztName', align: 'center', },
  { text: '地址', value: 'bfztName', align: 'center', },
  { text: '管理单位', value: 'bfztName', align: 'center', },
  { text: '电量', value: 'bfztName', align: 'center', },
  { text: '监控状态', value: 'bfztName', align: 'center', },
  { text: '最新时间', value: 'bfztName', align: 'center', },
])
// 列表查询条件
const listQuery = ref({
  offset: 1,
  limit: 10,
  deptId: '',
  monitorType: '',
  type: '',
  watchObj: '',
})
// 重置查询条件
const reset = () => {
  listQuery.value = {
    offset: 1,
    limit: 10,
    deptId: '',
    monitorType: '',
    type: '',
    watchObj: '',
  }
  fetchData()
}
// 查询
const fetchData = () => {
  loadingTable.value = true

  setTimeout(() => {
    loadingTable.value = false
  }, 1000);
}
// 页数发生变化后的操作，可能是页码变化，可能是每页容量变化，此函数必写
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 mapRef = ref()

// 地图加载完成
const completeMap = () => {
}

const showMap = ref('district')  // district  point

// 行政区信息统计数据
const districtColumns = ref<TableColumn[]>([
  { text: '东城区', value: 'name', align: 'center', width: 131 },
  { text: '正常', value: 'normal', align: 'center', width: 67 },
  { text: '报警', value: 'alarm', align: 'center', width: 67 },
  { text: '故障', value: 'fault', align: 'center', width: 67 },
  { text: '合计', value: 'count', align: 'center', width: 67 },
])
const districtData = ref<any[]>([])
const districtDataLoading = ref(false)
const load = (
  row: any,
  treeNode: unknown,
  resolve: (date: any[]) => void,
) => {
  const data = []
  console.log(row, '1111')
  resolve(data)
}
setTimeout(() => {

  districtData.value = [
    { name: '泄漏监测', normal: '80', alarm: '20', fault: '10', count: '100', id: '1' },
    { name: '防外力破坏监测', normal: '80', alarm: '20', fault: '10', count: '100', id: '2' },
    {
      name: '隐患监测', normal: '80', alarm: '20', fault: '10', count: '100', id: '3', pid: '0', children:
      [
        { name: '穿越隐患点', normal: '80', alarm: '20', fault: '10', count: '100', id: '4' },
        { name: '占压隐患点', normal: '80', alarm: '20', fault: '10', count: '100', id: '5' },
        { name: '应急监测点', normal: '80', alarm: '20', fault: '10', count: '100', id: '6' },
      ]
    },
  ]
  // toTreeList([
  //   { name: '泄漏监测', normal: '80', alarm: '20', fault: '10', count: '100', id: '1', pid: '0' },
  //   { name: '防外力破坏监测', normal: '80', alarm: '20', fault: '10', count: '100', id: '2', pid: '0' },
  //   { name: '隐患监测', normal: '80', alarm: '20', fault: '10', count: '100', id: '3', pid: '0', hasChildren: true },
  //   { name: '穿越隐患点', normal: '80', alarm: '20', fault: '10', count: '100', id: '4', pid: '3' },
  //   { name: '占压隐患点', normal: '80', alarm: '20', fault: '10', count: '100', id: '5', pid: '3' },
  //   { name: '应急监测点', normal: '80', alarm: '20', fault: '10', count: '100', id: '6', pid: '3'},
  // ])
  console.log(districtData.value, 'districtData.value')
}, 2000);
</script>

<template>
  <el-card class="box-card">
    <template #header>
      <div class="card-header">
        <span>设备监控</span>
        <el-button type="primary" plain @click="changeShow">切换{{ currentShow === 'map' ? '列表' : '地图' }}模式</el-button>
      </div>
    </template>
    <div class="card-body" :style="{ height: `${pageHeight}px` }">
      <!-- 地图 -->
      <div class="map-container" v-show="currentShow === 'map'" :style="{ height: `${pageHeight}px` }">
        <!-- 地图切换按钮 -->
        <div class="change-map">
          <el-radio-group v-model="showMap">
            <el-radio-button label="行政区视图" value="district" />
            <el-radio-button label="点位视图" value="point" />
          </el-radio-group>
        </div>
        <!-- 行政区信息 -->
        <div v-if="showMap === 'district'" class="district-info">
          <el-table ref="table" v-loading="districtDataLoading" :data="districtData" row-key="id" border stripe
            style="width: 100%;" :tree-props="{ children: 'children', hasChildren: 'hasChildren' }" size="small" default-expand-all>
            <!-- <el-table-column prop="" label="东城区" align="center"> -->
            <el-table-column v-for="column of districtColumns" :key="column.value" :label="column.text"
              :prop="column.value" :width="column.width" :align="column.align" />
            <!-- </el-table-column> -->

          </el-table>
        </div>
        <!-- 点位视图信息 -->
        <div v-if="showMap === 'point'" class="point-info"></div>
        <!-- 点位视图图例 -->
        <div v-if="showMap === 'point'" class="legend-info"></div>
        <a-map ref="mapRef" :zoom="9.2" :center="[116.397428, 39.90923]" :show-pieple-layer="true"
          @complete="completeMap" />
      </div>

      <!-- 列表 -->
      <div class="list-container" v-show="currentShow === 'list'">
        <search-area :need-clear="true" @search="fetchData" @clear="reset">
          <search-item>
            <el-select v-model="listQuery.type" placeholder="风险类别" filterable clearable class="select"
              style="width: 192px;">
              <el-option v-for="item in []" :key="item.id" :label="item.name" :value="item.value" />
            </el-select>
          </search-item>
          <search-item>
            <el-select v-model="listQuery.watchObj" placeholder="监测对象" filterable clearable class="select"
              style="width: 192px;">
              <el-option v-for="item in []" :key="item.id" :label="item.name" :value="item.value" />
            </el-select>
          </search-item>
          <search-item>
            <dept-select v-model="listQuery.deptId" placeholder="管理单位" :clearable="true" class="select"
              style="width: 192px;" />
          </search-item>
          <search-item>
            <el-select v-model="listQuery.monitorType" placeholder="监控状态" filterable clearable class="select"
              style="width: 192px;">
              <el-option v-for="item in []" :key="item.id" :label="item.name" :value="item.value" />
            </el-select>
          </search-item>
        </search-area>
        <normal-table :data="tableData" :total="total" :columns="columns" :query="listQuery"
          :list-loading="loadingTable" @change="changePage" :pagination="false" :height="pageHeight - 56 - 23">
          <template #preColumns>
            <el-table-column label="序号" width="80" align="center">
              <template #default="scope">
                {{ (listQuery.offset - 1) * listQuery.limit + scope.$index + 1 }}
              </template>
            </el-table-column>
          </template>
        </normal-table>
      </div>
    </div>
  </el-card>
</template>

<style lang="scss" scoped>
::v-deep(.el-card__body) {
  padding: 0;
}

::v-deep(.el-card__header) {
  padding: 0;
}

.box-card {
  margin-top: 10px;

  .card-header {
    font-weight: 700;
    color: #666;
    font-size: 18px;
    padding: 8px 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .card-body {
    padding: 10px;
    position: relative;

    .map-container {
      position: relative;

      .change-map {
        position: absolute;
        top: 4px;
        left: 8px;
        z-index: 9;
      }

      .district-info {
        position: absolute;
        width: 400px;
        top: 38px;
        right: 8px;
        z-index: 9;
      }
    }
  }
}
</style>