<!-- 首页 -->
<script name="Home" setup lang="ts">
import { ref } from 'vue'
import dayjs from 'dayjs'
import statisticsData from './components/statistics.vue'
import dateSelect from './components/date.vue'
import useMapStore from '@/store/modules/map'
import MapComponent from '@/components/map/Map.vue'
import homeIcon from '@/assets/images/点位图标/地图菜单/首页未选中.png'
import gasIcon from '@/assets/images/点位图标/地图菜单/甲烷未选中.png'
import identifyIcon from '@/assets/images/点位图标/地图菜单/识别未选中.png'
import occupyIcon from '@/assets/images/点位图标/地图菜单/占压未选中.png'
import couplingIcon from '@/assets/images/点位图标/地图菜单/耦合未选中.png'
import dateIcon from '@/assets/images/点位图标/地图菜单/日期未选中.png'
import homeCheck from '@/assets/images/点位图标/地图菜单/首页选中.png'
import gasCheck from '@/assets/images/点位图标/地图菜单/甲烷选中.png'
import identifyCheck from '@/assets/images/点位图标/地图菜单/识别选中.png'
import occupyCheck from '@/assets/images/点位图标/地图菜单/占压选中.png'
import couplingCheck from '@/assets/images/点位图标/地图菜单/耦合选中.png'
import dateCheck from '@/assets/images/点位图标/地图菜单/日期选中.png'
import gas1 from '@/assets/images/点位图标/点位图标/甲烷/甲烷已处置.png'
import gas2 from '@/assets/images/点位图标/点位图标/甲烷/甲烷未处置.png'
import car1 from '@/assets/images/点位图标/点位图标/首页/巡检车在线.png'
import car2 from '@/assets/images/点位图标/点位图标/首页/巡检车离线.png'
import task from '@/assets/images/点位图标/点位图标/首页/巡检任务.png'
import { getCarList, getGasList, getTaskList } from '@/api/page/page'
const mapRef = ref() // 地图实例
const mapStore = useMapStore() // 地图仓库
watch(() => mapStore.detailList, (newVal) => {
  if (newVal) {
    // 清空原来轨迹
    mapRef.value.clearLine()
    // 绘制轨迹
    mapRef.value.drawLine(newVal)
  }
}, {
  deep: true,
})
const center = ref([116.26759100, 39.91563500]) // 地图中心
const zoom = ref(17) // 地图显示的缩放级别

// 日期选择组件实例
const dateRef = ref()
// 日期选择top距离
const dateTop = ref(0)
// 菜单选中
const select = ref(0)
// 条件菜单选中
const cselect = ref<string[]>(['0', '1'])
// 菜单列表
const menu = ref([
  {
    name: '首页',
    icon: homeIcon,
    check: homeCheck,
    menu: [
      {
        name: '巡检车辆',
        value: '0',
        color: '#2DBF00',
      },
      {
        name: '巡检任务',
        value: '1',
        color: '#2763BC',
      },
    ],
  },
  {
    name: '甲烷',
    icon: gasIcon,
    check: gasCheck,
    menu: [
      {
        name: '已处置',
        value: '1',
        color: '#2DBF00',
      },
      {
        name: '未处置',
        value: '0',
        color: '#9F1919',
      },
    ],
  },
  {
    name: '识别',
    icon: identifyIcon,
    check: identifyCheck,
    menu: [
      {
        name: '正常',
        value: '0',
        color: '#2DBF00',
      },
      {
        name: '低风险',
        value: '1',
        color: '#2763BC',
      },
      {
        name: '一般风险',
        value: '2',
        color: '#FFD800',
      },
      {
        name: '较高风险',
        value: '3',
        color: '#D98200',
      },
      {
        name: '严重风险',
        value: '4',
        color: '#9F1919',
      },
    ],
  },
  {
    name: '占压',
    icon: occupyIcon,
    check: occupyCheck,
    menu: [
      {
        name: '正常',
        value: '0',
        color: '#2DBF00',
      },
      {
        name: '低风险',
        value: '1',
        color: '#2763BC',
      },
      {
        name: '一般风险',
        value: '2',
        color: '#FFD800',
      },
      {
        name: '较高风险',
        value: '3',
        color: '#D98200',
      },
      {
        name: '严重风险',
        value: '4',
        color: '#9F1919',
      },
    ],
  },
  {
    name: '耦合',
    icon: couplingIcon,
    check: couplingCheck,
    menu: [
      {
        name: '正常',
        value: '0',
        color: '#2DBF00',
      },
      {
        name: '低风险',
        value: '1',
        color: '#2763BC',
      },
      {
        name: '一般风险',
        value: '2',
        color: '#FFD800',
      },
      {
        name: '较高风险',
        value: '3',
        color: '#D98200',
      },
      {
        name: '严重风险',
        value: '4',
        color: '#9F1919',
      },
    ],
  },
  {
    name: '日期',
    icon: dateIcon,
    check: dateCheck,
  },
])

// 切换菜单
const change = (index: number) => {
  if (index === 5) {
    const ele = document.getElementById('menu-item5')
    dateTop.value = ele?.getBoundingClientRect().top as number
    select.value = index
    return
  }// 清空地图绘制
  mapRef.value?.clearDraw()
  if (select.value !== index) {
    cselect.value = menu.value[index].menu.map((item: any) => item.value)
  }
  select.value = index
}
// 日期选择top距离
window.addEventListener('resize', () => {
  const ele = document.getElementById('menu-item5')
  dateTop.value = ele?.getBoundingClientRect().top as number
})
// 改变条件菜单
const cchange = (value: string) => {
  if (cselect.value.includes(value)) {
    cselect.value = cselect.value.filter((item: string) => item !== value)
  }
  else {
    cselect.value.push(value)
  }
  change(select.value)
}
// 确认日期
const confirmData = () => {
  change(0)
}
// 获取首页数据
const fetchHome = async () => {
  console.log(dateRef.value?.dateActive, 'dateRef.value?.dateActive')
  // 清空地图绘制
  mapRef.value?.clearDraw()
  // 获取车辆列表
  const fetchCar = async () => {
    const res1 = await getCarList({})
    console.log(res1, '车')
    const data1 = res1.data.map((item: any) => {
      return {
        ...item,
        lat: item.latitude,
        lng: item.longitude,
        // lng: '116.265872',
        // lat: '39.914083',
        dialog: 'car',
        // 0 离线  1 在线
        icon: item.status === '离线' ? car2 : car1,
      }
    }).filter((item: any) => item.lat && item.lng)
    // 绘制标记点
    // mapRef.value.drawPonit(data1)
    return data1
  }
  // 获取任务列表
  const fetchTask = async () => {
    const res2 = await getTaskList({
      beginDate: dateRef.value?.dateActive,
      endDate: dayjs().format('YYYY-MM-DD HH:mm:ss'),
    })
    console.log(res2, '任务')
    const data2 = res2.data.rows.map((item: any) => {
      return {
        ...item,
        dialog: 'task',
        lat: item.latitude,
        lng: item.longitude,
        icon: task,
      }
    }).filter((item: any) => item.lat && item.lng)
    // 绘制标记点
    // mapRef.value.drawPonit(data2)
    return data2
  }
  // 车0 任务1
  if (cselect.value.length === 2) {
    const res1 = await fetchCar()
    const res2 = await fetchTask()
    // 绘制标记点
    mapRef.value.drawPonit([...res1, ...res2])
  }
  else if (cselect.value.length === 1) {
    if (cselect.value.includes('0')) {
      const res = await fetchCar()
      mapRef.value.drawPonit(res)
    }
    else if (cselect.value.includes('1')) {
      const res = await fetchTask()
      mapRef.value.drawPonit(res)
    }
  }
}
// 清空折线轨迹
const clearTrack = () => {
  mapRef.value.clearLine()
  mapStore.setDetailList([])
}
// 获取甲烷数据
const fetchGas = () => {
  // if (!cselect.value.length) {
  //   // 清空地图绘制
  //   mapRef.value?.clearDraw()
  //   return
  // }
  getGasList({
    alarmType: '1',
    alarmStatus: cselect.value.length === 2 ? '' : cselect.value[0], // 报警状态
    beginDate: dateRef.value?.dateActive, // 报警开始时间
    endDate: dayjs().format('YYYY-MM-DD HH:mm:ss'), // 报警结束时间
  }).then((res) => {
    console.log(res.data, '甲烷数据')
    // 整理数据
    const data = res.data.rows.map((item: any) => {
      return {
        ...item,
        lat: item.alarmLatitude,
        lng: item.alarmLongitude,
        icon: item.alarmStatus === '已处置' ? gas1 : gas2,
        dialog: 'gas',
      }
    }).filter((item: any) => item.lat && item.lng)
    // 绘制标记点
    mapRef.value.drawPonit(data)
  })
}
// 获取点位数据
watch(() => [select.value, cselect.value], (newVal: any[], oldVal) => {
  if (!mapRef.value?.isMap) {
    console.log('初始化未完成')
    return
  }
  if (!newVal[1].length) {
    // 清空地图绘制
    mapRef.value?.clearDraw()
    return
  }
  switch (newVal[0]) {
    case 0:
      fetchHome()
      console.log('首页')
      break
    case 1:
      fetchGas()
      console.log('甲烷')
      break
    case 2:
      console.log('识别')
      break
    case 3:
      console.log('占压')
      break
    case 4:
      console.log('耦合')
      break
  }
}, {
  deep: true,
  immediate: true,
})
// 监听地图是否初始化完成
watch(() => mapRef.value?.isMap, (newVal) => {
  if (newVal) {
  // 初始化完成
    fetchHome()
  }
}, {
  deep: true,
  immediate: true,
})
</script>

<template>
  <div class="home">
    <div id="container" style="height: calc(100vh - 50px); width: 100%; padding: 0;margin: 0;">
      <div class="title">
        地上地下一体化管线风险识别与预警地图看板
      </div>
      <map-component ref="mapRef" :center="center" :zoom="zoom" />
      <!-- 主菜单 -->
      <div class="menu">
        <div v-for="(item, index) in menu" :id="`menu-item${index}`" :key="index" class="menu-item" @click="change(index)">
          <img :src="select === index ? item.check : item.icon" width="70" height="70">
        </div>
      </div>
      <!-- 时间查询 -->
      <date-select v-show="select === 5" ref="dateRef" class="date-select" :style="`top:${dateTop - 60}px`" @confirm="confirmData" />
      <!-- 条件菜单 -->
      <div class="cmenu">
        <div v-if="select === 0 && mapStore.detailList.length" class="menu-child" style="background-color: #666;" @click="clearTrack">
          清空轨迹
        </div>
        <div v-for="(child, cindex) in menu[select].menu" :key="cindex" class="menu-child" :style="`background:${cselect.includes(child.value) ? child.color : '#666'};`" @click="cchange(child.value)">
          {{ child.name }}
        </div>
      </div>
    </div>
    <!-- 统计数据 -->
    <statistics-data />
  </div>
</template>

<style lang="scss" scoped>
.title {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: 999;
  color: #fff;
  background-color: rgba($color: #2f4261, $alpha: 70%);
  font-size: 20px;
  padding: 20px;
  font-weight: 700;
  border-radius: 20px;
}

.menu {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 10px;
  z-index: 999;

  .menu-item {
    margin-top: 10px;
    position: relative;

    &:hover {
      cursor: pointer;
    }
  }
}

.cmenu {
  position: absolute;
  right: 28%;
  top: 80px;
  z-index: 999;
  display: flex;

  .menu-child {
    margin: 10px;
    padding: 10px;
    color: #fff;
    font-size: 18px;
    font-weight: 700;
    border-radius: 8px;

    &:hover {
      cursor: pointer;
    }
  }
}

.home {
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
}
</style>

<style>
/* 隐藏高德logo  */
.amap-logo {
  display: none !important;
}

/* 隐藏高德版权  */
.amap-copyright {
  display: none !important;
}

.img-map-marker {
  width: 20px;
  height: 20px;
}
</style>