<template>
  <modulen>
    <template #title>气象监测信息</template>
    <template #end>
      <div class="road-select">
        <el-select
          v-model="roadName"
          placeholder="选择路段"
          size="mini"
          @change="fnChange"
          popper-class="wayPoper"
        >
          <el-option
            v-for="(item, index) in roadList"
            :key="index"
            :label="item.organizationName"
            :value="item.organizationId"
          ></el-option>
        </el-select>
      </div>
    </template>

    <div class="qi-list">
      <div v-if="meteorology.msgdata.length">
        <WeatherList :msgdata="meteorology.msgdata" :myDate="myDate" />
      </div>
      <empty v-else />
    </div>
  </modulen>
</template>
<script setup lang="ts">
import { ref, computed, watch, nextTick, onMounted, reactive } from "vue";
import vueSeamlessScroll from "@/components/vueSeamlessScroll/index.vue";
import WeatherList from "./WeatherList.vue";
import { formatYearMonth, formatDate } from "@/utils/util";
import { getLatlng, getWeatherData } from "@/api/operationMonitor";
import { positionMarkers, weatherStatus } from "../utils/meteor";
import { useStore } from "vuex";
import { key } from "@/store";
// import { Console } from "console";

const store = useStore(key);
const selectLevel = computed(() => store.state.road?.selectLevel);
const selectRoadId = computed(() => store.state.road?.selectRoadId);
const allRoads = computed(() => store.state.road?.allRoads);
const myDate = computed(() => formatDate(store.state.appDate, "hh:mm:ss"));
// const positionMarker = JSON.parse(JSON.stringify(positionMarkers));
const params = computed(
  () => selectLevel.value + "&" + selectRoadId.value[selectLevel.value - 1]
);

const meteorology = reactive({
  msgdata: []
});

//气象路段
let roadName = ref("");
const Weather = ref([]);
let roadId =ref('')
const roadList = computed(() => {
  let road = [];
  allRoads.value.forEach(all => {
    if (selectLevel.value === 0) {
      all.level === "3" && all.passTime == "1" && road.push(all);
    } else if (selectLevel.value === "1") {
      selectRoadId.value[0] === all.provinceId &&
        all.passTime == "1" &&
        road.push(all);
    } else if (selectLevel.value === "2") {
      selectRoadId.value[1] === all.pnode &&
        all.passTime == "1" &&
        road.push(all);
    } else if (selectLevel.value === "3") {
      selectRoadId.value[2] === all.organizationId &&
        all.passTime == "1" &&
        road.push(all);
    }
  });
  
  roadName.value = road.length > 0 ? road[0].organizationId : "";
 
  
  fnChange( roadName.value);
  return road;
});

roadId.value = roadName.value; //默认id
onMounted(async () => {
  const res = await getLatlng(roadId.value);
  Weather.value = res.msgContent;
  fnGetData();
});

const fnChange = async val => {
  console.log(95,val);
  
  roadId.value =  val 
  const res = await getLatlng(val);
  Weather.value = res.msgContent;
  fnGetData();
};

const fnGetData = () => {
  meteorology.msgdata = [];
  Weather.value.map(async marker => {
    if (marker.id&&marker.id ===  roadId.value ) {
      const res = await getWeatherData({ lng: marker.lng, lat: marker.lat });
      marker.data = res;
      marker.icon = weatherStatus[res.skycon].icn;
      meteorology.msgdata.push(marker);
    }
  });

  
};

watch(params, val => {
  if (selectLevel.value === "3") {
    roadId.value  = selectRoadId.value[2];
    fnGetData();
  }
});

</script>

<style lang="scss" scoped>
// @import "~/styles/viewport-convert.scss";
.road-select {
  width: 110px;
  z-index: 5;
  ::v-deep(input::placeholder) {
    color: #94afe2;
    font-size: 14px;
  }

  ::v-deep(.el-input__inner) {
    color: #fff;
    background: #1b406c;
    border: none;
  }
}
::v-deep(.module-content) {
  z-index: 0 !important;
  display: block !important;
}

.qi-con {
  // margin-top: 10px;
  padding: 10px;
}
.qi-title {
  font-weight: bold;
}
.multiline-ellipsis {
  margin-top: 5px;
  width: 70%;
  display: -webkit-box;
  word-break: break-all;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 12px;
}
.qi-botton {
  ::v-deep(.module-content) {
    z-index: 0 !important;
    display: block !important;
  }
  .qi-con {
    // margin-top: 10px;
    padding: 10px;
  }
  .qi-title {
    font-weight: bold;
  }
  .multiline-ellipsis {
    margin-top: 5px;
    width: 70%;
    display: -webkit-box;
    word-break: break-all;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 14px;
  }
  .qi-botton {
    display: flex;
    justify-content: space-between;
  }
  .qi-right {
    margin-right: 10px;
  }
}
.qi-list {
  width: 100%;
  margin-top: 15px;
  padding-left: 10px;
  overflow: auto;
  height: 200px;
}
</style>
