<template>
  <div class="county-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="county-ul">
        <li
          class="county-li mod-chart"
          v-for="(item,index) in items"
          :key="index"
        >
          <img src="../../assets/imageOne/22.png" alt class="county-li-img" />
          <div class="county-li-text" @click="addShow($event,index),dowm(index)">{{item.name}}</div>
        </li>
      </ul>
    </el-main>
  </div>
</template>

<script>
export default {
  name: "county",
  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);
      }
    }
  },

  created() {
    let _this = this;
    let postData = _this.$qs.parse({
      code: localStorage.getItem("shicode")
    });
    _this
      .$axios({
        method: "post",
        url: "bigservers/city",
        data: postData,
        headers: {
          "Content-Type": "application/json"
        }
      })
      .then(res => {
        _this.items = res.data;
        _this.loading = false;
        console.log(res.data);
      })
      .catch(error => {
        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;
      _this.$router.push("/newmessage");
    },
    addShow(e, index) {
      let _this = this;
      if (e.target.className === "county-li-text" || e.target.className === 'county-li mod-chart') {
        _this.current = index;
        //获取点击对象
        let el = e.currentTarget;
        let listcode = _this.items[index].code;
        let listname = _this.items[index].name;
        let a = localStorage.getItem("xiancode");
        localStorage.setItem("comparisonXian", a);
        console.log(a);

        localStorage.setItem("xianname", listname);
        localStorage.setItem("xiancode", listcode);
      }

      _this.$router.push("/newmessage");
      location.reload(); //强制刷新页面
    },

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

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