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

      <!-- 添加框 -->
      <el-button type="text" @click="plantAdd()">
        <img src="../../assets/imageOne/23.png" alt class="crop-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($event,)">确 定</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="crop-ul">
        <li
          class="crop-li"
          v-if="item.plant_type !== '' && item.plant_type !== null"
          v-for="(item,index) in this.redata"
          :key="index"
          @click.stop="dianji($event,index,item.plant_type,item.id),dowm(index)"
          :class="active == index ? 'addclass' : '' "
        >
          <img src="../../assets/imageOne/22.png" alt class="crop-li-img" />
          <div class="crop-li-div">
            <div class="crop-li-text">{{item.plant_type}}</div>
          </div>

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

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

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

<script>
export default {
  name: "crop",
  data() {
    return {
      dialogVisible: false,
      dialogTableVisible: false,
      dialogFormVisible: false,
      dialogVisibleshan: false, //删除
      form: {
        newmeg: "",
        delivery: false,
        type: [],
        resource: "",
        desc: "",
        userList: ""
      },
      formLabelWidth: "120px",
      dialogTableVisible: false,
      inputText: "",
      current: "", //点击list的下标
      fullHeight: document.documentElement.clientHeight,
      redata: [], //从后端获取的作物种类数据
      loading: true,
      redataA: [], //从后端获取的病害名称数据
      titleName: "", //标题名称
      dataShow: true, //判断病害名称是否为空
      titleNameA: "", //添加弹框标题
      titleNameB: "", //删除标题
      active: localStorage.getItem('cropIndex'),
      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_plant"
      })
      .then(res => {
        _this.redata = res.data;
        _this.loading = false;
      })
      .catch(error => {
        this.$message({
          showClose: true,
          message: "失败",
          type: "error"
        });
      });

    //判断当前是否有存index数据
    if (localStorage.getItem("cropIndex") === null) {
      localStorage.setItem("cropIndex", -1);
    }
  },
  methods: {
    //动态获取浏览器高度
    get_boderHeight() {
      const that = this;
      window.onresize = () => {
        return (() => {
          window.fullHeight = document.documentElement.clientHeight;
          that.fullHeight = window.fullHeight;
        })();
      };
    },
    //点击返回系统设置页面
    goBack() {
      let _this = this;
      // _this.$router.replace("/system");
      _this.$router.push("/system");
      localStorage.removeItem("zuowuPlant");
      localStorage.removeItem("zuowuID");
      localStorage.removeItem("plantID");
      localStorage.removeItem("plantName");
      location.reload();
    },

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

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

    add() {
      let _this = this;

      //请求后端
      let newdata = localStorage.newmeg;
      let postData = _this.$qs.parse({
        plant: _this.form.newmeg
      });

      if (_this.form.newmeg !== "" && _this.titleNameA === "作物种类添加") {
        _this
          .$axios({
            method: "post",
            url: "bigservers/check_plant",
            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({
          plant_name: _this.form.newmeg,
          plant_type: localStorage.getItem("zuowuPlant") //作物种类
        });
        _this
          .$axios({
            method: "post",
            url: "bigservers/addr_plant_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, plant, id) {
      // let _this = this;
      // _this.current = index;
      // if (
      //   e.target.className === "crop-li-text" ||
      //   e.target.className === "crop-li" ||
      //   e.target.className === "crop-li-img"
      // ) {
      //   let el = e.currentTarget;
      //   let dataplant = plant;
      //   let dataid = id;
      //   (_this.dialogVisible = true), (_this.inputText = dataplant);
      //   localStorage.setItem("zuowuPlant", dataplant);
      //   localStorage.setItem("zuowuID", dataid);
      // }
      // _this.titleName = localStorage.getItem("zuowuPlant") + "下的病害名称"; //title标题
      // //请求点击的名下病害名称
      // let postData = _this.$qs.parse({
      //   plant_type: localStorage.getItem("zuowuPlant")
      // });
      // _this
      //   .$axios({
      //     method: "post",
      //     url: "/check_plant_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 => {});
    },

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

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

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

    //点击作物种类弹框弹起删除
    shanchu(e, index, plant_type, id) {
      let _this = this;
      _this.titleNameB = "作物种类删除";
      _this.dialogVisibleshan = true;
      _this.delShow = true;

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

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

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

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

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

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

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

    //设置默认
    shezhi(e, index, id, plant_type) {
      //获取到当前点击的plant_type值
      this.current = index;
      if (e.target.className === "crop-li-div-imgC") {
        console.log(plant_type);
        localStorage.setItem("crop", plant_type); //存默认病害
        localStorage.setItem("cropIndex", 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/crop.scss";
</style>


      

  