<template>
  <div class="pathology-box" :style="'height:' + fullHeight + 'px'">
    <!-- 页头 -->
    <el-header class="pathology-header">
      <el-button type="primary" class="pathology-btn" @click="confirm()">确定</el-button>
      <div class="pathology-title">病害名(病级)</div>
      <el-button type="primary" class="pathology-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="pathology-ul">
        <!-- 病害名称 -->
        <li class="pathology-li" @click="dialogTableVisible = true,dianji()">
          <img src="../../assets/imageOne/17.png" alt class="pathology-li-img" />
          <div class="pathology-li-div">
            <div class="pathology-li-text">病害名称</div>
            
            <div class="pathology-li-text1" v-if="newDataShow" ref="bingName">{{this.newlyData}}</div>
            <div class="" v-else>
              <div class="pathology-li-text1" v-if="newShow" ref="bingName">{{reverseSum[0]}}</div>
              <div class="pathology-li-text1" v-else ref="bingName">{{this.newNum}}</div>
            </div>
          </div>
          <img src="../../assets/imageOne/15.png" alt class="pathology-li-img1" />
        </li>

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

        <!-- 病级 -->
        <li class="pathology-li bgji">
          <img src="../../assets/imageOne/17.png" alt class="pathology-li-img" />
          <div class="pathology-li-div">
            <div class="pathology-li-text bingji">病级</div>
            <div class="pathology-div-box">
              <div class="pathology-text-box">
                (1)
                <input type="text" class="pathology-input" v-model.number="input1" />
                值:
                <input type="text" class="pathology-input" v-model.number="input2" />
              </div>
              <div class="pathology-text-box">
                (2)
                <input type="text" class="pathology-input" v-model.number="input3" />
                值:
                <input type="text" class="pathology-input" v-model.number="input4" />
              </div>
              <div class="pathology-text-box">
                (3)
                <input type="text" class="pathology-input" v-model.number="input5" />
                值:
                <input type="text" class="pathology-input" v-model.number="input6" />
              </div>
              <div class="pathology-text-box">
                (4)
                <input type="text" class="pathology-input" v-model.number="input7" />
                值:
                <input type="text" class="pathology-input" v-model.number="input8" />
              </div>
              <div class="pathology-text-box">
                (5)
                <input type="text" class="pathology-input" v-model.number="input9" />
                值:
                <input type="text" class="pathology-input" v-model.number="input10" />
              </div>
              <div class="pathology-text-box">
                (6)
                <input type="text" class="pathology-input" v-model.number="input11" />
                值:
                <input
                  type="text"
                  placeholder="0"
                  class="pathology-input"
                  v-model.number="input12"
                />
              </div>
            </div>
          </div>
        </li>
      </ul>
    </el-main>
  </div>
</template>

<script>
export default {
  name: "pathology",
  data() {
    return {
      input1: "病级1",
      input2: "0",
      input3: "病级2",
      input4: "0",
      input5: "病级3",
      input6: "0",
      input7: "病级4",
      input8: "0",
      input9: "病级5",
      input10: "0",
      input11: "病级6",
      input12: "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.newNum,
      newShow: false,
      Show: false, //这是判断vuex中初始值是否为空
      fullHeight: document.documentElement.clientHeight,
      binghaiName: {}, //接收后端传输过来的病害名称数据
      newDataShow: false, //判断是否新增了病害名称
      newlyData: localStorage.getItem('newlyData'), //新增病害名称值
    };
  },
  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('newlyData') !== null && localStorage.getItem('newNum') !== null) {
      this.newDataShow = false
    } else if (localStorage.getItem('newlyData') !== null) {
      this.newDataShow = true
    }
  },
  computed: {},
  methods: {
    //动态获取浏览器高度
    get_boderHeight() {
      const that = this;
      window.onresize = () => {
        return (() => {
          window.fullHeight = document.documentElement.clientHeight;
          that.fullHeight = window.fullHeight;
        })();
      };
    },

    //点击返回系统设置
    confirm() {
      let _this = this;
      let list = localStorage.iptList; //原有值
      if (list) {
        var b1 = JSON.parse(list);
        b1.push(_this.input1 + ":" + _this.input2);
        b1.push(_this.input3 + ":" + _this.input4);
        b1.push(_this.input5 + ":" + _this.input6);
        b1.push(_this.input7 + ":" + _this.input8);
        b1.push(_this.input9 + ":" + _this.input10);
        b1.push(_this.input11 + ":" + _this.input12);

        var b2 = JSON.stringify(b1);
      } else {
        let adlist = [];
        adlist.push(_this.input1 + ":" + _this.input2);
        adlist.push(_this.input3 + ":" + _this.input4);
        adlist.push(_this.input5 + ":" + _this.input6);
        adlist.push(_this.input7 + ":" + _this.input8);
        adlist.push(_this.input9 + ":" + _this.input10);
        adlist.push(_this.input11 + ":" + _this.input12);

        var b2 = JSON.stringify(adlist);
      }
      localStorage.setItem("iptList", b2);
      // let postData = _this.$qs.parse({
      //   id: localStorage.newdataID, // 用户选中的名称ID
      //   ret: localStorage.danxuan, //判断是植物还是昆虫
      //   plant: localStorage.newdataA, //作物种类名称
      //   insect: "",
      //   name: localStorage.newNum, //昆虫种类名称
      //   pestname: localStorage.iptList //这是病级的值
      // });
    },

    //点击新增跳出弹出框
    add(arr) {
      let _this = this;
      let postData = _this.$qs.parse({
        plant_name: _this.form.addmeg, //新增的病害名称
        plant_type: localStorage.getItem('newdataA'), //作物种类
      });
      if (_this.form.addmeg !== "") {
        _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);
              localStorage.setItem('newlyData', _this.form.addmeg) //存一个新增加的病害名称在本地
              localStorage.removeItem('newNum') //并删除原有值
            } else {
              this.$message({
                type: "warning",
                message: "数据已存在!"
              });
            }
            _this.form.addmeg = "";
          })
          .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 === "pathology-span") {
        _this.current = index;
        //获取点击对象
        let el = e.currentTarget;
        let binghaiNameID = id;
        console.log(binghaiNameID);
        _this.newNum = el.innerHTML;
        _this.newShow = false;
        _this.dialogTableVisible = false;
      }
      localStorage.setItem("newNum", _this.newNum);
      _this.newNum = localStorage.getItem("newNum");
      location.reload();
    },

    //点击病害名称获取后端数据
    dianji() {
      let _this = this;
      let postData = _this.$qs.parse({
        plant_type: localStorage.getItem('newdataA'), // 作物种类名称
      })
      _this
        .$axios({
          method: "post",
          url: "bigservers/check_plant_leve",
          data: postData,
          headers: {
            "Content-Type": "application/json"
          }
        })
        .then(res => {
          _this.binghaiName = 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/pathology.scss";
</style>
