<template>
  <div>
    <h2 class="info-window-header">
      气象监测点 - {{ data.roadName }} ({{ stakeTxt }})
    </h2>
    <div class="weather-pop-cont">
      <div class="left">
        <WeatherIcon class="weather" :weather="skycon" />
        <div class="title">
          {{ skyconTxt }}
        </div>
        <div class="temprature">{{ weather.temperature }}℃</div>
      </div>
      <div class="right">
        <div class="top">
          <div class="top-item">
            <SvgIcon name="icon-shidu" />
            <div class="title">湿度</div>
            <div class="desc large">{{ weather.humidity * 100 }}<small>%</small></div>
          </div>
          <div class="top-item">
            <SvgIcon name="icon-jiangyuliang" />
            <div class="title">降雨量</div>
            <div class="desc large">
              {{ weather.precipitation.local.intensity }}<small>mm/h</small>
            </div>
          </div>
          <div class="top-item">
            <SvgIcon name="icon-nengjiandu" />
            <div class="title">能见度</div>
            <div class="desc large">
              {{ weather.visibility }}<small>km</small>
            </div>
          </div>
          <div class="top-item">
            <SvgIcon name="icon-PM2" class="icon-PM2" />
            <div class="title">PM2.5</div>
            <div class="desc large">
              {{ weather.air_quality.pm25 }}
            </div>
          </div>
        </div>
        <div class="bottom">
          <div class="bottom-item">
            <SvgIcon name="icon-kongqizhiliang" />
            <div class="title">空气质量</div>
            <div class="desc">
              {{ weather.air_quality.description.chn }}
            </div>
          </div>
          <div class="bottom-item">
            <SvgIcon name="icon-kongqizhishu" />
            <div class="title">空气指数</div>
            <div class="desc">
              {{ weather.air_quality.aqi.chn }}
            </div>
          </div>
          <div class="bottom-item">
            <SvgIcon name="icon-fenglifangxiang" />
            <div class="title">风向/风速</div>
            <div class="desc">
              {{ weather.wind.direction }} &nbsp;/&nbsp;
              {{ weather.wind.speed }}km/hr
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import SvgIcon from "@/components/svgIcon.vue";
import WeatherIcon from "@/components/WeatherIcon/index.vue";
import { formatStake } from "@/utils/road";
export default {
  name: "TempWeatherPopupContent",
  components: { SvgIcon, WeatherIcon },
  props: {
    data: {
      type: Object,
      default() {
        return null;
      },
    },
  },
  computed: {
    weather() {
      let { weather } = this.data || {};
      if (typeof weather === "string") {
        try {
          weather = JSON.parse(weather);
        } catch (err) {}
      }
      return weather;
    },
    stakeTxt() {
      return (
        (this.data && this.data.mpoint && formatStake(this.data.mpoint)) || ""
      );
    },
    skycon() {
      return this.weather?.skycon;
    },
    skyconTxt() {
      const skyconMap = {
        CLEAR_DAY: "晴（白天）",
        CLEAR_NIGHT: "晴（夜间）",
        PARTLY_CLOUDY_DAY: "多云（白天）",
        PARTLY_CLOUDY_NIGHT: "多云（夜间）",
        CLOUDY: "阴",
        LIGHT_HAZE: "轻度雾霾",
        MODERATE_HAZE: "中度雾霾",
        HEAVY_HAZE: "重度雾霾",
        LIGHT_RAIN: "小雨",
        MODERATE_RAIN: "中雨",
        HEAVY_RAIN: "大雨",
        STORM_RAIN: "暴雨",
        FOG: "雾",
        LIGHT_SNOW: "小雪",
        MODERATE_SNOW: "中雪",
        HEAVY_SNOW: "大雪",
        STORM_SNOW: "暴雪",
        DUST: "浮尘",
        SAND: "沙尘",
        WIND: "大风",
        // 雷阵雨: "weather-thunder-shower",
        // 冰雹: "weather-hail",
        // 雨夹雪: "weather-sleet",
      };
      return skyconMap[this.skycon];
    },
  },
};
</script>
<style lang="scss" scoped>
.info-window-header {
  display: flex;
  justify-content: space-between;
  height: 20px;
  margin: 0;
  margin-bottom: 4px;
  font-size: 14px;
  color: #fff;
  white-space: nowrap;
}

.weather-pop-cont {
  display: flex;
  width: 100%;
  min-width: 450px;
  padding: 16px;
  text-align: center;
  background: rgb(13 45 73 / 95%);

  .left {
    flex: 0 0 110px;
    margin-right: 32px;

    .weather {
      width: 80px;
      height: 80px;
      color: #fcb611;
    }

    .title {
      margin: 8px;
      font-size: 18px;
      white-space: nowrap;
    }

    .temprature {
      font-size: 40px;
    }
  }

  .right {
    flex: 1;

    .top {
      margin-bottom: 16px;

      .svg-icon {
        color: #3daeff;
      }

      .icon-PM2 {
        color: #ffc21f;
      }
    }

    .bottom {
      .svg-icon {
        color: #43e56b;
      }
    }

    .top,
    .bottom {
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 80px;
      width: 100%;
    }

    .top-item,
    .bottom-item {
      ::v-deep(.svg-icon) {
        display: inline-block;
      }
      .title {
        margin: 5px 0;
        font-size: 12px;
        color: #aac5e1;
      }

      .desc {
        line-height: 23px;
        color: #aac5e1;

        .small {
          font-size: 12px;
        }

        &.large {
          font-size: 18px;
        }
      }
    }
  }
}
</style>
