<template>
  <div class="Site-box">
    <el-container>
      <!-- 页头 -->
      <el-header>
        <el-page-header title @back="goBack" content="默认设置"></el-page-header>
        <img src="../../assets/imageOne/21.png" alt class="Site-img" @click="moren()" />
      </el-header>

      <!-- 页面主内容 -->
      <el-main :style="'height:' + fullHeight + 'px'">
        <ul class="Site-ul">
          <!-- 地区设置 -->
          <li class="Site-li" @click="dianji()">
            <img src="../../assets/imageOne/22.png" alt class="Site-li-img" />
            <div class="Site-li-div">
              <div class="Site-li-text">地区设置</div>
              <div class="Site-li-text1">{{this.shengname}}</div>
            </div>
            <img src="../../assets/imageOne/15.png" alt class="Site-li-img1" />
          </li>

          <!-- 月份设置 -->
          <li class="Site-li" @click="dianshi()">
            <img src="../../assets/imageOne/22.png" alt class="Site-li-img" />
            <div class="Site-li-div">
              <div class="Site-li-text">月份设置</div>
              <div class="Site-li-text1">{{this.shiname == 'undefined' ? '' : this.shiname}}</div>
            </div>
            <img src="../../assets/imageOne/15.png" alt class="Site-li-img1" />
          </li>
        </ul>
      </el-main>
    </el-container>
  </div>
</template>

<script>
export default {
  name: "Site",
  data() {
    return {
      shengname: localStorage.regionNameset, //获取到省地址
      shiname: localStorage.monthset + "月份",
      fullHeight: document.documentElement.clientHeight
    };
  },
  created() {},
  watch: {
    fullHeight(val) {
      //监控浏览器高度变化
      if (!this.timer) {
        this.fullHeight = val;
        this.timer = true;
        let that = this;
        setTimeout(function() {
          //防止过度调用监测事件，导致卡顿
          that.timer = false;
        }, 400);
      }
    }
  },
  mounted() {
    this.get_boderHeight();
  },
  methods: {
    //动态获取浏览器高度
    get_boderHeight() {
      const that = this;
      window.onresize = () => {
        return (() => {
          window.fullHeight = document.documentElement.clientHeight;
          that.fullHeight = window.fullHeight;
        })();
      };
    },

    //点击返回系统设置
    goBack() {
      let _this = this;
      if (!localStorage.getItem("default")) {
        localStorage.removeItem("regionIDset");
        localStorage.removeItem("regionNameset");
        localStorage.removeItem("monthset");
        localStorage.removeItem("monthIDset");
        _this.$router.push("/system");
      } else {
        _this.$router.push("/system");
      }
    },

    //点击进入地区列表
    dianji() {
      let _this = this;
      _this.$router.push("/shengList");
    },

    //点击进入月份设置
    dianshi() {
      let _this = this;
      _this.$router.push("/shiList");

      // if (localStorage.getItem("regionID") !== null) {
      //   _this.$router.push("/shiList");
      // } else {
      //   this.$message({
      //     type: "warning",
      //     message: "请先选择地区!"
      //   });
      // }
    },

    //点击设置为默认地址
    moren() {
      let _this = this;
      if (
        localStorage.getItem("regionIDset") !== null &&
        localStorage.getItem("monthIDset") !== null
      ) {
        localStorage.setItem("default", "MoRen");
        this.$message({
          type: "success",
          message: "设置成功!"
        });
        _this.$router.push("/system");
      } else {
        this.$message({
          type: "warning",
          message: "请选择完地区或月份再进行保存!"
        });
      }
    }
  }
};
</script>

<style lang="scss">
@import "../../assets/style/bus.scss";
@import "../../assets/style/scss/Site.scss";
</style>
