<template>
  <div class="shengList-box">
    <el-header>
      <el-row :gutter="10">
        <el-col :xs="24" :sm="6" :md="4" :lg="3" :xl="1">
          <div class>
            <el-page-header title @back="goBack" content="地区设置"></el-page-header>
          </div>
        </el-col>
      </el-row>
    </el-header>

    <!-- 主内容 -->
    <el-main
      v-loading="loading"
      element-loading-text="拼命加载中"
      element-loading-spinner="el-icon-loading"
      element-loading-background="rgba(0, 0, 0, 0.8)"
      :style="'height:' + fullHeight + 'px'"
    >
      <el-col :xs="24" :sm="6" :md="4" :lg="3" :xl="1">
        <ul class="shengList-ul">
          <li
            class="shengList-li mod-chart"
            v-for="(item,index) in items"
            :key="index"
            :class="active == index ? 'addclass' : '' "
          >
            <img src="../../assets/imageOne/22.png" alt class="shengList-li-img" />
            <div class="shengList-li-text" @click="addShow($event,index),dowm(index)">{{item.name}}</div>
          </li>
        </ul>
      </el-col>
    </el-main>
  </div>
</template>

<script>
export default {
  name: "shengList",
  data() {
    return {
      items: {},
      active: -1,
      current: 0,
      loading: true,
      fullHeight: document.documentElement.clientHeight
    };
  },
  created() {
    let _this = this;
    _this
      .$axios({
        method: "get",
        url: "bigservers/city"
      })
      .then(res => {
        _this.items = res.data;
        _this.loading = false;
      })
      .catch(error => {
        console.log("数据获取失败");
        console.log(error);
      });
  },

  watch: {
    fullHeight(val) {
      //监控浏览器高度变化
      if (!this.timer) {
        this.fullHeight = val;
        this.timer = true;
        let that = this;
        setTimeout(function() {
          //防止过度调用监测事件，导致卡顿
          that.timer = false;
        }, 400);
      }
    }
  },

  methods: {
    //动态获取浏览器高度
    get_boderHeight() {
      const that = this;
      window.onresize = () => {
        return (() => {
          window.fullHeight = document.documentElement.clientHeight;
          that.fullHeight = window.fullHeight;
        })();
      };
    },

    goBack() {
      let _this = this;
      _this.$router.push("/Site");
    },

    // //事件委托
    addShow(e, index) {
      let _this = this;
      if (e.target.className === "shengList-li-text") {
        _this.current = index;
        //获取点击对象
        let el = e.currentTarget;
        let listname = _this.items[index].name;
        let id = _this.items[index].id;
        let a = localStorage.setItem("regionIDset", id);
        let b = localStorage.setItem("regionNameset", listname);
      }
      _this.$router.push("/Site");
    },

    dowm(index) {
      //将点击的元素的索引赋值给变量
      this.active = index;
    }
  }
};
</script>

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