<template>
  <div class="caste-box" :style="'height:' + fullHeight + 'px'">
    <el-container>
      <!-- 页头 -->
      <el-header>
        <el-page-header title @back="goBack" content="昆虫种类设置"></el-page-header>

        <!-- 测试用添加-昆虫种类 -->
        <el-button type="text" @click="dialogFormVisible = true, insectAdd()">
          <img src="../../assets/imageOne/23.png" alt class="caste-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.newmeg" 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"
          width="7rem"
          :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="caste-ul">
          <li
            class="caste-li"
            v-if="item.insect_type !== '' && item.insect_type !== null"
            v-for="(item,index) in this.redata"
            @click.stop="dianji($event,index,item.insect_type,item.id),dowm(index)"
            :key="index"
            :class="active == index ? 'addclass' : '' "
          >
            <img src="../../assets/imageOne/22.png" alt class="caste-li-img" />
            <div class="caste-li-div">
              <div class="caste-li-text">{{item.insect_type}}</div>
            </div>

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

        <!-- 昆虫名称列表 -->
        <el-dialog
          :title="this.titleName"
          :visible.sync="dialogVisible"
          :before-close="handleClose"
        >
          <ul class="caste-ul" v-if="dataShow">
            <li
              class="tanchukA"
              @click="bingList($event, item.id, item.insect_name)"
              v-for="(item, index) in this.redataA"
              :key="index"
            >
              <div class="caste-li-plan-text">{{ item.insect_name }}</div>
              <div class="caste-li-plan-img">
                <img
                  src="../../assets/imageOne/plant_del.png"
                  alt
                  class="plan-imgA"
                  @click="plantName_del($event, index, item.id, item.insect_name)"
                />
              </div>
            </li>
          </ul>

          <!-- 昆虫暂空判断 -->
          <div class="caste-null-text" v-else>暂无数据，请先添加昆虫名称</div>
        </el-dialog>
        <!-- 昆虫名称列表 -->
      </el-main>
    </el-container>
  </div>
</template>

<script>
export default {
  name: "caste",
  data() {
    return {
      dialogTableVisible: false,
      dialogFormVisible: false,
      dialogVisible: false, //昆虫名称弹框
      dialogVisibleshan: false, //删除
      form: {
        newmeg: "",
        region: "",
        date1: "",
        date2: "",
        delivery: false,
        type: [],
        resource: "",
        desc: "",
        userList: ""
      },
      redata: {}, //后端请求的数据
      formLabelWidth: "120px",
      newmeg2: localStorage.newmeg,
      current: 0,
      newData: localStorage.newdata,
      active: -1,
      casteShow: false, //这是判断vuex中初始值是否为空
      fullHeight: document.documentElement.clientHeight,
      loading: true,
      titleName: "", //标题名称
      dataShow: true, //判断昆虫名称是否为空
      titleNameA: "", //添加弹框标题
      titleNameB: "", //删除标题
      redataA: [], //昆虫名称的数据
      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;
    //进入页面时请求数据
    let postData = _this.$qs.parse({
      ret: localStorage.getItem("danxuan")
    });
    _this
      .$axios({
        method: "get",
        url: "bigservers/check_insect"
      })
      .then(res => {
        _this.redata = res.data;
        _this.loading = false;
      })
      .catch(error => {
        alert("请求失败");
      });
  },
  computed: {},
  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("/insect");
    },

    add() {
      let _this = this;
      let postData = _this.$qs.parse({
        insect: _this.form.newmeg //新增的昆虫种类名称
      });
      if (_this.form.newmeg !== "" && _this.titleNameA === "昆虫种类添加") {
        _this
          .$axios({
            method: "post",
            url: "bigservers/check_insect",
            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.newmeg !== "" &&
        _this.titleNameA === "昆虫名称添加"
      ) {
        let postData = _this.$qs.parse({
          insect_name: _this.form.newmeg,
          insect_type: localStorage.getItem("kunchongInsect") //昆虫种类
        });
        _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.newmeg === "") {
        this.$message({
          type: "warning",
          message: "不能为空!"
        });
      }
    },

    //点击list跳出弹框
    dianji(e, index, insect, id) {
      let _this = this;
      _this.current = index;
      if (
        e.target.className === "caste-li-text" ||
        e.target.className === "caste-li" ||
        e.target.className === "caste-li-img"
      ) {
        let el = e.currentTarget;
        let datainsect = insect;
        let dataid = id;
        (_this.dialogVisible = true), (_this.inputText = datainsect);
        localStorage.setItem("kunchongInsect", datainsect);
        localStorage.setItem("kunchongID", dataid);
      }
      _this.titleName = localStorage.getItem("kunchongInsect") + "下的昆虫名称"; //title标题

      //请求点击的名下昆虫名称
      let postData = _this.$qs.parse({
        insect_type: localStorage.getItem("kunchongInsect")
      });
      _this
        .$axios({
          method: "post",
          url: "bigservers/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 => {});
    },

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

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

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

    //点击昆虫种类弹框弹起删除
    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 === "caste-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);
      }
    },

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

    //删除确定事件
    shanchuque() {
      let _this = this;
      //判断是删除昆虫种类还是删除昆虫名称
      if (_this.titleNameB === "昆虫种类删除") {
        let postData = _this.$qs.parse({
          id: localStorage.getItem("kunchongID")
        });
        _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({
          id: localStorage.insectID
        });
        _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: "删除失败!"
            });
          });
      }
    },

    //点击添加昆虫名称弹起
    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 === "caste-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);
      }
    },

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

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

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

    //点击获取到用户选择的昆虫名称
    bingList(e, id, insect_name) {
      let _this = this;
      if (
        e.target.className === "tanchukA" ||
        e.target.className === "caste-li-plan-text"
      ) {
        let el = e.currentTarget;
        let datainsect = insect_name;
        let dataid = id;
        localStorage.setItem("bingName", datainsect);
        localStorage.setItem("bingID", dataid);
        _this.$router.goBack();
      }
    },

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

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