<template>
  <div class="kunName-box" :style="'height:' + fullHeight + 'px'">
    <!-- 页头 -->
    <el-header class="kunName-header">
      <el-button type="primary" class="kunName-btn" @click="confirm()">确定</el-button>
      <div class="kunName-title">虫害名称</div>
      <el-button type="primary" class="kunName-btn1" @click="dialogFormVisible = true">新增</el-button>

      <el-dialog title="新增数据" :visible.sync="dialogFormVisible" :before-close="handleCloseA">
        <el-form :model="form">
          <el-form-item label :label-width="formLabelWidth">
            <el-input
              style="width:240px;margin-left:-90px;"
              v-model.trim="form.addmeg"
              autocomplete="off"
            ></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button class="quexiao" @click="dialogFormVisible = false,cancel()">取 消</el-button>
          <el-button type="primary" class="quexiao" @click="dialogFormVisible = false,add()">确 定</el-button>
        </div>
      </el-dialog>
    </el-header>

    <!-- 页面主内容 -->
    <el-main :style="'height:' + fullHeight + 'px'">
      <ul class="kunName-ul">
        <!-- 病害名称 -->
        <li class="kunName-li" @click="dialogTableVisible = true,dianji()">
          <img src="../../assets/imageOne/17.png" alt class="kunName-li-img" />
          <div class="kunName-li-div">
            <div class="kunName-li-text">虫害名称</div>
            <div
              class="kunName-li-text1"
              v-if="newInsectShow"
              ref="chonghaiName"
            >{{this.newlyInsect}}</div>
            <div class v-else>
              <div class="kunName-li-text1" v-if="newShow" ref="chonghaiName">{{reverseSum[0]}}</div>
              <div class="kunName-li-text1" v-else ref="chonghaiName">{{this.newNum}}</div>
            </div>
          </div>
          <img src="../../assets/imageOne/15.png" alt class="kunName-li-img1" />
        </li>

        <!-- 测试 -->
        <el-dialog title="选择虫害名称" :visible.sync="dialogTableVisible" v-if="Show">
          <el-table
            :data="gridData"
            v-if="item.insect_name !== '' && item.insect_name !== null"
            v-for="(item,index) in this.chonghaiName"
            :key="index"
          >
            <el-table-column property="address" label>
              <span class="kunName-span" @click="addShow($event,index,item.id)">{{item.insect_name}}</span>
            </el-table-column>
          </el-table>
        </el-dialog>
        <!-- 测试 -->

        <!-- 虫级 -->
        <li class="kunName-li bgji">
          <img src="../../assets/imageOne/17.png" alt class="kunName-li-img" />
          <div class="kunName-li-div">
            <div class="kunName-li-text bingji">虫级</div>
            <div class="kunName-div-box">
              <div class="kunName-text-box">
                <span class="kunName-text-box-span">(1)卵:</span>
                <input type="number" placeholder class="kunName-input" v-model.number="input1" />
              </div>
              <div class="kunName-text-box">
                <span class="kunName-text-box-span">(2)蛹:</span>
                <input type="number" placeholder class="kunName-input" v-model.number="input2" />
              </div>
              <div class="kunName-text-box">
                <span class="kunName-text-box-span-one">(3)幼虫:</span>
                <input type="number" placeholder class="kunName-input" v-model.number="input3" />
              </div>
              <div class="kunName-text-box">
                <span class="kunName-text-box-span-one">(4)落虫:</span>
                <input type="number" placeholder class="kunName-input" v-model.number="input4" />
              </div>
              <div class="kunName-text-box">
                <span class="kunName-text-box-span-two">(5)齡雄虫1:</span>
                <input type="number" placeholder class="kunName-input" v-model.number="input5" />
              </div>
              <div class="kunName-text-box">
                <span class="kunName-text-box-span-two">(6)齡雄虫2:</span>
                <input type="number" placeholder class="kunName-input" v-model.number="input6" />
              </div>
              <div class="kunName-text-box">
                <span class="kunName-text-box-span-two">(7)齡雄虫3:</span>
                <input type="number" placeholder class="kunName-input" v-model.number="input7" />
              </div>
              <div class="kunName-text-box">
                <span class="kunName-text-box-span-two">(8)齡雄虫4:</span>
                <input type="number" placeholder class="kunName-input" v-model.number="input8" />
              </div>
              <div class="kunName-text-box">
                <span class="kunName-text-box-span-two">(9)齡雄虫5:</span>
                <input type="number" placeholder class="kunName-input" v-model.number="input9" />
              </div>
              <div class="kunName-text-box">
                (10)齡雄虫6:
                <input
                  type="number"
                  placeholder
                  class="kunName-input"
                  v-model.number="input10"
                />
              </div>
              <div class="kunName-text-box">
                (11)齡雌虫1:
                <input
                  type="number"
                  placeholder
                  class="kunName-input"
                  v-model.number="input11"
                />
              </div>
              <div class="kunName-text-box">
                (12)齡雌虫2:
                <input
                  type="number"
                  placeholder
                  class="kunName-input"
                  v-model.number="input12"
                />
              </div>
              <div class="kunName-text-box">
                (13)齡雌虫3:
                <input
                  type="number"
                  placeholder
                  class="kunName-input"
                  v-model.number="input13"
                />
              </div>
              <div class="kunName-text-box">
                (14)齡雌虫4:
                <input
                  type="number"
                  placeholder
                  class="kunName-input"
                  v-model.number="input14"
                />
              </div>
              <div class="kunName-text-box">
                (15)齡雌虫5:
                <input
                  type="number"
                  placeholder
                  class="kunName-input"
                  v-model.number="input15"
                />
              </div>
              <div class="kunName-text-box">
                (16)齡雌虫6:
                <input
                  type="number"
                  placeholder
                  class="kunName-input"
                  v-model.number="input16"
                />
              </div>
            </div>
          </div>
        </li>
      </ul>
    </el-main>
  </div>
</template>

<script>
export default {
  name: "kunName",
  data() {
    return {
      input1: "0",
      input2: "0",
      input3: "0",
      input4: "0",
      input5: "0",
      input6: "0",
      input7: "0",
      input8: "0",
      input9: "0",
      input10: "0",
      input11: "0",
      input12: "0",
      input13: "0",
      input14: "0",
      input15: "0",
      input16: "0",
      dialogTableVisible: false,
      dialogFormVisible: false,
      form: {
        addmeg: "",
        region: "",
        date1: "",
        date2: "",
        delivery: false,
        type: [],
        resource: "",
        desc: "",
        userList: "",
        newList: []
      },
      formLabelWidth: "120px",
      gridData: [
        {
          address: ""
        }
      ],
      test: "",
      current: 0,
      newNum: localStorage.kunchongName,
      newShow: false,
      Show: false, //这是判断vuex中初始值是否为空
      fullHeight: document.documentElement.clientHeight, //监测浏览器的高度
      chonghaiName: {}, //从后端获取到害虫名称数据
      newInsectShow: false, //判断是否新增了虫害名称
      newlyInsect: localStorage.getItem("newlyInsect") //新增虫害名称值
    };
  },
  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();
  },

  created() {
    this.$message({
      type: "warning",
      message: "提示，虫级输入框只能输入数字；如果输入字母，值最后将为空!"
    });

    // 判断是否有新增加的虫害名称
    if (
      localStorage.getItem("newlyInsect") !== null &&
      localStorage.getItem("kunchongName") !== null
    ) {
      this.newInsectShow = false;
    } else if (localStorage.getItem("newlyInsect") !== null) {
      this.newInsectShow = true;
    }
  },

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

    //点击返回系统设置
    confirm() {
      let _this = this;
      //存input框中输入的值
      let list = localStorage.iptList; //原有值
      if (list) {
        var b1 = JSON.parse(list);
        b1.push("卵" + ":" + _this.input1);
        b1.push("蛹" + ":" + _this.input2);
        b1.push("幼虫" + ":" + _this.input3);
        b1.push("落虫" + ":" + _this.input4);
        b1.push("齡雄虫1" + ":" + _this.input5);
        b1.push("齡雄虫2" + ":" + _this.input6);
        b1.push("齡雄虫3" + ":" + _this.input7);
        b1.push("齡雄虫4" + ":" + _this.input8);
        b1.push("齡雄虫5" + ":" + _this.input9);
        b1.push("齡雄虫6" + ":" + _this.input10);
        b1.push("齡雌虫1" + ":" + _this.input11);
        b1.push("齡雌虫2" + ":" + _this.input12);
        b1.push("齡雌虫3" + ":" + _this.input13);
        b1.push("齡雌虫4" + ":" + _this.input14);
        b1.push("齡雌虫5" + ":" + _this.input15);
        b1.push("齡雌虫6" + ":" + _this.input16);

        var b2 = JSON.stringify(b1);
      } else {
        let adlist = [];
        adlist.push("卵" + ":" + _this.input1);
        adlist.push("蛹" + ":" + _this.input2);
        adlist.push("幼虫" + ":" + _this.input3);
        adlist.push("落虫" + ":" + _this.input4);
        adlist.push("齡雄虫1" + ":" + _this.input5);
        adlist.push("齡雄虫2" + ":" + _this.input6);
        adlist.push("齡雄虫3" + ":" + _this.input7);
        adlist.push("齡雄虫4" + ":" + _this.input8);
        adlist.push("齡雄虫5" + ":" + _this.input9);
        adlist.push("齡雄虫6" + ":" + _this.input10);
        adlist.push("齡雌虫1" + ":" + _this.input11);
        adlist.push("齡雌虫2" + ":" + _this.input12);
        adlist.push("齡雌虫3" + ":" + _this.input13);
        adlist.push("齡雌虫4" + ":" + _this.input14);
        adlist.push("齡雌虫5" + ":" + _this.input15);
        adlist.push("齡雌虫6" + ":" + _this.input16);
        var b2 = JSON.stringify(adlist);
      }
      localStorage.setItem("iptList", b2);
      if (_this.$refs.chonghaiName.innerText !== null) {
        _this.$router.push("/insect");
      } else {
        this.$notify({
          title: "提示",
          message: "请选择虫害名称",
          type: "warning",
          duration: 1000
        });
      }
    },

    //点击新增跳出弹出框
    add(arr) {
      let _this = this;
      let postData = _this.$qs.parse({
        insect_name: _this.form.addmeg, //新增虫害名称
        insect_type: localStorage.getItem("newdata") //昆虫种类
      });
      if (_this.form.addmeg !== "") {
        _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);
              localStorage.setItem("newlyInsect", _this.form.addmeg); //存一个新增加的虫害名称在本地
              localStorage.removeItem("kunchongName"); //并删除原有值
            } else {
              this.$message({
                type: "warning",
                message: "数据已存在!"
              });
            }
          })
          .catch(error => {
            this.$message({
              type: "error",
              message: "失败!"
            });
            _this.form.addmeg = "";
          });
      } else {
        this.$message({
          type: "warning",
          message: "不能为空!"
        });
      }
    },

    addShow(e, index, id) {
      let _this = this;
      if (e.target.className === "kunName-span") {
        _this.current = index;
        //获取点击对象
        let el = e.currentTarget;
        let chonghaiID = id;
        _this.newNum = el.innerHTML;
        _this.newShow = false;
        _this.dialogTableVisible = false;
        console.log(chonghaiID);
        localStorage.setItem("chonghaiID", chonghaiID); //存入虫害名称的ID
      }
      localStorage.setItem("kunchongName", _this.newNum);
      _this.newNum = localStorage.getItem("kunchongName");
      location.reload();
    },

    //点击虫害名称获取到后端数据
    dianji() {
      let _this = this;
      let postData = _this.$qs.parse({
        insect_type: localStorage.getItem("newdata") //昆虫种类
      });
      _this
        .$axios({
          method: "post",
          url: "bigservers/check_insect_leve",
          data: postData,
          headers: {
            "Content-Type": "application/json"
          }
        })
        .then(res => {
          _this.chonghaiName = res.data;
          _this.Show = true;
        })
        .catch(error => {
          alert("失败");
        });
    },

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

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

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