<template>
  <div class="mainContainer">
    <div class="mainContainerBox">
      <header>
        <div class="head-left">
          <ul>
            <li>
              <div @click="navBlock" class="head-bth">
                <span v-for="(item,index) in 3" :key="index"></span>
              </div>
            </li>
            <li class="line">
              <span></span>
            </li>
            <li>
              <img class="head-icon" src="@/assets/lzzk.png" alt />
            </li>
            <li>
              <span class="head-text">冷站智控</span>
            </li>
            <li>
              <span class="head-circular"></span>
            </li>
            <li>
              <span class="head-text">{{headText}}</span>
            </li>
            <li>
              <div class="triangle_border_down"></div>
            </li>
          </ul>
        </div>
        <div class="head-right">
          <ul>
            <li>
              <span class="head-text">{{dateNow||'--'}}</span>
            </li>
            <li>
              <span class="line"></span>
            </li>
            <li>
              <span class="head-text MicrYaHei">天气：{{weather}}</span>
            </li>
            <li>
              <span class="head-text MicrYaHei">{{temperatureOut}}℃</span>
            </li>
            <li>
              <span class="line"></span>
            </li>
            <li>
              <span class>{{$store.state.userInfo.username}}</span>
            </li>
            <li>
              <div class="triangle_border_down"></div>
            </li>
          </ul>
        </div>
      </header>
      <nav>
        <div class="nav-left">
          <el-select class="nav-select" v-model="value">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </div>
      </nav>
    </div>
    <div class="mainContainerTop"></div>
    <div id="nav" class="nav">
      <div class="nav-box">
        <div @click="navNone" class="nav-bth">
          <span v-for="(item,index) in 3" :key="index"></span>
        </div>
        <div class="nav-top">冷站智控</div>
      </div>
      <p v-for="(item,index) in menuList" :key="index" class="nav-title">
        <router-link :to="item.path">{{item.name}}</router-link>
      </p>
    </div>
  </div>
</template>
<script>
import store from "../../store";
var moment = require("moment");
import "moment/locale/zh-cn";
import { queryWeather } from "@/api/main/main.js";

export default {
  data() {
    return {
      menuList: [
        {
          name: "当日运行策略",
          path: "/strategy"
        },
        {
          name: "运行评价",
          path: "/evaluate"
        },
        {
          name: "未执行申诉",
          path: "/appeal"
        },
        {
          name: "申诉审核",
          path: "/audit"
        },
        {
          name: "营业时间调整",
          path: "/doBusiness"
        }
      ],
      options: [
        {
          value: "Pj4419000005",
          label: "嘉铭东枫产业园产业园"
        },
        {
          value: "Pj1101010002",
          label: "嘉铭东枫产业园"
        }
      ],
      dateNow: new Date(),
      weather: "",
      temperatureIn: "", // 室内
      temperatureOut: "", // 室外
      value: "Pj4419000005"
    };
  },
  props: ["headText"],
  methods: {
    navNone() {
      document.getElementById("nav").className = "nav";
    },
    navBlock() {
      document.getElementById("nav").className = "nav nav-hover";
    },
    // 查询当日天气
    query() {
      queryWeather({}).then(res => {
        if (res.result == "success") {
          this.weather = res.weather || "--";
          this.temperatureIn = res.temperatureIn || "--";
          this.temperatureOut = res.temperatureOut || "--";
        }
      });
    }
  },
  mounted() {
    setInterval(() => {
      this.dateNow = moment()
        .locale("zh-cn")
        .format("YYYY.MM.DD HH:mm");
    }, 1000);
    this.query();
  }
};
</script>
<style lang="scss" scoped>
.mainContainer {
  .mainContainerBox {
    width: 100%;
    height: 96px;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1;
    header {
      max-height: 48px;
      padding: 12px 16px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      background: rgba(255, 255, 255, 1);
      box-shadow: 0px 3px 14px 0px rgba(31, 35, 41, 0.1);
      .head-left {
        display: flex;
        align-items: center;
        ul {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin: 0;
          padding: 0;
          li {
            margin: 0 4px;
            .head-bth {
              width: 16px;
              height: 16px;
              span {
                display: block;
                width: 18px;
                height: 2px;
                background: rgba(0, 145, 255, 1);
                border-radius: 1px;
                margin: 0 auto;
              }
              span:nth-of-type(2) {
                margin: 5px auto;
              }
            }
            .line {
              display: inline-block;
              width: 1px;
              height: 16px;
              margin: 4px 12px 0 12px;
              background: rgba(216, 216, 216, 1);
            }
            .head-icon {
              width: 20px;
              height: 20px;
              margin-top: 3px;
            }
            .head-text {
              height: 26px;
              font-size: 14px;
              color: rgba(31, 36, 41, 1);
              line-height: 26px;
            }
            .head-circular {
              display: inline-block;
              width: 4px;
              height: 4px;
              background: rgba(195, 198, 203, 1);
              border-radius: 90px;
              margin-bottom: 3px;
            }
            .triangle_border_down {
              width: 0;
              height: 0;
              border-width: 8px 6px 0;
              border-style: solid;
              border-color: #9ca2a9 transparent transparent;
            }
          }
        }
      }
      .head-right {
        display: flex;
        align-items: center;
        ul {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin: 0;
          padding: 0;
          li {
            margin: 0 4px;
            .head-bth {
              display: inline-block;
              width: 24px;
              height: 24px;
              background: rgba(0, 145, 255, 1);
            }
            .line {
              display: inline-block;
              width: 1px;
              height: 16px;
              margin: 4px 8px 0 8px;
              background: rgba(216, 216, 216, 1);
            }
            .head-text {
              height: 18px;
              font-size: 14px;
              color: #646c73;
              line-height: 19px;
            }
            .head-circular {
              display: inline-block;
              width: 4px;
              height: 4px;
              background: rgba(195, 198, 203, 1);
              border-radius: 90px;
              margin-bottom: 3px;
            }
            .triangle_border_down {
              width: 0;
              height: 0;
              border-width: 8px 6px 0;
              border-style: solid;
              border-color: #9ca2a9 transparent transparent;
            }
          }
        }
      }
    }
    nav {
      height: 48px;
      background: rgba(247, 249, 250, 1);
      display: flex;
      justify-content: flex-start;
      align-items: center;
    }
  }
  .mainContainerTop {
    width: 100%;
    height: 96px;
  }
  .nav {
    position: fixed;
    left: 0;
    top: 0;
    width: 0px;
    background: #004275;
    overflow: hidden;
    height: 1005px;
    transition: all 0.3s;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    z-index: 99;
    .nav-bth {
      width: 16px;
      height: 16px;
      margin: 24px;
      span {
        display: block;
        width: 18px;
        height: 2px;
        background: #fff;
        border-radius: 1px;
        margin: 0 auto;
      }
      span:nth-of-type(2) {
        margin: 5px auto;
      }
    }
    .nav-box {
      display: flex;
      align-items: center;
      padding-right: 24px;
      .nav-top {
        color: #fff;
      }
    }

    .nav-title {
      padding: 0 24px;
      a {
        color: #fff;
        opacity: 0.9;
        font-size: 16px;
        line-height: 24px;
      }
    }
    .nav-title:hover {
      opacity: 0.5;
    }
  }
  .nav-hover {
    width: 200px;
  }
}
</style>
<style lang="scss">
.nav-left {
  .nav-select {
    width: 144px;
    height: 28px;
    border-radius: 14px;
    margin-left: 16px;
    .el-input--suffix .el-input__inner {
      padding: 0 9px;
      width: 144px;
      height: 28px;
      border-radius: 14px;
      margin-left: 16px;
    }
    .el-input__icon {
      line-height: 28px;
      display: none;
    }
  }
}
</style>