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

      <!-- 暂无数据 -->
      <div class="content-block" v-else>
        <img src="../../assets/imageOne/423.png" alt class="content-block-img" />
        <div class="content-block-text">暂无数据</div>
      </div>
      <!-- 暂无数据 -->
    </el-main>
  </div>
</template>

<script>
export default {
  name: "cityList",
  data() {
    return {
      isShow: false, //判断是否有数据
      items: {},
      active: -1,
      current: 0,
      loading: true,
      typeData: [], //作物类型
      fullHeight: document.documentElement.clientHeight
    };
  },
  created() {
    let _this = this;
    //判断是从新建来的还是系统设置来的
    if (
      localStorage.getItem("regionID") !== null &&
      localStorage.getItem("regionIDset") == null
    ) {
      //新建
      var postData = _this.$qs.stringify({
        id: localStorage.getItem("regionID"),
        ret: "city"
      });
    } else if (
      localStorage.getItem("regionID") == null &&
      localStorage.getItem("regionIDset") !== null
    ) {
      //系统设置
      var postData = _this.$qs.stringify({
        id: localStorage.getItem("regionIDset"),
        ret: "city"
      });
    }
    _this
      .$axios({
        method: "post",
        url: "bigservers/city",
        data: postData,
        headers: {
          "Content-Type": "application/x-www-form-urlencoded"
        }
      })
      .then(res => {
        if (res.data !== null) {
          _this.items = res.data;
          _this.isShow = true;
          _this.loading = false;
        } else {
          _this.isShow = false;
          console.log("暂无数据");
        }
      })
      .catch(error => {
        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;
      if (
        localStorage.getItem("regionID") !== null &&
        localStorage.getItem("regionIDset") == null
      ) {
        //新建
        _this.$router.push("/newmessage");
      } else if (
        localStorage.getItem("regionID") == null &&
        localStorage.getItem("regionIDset") !== null
      ) {
        //系统设置
        _this.$router.push("/Site");
      }
    },

    // //事件委托
    addShow(e, index) {
      let _this = this;
      if (
        e.target.className === "cityList-li-text" ||
        e.target.className === "cityList-li mod-chart"
      ) {
        _this.current = index;
        //获取点击对象
        let el = e.currentTarget;
        let listID = _this.items[index].id; //id
        let listMonth = _this.items[index].month; //月份

        if (
          localStorage.getItem("regionID") !== null &&
          localStorage.getItem("regionIDset") == null
        ) {
          //新建
          localStorage.setItem("monthID", listID); //ID
          localStorage.setItem("month", listMonth); //月份
          _this.$router.push("/newmessage");
        } else if (
          localStorage.getItem("regionID") == null &&
          localStorage.getItem("regionIDset") !== null
        ) {
          //系统设置
          localStorage.setItem("monthIDset", listID); //ID
          localStorage.setItem("monthset", listMonth); //月份
          _this.$router.push("/Site");
        }

        // localStorage.setItem("monthID", listID); //ID
        // localStorage.setItem("month", listMonth); //月份
        // localStorage.setItem('monthType', listType) //类型
      }
      // _this.$router.push("/newmessage");
      // location.reload();
    },

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

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