<template>
  <div class="provinceList-box">
    <el-header>
      <div class>
        <el-page-header title @back="goBack" content="地区选择"></el-page-header>
      </div>
    </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'"
    >
      <ul class="provinceList-ul">
        <li class="provinceList-li mod-chart" v-for="(item,index) in items" :key="index">
          <img src="../../assets/imageOne/22.png" alt class="provinceList-li-img" />
          <div class="provinceList-li-text" @click="addShow($event,index),dowm(index)">{{item.name}}</div>
        </li>
      </ul>
    </el-main>
  </div>
</template>

<script>
export default {
  name: "provinceList",
  data() {
    return {
      items: {},
      active: -1,
      current: 0,
      loading: true,
      fullHeight: document.documentElement.clientHeight
    };
  },

  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();
  },

  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);
      });
  },

  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('defaultID') !== null) {
        //编辑
        // _this.$router.push("/acquiescent");
        _this.$router.replace("/acquiescent");
      } else {
        //新建
      // _this.$router.push("/newmessage");
      _this.$router.replace("/newmessage");
      }
    },

    //点击获取到用户选中的数据
    addShow(e, index) {
      let _this = this;
      if (
        e.target.className === "provinceList-li-text" ||
        e.target.className === "provinceList-li mod-chart"
      ) {
        _this.current = index;
        //获取点击对象
        let el = e.currentTarget;
        let listname = _this.items[index].name;
        let id = _this.items[index].id;

        //判断当前数据是新建还是编辑默认
        if (localStorage.getItem("defaultID") !== null) {
          //编辑默认数据
          localStorage.setItem("diquID", id);
          localStorage.setItem("diquName", listname);
          // _this.$router.push('/acquiescent');
          _this.$router.replace('/acquiescent');
        } else {
          //新建数据
          localStorage.setItem("regionID", id);
          localStorage.setItem("regionName", listname);
          // _this.$router.push("/newmessage");
          _this.$router.replace("/newmessage");
        }
      }
    },

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

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