<script setup lang="ts">
import { onMounted, ref } from "vue";
// import { $get } from "@src/service/request";
// import cityCodeMap from "@assets/JSON/cityCode.json";
import MapChart from "./components/MapChart/index.vue";
import RealtimeData from "./components/RealtimeData/index.vue";
import TimerCount from "./components/TimerCount/index.vue";
import Right from "./components/homeRight/right.vue"

// interface WeatherData {
//   data: {
//     pm25: number;
//   };
// }

interface MapPM25 {
  code: string;
  value: number;
}

// const tip = ref("");
const mapData = ref<MapPM25[]>([]);

const pvUv = ref({
  pv: 6666,
  uv: 12345,
});




</script>

<template>
  <section class="title">
    <div class="title-content">
      <h1>AI教室智慧控制中心</h1>
    </div>
  </section>
  <el-row :gutter="20" class="content">
    <el-col :xl="12" :md="12" :sm="24" :xs="24">
      <RealtimeData :data="pvUv" />
    </el-col>
    <el-col :xl="12" :md="12" :sm="24" :xs="24">
      <MapChart :data="mapData" />
    </el-col>
  </el-row>
  <section class="right">
    <Right />
  </section>
</template>

<style scoped lang="less">
@import "@assets/styles/common.less";

.title {
  padding: 20px 0;
  margin-bottom: 30px;

  border-bottom: 2px solid rgba(255, 255, 255, 0.1);

  .title-content {
    display: flex;
    align-items: center;
    gap: 15px;

    h1 {
      color: transparent;
      background: linear-gradient(to right, #00d2ff, #3a7bd5);
      background-clip: text;
    }
  }

  &-content {
    display: flex;
  }
}

.content {
  flex: 1;
  display: flex;
  padding: 20 * @px2vw;
  // max-width: 1400px;
  margin-left: 0!important;
  margin-right: 0!important;
  max-width: calc(100vw - 400px);

  .left {
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
  }

  .middle {
    flex: 1;
    padding-top: 20 * @px2vw;
    margin: 0 14 * @px2vw;
  }

}

.right {
  position: fixed;
  right: 0;
  top: 0;
  width: 400px;
  background: rgba(20, 30, 48, 0.95);
  border-left: 1px solid rgba(0, 210, 255, 0.2);
  box-shadow: -5px 0 15px rgba(0, 0, 0, 0.3);
  height: 100vh;
}
</style>
