<script setup lang="ts">
import { computed, markRaw, ref } from 'vue'
import homePage from './components/HomePage.vue'
import cehicleOperation from './components/CehicleOperation.vue'
import lineAnalysis from './components/LineAnalysis.vue'
import maintenanceDynamics from './components/MaintenanceDynamics.vue'
import facilityManagement from './components/FacilityManagement.vue'
import stationManagement from './components/StationManagement.vue'
import passengerFlow from './components/PassengerFlow.vue'
import Map from '@/components/map.vue'
import useStore from '@/pages/store'

const store = useStore()
const menus = [
  {
    name: '主页',
    component: markRaw(homePage),
    count: [
      { label: '设备车辆', value: 166, util: '辆' },
      { label: '线路', value: 60, util: '条' },
      { label: '场站', value: 100, util: '个' },
      { label: '中途站 ', value: 50, util: '个' },
      { label: '班次数量', value: 300, util: '趟' },
      {
        label: '总里程', value: 100, util: '万公里', style: { right: '-40px' }
      },
      { label: '入场率', value: 100, util: '%' }
    ]
  },
  {
    name: '线路运营',
    component: markRaw(cehicleOperation),
    count: [
      { label: '今日客流', value: 2000, util: '人' },
      { label: '计划班次', value: 14, util: '次' },
      { label: '已发班次', value: 8, util: '次' },
      { label: '塌班 ', value: 0, util: '次' },
      {
        label: '计划里程', value: 1400, util: '公里', style: { right: '-18px' }
      },
      {
        label: '当前里程', value: 100, util: '公里', style: { right: '-18px' }
      },
      { label: '空驶率', value: 1, util: '%' }
    ]
  },
  {
    name: '客流分析',
    component: markRaw(passengerFlow),
    count: [
      {
        label: '客运量', value: 10, util: '万人次', style: { right: '-40px' }
      },
      { label: '满载率', value: 14, util: '%' },
      {
        label: '免费换成', value: 8, util: '万人次', style: { right: '-40px' }
      },
      { label: '分担率 ', value: 0, util: '%' },
      { label: '平均乘距', value: 1400, util: 'km' }
    ]
  },
  {
    name: '维保动态',
    component: markRaw(maintenanceDynamics),
    count: [
      { label: '维保场', value: 10, util: '个' },
      { label: '运维驿站', value: 14, util: '个' },
      { label: '已保养', value: 8, util: '辆' },
      { label: '已维修 ', value: 0, util: '辆' }
    ]
  },
  {
    name: '设施管理',
    component: markRaw(facilityManagement),
    count: [
      { label: '车辆', value: 2000, util: '辆' },
      { label: '电子站牌', value: 14, util: '座' },
      { label: '洗车机', value: 8, util: '座' },
      { label: '充电桩 ', value: 0, util: '台' },
      { label: '车载部件', value: 1400, util: '个' }
    ]
  },
  {
    name: '场站管理',
    component: markRaw(stationManagement),
    count: [
      { label: '场站', value: 2000, util: '个' },
      {
        label: '总面积', value: 14, util: '万平方米', style: { right: '-50px' }
      },
      { label: '发车线路', value: 8, util: '条' },
      { label: '入场车辆 ', value: 0, util: '辆' },
      { label: '静态停车', value: 1400, util: '辆' },
      { label: '充电桩', value: 8, util: '辆' },
      { label: '充电 ', value: 0, util: '辆' },
      { label: '维保', value: 1400, util: '辆' }
    ]
  },
  {
    name: '线路分析',
    component: markRaw(lineAnalysis),
    count: [
      { label: '线路', value: 2000, util: '条' },
      { label: '站点', value: 14, util: '个' },
      {
        label: '线路长度', value: 8, util: '公里', style: { right: '-18px' }
      },
      {
        label: '线路密度 ', value: 0, util: 'km/km³', style: { right: '-35px' }
      },
      { label: '线路重复率', value: 1400, util: '%' },
      { label: '线路覆盖率', value: 8, util: '%' }
    ]
  }
]
const active = ref(0)
const currentComponent = ref(menus[active.value].component)
const weather = computed(() => store.weather)
const warningMsg = ref({
  value: '这里是预警提示信息这里是预警提示信息这里是预警提示信息这里是预警提示信息这里是预是预警提示信息这里',
  time: ' 2023-01-01 12:00:00',
  btns: [
    {
      name: '忽略',
      event: '',
      type: 'default'
    },
    {
      name: '立即处理',
      event: '',
      type: 'error'
    }
  ]
})

function changMenu(_id: number) {
  active.value = _id
  currentComponent.value = menus[_id].component
}
</script>
<template>
  <div class="home">
    <div class="home-top">
      <img src="../../../assets/img/6.svg">
      <div class="home-top-user">
        <div>安全运营<span>100</span>天</div>
        <div v-if="weather">
          <img :src="weather.icon">
          {{ weather.weather }}
          <span>{{ weather.temperature }}℃</span>
        </div>
        <div>
          <img src="../../../assets/img/10.svg">
          你的名称
        </div>
      </div>
    </div>
    <div class="home-content">
      <div class="home-content-top">
        <div class="home-content-top-menus">
          <template
            v-for="(item, index) in menus"
            :key="index"
          >
            <div
              :class="{ active: index === active }"
              @click="changMenu(index)"
            >
              {{ item.name }}
            </div>
          </template>
        </div>
      </div>
      <div class="home-content-left" />
      <div class="home-content-right" />
      <div class="home-content-center">
        <Map />
      </div>
      <div class="home-content-left-img" />
      <div class="home-content-right-img" />
      <div class="home-content-center-tooltip">
        <Icon
          name="37"
          :size="37"
        />
        <div>{{ warningMsg.value }}</div>
        <div>{{ warningMsg.time }}</div>
        <div>
          <template
            v-for="(item, index) in warningMsg.btns"
            :key="index"
          >
            <n-button
              round
              :type="item.type"
            >
              {{ item.name }}
            </n-button>
          </template>
        </div>
      </div>
      <div class="home-content-bottom-bottom">
        <template
          v-for="(item, index) in menus[active].count"
          :key="index"
        >
          <div>
            <div>{{ item.label }}</div>
            <div>
              <span>{{ item.value }}</span>
              <span :style="item.style">{{ item.util }}</span>
            </div>
          </div>
        </template>
      </div>
      <component :is="currentComponent" />
    </div>
    <div class="home-bottom">
      雅安市公共交通集团有限公司
    </div>
  </div>
</template>
<style lang="scss" scoped>
.home {
  height: 1456px;
  width: 4784px;
  background: #030E25;

  &-top {
    height: 160px;
    background: url(../../../assets//img/2.svg) no-repeat top center;
    background-size: cover;
    text-align: center;
    position: relative;

    &>img {
      width: 900px;
      height: 130px;
    }

    &-user {
      position: absolute;
      display: flex;
      align-items: center;
      right: 30px;
      top: 30px;

      &>div {
        margin: 0 25px;
        font-size: 24px;

        &:first-child {
          font-weight: 400;
          color: #80FFFF;

          span {
            color: white;
            font-weight: 700;
            font-size: 50px;
            margin: 0 5px;
          }
        }

        &:last-child {
          color: white;
          display: flex;
          align-items: center;
          margin-right: 0;

          img {
            border-radius: 50%;
            width: 80px;
            height: 80px;
            overflow: hidden;
            margin-right: 15px;
          }
        }

        &:nth-child(2) {
          display: flex;
          align-items: flex-end;
          color: white;

          img {
            width: 56px;
            height: 56px;
            margin-right: 10px;
          }

          span {
            color: #80FFFF;
            margin-left: 10px;
          }
        }
      }
    }
  }

  &-content {
    height: calc(1456px - 160px - 72px);
    position: relative;

    &-top {
      position: absolute;
      left: 50%;
      top: -30px;
      transform: translate(-50%, 0);
      height: 185px;
      width: calc(100% - 1370px - 1370px);
      background: url(../../../assets//img/5.svg) no-repeat center;
      background-size: cover;
      z-index: 2;

      &-menus {
        display: flex;
        align-items: center;
        justify-content: space-evenly;
        padding: 0 410px;

        &>div {
          text-shadow: 1px 1px 10px rgba(0, 0, 0, 0.698);
          font-family: Arial Normal;
          font-size: 24px;
          text-align: center;
          letter-spacing: 0px;
          color: #D7D7D7;
          cursor: pointer;
          height: 111px;
          width: 175px;
          line-height: 111px;
        }

        .active {
          color: white;
          background: url(../../../assets/img/7.svg) no-repeat center;
          background-size: cover;
        }
      }

    }

    &-left,
    &-right {
      position: absolute;
      height: 110%;
      width: 40px;
      top: -117px;
    }

    &-left {
      left: 7px;
      background: url(../../../assets/img/8.svg) no-repeat left top;
      background-size: cover;

      &-img {
        background: url(../../../assets/img/35.png) no-repeat left top;
        background-size: cover;
        width: 175px;
        position: absolute;
        left: 1396px;
        top: 0;
        height: 103%;
        z-index: 2;
        background-position: -113px 0;
      }
    }

    &-right {
      right: 7px;
      background: url(../../../assets/img/9.svg) no-repeat left top;
      background-size: cover;

      &-img {
        background: url(../../../assets/img/34.png) no-repeat right top;
        background-size: cover;
        width: 175px;
        position: absolute;
        right: 1394px;
        top: 0;
        height: 103%;
        z-index: 2;
        background-position: -203px 0;
      }
    }

    &-center {
      position: absolute;
      left: 50%;
      top: 0;
      width: 1990px;
      height: 100%;
      z-index: 1;
      margin: 0 auto;
      transform: translate(-50%, 0);

      &-tooltip {
        position: absolute;
        top: 90px;
        border: solid 1px red;
        border-radius: 30px;
        z-index: 3;
        left: 50%;
        transform: translate(-50%, 0);
        display: flex;
        align-items: center;
        padding: 8px 10px;
        color: #E73D41;
        font-size: 23px;
        animation: flicker 0.5s infinite alternate;
        background: #e73d4048;

        &>svg {
          margin-right: 10px;
          margin-left: 10px;
        }

        &>div:nth-child(2) {
          max-width: 938px;
          min-width: 100px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }

        &>div:nth-child(3) {
          margin: 0 60px;
        }

        & button:last-child {
          margin-left: 10px;
        }
      }
    }

    &-bottom-bottom {
      position: absolute;
      display: flex;
      align-items: center;
      left: 50%;
      z-index: 3;
      bottom: 45px;
      transform: translate(-50%, 0);

      &>div {
        width: 158px;
        height: 138px;
        background: url(../../../assets/img/38.svg) no-repeat;
        margin: 0 10px;
        text-align: center;
        text-shadow: rgba(0, 255, 255, 0.698) 1px 1px 10px;
        overflow-wrap: break-word;
        background-size: cover;
        padding-top: 10px ;

        &>div:first-child {
          font-size: 20px;
          color: rgb(128, 255, 255);
        }

        &>div:last-child {
          position: relative;
          &>span{
            color: rgb(255, 255, 255);
            font-family: "Impact Normal", Impact, sans-serif;
          }
          &>span:first-child {
            padding-top: 10px;
            font-size: 40px;
          }
          &>span:last-child{
            font-size: 20px;
            position: absolute;
            top: 16px;
            right: 0;
          }
        }
      }
    }
  }

  &-bottom {
    height: 72px;
    background: url(../../../assets/img/3.svg) no-repeat center;
    background-size: cover;
    text-align: center;
    line-height: 72px;
    color: white;
    font-size: 20px;
    letter-spacing: 20px;
    text-shadow: 1px 1px 5px rgba(0, 255, 255, 0.6);
  }
}

@keyframes flicker {
  0% {
    opacity: 0.8;
  }

  100% {
    opacity: 0.3;
  }
}
</style>