<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="weather.length">
        <WeatherList :myDate="myDate" ref="whlist" />
      </div>
      <empty v-else />
    </div>
  </modulen>
</template>
<script>
import { formatDate } from "@/utils/util";
import { getLatlng, getWeatherData } from "@/api/operationMonitor";
import { weatherStatus } from "../utils/meteor";
import WeatherList from "./WeatherList.vue";
import moment from "moment";
export default {
  components: {
    WeatherList
  },
  data() {
    return {
      roadName: "",
      myDate: "",
      roadList: [],
      meteorology: [],
      allRoadsList: [],
      weather: []
    };
  },
  computed: {
    allRoads() {
      // 所有组织机构/路段
      this.allRoadsList = this.$store.state.road.allRoads;
      return this.$store.state.road.allRoads;
    },

    getAppDate() {
      return moment(this.$store.state.appDate).format("yyyyMM");
    },
    selectRoadId() {
      return this.$store.state.road.selectRoadId;
    },
    selectLevel() {
      return this.$store.state.road.selectLevel;
    }
  },
  watch: {
    allRoads(newVal) {
      this.allRoadsList = newVal;
      this.getData();
    },
    getAppDate(newVal) {},
    selectRoadId(newVal) {
      this.selectRoadId = newVal;
      this.getData();
    }
  },
  mounted() {
    this.getData();
  },
  methods: {
    async getData() {
      this.myDate = formatDate(new Date(), "hh:mm:ss");
      let road = [];
      this.allRoadsList.forEach(all => {
        if (this.selectLevel === 0) {
          all.level === "3" && all.passTime == "1" && road.push(all);
        } else if (this.selectLevel === "1") {
          this.selectRoadId[0] === all.provinceId &&
            all.passTime == "1" &&
            road.push(all);
        } else if (this.selectLevel === "2") {
          this.selectRoadId[1] === all.pnode &&
            all.passTime == "1" &&
            road.push(all);
        } else if (this.selectLevel === "3") {
          this.selectRoadId[2] === all.organizationId &&
            all.passTime == "1" &&
            road.push(all);
        }
      });

      this.roadName = road.length > 0 ? road[0].organizationId : "";
      this.roadList = road;
      this.fnChange(this.roadName);
    },
    async fnChange(val) {
      const res = await getLatlng(val);
      this.weather = res.msgContent;
      this.fnGetData(val);
    },
    fnGetData(val) {
      this.meteorology = [];
      this.weather.map(async marker => {
        if (marker.id === val) {
          const res = await getWeatherData({
            lng: marker.lng,
            lat: marker.lat
          });
          marker.data = res;
          marker.icon = weatherStatus[res.skycon].icn;
          this.meteorology.push(marker);
          if (this.meteorology.length == this.weather.length) {
            //表示循环完成，再去给滚动组件赋值和渲染
            this.$refs.whlist.init(this.meteorology);
            // console.log(131, this.$refs.whlist.init);
          }
        }
      });
    }
  }
};
</script>
<style lang="scss" scoped>
.el-select-dropdown__item {
  color: #fff !important;
}
.el-select-dropdown__item:hover {
  color: #3da5ff !important;
}
.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>