<template>
  <div class="insectType-box">
    <!-- 页头 -->
    <el-header>
      <el-page-header @back="goBack" title content="虫害设置"></el-page-header>

      <!-- 添加框 -->
      <el-button type="text" @click="dialogFormVisible = true,kunchong()">
        <img src="../../assets/imageOne/23.png" alt class="insectType-img" />
      </el-button>

      <el-dialog
        :title="this.titleNameA"
        :visible.sync="dialogFormVisible"
        :before-close="handleCloseA"
      >
        <el-form :model="form">
          <el-form-item label :label-width="formLabelWidth">
            <el-input v-model.trim="form.chongmeg" autocomplete="off"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false,cancel()">取 消</el-button>
          <el-button type="primary" @click="dialogFormVisible = false,add()">确 定</el-button>
        </div>
      </el-dialog>

      <!-- 添加框 -->

      <!-- 删除框 -->
      <el-dialog
        :title="this.titleNameB"
        :visible.sync="dialogVisibleshan"
        :before-close="handleCloseshanchu"
      >
        <span v-if="delShow">如果删除其名下的所有昆虫名称都将清除，您确定要删除吗？</span>
        <span v-else>是否要删除这条昆虫名称数据？</span>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisibleshan = false">取 消</el-button>
          <el-button type="primary" @click="dialogVisibleshan = false,shanchuque()">确 定</el-button>
        </span>
      </el-dialog>
      <!-- 删除框 -->
    </el-header>

    <!-- 页面主内容 -->
    <el-main
      :style="'height:' + fullHeight + 'px'"
      v-loading="loading"
      element-loading-text="拼命加载中"
      element-loading-spinner="el-icon-loading"
      element-loading-background="rgba(0, 0, 0, 0.8)"
      style="width: 100%"
    >
      <ul class="insectType-ul">
        <li
          class="insectType-li"
          v-if="item.insect_type !== null && item.insect_type !== ''"
          v-for="(item,index) in this.redata"
          :key="index"
          @click.stop="dianji($event,item.id,index,item.insect_type),dowm(index)"
          :class="active == index ? 'addclass' : '' "
        >
          <img src="../../assets/imageOne/22.png" alt class="insectType-li-img" />
          <div class="insectType-li-div">
            <div class="insectType-li-text">{{item.insect_type}}</div>
          </div>

          <!-- 删除 -->
          <div class="insectType-li-div-img">
            <img
              src="../../assets/imageOne/plant_del.png"
              alt
              class="insectType-li-div-imgA"
              @click="shanchu($event, index, item.insect_type, item.id)"
            />
            <!-- <img
              src="../../assets/plant_add.png"
              alt
              class="insectType-li-div-imgB"
              @click="tianjia($event, index, item.insect_type, item.id)"
            /> -->
            <img
              src="../../assets/imageOne/xuanzhong.png"
              alt
              class="insectType-li-div-imgC"
              @click="shezhi($event, index, item.id, item.insect_type )"
            />
          </div>
        </li>
      </ul>

      <!-- 编辑删除添加框 -->
      <el-dialog :title="this.titleName" :visible.sync="dialogVisible" :before-close="handleClose">
        <ul class="insectType-ul" v-if="dataShow">
          <li class="tanchuk1" v-for="(item, index) in this.redataA" :key="index">
            <div class="insectType-li-plan-text">{{ item.insect_name }}</div>
            <div class="insectType-li-plan-img">
              <img
                src="../../assets/imageOne/plant_del.png"
                alt
                class="insect-imgA"
                @click="insectName_del($event, index, item.id, item.insect_name)"
              />
            </div>
          </li>
        </ul>

        <!-- 病害名称暂空判断 -->
        <div class="insectType-null-text" v-else>暂无数据，请先添加昆虫名称</div>
      </el-dialog>
      <!-- 编辑删除添加框 -->
    </el-main>
  </div>
</template>

<script>
export default {
  name: "insectType",
  data() {
    return {
      fullHeight: document.documentElement.clientHeight,
      dialogVisible: false,
      dialogTableVisible: false,
      dialogFormVisible: false,
      dialogVisibleshan: false, //删除
      form: {
        chongmeg: "",
        delivery: false,
        type: [],
        resource: "",
        desc: "",
        userList: ""
      },
      formLabelWidth: "120px",
      dialogTableVisible: false,
      inputText: "",
      current: "", //点击list的下标
      redata: [], //从后端获取数据
      loading: true,
      redataA: [], //从后端获取的昆虫名称数据
      titleName: "", //昆虫名称的弹框标题
      dataShow: true, //判断昆虫名称是否为空
      titleNameA: "", //添加弹框标题
      titleNameB: "", //删除标题
      // active: -1,
      active: localStorage.getItem('insectTypeIndex'),
      delShow: true //删除提示框文字判断
    };
  },
  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();
  },
  //判断vuex的初始值是否为空
  created() {
    let _this = this;
    // 进入页面获取后端数据
    _this
      .$axios({
        method: "get",
        url: "bigservers/check_insect"
      })
      .then(res => {
        _this.redata = res.data;
        _this.loading = false;
      })
      .catch(error => {
        alert("失败");
      });

      //判断当前是否有存index数据
      if (localStorage.getItem('insectTypeIndex') === null) {
        localStorage.setItem('insectTypeIndex', -1)
      } 
  },
  methods: {
    //动态获取浏览器高度
    get_boderHeight() {
      const that = this;
      window.onresize = () => {
        return (() => {
          window.fullHeight = document.documentElement.clientHeight;
          that.fullHeight = window.fullHeight;
        })();
      };
    },

    //点击返回系统设置页面
    goBack() {
      let _this = this;
      localStorage.removeItem("kunchongInsect");
      localStorage.removeItem("kunchongid");
      localStorage.removeItem("insectID");
      localStorage.removeItem("insectName");
      _this.$router.push("/system");
      location.reload();
    },

    handleClose() {
      let _this = this;
      _this.dialogFormVisible1 = false;
      _this.dialogVisible = false;
      _this.cancel();
    },

    //删除框
    handleCloseshanchu(done) {
      let _this = this;
      _this.dialogVisibleshan = false;
    },

    add() {
      let _this = this;
      //判断是添加到昆虫种类还是昆虫名称
      let postData = _this.$qs.parse({
        insect: _this.form.chongmeg
      });
      if (_this.form.chongmeg !== "" && _this.titleNameA === "昆虫种类添加") {
        _this
          .$axios({
            method: "post",
            url: "bigservers/check_insect",
            data: postData
          })
          .then(res => {
            if (res.data !== 0) {
              this.$message({
                type: "success",
                message: "添加成功!"
              });
              const timer = setInterval(() => {
                location.reload();
              }, 1000);
            } else {
              this.$message({
                type: "warning",
                message: "数据已存在!"
              });
            }
            _this.cancel();
          })
          .catch(error => {
            this.$message({
              showClose: true,
              message: "失败",
              type: "error"
            });
          });
      } else if (
        _this.form.chongmeg !== "" &&
        _this.titleNameA === "昆虫名称添加"
      ) {
        let postData = _this.$qs.parse({
          insect_name: _this.form.chongmeg,
          insect_type: localStorage.getItem("insectName") //昆虫种类
        });
        _this
          .$axios({
            method: "post",
            url: "bigservers/addr_insect_type",
            data: postData,
            headers: {
              "Content-Type": "application/json"
            }
          })
          .then(res => {
            if (res.data !== 0) {
              this.$message({
                type: "success",
                message: "添加成功!"
              });
              const timer = setInterval(() => {
                location.reload();
              }, 1000);
            } else {
              this.$message({
                type: "warning",
                message: "数据已存在!"
              });
            }
            _this.cancel();
          })
          .catch(error => {
            this.$message({
              showClose: true,
              message: "失败",
              type: "error"
            });
          });
      } else if (_this.form.chongmeg === "") {
        this.$message({
          type: "warning",
          message: "不能为空!"
        });
      }
    },

    //点击list跳出弹框
    dianji(e, id, index, insect, plant) {
      //   let _this = this;
      //   _this.current = index;
      //   if (
      //     e.target.className === "insectType-li-text" ||
      //     e.target.className === "insectType-li" ||
      //     e.target.className === "insectType-li-img"
      //   ) {
      //     let dataInsect = insect;
      //     let dataID = id;
      //     (_this.dialogVisible = true),
      //       (_this.inputText = insect),
      //       localStorage.setItem("kunchongInsect", dataInsect);
      //     localStorage.setItem("kunchongid", dataID);
      //     _this.titleName =
      //       localStorage.getItem("kunchongInsect") + "下的昆虫名称";
      //   }
      //   //获取到昆虫名称列表
      //   let postData = _this.$qs.parse({
      //     insect_type: localStorage.getItem("kunchongInsect") //昆虫种类
      //   });
      //   _this
      //     .$axios({
      //       method: "post",
      //       url: "/check_insect_leve",
      //       data: postData,
      //       headers: {
      //         "Content-Type": "application/json"
      //       }
      //     })
      //     .then(res => {
      //       //判断返回数据是否为空
      //       if (res.data === 0) {
      //         _this.dataShow = false;
      //       } else if (res.data !== 0) {
      //         _this.redataA = res.data;
      //         _this.dataShow = true;
      //       }
      //     })
      //     .catch(error => {
      //       alert("失败");
      //       console.log(error);
      //     });
    },

    //点击昆虫种类弹起
    kunchong() {
      let _this = this;
      _this.dialogFormVisible = true;
      _this.dialogVisible = false;
      _this.titleNameA = "昆虫种类添加";
    },

    //点击昆虫名称弹起
    tianjia(e, index, insect_type, id) {
      let _this = this;
      _this.dialogFormVisible = true;
      _this.dialogVisible = false;
      _this.titleNameA = "昆虫名称添加";
      _this.dialogVisible = false;

      //获取到当前点击的insect_type值
      _this.current = index;
      if (e.target.className === "insectType-li-div-imgB") {
        let el = e.currentTarget;
        let data = el.innerHTML;
        let dataID = id;
        let dataType = insect_type;
        localStorage.setItem("insectID", dataID);
        localStorage.setItem("insectName", dataType);
      }
    },

    //点击删除昆虫种类
    shanchu(e, index, insect_type, id) {
      let _this = this;
      _this.titleNameB = "昆虫种类删除";
      _this.dialogVisibleshan = true;
      _this.delShow = true;

      //获取到当前点击的plant_type值
      _this.current = index;
      if (e.target.className === "insectType-li-div-imgA") {
        let el = e.currentTarget;
        let data = el.innerHTML;
        let dataID = id;
        let dataType = insect_type;
        localStorage.setItem("insectID", dataID);
        localStorage.setItem("insectName", dataType);
      }
    },

    //删除确定事件
    shanchuque() {
      let _this = this;
      if (_this.titleNameB === "昆虫种类删除") {
        let postData = _this.$qs.parse({
          id: localStorage.insectID
          // plant: "",
          // insect: localStorage.insectName,
          // ret: "del"
        });
        _this
          .$axios({
            method: "post",
            url: "bigservers/modify_plant_insect",
            data: postData,
            headers: {
              "Content-Type": "application/json"
            }
          })
          .then(res => {
            this.$message({
              type: "success",
              message: "删除成功!"
            });
            const timer = setInterval(() => {
              location.reload();
            }, 1000);
          })
          .catch(error => {
            this.$message({
              type: "error",
              message: "删除失败!"
            });
          });
      } else if (_this.titleNameB === "昆虫名称删除") {
        let postData = _this.$qs.parse({
          // insect_type: localStorage.getItem("kunchongInsect"), //昆虫种类
          id: localStorage.insectID
          // insect_name: localStorage.insectName, //昆虫名称
          // ret: "del"
        });
        _this
          .$axios({
            method: "post",
            url: "bigservers/modify_insect_leve",
            data: postData,
            headers: {
              "Content-Type": "application/json"
            }
          })
          .then(res => {
            this.$message({
              type: "success",
              message: "删除成功!"
            });
            const timer = setInterval(() => {
              location.reload();
            }, 1000);
          })
          .catch(error => {
            this.$message({
              type: "error",
              message: "删除失败!"
            });
          });
      }
    },

    //点击删除昆虫名称数据
    insectName_del(e, index, id, insect_name) {
      let _this = this;
      _this.titleNameB = "昆虫名称删除";
      _this.dialogVisibleshan = true;
      _this.delShow = false;

      //获取到当前点击的plant_type值
      _this.current = index;
      if (e.target.className === "insect-imgA") {
        let el = e.currentTarget;
        let data = el.innerHTML;
        let dataID = id;
        let dataType = insect_name;
        localStorage.setItem("insectID", dataID);
        localStorage.setItem("insectName", dataType);
      }
    },

    //取消按钮
    cancel() {
      let _this = this;
      _this.form.chongmeg = "";
    },

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

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

    //设置默认
    shezhi(e, index, id, insect_type) {
      //获取到当前点击的plant_type值
      this.current = index;
      if (e.target.className === "insectType-li-div-imgC") {
        localStorage.setItem("insectType", insect_type); //存默认病害
        localStorage.setItem("insectTypeIndex", this.current); //存index数据
        this.$notify({
          title: "成功",
          message: "设置默认虫害成功",
          type: "success",
          duration: 3000
        });
        const timer = setInterval(() => {
          this.goBack();
        }, 1000);
      }
    }
  }
};
</script>

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