<template>
  <div style="padding-top: 10px; padding-left: 25px; padding-right: 3px">
    <el-row>
      <el-row>
        <el-button
          round
          type="primary"
          size="mini"
          icon="el-icon-location-outline"
          >{{ weatherInfo.city }}市</el-button
        >
      </el-row>
      <el-row class="tab" style="height: 100%">
        <el-col style="height: 100%" :span="14">
          <el-row style="height: 100%; display: flex; align-items: center">
            <el-col class="tab-date-tab-day" :span="6">
              <!--日期-->
              <p class="tab-date-tab-day-content">{{ date.day }}</p>
            </el-col>
            <el-col :span="9" class="tab-date-tab-week-and-year">
              <!--周几-->
              <p class="tab-date-tab-week-content">{{ date.week }}</p>
              <!--年月-->
              <p class="tabtab-date-tab-year-content">
                {{ date.year + '年' + date.month + '月' }}
              </p>
            </el-col>
          </el-row>
        </el-col>
        <el-col style="height: 100%" :offset="2" :span="8">
          <el-row class="tab-wea">
            <!--天气图标-->
            <el-col class="tab-wea-img" :span="7">
              <img style="width: 100%" :src="getWeatherImgUrl()" />
            </el-col>
            <!--天气信息-->
            <el-col :span="16" :offset="1">
              <el-row class="tab-wea-info">
                <el-col :span="8">
                  <!--当前气温-->
                  <p class="tab-wea-info-tem-content">
                    {{ weatherInfo.tem }}&#8451;
                  </p>
                </el-col>
                <el-col :span="10" :offset="2">
                  <!--天气类型-->
                  <p class="tab-wea-info-wea-content">{{ weatherInfo.wea }}</p>
                </el-col>
              </el-row>
              <!--最低气温和最高气温-->
              <p class="tab-wea-tem-info-max-and-min">
                <i class="el-icon-sort-down" /> {{ weatherInfo.tem2 }}&#8451; ~
                <i class="el-icon-sort-up" /> {{ weatherInfo.tem1 }}&#8451;
              </p>
            </el-col>
          </el-row>
        </el-col>
      </el-row>
      <el-row class="tab-expand">
        <el-col
          :span="12"
          style="
            display: flex;
            align-items: center;
            justify-content: space-around;
          "
        >
          <div class="tab-expand-item">
            <img src="@/assets/images/weather/空气质量.png" />
            <p class="tab-expand-item-content">{{ weatherInfo.air_level }}</p>
          </div>
          <div class="tab-expand-item">
            <img src="@/assets/images/weather/风向.png" />
            <p class="tab-expand-item-content">
              {{ weatherInfo.win }} {{ weatherInfo.win_meter }}
            </p>
          </div>
          <div class="tab-expand-item">
            <img src="@/assets/images/weather/空气湿度.png" />
            <p class="tab-expand-item-content">{{ weatherInfo.humidity }}</p>
          </div>
        </el-col>
      </el-row>
    </el-row>
    <div style="height: 3px; background: #e1f4ff"></div>
    <el-row style="height: 173px">
      <el-col
        :span="7"
        style="
          border-radius: 100%;
          height: 100%;
          display: flex;
          align-items: center;
          justify-content: center;
        "
      >
        <img
          v-if="weatherInfo.solarName"
          class="tab-solar-img"
          :src="getSolarImgUrl()"
        />
      </el-col>
      <el-col :span="17">
        <p style="font-size: 14px; color: #888888; margin-block-end: 0em">
          {{ weatherInfo.solarDigest }}
        </p>
        <div style="display: flex; flex-direction: row-reverse">
          <a
            style="
              font-size: 13px;
              color: #37b8ff;
              margin-right: 10px;
              margin-bottom: 5px;
            "
            @click="openDeatil"
            >查看更多>>
          </a>
        </div>
      </el-col>
    </el-row>
    <solar-details ref="solarDetails" :weatherInfo="weatherInfo"/>
  </div>
</template>
<script>
import solarDetails from './solarDetails.vue';
export default {
  components: {solarDetails } ,
  name: 'landInfoTab',
  props: ['weatherInfo'],
  data() {
    return {
      // 版本号
      version: '3.8.5'
    };
  },
  computed: {
    date() {
      let date = { year: '/', month: '/', day: '/', week: '/' };
      if (this.weatherInfo.date) {
        let dateArray = this.weatherInfo.date.split('-');
        date.year = dateArray[0];
        date.month = dateArray[1];
        date.day = dateArray[2];
        date.week = this.weatherInfo.week.replace('星期', '周');
      }
      return date;
    }
  },
  methods: {
    getSolarImgUrl() {
      return require('@/assets/images/solar/' +
        this.weatherInfo.solarName +
        '.jpg');
    },
    getWeatherImgUrl() {
      return require('@/assets/images/weather/' +
        this.weatherInfo.wea_img +
        '.png');
    },
    openDeatil(){
      this.$refs.solarDetails.open()
    }
  }
};
</script>
<style scoped lang="scss">
@import '@/assets/styles/variables.scss';

.tab {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: center;
}
.tabtab-date-tab-year-content {
  color: $home-weather-text-color;
  font-size: 20px;
  margin-block-end: 0em;
  margin-block-start: 0em;
  text-shadow: 0px 6px 6px $home-weather-text-color-shadow;
}
.tab-date-tab-day-content {
  color: $home-weather-text-color;
  font-size: 54px;
  margin-block-end: 0em;
  margin-block-start: 0em;
  text-shadow: 0px 6px 6px $home-weather-text-color-shadow;
}
.tab-date-tab-week-content {
  color: $home-weather-text-color;
  font-size: 20px;
  margin-block-end: 0em;
  margin-block-start: 0em;
  text-shadow: 0px 6px 6px $home-weather-text-color-shadow;
}
.tab-date-tab-week-and-year {
  display: flex;
  height: 100%;
  flex-direction: column;
  justify-content: center;
  text-shadow: 0px 6px 6px $home-weather-text-color-shadow;
}
.tab-date-tab-day {
  height: 100%;
  display: flex;
  justify-content: center;
}
.tab-wea {
  height: 100%;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
}
.tab-wea-info {
  display: flex;
  align-items: flex-end;
}

.tab-wea-info-tem-content {
  color: $home-weather-text-color;
  font-size: 24px;
  margin-block-end: 0em;
  margin-block-start: 0em;
}

.tab-wea-info-wea-content {
  color: $home-weather-text-color;
  margin-block-end: 0em;
  margin-block-start: 0em;
  font-size: 19px;
}
.tab-wea-tem-info-max-and-min {
  color: $home-weather-text-color;
  font-size: 15px;
  margin-block-end: 0em;
  margin-block-start: 0em;
}
.tab-expand {
  font-size: 15px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
.tab-expand-item {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
.tab-expand-item-content {
  color: $home-weather-text-color;
  margin-left: 10px;
  margin-block-start: 0em;
  margin-block-end: 0em;
}
.tab-solar-img {
  border-style: solid;
  border-width: 10px;
  border-color: #e6f3ff;
  height: 80px;
  width: 80px;
  border-radius: 100%;
  overflow: hidden;
}
</style>
