<template>
  <div class="big-head-wrap">
    <div class="left-wrap">
      <!-- <i class="el-icon-map-location"></i>
      <span class="span-info">全国</span>-->
      <!-- <el-cascader :options="treeList" :props="{ checkStrictly: true }" clearable></el-cascader> -->
      <treeselect
        class="tree-select-wrap"
        v-model="treeValue"
        :options="treeList"
        placeholder="全国"
        v-show="tempUserType !== 'PERSONAL'"
      />
      <el-select
        v-show="tempUserType !== 'PERSONAL'"
        v-model="inputValue"
        size="small"
        filterable
        placeholder="项目名称"
        clearable
      >
        <el-option
          v-for="item in projectList"
          :key="item.projectId"
          :label="item.projectName"
          :value="item.projectId"
        ></el-option>
      </el-select>
    </div>
    <div class="title-wrap">{{handelTile}}</div>
    <div class="right-wrap">
      <span>{{days}}</span>
      <span>{{weeks}}</span>
      <span>{{time}}</span>
      <!-- <el-button type="text" @click="signOut" title="退出大屏" plain icon="iconfont icontuichu"></el-button> -->
      <el-button
        type="text"
        @click="fullScreen"
        :title="fullscreen ? '退出全屏':'全屏' "
        plain
        :icon="fullscreen ? 'iconfont iconshousuo':'iconfont iconquanping1'"
      ></el-button>
    </div>
  </div>
</template>
<script>
import { treeListRegionalism } from "@/api/system/regionalism";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
export default {
  name: "bigHeadWrap",
  props: ["handelTile", "projectList"],
  components: {
    Treeselect
  },
  data() {
    return {
      inputValue: "",
      days: "",
      weeks: "",
      time: "",
      treeList: [],
      treeValue: null,
      tempUserType: null,
      fullscreen: false
    };
  },
  mounted() {
    setInterval(this.getDate, 1000);
  },
  created() {
    this.tempUserType = this.$store.getters.userType;
    this.treeListRegionalism();
    this.getDate();
  },
  watch: {
    inputValue(val) {
      this.$emit("eventProjectId", val);
    },
    treeValue(val) {
      this.$emit("eventRegionalismId", val);
    }
  },
  methods: {
    // 退出大屏 默认进入项目首页
    signOut() {
      this.$router.push("/");
    },
    fullScreen() {
      // let element = document.getElementsByClassName("big-head-wrap"); //设置后就是   id==con_lf_top_div 的容器全屏
      let element = document.getElementById("con_lf_top_div"); //设置后就是   id==con_lf_top_div 的容器全屏
      if (this.fullscreen) {
        if (document.exitFullscreen) {
          document.exitFullscreen();
        } else if (document.webkitCancelFullScreen) {
          document.webkitCancelFullScreen();
        } else if (document.mozCancelFullScreen) {
          document.mozCancelFullScreen();
        } else if (document.msExitFullscreen) {
          document.msExitFullscreen();
        }
      } else {
        if (element.requestFullscreen) {
          element.requestFullscreen();
        } else if (element.webkitRequestFullScreen) {
          element.webkitRequestFullScreen();
        } else if (element.mozRequestFullScreen) {
          element.mozRequestFullScreen();
        } else if (element.msRequestFullscreen) {
          // IE11
          element.msRequestFullscreen();
        }
      }
      this.fullscreen = !this.fullscreen;
      this.$emit("eventFullscreen", { value: this.fullscreen });
    },
    treeListRegionalism() {
      treeListRegionalism({}).then(res => {
        this.treeList = res.data;
      });
    },
    getDate() {
      this.weeks = this.parseTime(new Date(), "星期{a}");
      this.days = this.parseTime(new Date(), "{y}-{m}-{d}");
      this.time = this.parseTime(new Date(), "{h}:{i}:{s}");
    }
  }
};
</script>
<style lang="scss">
.big-head-wrap {
  height: 72px;
  width: 100%;
  display: flex;
  background-image: url("../../../../assets/images/big/head_v2.png");
  background-size: cover;
  .left-wrap {
    width: 20%;
    height: 100%;
    display: flex;
    // color: #fff;
    font-size: 14px;
    align-items: flex-end;
    justify-content: left;
    padding-left: 30px;
    display: flex;
    align-items: center;
    padding-top: 20px;
    > i {
      line-height: 1.5;
    }
    .span-info {
      display: block;
      width: 70px;
      margin-left: 5px;
    }
    .el-input {
      min-width: 150px;
    }
    .el-input--small .el-input__inner {
      // line-height: 36px;
      background: #ff000000;
      border-color: #007598;
      border-color: #153678;
      color: #fff;
      margin-left: 10px;
    }
    .el-input__prefix {
      top: -4px;
    }
    .tree-select-wrap {
      height: 32px;
      .vue-treeselect__control {
        background: #fff0;
        border-color: #007598;
        border-color: #153678;
        height: 32px;
      }
      .vue-treeselect__single-value {
        color: #fff;
      }
    }
  }
  .title-wrap {
    color: #fff;
    width: calc(100% - 40%);
    display: flex;
    font-size: 36px;
    font-family: "Source Han Sans CN";
    font-weight: 500;
    letter-spacing: 2px;
    justify-content: center;
    align-items: center;
  }
  .right-wrap {
    width: 20%;
    display: flex;
    color: #fff;
    font-size: 20px;
    justify-content: space-around;
    align-items: flex-end;
    font-family: "Source Han Sans CN";
    font-weight: 400;
    display: flex;
    align-items: center;
    padding-top: 20px;
    margin-right: 30px;
    .el-button--text {
      border: 1px solid;
      width: 30px;
      height: 30px;
      border-radius: 5px 0;
      padding-top: 6px;
      font-size: 16px;
      .el-icon-setting {
        font-weight: 600;
      }
    }
    .el-button--text：hover {
      background: transparent;
    }
  }
}
</style>
