<!--  -->
<template>
  <div
    :style="'height:' + fullHeight + 'px'"
    class="statistics-box"
    v-loading="loading"
    element-loading-text="拼命加载中"
    element-loading-spinner="el-icon-loading"
    element-loading-background="rgba(0, 0, 0, 0.8)"
  >
    <!-- 页面头部 -->
    <el-header>
      <el-page-header title @back="goBack()" :content="this.tltTxt"></el-page-header>
    </el-header>

    <!-- 页面主内容 -->
    <el-main :style="'height:' + fullHeight + 'px'">
      <!-- 粮食作物 -->
      <div class="statistics-cerealsbox interval">
        <!-- 标题 -->
        <div class="statistics-cerealstlt">
          <div class="statistics-cerealstlt-line"></div>
          <div class="statistics-cerealstlt-txt">粮食作物</div>
        </div>

        <div class="statistics-cerealsUL" v-if="liangshiShow">
          <div
            class="statistics-cerealsliA ListBox"
            v-show="item.data.crop_sort == '1'"
            v-for="(item, index) in this.redata"
            @click="addShow($event, index), dowm(index)"
            :key="index"
          >
            <div class="statistics-cerealsli" :class="active == index ? 'addclassA' : '' ">
              <div class="statistics-cerealsliBox">
                <img src="../../assets/plantImg/cereals.png" alt class="statistics-cerealsli-imgA" />
                <div class="statistics-cerealsli-text">{{item.data.pest}}</div>
              </div>
            </div>

            <transition name="el-zoom-in-top">
              <div v-show="(cIndex == index) && dialog" class="statistics-cerealsliList">
                <ul class="statistics-cerealsliList-ul">
                  <li
                    class="statistics-cerealsliList-li"
                    v-for="(items, aindex) in item.data.dat"
                    :key="aindex"
                  >
                    <div class="statistics-cerealsliList-tlt">{{items.pest_name}}：</div>
                    <div class="statistics-cerealsliList-num">{{items.num}}</div>
                  </li>
                </ul>
              </div>
            </transition>
          </div>
        </div>

        <!-- 暂无数据 -->
        <div class="statistics-cereals-nodataBox" v-else>
          <img src="../../assets/plantImg/wu.png" alt class="statistics-cereals-nodataImg" />
          <div class="statistics-cereals-nodataText">暂无粮食作物数据</div>
        </div>
      </div>

      <!-- 下拉框 -->

      <!-- 林业 -->
      <div class="statistics-cerealsbox">
        <!-- 标题 -->
        <div class="statistics-cerealstlt">
          <div class="statistics-cerealstlt-line"></div>
          <div class="statistics-cerealstlt-txt">林业</div>
        </div>

        <!-- 列表 -->
        <div class="statistics-cerealsUL" v-if="linyeShow">

          <div
            class="statistics-cerealsliA ListBox"
            v-show="item.data.crop_sort == '3'"
            v-for="(item, index) in this.redata"
            @click="addShow($event, index), dowm(index)"
            :key="index"
          >
            <div class="statistics-cerealsli" :class="active == index ? 'addclassA' : '' ">
              <div class="statistics-cerealsliBox">
                <img src="../../assets/plantImg/forest.png" alt class="statistics-cerealsli-imgA" />
                <div class="statistics-cerealsli-text">{{item.data.pest}}</div>
              </div>
            </div>

            <transition name="el-zoom-in-top">
              <div v-show="(cIndex == index) && dialog" class="statistics-cerealsliList">
                <ul class="statistics-cerealsliList-ul">
                  <li
                    class="statistics-cerealsliList-li"
                    v-for="(items, aindex) in item.data.dat"
                    :key="aindex"
                  >
                    <div class="statistics-cerealsliList-tlt">{{items.pest_name}}：</div>
                    <div class="statistics-cerealsliList-num">{{items.num}}</div>
                  </li>
                </ul>
              </div>
            </transition>
          </div>
        </div>

        <!-- 暂无数据 -->
        <div class="statistics-cereals-nodataBox" v-else>
          <img src="../../assets/plantImg/wu.png" alt class="statistics-cereals-nodataImg" />
          <div class="statistics-cereals-nodataText">暂无林业数据</div>
        </div>
      </div>

      <!-- 经济作物 -->
      <div class="statistics-cerealsbox">
        <!-- 标题 -->
        <div class="statistics-cerealstlt">
          <div class="statistics-cerealstlt-line"></div>
          <div class="statistics-cerealstlt-txt">经济作物</div>
        </div>

        <!-- 列表 -->
        <div class="statistics-cerealsUL" v-if="jingjiShow">

          <div
            class="statistics-cerealsliA ListBox"
            v-show="item.data.crop_sort == '2'"
            v-for="(item, index) in this.redata"
            @click="addShow($event, index), dowm(index)"
            :key="index"
          >
            <div class="statistics-cerealsli" :class="active == index ? 'addclassA' : '' ">
              <div class="statistics-cerealsliBox">
                <img src="../../assets/plantImg/economics.png" alt class="statistics-cerealsli-imgA" />
                <div class="statistics-cerealsli-text">{{item.data.pest}}</div>
              </div>
            </div>

            <transition name="el-zoom-in-top">
              <div v-show="(cIndex == index) && dialog" class="statistics-cerealsliList">
                <ul class="statistics-cerealsliList-ul">
                  <li
                    class="statistics-cerealsliList-li"
                    v-for="(items, aindex) in item.data.dat"
                    :key="aindex"
                  >
                    <div class="statistics-cerealsliList-tlt">{{items.pest_name}}：</div>
                    <div class="statistics-cerealsliList-num">{{items.num}}</div>
                  </li>
                </ul>
              </div>
            </transition>
          </div>
        </div>

        <!-- 暂无数据 -->
        <div class="statistics-cereals-nodataBox" v-else>
          <img src="../../assets/plantImg/wu.png" alt class="statistics-cereals-nodataImg" />
          <div class="statistics-cereals-nodataText">暂无经济作物数据</div>
        </div>
      </div>
    </el-main>
  </div>
</template>

<script>
export default {
  name: "statistics",
  components: {},
  data() {
    //这里存放数据
    return {
      tltTxt: "", //页面名称
      dialog: false,
      cIndex: -1,
      show2: true,
      form: {
        chongmeg: "",
        delivery: false,
        type: [],
        resource: "",
        desc: "",
        userList: ""
      },
      type: "", //作物类型
      formLabelWidth: "120px",
      //数据数组
      redata: [],
      //粮食作物
      liangshiShow: false,
      current: "",
      active: localStorage.getItem("screenIndex"),
      //林业判断
      linyeShow: false,
      //经济作物
      jingjiShow: false,
      fullHeight: document.documentElement.clientHeight,
      loading: true, //加载
      listShu: [] //列表
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {
    fullHeight(val) {
      //监控浏览器高度变化
      if (!this.timer) {
        this.fullHeight = val;
        this.timer = true;
        let that = this;
        setTimeout(function() {
          //防止过度调用监测事件，导致卡顿
          that.timer = false;
        }, 400);
      }
    }
  },
  //方法集合
  methods: {
    // 返回
    goBack() {
      let _this = this;
      localStorage.removeItem("screenIndex");
      // _this.$router.push("/examine");
      _this.$router.replace("/examine");
    },

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

    //请求当前页面数据
    listData() {
      let _this = this;
      //判断是害虫还是病害
      if (localStorage.getItem("examineIndex") == 1) {
        //病害
        var type = 1;
        _this.tltTxt = "病害统计";
      } else if (localStorage.getItem("examineIndex") == 0) {
        //虫害
        var type = 2;
        _this.tltTxt = "虫害统计";
      }
      let postData = _this.$qs.stringify({
        pest_sort: type
      });
      _this
        .$axios({
          method: "post",
          url: "bigservers/count_plant",
          data: postData,
          headers: {
            "Content-Type": "application/x-www-form-urlencoded"
          }
        })
        .then(res => {
          _this.loading = false;
          for (let i = 0; i < res.data.length; i++) {
            if (res.data[i].data.crop_sort === "1") {
              //粮食作物
              _this.liangshiShow = true;
            } else if (res.data[i].data.crop_sort === "2") {
              //经济作物
              _this.jingjiShow = true;
            } else if (res.data[i].data.crop_sort === "3") {
              //林业
              _this.linyeShow = true;
            }
          }

          _this.redata = res.data;
        })
        .catch(err => {
          console.log(err);
        });
    },

    //作物选择事件委托
    addShow(e, index) {
      let _this = this;
      if (
        e.target.className === "statistics-cerealsliBox" ||
        e.target.className === "statistics-cerealsli-imgA" ||
        e.target.className === "statistics-cerealsli-text"
      ) {
        _this.current = index;
        localStorage.setItem("screenIndex", this.current); //存index数据
        //获取点击对象
        let el = e.currentTarget;
        let listType = _this.redata[index].crop_sort; //作物选择类型
        let listPest = _this.redata[index].pest; //作物
        // console.log(listType);
        // console.log(listPest);
        localStorage.setItem("plantType", listType);
        localStorage.setItem("plantName", listPest);
        // _this.listAxios(); //请求数据
        this.cIndex = index;
        this.dialog = !this.dialog;
      }
    },
    //作物作物选择
    dowm(index) {
      //将点击的元素的索引赋值给变量
      this.active = index;
    },

    //弹出框右上角关闭按钮回调
    handleCloseA() {
      let _this = this;
      _this.dialogFormVisible = false;
      _this.cancel();
    },

    //请求选中的数据
    listAxios() {
      let _this = this;
      //判断是害虫还是病害
      if (localStorage.getItem("examineIndex") == 1) {
        //病害
        var type = 1;
      } else if (localStorage.getItem("examineIndex") == 0) {
        //虫害
        var type = 2;
      }
      var a = localStorage.getItem("plantName");
      let postData = _this.$qs.stringify({
        ret: "plant",
        pest: a,
        pest_sort: type
      });
      _this
        .$axios({
          method: "post",
          url: "bigservers/count_plant",
          data: postData,
          headers: {
            "Content-Type": "application/x-www-form-urlencoded"
          }
        })
        .then(res => {
          if (res.status == 200) {
            _this.listShu = res.data;
          } else {
            this.$message({
              type: "warning",
              message: "请求失败，请检查网络!"
            });
          }
        });
    }
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    //判断当前是否有存index数据
    if (localStorage.getItem("screenIndex") === null) {
      localStorage.setItem("screenIndex", -1);
    }
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    this.get_boderHeight();
    this.listData(); //请求当前数据

    // document.addEventListener("click", e => {
    //   if (e.target.className == "statistics-cerealsliBox" ||
    //   e.target.className == 'statistics-cerealsli-imgA' ||
    //   e.target.className == 'statistics-cerealsliBox' ||
    //   e.target.className == 'statistics-cerealsli-text') {
    //     this.dialog = false;
    //     console.log(111)
    //   } else {
    //     console.log(222)
    //     this.dialog = true
    //   }
    // });
  },
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {} //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang='scss'>
@import "../../assets/style/bus.scss";
@import "../../assets/style/scss/statistics.scss";
</style>