<template>
  <div>
    <div class="main">
      <div class="main_in">
        <weatherTitle :title="'气象站监测'" />
        <div>
          <div class="re-ul">
            <vue3-seamless-scroll :list="monitoringData.monitoring" class="scroll" :step="0.2" :hover="true" :wheel="true">
              <div class="re-list" @click="setActive(item)" v-for="(item, index) in monitoringData.monitoring" :key="index">
                <div>
                  <div>{{ item.st_name }}</div>
                  <div>{{ item.time }}</div>
                </div>
                <div>
                  <div>
                    <img src="../../../assets/images/weatheHome/mo-icon1.png" />
                    {{ item.temp.v }}℃
                  </div>
                  <div>
                    <img src="../../../assets/images/weatheHome/mo-icon2.png" />
                    {{ item.hum.v }}%</div
                  >
                  <div>
                    <img src="../../../assets/images/weatheHome/mo-icon3.png" />
                    {{ item.ws.v }}m/s {{ setWd(item.wd.v) }}</div
                  >
                </div>
              </div>
            </vue3-seamless-scroll>
          </div>
        </div>
        <div class="main-title">
          <div> 近24小时气象监测站过程线</div>
        </div>
        <monitorEcharts :temperatureCharts="monitoringData.temperatureCharts" />
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, getCurrentInstance, onMounted, reactive } from 'vue';

import weatherTitle from '../../../components/Title/weatherTitle.vue';
import { useMapStore } from '/@/store/modules/map';
import monitorEcharts from './monitorEcharts.vue';
import { getWeathMonitoring, getMonitorInfo } from '/@/api/swHome/index';
import { useBasicStore } from '/@/store/modules/basicData';
import { obtainingStations, getNowTime, getSensor } from '/@/utils/fnUtils.ts';
import { Vue3SeamlessScroll } from 'vue3-seamless-scroll';
const basicStore = useBasicStore();
let monitoringData = reactive({
  monitoring: [],
  stDetailArrStoreData: [],
  activeObtaining: {},
  temperatureCharts: {
    name: [],
    data: [],
  },
});
// 点击列表
function setActive(item) {
  // console.log(item);
  getObtainingStations(item);
}
// 处理风向
function setWd(wd) {
  if (wd >= 348.76 || wd <= 11.25) {
    return 'N';
  }
  if (wd >= 11.26 && wd <= 33.75) {
    return 'NNE';
  }
  if (wd >= 33.76 && wd <= 56.25) {
    return 'NE';
  }
  if (wd >= 56.26 && wd <= 78.75) {
    return 'ENE';
  }
  if (wd >= 78.76 && wd <= 101.25) {
    return 'E';
  }
  if (wd >= 101.26 && wd <= 123.75) {
    return 'ESE';
  }
  if (wd >= 123.76 && wd <= 146.25) {
    return 'SE';
  }
  if (wd >= 146.26 && wd <= 168.75) {
    return 'SSE';
  }
  if (wd >= 168.76 && wd <= 191.25) {
    return 'S';
  }
  if (wd >= 191.26 && wd <= 213.75) {
    return 'SSW';
  }
  if (wd >= 213.76 && wd <= 236.25) {
    return 'SW';
  }
  if (wd >= 236.26 && wd <= 258.75) {
    return 'WSW';
  }
  if (wd >= 258.76 && wd <= 281.25) {
    return 'W';
  }
  if (wd >= 281.76 && wd <= 303.75) {
    return 'WNW';
  }
  if (wd >= 303.76 && wd <= 326.25) {
    return 'NW';
  }
  if (wd >= 326.26 && wd <= 348.75) {
    return 'NNW';
  }
}
// 获取温度数据
async function setActiveEcharts(activeSensor) {
  let formData = {
    start_time: getNowTime(2),
    senid: activeSensor.senid,
    end_time: getNowTime(1),
  };
  let data = await getMonitorInfo(formData).then((res) => {
    return res.data;
  });
  monitoringData.temperatureCharts.name = [];
  monitoringData.temperatureCharts.data = [];
  let temperatureCharts = {
    name: [],
    data: [],
  };
  data.forEach((element) => {
    temperatureCharts.name.push(element.time);
    temperatureCharts.data.push(element.factv);
  });
  monitoringData.temperatureCharts = temperatureCharts;
}
// 获取气象监测列表数据
function getWeathMonitoringData() {
  getWeathMonitoring().then((res) => {
    monitoringData.monitoring = res.data;
    // 筛选当前数据测站信息
    getObtainingStations(res.data[0]);
  });
}
// 筛选测站和传感器数据
function getObtainingStations(data) {
  if (monitoringData.stDetailArrStoreData.length > 0) {
    monitoringData.activeObtaining = obtainingStations(monitoringData.stDetailArrStoreData, data.stcd);
    // 根据当前测站获取传感器信息
    let activeSensor = getSensor(monitoringData.activeObtaining, '温度');
    setActiveEcharts(activeSensor);
  } else {
    setTimeout(() => {
      getObtainingStations(data);
    }, 3000);
  }
}
// 监听测站基础数据是否请求回来
const subBasicStore = basicStore.$subscribe((mutation: any, state: any) => {
  if (Object.keys(state.stDetailArrStore).length != 0) {
    monitoringData.stDetailArrStoreData = state.stDetailArrStore;
    // setActiveEcharts();
    subBasicStore();
  }
});
onMounted(() => {
  if (Object.keys(basicStore.getStDetailArrStore).length != 0) {
    monitoringData.stDetailArrStoreData = basicStore.getStDetailArrStore;
  }
  getWeathMonitoringData();
});
// 获取气象监测信息
</script>
<style lang="less" scoped>
.main {
  box-sizing: border-box;
  padding: 2px;
  border-radius: 0px 30px 0px 30px;
  background-image: linear-gradient(200deg, rgba(40, 165, 255, 0.9) 9%, rgba(100, 255, 255, 0) 34%, rgba(40, 126, 255, 0) 66%, #28a5ff 100%);
}

.main_in {
  width: 100%;
  height: 100%;
  border-radius: 0px 30px 0px 30px;
  background: rgba(6, 37, 70, 0.9);
}
//
.re-ul {
  // height: 46vh;
  padding: 20px;
  padding-bottom: 0px;
  overflow: auto;
  margin-bottom: 20px;
}
.scroll {
  height: 500px;
  overflow: hidden;
}
.re-list {
  cursor: pointer;
  background-color: rgba(0, 139, 246, 0.1);
  border-radius: 4px;
  padding: 10px;
  margin-bottom: 10px;
  & > div:nth-child(1) {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
    div:nth-child(1) {
      font-size: 14px;
      font-weight: 500;
      color: #fff;
    }
    div:nth-child(2) {
      font-size: 12px;
      color: #4d7dc6;
    }
  }
  & > div:nth-child(2) {
    display: flex;
    justify-content: space-between;
    div {
      font-size: 18px;
      background: linear-gradient(0deg, #00f7ff 0%, #007ff6 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      text-fill-color: transparent;
      img {
        display: inline-block;
        vertical-align: middle;
      }
    }
  }
}
.main-title {
  display: flex;
  justify-content: space-between;
  padding: 6px 20px;
  color: #dffeff;
  font-size: 16px;
  background: linear-gradient(90deg, rgba(40, 126, 255, 0.16) 0%, rgba(40, 126, 255, 0) 100%);
  margin-left: 8px;
  span {
    color: linear-gradient(0deg, #00f7ff 0%, #007ff6 100%);
    background: linear-gradient(0deg, #00f7ff 0%, #007ff6 100%);
    -webkit-text-fill-color: transparent;
    background-clip: text;
    -webkit-background-clip: text;
    font-size: 20px;
  }
  margin-bottom: 20px;
}
</style>
