<template>
  <div class="newmessage-box" :style="'height:' + fullHeight + 'px'">
    <!-- 页面头部 -->
    <el-header>
      <div class="grid-content bg-purple-dark">
        <el-page-header @back="goBack" title content="新建信息"></el-page-header>
        <!-- 病害 -->
        <el-button
          v-show="this.plantName !== undefined && this.radio == '1'"
          type="primary"
          class="pathology-btn2"
          @click="Plantjudge()"
        >完成</el-button>
        <!-- 虫害 -->
        <el-button
          v-show="this.plantName !== undefined && this.radio == '2'"
          type="primary"
          class="pathology-btn2"
          @click="Insectjudge()"
        >完成</el-button>
      </div>
    </el-header>

    <!-- 页面主内容 -->
    <el-main :style="'height:' + fullHeight + 'px'">
      <ul class="newmessage-ul" :style="'height:' + fullHeight + 'px'">
        <!-- 地区选择 -->
        <li class="newmessage-list" @click="sheng()">
          <img src="../../assets/imageOne/dingwei.png" alt class="newmessage-list-img" />
          <div class="newmessage-div-box">
            <div class="newmessage-div-list province">地区选择</div>
            <div class ref="shengname">
              <div>
                <div class="newmessage-div-list province-value">{{this.shengname}}</div>
              </div>
            </div>
          </div>
          <img src="../../assets/imageOne/15.png" alt class="newmessage-list-img2" />
        </li>
        <!-- 月份选择 -->
        <li class="newmessage-list" @click="month()">
          <img src="../../assets/imageOne/month.png" alt class="newmessage-list-img mothImg" />
          <div class="newmessage-div-box">
            <div class="newmessage-div-list province">月份选择</div>

            <div class ref="shiname">
              <div>
                <div
                  class="newmessage-div-list province-value"
                >{{this.monthName}} {{this.monthName == undefined ? '' : '月份'}}</div>
              </div>
            </div>
          </div>
          <img src="../../assets/imageOne/15.png" alt class="newmessage-list-img2" />
        </li>
        <!-- 病虫害选择 -->
        <li class="newmessage-list radioBox">
          <img src="../../assets/imageOne/insect.png" alt class="newmessage-list-img" />
          <div class="newmessage-div-box">
            <div class="newmessage-div-list province">病虫害选择</div>
            <div class ref="shiname">
              <div class="radio-box">
                <div class="newmessage-div-list province-value">
                  <el-radio v-model="radio" label="1">病害</el-radio>
                  <el-radio v-model="radio" label="2">虫害</el-radio>
                </div>
              </div>
            </div>
          </div>
        </li>
        <!-- 作物选择 -->
        <li class="newmessage-list" @click="xiang()">
          <img src="../../assets/imageOne/plant.png" alt class="newmessage-list-img" />
          <div class="newmessage-div-box">
            <div class="newmessage-div-list province">作物选择</div>

            <div class ref="shiname">
              <div>
                <div
                  class="newmessage-div-list province-value"
                >{{this.plantName == 'undefined' ? '' : this.plantName}}</div>
              </div>
            </div>
          </div>
          <img src="../../assets/imageOne/15.png" alt class="newmessage-list-img2" />
        </li>

        <!-- 病害第二步 -->
        <transition name="el-fade-in-linear">
          <li v-if="this.plantName != undefined && this.radio == '1'">
            <plant></plant>
          </li>
        </transition>

        <!-- 虫害第二步 -->
        <transition name="el-fade-in-linear">
          <li v-if="this.plantName != undefined && this.radio == '2'">
            <insect></insect>
          </li>
        </transition>
      </ul>
    </el-main>
  </div>
</template>

<script>
import insect from "../insectPlug/insectPlug"; //虫害
import plant from "../plantPlug/plantPlug"; //病害

export default {
  name: "newmessage",
  data() {
    const self = this;
    return {
      isClick: true,
      plantName: localStorage.plantName, //作物名称
      radio: localStorage.radioData, //病虫害选择
      monthType: localStorage.monthType, //月份类型
      monthName: localStorage.month, //月份
      shengname: localStorage.regionName, //获取地区
      fullHeight: document.documentElement.clientHeight,
      show3: false,
      plantShow: false, //病害第二步
      insectShow: false, //虫害第二步
      btnShow: false, //右上角按钮

      //病害保存值
      plantNum: {
        input1: localStorage.getItem("input1"),
        input2: "0",
        input3: localStorage.getItem("input2"),
        input4: "0",
        input5: localStorage.getItem("input3"),
        input6: "0",
        input7: localStorage.getItem("input4"),
        input8: "0",
        input9: localStorage.getItem("input5"),
        input10: "0",
        input11: localStorage.getItem("input6"),
        input12: "0"
      },

      //虫害保存值
      insectNum: {
        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"
      }
    };
  },

  watch: {
    fullHeight(val) {
      //监控浏览器高度变化
      if (!this.timer) {
        this.fullHeight = val;
        this.timer = true;
        let that = this;
        setTimeout(function() {
          //防止过度调用监测事件，导致卡顿
          that.timer = false;
        }, 400);
      }
    },

    // 病虫害选择
    radio(val) {
      let _this = this;
      var isClick = _this.isClick;
      if (
        localStorage.getItem("monthID") !== null &&
        localStorage.getItem("regionID") !== null
      ) {
        localStorage.setItem("radioData", val);
        localStorage.removeItem("plantName"); //清除作物名称
        _this.plantName = undefined;
      } else {
        if (isClick === true) {
          _this.isClick = false;
          this.$message({
            type: "warning",
            message: "请先选择月份!",
            duration: 1000
          });
          setTimeout(function() {
            _this.isClick = true;
          }, 1500);
        }
        _this.radio = "";
      }

      //判断是否选择了地址,选择了就显示病害和虫害的选择
      // if (
      //   localStorage.getItem("monthID") !== null &&
      //   localStorage.getItem("regionID") !== null &&
      //   localStorage.getItem("plantName") !== null &&
      //   localStorage.getItem("pestName") !== null
      // ) {
      //   _this.show3 = true;
      // } else {
      //   _this.show3 = false;
      // }
      // localStorage.setItem("radioData", val);
      // console.log(val);
    }
  },
  components: {
    plant,
    insect
  },
  mounted() {
    this.get_boderHeight();

    //判断病级在本地的值是否为空
    if (
      localStorage.getItem("input1") == null &&
      localStorage.getItem("input2") == null &&
      localStorage.getItem("input3") == null &&
      localStorage.getItem("input4") == null &&
      localStorage.getItem("input5") == null &&
      localStorage.getItem("input6") == null
    ) {
      this.plantNum.input1 = "病级1";
      this.plantNum.input3 = "病级2";
      this.plantNum.input5 = "病级3";
      this.plantNum.input7 = "病级4";
      this.plantNum.input9 = "病级5";
      this.plantNum.input11 = "病级6";
    }
  },

  created() {
    let _this = this;
    //判断是否选择了地址,选择了就显示病害和虫害的选择
    if (
      localStorage.getItem("monthID") !== null &&
      localStorage.getItem("regionID") !== null &&
      localStorage.getItem("plantName") !== null &&
      localStorage.getItem("pestName") !== null &&
      localStorage.getItem("") !== null
    ) {
      _this.show3 = true;
    } else {
      _this.show3 = false;
    }
  },

  methods: {
    //动态获取浏览器高度
    get_boderHeight() {
      const that = this;
      window.onresize = () => {
        return (() => {
          window.fullHeight = document.documentElement.clientHeight;
          that.fullHeight = window.fullHeight;
          document.getElementById("#app").style =
            "height:" + that.fullHeight + "px";
          console.log(document.getElementById("#app"));
        })();
      };
    },

    //点击返回到home页面
    goBack() {
      let _this = this;
      //月份
      localStorage.removeItem("month");
      localStorage.removeItem("monthType");
      localStorage.removeItem("monthID");

      //地区
      localStorage.removeItem("regionName");
      localStorage.removeItem("regionID");

      //作物选择
      localStorage.removeItem("plantName");
      localStorage.removeItem("pestName");
      localStorage.removeItem("plantType");

      //病虫害单选框
      localStorage.removeItem("radioData");
      localStorage.removeItem("screenIndex"); //作物选择ID

      //第二步病害
      localStorage.removeItem("iptList"); //病虫害值
      localStorage.removeItem("area"); //作物数量
      localStorage.removeItem("add"); //上传图片
      localStorage.removeItem("classify_palnt"); //病害名称
      localStorage.removeItem("unit"); //统计方法
      localStorage.removeItem("plantNumber"); //作物数量
      localStorage.removeItem("pestName"); //作物选择返回的病虫害名称

      //第二步虫害
      localStorage.removeItem("newdata");
      localStorage.removeItem("type");
      localStorage.removeItem("textNumber");
      localStorage.removeItem("tyNumber");
      localStorage.removeItem("iptList");
      localStorage.removeItem("textBNumber");
      localStorage.removeItem("area");
      localStorage.removeItem("tyNumber");
      localStorage.removeItem("add"); //上传图片
      localStorage.removeItem("pestName"); //作物选择返回的病虫害名称

      // _this.$router.push("/home");
      _this.$router.replace("/home");
    },

    //点击省地址进入页面并请求后台数据
    sheng() {
      let _this = this;
      _this.$router.push("/provinceList");
      // _this.$router.replace("/provinceList");
    },

    //点击进入月份选择
    month() {
      let _this = this;
      var isClick = _this.isClick;
      if (isClick === true) {
        _this.isClick = false;
        if (localStorage.getItem("regionID") !== null) {
          _this.$router.push("/cityList");
        } else {
          this.$message({
            type: "warning",
            message: "请先选择地区!"
          });
        }
        setTimeout(function() {
          _this.isClick = true;
        }, 1500);
      }
    },

    //点击进入作物选择
    xiang() {
      let _this = this;
      var isClick = _this.isClick;
      if (isClick === true) {
        _this.isClick = false;
        //判断是否选择了地址,选择了就显示病害和虫害的选择
        if (
          localStorage.getItem("monthID") !== null &&
          localStorage.getItem("regionID") !== null &&
          localStorage.getItem("radioData")
        ) {
          localStorage.removeItem("screenIndex");
          _this.$router.push("/screen_plant");
        } else {
          this.$message({
            type: "warning",
            message: "请先选择病虫害!"
          });
        }
        setTimeout(function() {
          _this.isClick = true;
        }, 1500);
      }
    },

    //虫害切换
    insect(e) {
      let _this = this;
      if (
        e.target.parentNode.className == "main_tab_plant_fen" ||
        e.target.parentNode.className == "main_tab_plant_fen_a"
      ) {
        e.target.classList.add("activeA");
      }
      localStorage.setItem("danxun", "2"); //虫害
    },
    //病害切换
    plant(e) {
      let _this = this;
      if (
        e.target.parentNode.className == "main_tab_plant_fen" ||
        e.target.parentNode.className == "main_tab_plant_fen_a"
      ) {
        e.target.classList.add("activeA");
      }
      localStorage.setItem("danxun", "1"); //病害
    },

    //病害信息保存
    Plantjudge() {
      let _this = this;
      var isClick = _this.isClick;
      if (isClick === true) {
        _this.isClick = false;
        if (
          localStorage.getItem("classify_palnt") &&
          localStorage.getItem("maternity") &&
          localStorage.getItem("area") &&
          localStorage.getItem("unit") &&
          localStorage.getItem("plantNumber") &&
          localStorage.getItem("add")
        ) {
          this.baocun();
          // this.bingji()
        } else {
          this.$message({
            type: "warning",
            showClose: true,
            message: "必填项没有完成不能保存！！!",
            duration: 1000
          });
        }
        setTimeout(function() {
          _this.isClick = true;
        }, 1500);
      }
    },
    //保存病级值
    bingji() {
      let _this = this;
      let list = localStorage.iptList; //原有值
      if (list) {
        var b1 = JSON.parse(list);
        b1.push(_this.plantNum.input1 + ":" + _this.plantNum.input2);
        b1.push(_this.plantNum.input3 + ":" + _this.plantNum.input4);
        b1.push(_this.plantNum.input5 + ":" + _this.input6);
        b1.push(_this.plantNum.input7 + ":" + _this.plantNum.input8);
        b1.push(_this.plantNum.input9 + ":" + _this.plantNum.input10);
        b1.push(_this.plantNum.input11 + ":" + _this.plantNum.input12);
        var b2 = JSON.stringify(b1);
      } else {
        let adlist = [];
        adlist.push(_this.plantNum.input1 + ":" + _this.plantNum.input2);
        adlist.push(_this.plantNum.input3 + ":" + _this.plantNum.input4);
        adlist.push(_this.plantNum.input5 + ":" + _this.plantNum.input6);
        adlist.push(_this.plantNum.input7 + ":" + _this.plantNum.input8);
        adlist.push(_this.plantNum.input9 + ":" + _this.plantNum.input10);
        adlist.push(_this.plantNum.input11 + ":" + _this.plantNum.input12);

        var b2 = JSON.stringify(adlist);
      }
      localStorage.setItem("iptList", b2);
    },
    //保存成功后删除存在本地的数据
    delData() {
      //第二步页面的数据
      localStorage.removeItem("iptList"); //病虫害值
      localStorage.removeItem("area"); //作物数量
      localStorage.removeItem("add"); //上传图片
      localStorage.removeItem("classify_palnt"); //病害名称
      localStorage.removeItem("unit"); //统计方法
      localStorage.removeItem("plantNumber"); //作物数量
      localStorage.removeItem("maternity"); //生育期

      //第一步页面数据
      localStorage.removeItem("regionID"); //地区ID
      localStorage.removeItem("regionName"); //地区名称
      localStorage.removeItem("regionData"); //地区
      localStorage.removeItem("monthID"); //月份ID
      localStorage.removeItem("month"); //月份
      localStorage.removeItem("screebIndex");
      localStorage.removeItem("plantType");
      localStorage.removeItem("plantName");
      localStorage.removeItem("pestName");
      localStorage.removeItem("radioData");
      localStorage.removeItem("screenIndex");
    },
    //点击完成按钮给后端发送作物种类等数据
    baocun() {
      let _this = this;
      _this.bingji(); //调用保存病级值
      // 将用户修改的病级存在本地
      localStorage.setItem("input1", _this.plantNum.input1);
      localStorage.setItem("input2", _this.plantNum.input3);
      localStorage.setItem("input3", _this.plantNum.input5);
      localStorage.setItem("input4", _this.plantNum.input7);
      localStorage.setItem("input5", _this.plantNum.input9);
      localStorage.setItem("input6", _this.plantNum.input11);

      let postData = _this.$qs.stringify({
        harm_id: localStorage.getItem("classify_palnt"), //病虫害ID
        growth_stages: localStorage.getItem("maternity"), //生育期
        addr_photo: localStorage.getItem("add"), //病虫害照片路径
        area: localStorage.getItem("plantNumber"), //统计面积
        pestname: localStorage.getItem("iptList"), //病害值
        cens_method: localStorage.getItem("area") + localStorage.getItem("unit") //统计方法
      });

      _this
        .$axios({
          method: "POST",
          url: "bigservers/cate",
          data: postData,
          headers: {
            "Content-Type": "application/x-www-form-urlencoded"
          }
        })
        .then(res => {
          if (res.data.code == null) {
            this.$notify.error({
              showClose: true,
              title: "失败",
              message: "数据保存失败",
              duration: 1000
            });
          } else if (res.data.code == 200) {
            _this.$router.replace("home");
            this.$notify({
              showClose: true,
              title: "成功",
              message: "数据保存成功了",
              type: "success",
              duration: 1000
            });
            //删除存在本地的值
            this.delData();
          }
        })
        .catch(error => {
          alert("请求失败");
          console.log(error);
        });
    },

    //虫害信息保存
    Insectjudge() {
      let _this = this;
      var isClick = _this.isClick;
      if (isClick === true) {
        _this.isClick = false;
        if (
          localStorage.getItem("classify_palnt") &&
          localStorage.getItem("maternity") &&
          localStorage.getItem("area") &&
          localStorage.getItem("unit") &&
          localStorage.getItem("plantNumber") &&
          localStorage.getItem("add")
        ) {
          this.binghai();
        } else {
          this.$message({
            showClose: true,
            type: "warning",
            message: "必填项没有完成不能保存！！!",
            duration: 1000
          });
        }
        setTimeout(function() {
          _this.isClick = true;
        }, 1500);
      }
    },
    //   给后端传递病虫害值和虫害级别
    binghai() {
      let _this = this;
      _this.chongji(); //调用虫害函数
      let postData = _this.$qs.stringify({
        harm_id: localStorage.getItem("classify_palnt"), //病虫害ID
        // growth_stages: data, //生育期
        growth_stages: localStorage.getItem("maternity"), //生育期
        addr_photo: localStorage.getItem("add"), //病虫害照片路径
        area: localStorage.getItem("plantNumber"), //统计面积
        pestname: localStorage.getItem("iptList"), //病害值
        cens_method: localStorage.getItem("area") + localStorage.getItem("unit") //统计方法
      });

      _this
        .$axios({
          method: "POST",
          url: "bigservers/cate",
          data: postData,
          headers: {
            "Content-Type": "application/x-www-form-urlencoded"
          }
        })
        .then(res => {
          if (res.data.code == null) {
            this.$notify.error({
              showClose: true,
              title: "失败",
              message: "数据保存失败",
              duration: 1000
            });
          } else if (res.data.code == 200) {
            // _this.$router.push("home");
            _this.$router.replace("home");
            this.$notify({
              showClose: true,
              title: "成功",
              message: "数据保存成功了",
              type: "success",
              duration: 1000
            });
            //删除存在本地的值
            this.delDataA();
          }
        })
        .catch(error => {
          alert("保存失败");
          console.log(error);
        });
    },
    //保存虫级值
    chongji() {
      let _this = this;
      //存input框中输入的值
      let list = localStorage.iptList; //原有值
      if (list) {
        var b1 = JSON.parse(list);
        b1.push("卵" + ":" + _this.insectNum.input1);
        b1.push("蛹" + ":" + _this.insectNum.input2);
        b1.push("幼虫" + ":" + _this.insectNum.input3);
        b1.push("落虫" + ":" + _this.insectNum.input4);
        b1.push("齡雄虫1" + ":" + _this.insectNum.input5);
        b1.push("齡雄虫2" + ":" + _this.insectNum.input6);
        b1.push("齡雄虫3" + ":" + _this.insectNum.input7);
        b1.push("齡雄虫4" + ":" + _this.insectNum.input8);
        b1.push("齡雄虫5" + ":" + _this.insectNum.input9);
        b1.push("齡雄虫6" + ":" + _this.insectNum.input10);
        b1.push("齡雌虫1" + ":" + _this.insectNum.input11);
        b1.push("齡雌虫2" + ":" + _this.insectNum.input12);
        b1.push("齡雌虫3" + ":" + _this.insectNum.input13);
        b1.push("齡雌虫4" + ":" + _this.insectNum.input14);
        b1.push("齡雌虫5" + ":" + _this.insectNum.input15);
        b1.push("齡雌虫6" + ":" + _this.insectNum.input16);

        var b2 = JSON.stringify(b1);
      } else {
        let adlist = [];
        adlist.push("卵" + ":" + _this.insectNum.input1);
        adlist.push("蛹" + ":" + _this.insectNum.input2);
        adlist.push("幼虫" + ":" + _this.insectNum.input3);
        adlist.push("落虫" + ":" + _this.insectNum.input4);
        adlist.push("齡雄虫1" + ":" + _this.insectNum.input5);
        adlist.push("齡雄虫2" + ":" + _this.insectNum.input6);
        adlist.push("齡雄虫3" + ":" + _this.insectNum.input7);
        adlist.push("齡雄虫4" + ":" + _this.insectNum.input8);
        adlist.push("齡雄虫5" + ":" + _this.insectNum.input9);
        adlist.push("齡雄虫6" + ":" + _this.insectNum.input10);
        adlist.push("齡雌虫1" + ":" + _this.insectNum.input11);
        adlist.push("齡雌虫2" + ":" + _this.insectNum.input12);
        adlist.push("齡雌虫3" + ":" + _this.insectNum.input13);
        adlist.push("齡雌虫4" + ":" + _this.insectNum.input14);
        adlist.push("齡雌虫5" + ":" + _this.insectNum.input15);
        adlist.push("齡雌虫6" + ":" + _this.insectNum.input16);
        var b2 = JSON.stringify(adlist);
      }
      localStorage.setItem("iptList", b2);
    },
    //保存完成后删除本地数据
    delDataA() {
      //第二步页面的数据
      localStorage.removeItem("iptList"); //病虫害值
      localStorage.removeItem("area"); //作物数量
      localStorage.removeItem("add"); //上传图片
      localStorage.removeItem("classify_palnt"); //病害名称
      localStorage.removeItem("unit"); //统计方法
      localStorage.removeItem("plantNumber"); //作物数量
      localStorage.removeItem("maternity"); //生育期

      //第一步页面数据
      localStorage.removeItem("regionID"); //地区ID
      localStorage.removeItem("regionName"); //地区名称
      localStorage.removeItem("regionData"); //地区
      localStorage.removeItem("monthID"); //月份ID
      localStorage.removeItem("month"); //月份
      localStorage.removeItem("screebIndex");
      localStorage.removeItem("plantType");
      localStorage.removeItem("plantName");
      localStorage.removeItem("pestName");
      localStorage.removeItem("radioData");
      localStorage.removeItem("screenIndex");
    }
  }
};
</script>

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