<template>
  <div class="app-container">
    <el-row :gutter="20">
      <el-col :span="6">
        <el-card shadow="never">
          <template #header>
            <div class="card-header">
              <span>筛选条件</span>
            </div>
          </template>
          <el-form :model="queryParams" ref="queryRef" label-width="68px">
            <el-form-item label="隐患等级" prop="hiddGrad">
              <el-select v-model="queryParams.hiddGrad" placeholder="请选择隐患等级" clearable style="width: 100%">
                <el-option v-for="dict in hidd_grad" :key="dict.value" :label="dict.label" :value="dict.value" />
              </el-select>
            </el-form-item>
            <el-form-item label="隐患状态" prop="hiddStat">
              <el-select v-model="queryParams.hiddStat" placeholder="请选择隐患状态" clearable style="width: 100%">
                <el-option v-for="dict in hidd_stat" :key="dict.value" :label="dict.label" :value="dict.value" />
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
              <el-button icon="Refresh" @click="resetQuery">重置</el-button>
            </el-form-item>
          </el-form>

          <el-divider content-position="left">统计信息</el-divider>

          <el-descriptions :column="1" border>
            <el-descriptions-item label="隐患总数">{{ statData.total }}</el-descriptions-item>
            <el-descriptions-item label="重大隐患">{{ statData.major }}</el-descriptions-item>
            <el-descriptions-item label="一般隐患">{{ statData.normal }}</el-descriptions-item>
            <el-descriptions-item label="已整改">{{ statData.solved }}</el-descriptions-item>
            <el-descriptions-item label="整改中">{{ statData.solving }}</el-descriptions-item>
            <el-descriptions-item label="未整改">{{ statData.unsolved }}</el-descriptions-item>
          </el-descriptions>
        </el-card>
      </el-col>
      <el-col :span="18">
        <el-card shadow="never">
          <template #header>
            <div class="card-header">
              <span>隐患分布地图</span>
              <el-button type="primary" plain icon="FullScreen" @click="toggleFullScreen">全屏</el-button>
            </div>
          </template>
          <div ref="mapContainer" class="map-container" :class="{ 'full-screen': isFullScreen }"></div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 隐患详情弹窗 -->
    <el-dialog title="隐患详情" v-model="detailOpen" width="600px" append-to-body>
      <el-descriptions :column="2" border>
        <el-descriptions-item label="隐患名称">{{ detailData.hiddName }}</el-descriptions-item>
        <el-descriptions-item label="隐患等级">
          <dict-tag :options="hidd_grad" :value="detailData.hiddGrad" />
        </el-descriptions-item>
        <el-descriptions-item label="隐患状态">
          <dict-tag :options="hidd_stat" :value="detailData.hiddStat" />
        </el-descriptions-item>
        <el-descriptions-item label="涉及部位">{{ detailData.proPart }}</el-descriptions-item>
        <el-descriptions-item label="部位经度">{{ detailData.partLong }}</el-descriptions-item>
        <el-descriptions-item label="部位纬度">{{ detailData.partLat }}</el-descriptions-item>
        <el-descriptions-item label="采集时间" :span="2">{{ detailData.collTime }}</el-descriptions-item>
        <el-descriptions-item label="隐患描述" :span="2">{{ detailData.otlcolQiffFnvu }}</el-descriptions-item>
      </el-descriptions>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="handleDetail">查看详情</el-button>
          <el-button @click="detailOpen = false">关 闭</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup name="HiddGIS">
import { ref, onMounted, onUnmounted, nextTick } from 'vue'
import { listObjHidd } from "@/api/slaj/hidd"
import * as echarts from 'echarts'

const { proxy } = getCurrentInstance()
const { hidd_grad, hidd_stat } = proxy.useDict("hidd_grad", "hidd_stat")

const mapContainer = ref(null)
const detailOpen = ref(false)
const detailData = ref({})
const isFullScreen = ref(false)

let map = null

const statData = ref({
  total: 0,
  major: 0,
  normal: 0,
  solved: 0,
  solving: 0,
  unsolved: 0
})

const data = reactive({
  queryParams: {
    hiddGrad: undefined,
    hiddStat: undefined
  }
})

const { queryParams } = toRefs(data)

/** 初始化地图 */
function initMap() {
  if (!mapContainer.value) return
  
  map = echarts.init(mapContainer.value)
  
  // 使用散点图模拟GIS地图
  const option = {
    tooltip: {
      trigger: 'item',
      formatter: function(params) {
        return params.data.name + '<br/>隐患等级: ' + params.data.grad + '<br/>隐患状态: ' + params.data.stat
      }
    },
    geo: {
      map: 'china',
      roam: true,
      label: {
        show: true,
        fontSize: 10
      },
      itemStyle: {
        areaColor: '#eee',
        borderColor: '#333'
      }
    },
    series: [
      {
        name: '隐患分布',
        type: 'scatter',
        coordinateSystem: 'geo',
        data: [],
        symbolSize: function(val) {
          return val[2] / 10
        },
        label: {
          show: false
        },
        emphasis: {
          label: {
            show: true
          }
        }
      }
    ]
  }
  
  map.setOption(option)
}

/** 加载地图数据 */
function loadMapData() {
  listObjHidd(queryParams.value).then(res => {
    const list = res.rows || []
    
    // 计算统计数据
    let total = list.length
    let major = 0
    let normal = 0
    let solved = 0
    let solving = 0
    let unsolved = 0
    
    list.forEach(item => {
      if (item.hiddGrad === '2') major++
      else normal++
      
      if (item.hiddStat === '2') solved++
      else if (item.hiddStat === '1') solving++
      else unsolved++
    })
    
    statData.value = { total, major, normal, solved, solving, unsolved }
    
    // 转换为地图数据
    const mapData = list
      .filter(item => item.partLong && item.partLat)
      .map(item => ({
        name: item.hiddName,
        value: [item.partLong, item.partLat, 100],
        grad: item.hiddGrad === '2' ? '重大' : '一般',
        stat: item.hiddStat === '2' ? '已整改' : item.hiddStat === '1' ? '整改中' : '未整改',
        data: item
      }))
    
    if (map) {
      map.setOption({
        series: [{
          data: mapData
        }]
      })
    }
  })
}

/** 搜索按钮操作 */
function handleQuery() {
  loadMapData()
}

/** 重置按钮操作 */
function resetQuery() {
  proxy.resetForm("queryRef")
  loadMapData()
}

/** 全屏切换 */
function toggleFullScreen() {
  isFullScreen.value = !isFullScreen.value
  nextTick(() => {
    map?.resize()
  })
}

/** 查看详情 */
function handleDetail() {
  detailOpen.value = false
  proxy.$router.push({ path: '/slaj/hidd/detail', query: { guid: detailData.value.guid } })
}

onMounted(() => {
  initMap()
  loadMapData()
  
  window.addEventListener('resize', () => {
    map?.resize()
  })
})

onUnmounted(() => {
  map?.dispose()
  window.removeEventListener('resize', () => {
    map?.resize()
  })
})
</script>

<style scoped>
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.map-container {
  height: 600px;
  width: 100%;
}
.map-container.full-screen {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
  height: 100vh;
  width: 100vw;
}
</style>
