<template>
  <div id="tags-view-container" class="tags-view-container">
    <div id="tag_left" v-show="!isShow">
      <span>当前所在位置:</span>
      <breadcrumb id="breadcrumb-container" class="breadcrumb-container" />
    </div>
    <div id="tag_right">
      <div id="weather" v-show="!isShowTag">
        <span
          >{{ this.area }}市&nbsp; <img :src="day_weather_pic" />/<img
            :src="night_weather_pic"
          />
          &nbsp;{{ this.day_air_temperature }}/{{ this.night_air_temperature }}℃
        </span>
        <span>
          {{ this.data.getFullYear() }}年 {{ this.data.getMonth() }}月
          {{ this.data.getDate() }}日 &nbsp;第{{ this.data.getDay() }}周
        </span>
      </div>
      <div id="right_buts" v-show="isShowTag">
        <span>1号仓</span>
        <button>导航选择其他仓库</button>
        <button>地图选择其他仓库</button>
      </div>
    </div>
  </div>
</template>

<script>
import Breadcrumb from "@/components/Breadcrumb"
// import path from "path"
import { getWeather } from "@/api/home"
export default {
  components: { Breadcrumb },
  data() {
    return {
      //当前位置
      isShow:false,
      //天气是否展示
      isShowTag: false,
      // 市名
      area: "",
      //温度

      //白天天气状况
      day_weather_pic: null,
      //晚上天气状况
      night_weather_pic: null,
      //白天天气气温
      day_air_temperature: "",
      //晚上天气气温
      night_air_temperature: "",

      top: 0,
      left: 0,

      data: new Date(),
    }
  },

  watch: {
    $route() {
      if (this.$route.path != "/home") {
        this.isShowTag = true;
        this.isShow=false
      } else {
        this.isShowTag = false;
        this.isShow=true
      }
    },
  },
  mounted() {
    this.weather()

    if (this.$route.path != "/home") {
      this.isShowTag = true
       this.isShow=false
    } else {
      this.isShowTag = false
      this.isShow=false
    }
  },
  methods: {
    //请求天气预报接口
    weather() {
      this.$axios({
        url: "https://route.showapi.com/9-2",
        method: "get",
        params: {
          area: "太原",
          showapi_appid: "427557",
          showapi_timestamp: this.data,
          showapi_sign: "103b5c140b744439a480de85a6589051",
        },
      }).then((res) => {
        console.log(res, "res....")
        console.log(res.data.showapi_res_body.f1.day_weather_pic, "....")
        this.area = res.data.showapi_res_body.cityInfo.c3
        this.day_weather_pic = res.data.showapi_res_body.f1.day_weather_pic
        this.night_weather_pic = res.data.showapi_res_body.f1.night_weather_pic
        this.day_air_temperature =
          res.data.showapi_res_body.f1.day_air_temperature
        this.night_air_temperature =
          res.data.showapi_res_body.f1.night_air_temperature
      })
    },
  },
}
</script>

<style lang="scss" scoped>
.tags-view-container {
  height: 34px;
  width: 100%;
  display: flex;
  justify-content: space-between;
    align-items: center;
  padding:0 10px;
  background: #fff;
  border-bottom: 1px solid #d8dce5;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.12), 0 0 3px 0 rgba(0, 0, 0, 0.04);
  #tag_left {
    height:100%;
    display:flex;
     align-items: center;
     span{
       font-size:14px;
     }
  }
  #tag_right{
    width:25%;
     //右侧天气样式
  #weather {
    text-align: left;
    margin-right: 20px;
    line-height: 34px;
    display: block;
    img {
      width: 20px;
      vertical-align: middle;
    }
  }
  #right_buts{
  
    display:flex;
    justify-content: space-around;
    align-items: center;
    padding-right:20px;
    span,button{
      font-size:14px;
    }
  }
  }
 
}
</style>

<style lang="scss">
//reset element css of el-icon-close
</style>
