<!-- 首页 -->
<script name="Home" setup lang="ts">
import { ref } from 'vue'
import statisticsData from './components/statistics.vue'
import dateSelect from './components/date.vue'
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'
const center = ref([116.26759100, 39.91563500]) // 地图中心
const zoom = ref(17) // 地图显示的缩放级别
// 菜单选中
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: '0',
        color: '#2DBF00',
      },
      {
        name: '未处置',
        value: '1',
        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) => {
  select.value = index
  if (index === 5) {
    return
  }
  cselect.value = menu.value[index].menu.map((item: any) => item.value)
}
// 改变条件菜单
const cchange = (value: string) => {
  if (cselect.value.includes(value)) {
    cselect.value = cselect.value.filter((item: string) => item !== value)
  }
  else {
    cselect.value.push(value)
  }
}
</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 :center="center" :zoom="zoom" />
      <!-- 主菜单 -->
      <div class="menu">
        <div v-for="(item, index) in menu" :key="index" class="menu-item" @click="change(index)">
          <img :src="select === index ? item.check : item.icon" width="70" height="70">
          <date-select v-if="select === 5 && index === 5" class="date-select" />
        </div>
      </div>
      <!-- 条件菜单 -->
      <div class="cmenu">
        <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: 10%;
  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>