<template>
  <div class="acquiescent-box" :style="'height:' + fullHeight + 'px'" v-loading="loading">
    <!-- 页头 -->
    <el-header>
      <el-page-header title @back="goBack" content="默认编辑"></el-page-header>
      <el-button type="primary" class="acquiescent-btn1" @click="judge()">完成</el-button>
    </el-header>

    <!-- 页面主内容 -->
    <el-main :style="'height:' + fullHeight + 'px'">
      <!-- 主内容列表 -->
      <ul class="acquiescent-ul">
        <!-- 地区选择 -->
        <li class="acquiescent-li" @click="diqu()">
          <img src="../../assets/imageOne/dingwei.png" alt class="acquiescent-li-imgone dandu" />
          <div class="acquiescent-li-div">
            <div class="acquiescent-li-divone danoneA">地区选择</div>
            <div class ref="shengname">
              <div>
                <div
                  class="acquiescent-div-list province-value"
                >{{this.shengname == null ? redata.city : this.shengname}}</div>
              </div>
            </div>
          </div>
          <img src="../../assets/imageOne/15.png" alt class="acquiescent-list-img2" />
        </li>

        <!-- 月份选择 -->
        <li class="acquiescent-li" @click="month()">
          <img src="../../assets/imageOne/month.png" alt class="acquiescent-li-imgone dandu" />
          <div class="acquiescent-li-div">
            <div class="acquiescent-li-divone danoneA">月份选择</div>
            <div class ref="shengname">
              <div>
                <div
                  class="acquiescent-div-list province-value"
                >{{this.monthName == 'undefined月份' ? redata.month + '月份' : this.monthName}}</div>
              </div>
            </div>
          </div>
          <img src="../../assets/imageOne/15.png" alt class="acquiescent-list-img2" />
        </li>

        <!-- 作物选择 -->
        <li class="acquiescent-li" @click="zuowu()">
          <img src="../../assets/imageOne/plant.png" alt class="acquiescent-li-imgone dandu" />
          <div class="acquiescent-li-div">
            <div class="acquiescent-li-divone danoneA">作物选择</div>
            <div class ref="shengname">
              <div>
                <div
                  class="acquiescent-div-list province-value"
                  v-if="this.plantType !== null ? this.plantType == '1' : redata.crop_sort == '1'"
                >粮食作物 {{ this.pestName == null ? redata.pest : this.pestName}}</div>
                <div
                  class="acquiescent-div-list province-value"
                  v-else-if="this.plantType !== null ? this.plantType == '2' : redata.crop_sort == '2'"
                >经济作物 {{this.pestName == null ? redata.pest : this.pestName}}</div>
                <div
                  class="acquiescent-div-list province-value"
                  v-else-if="this.plantType !== null ? this.plantType == '3' : redata.crop_sort == '3'"
                >林业 {{this.pestName == null ? redata.pest : this.pestName}}</div>
              </div>
            </div>
          </div>
          <img src="../../assets/imageOne/15.png" alt class="acquiescent-list-img2" />
        </li>

        <!-- 病害名称 -->
        <li class="acquiescent-li">
          <img src="../../assets/imageOne/plant.png" alt class="acquiescent-li-imgone dandu" />
          <div class="acquiescent-li-div">
            <div class="acquiescent-li-divone danoneA">
              病虫害名称
              <span class="must">*</span>
            </div>
            <el-cascader
              :options="optionsB"
              v-model="valueA"
              :placeholder="redata.pest_name"
              @change="resultB($event)"
              class="content"
            ></el-cascader>
          </div>
        </li>

        <!-- 病虫害数据添加 -->
        <li class="acquiescent-li">
          <img src="../../assets/plantImg/addr.png" alt class="acquiescent-li-imgone dandu" />
          <div class="acquiescent-li-div">
            <div class="acquiescent-li-divone danoneA">病虫害名添加</div>
            <div class="acquiescent-li-input" @click="exhibition()">
                <el-input
                  type="text"
                  :rows="10"
                  placeholder="输入要添加的病虫害名称"
                  v-model.trim="inputPlant"
                  maxlength="20"
                  disabled=""
                  clearable
                ></el-input>
            </div>
          </div>
        </li>
        <!-- 病虫害数据添加 -->

        <!-- 生育期 -->
        <li class="acquiescent-li">
          <img src="../../assets/imageOne/raise.png" alt class="acquiescent-li-imgone dandu" />
          <div class="acquiescent-li-div">
            <div class="acquiescent-li-divone danoneA">
              生育期
              <span class="must">*</span>
            </div>
            <div class="acquiescent-li-input">
              <el-input
                maxlength="20"
                type="text"
                :rows="10"
                placeholder="请输入生育期"
                v-model.trim="inputB"
                @blur="animateWidthC()"
                clearable
              ></el-input>
            </div>
          </div>
        </li>
        <!-- 生育期 -->

        <!-- 统计单位 -->
        <li class="acquiescent-li">
          <img src="../../assets/imageOne/danwei.png" alt class="acquiescent-li-imgone dandu1" />
          <div class="acquiescent-li-div danxuan">
            <div class="acquiescent-li-divone danxuan2">
              统计单位
              <span class="must">*</span>
            </div>
            <!-- 测试 -->
            <el-cascader
              v-model="value"
              :placeholder="redata.cens_method"
              :options="options"
              @change="handleChange"
            ></el-cascader>
            <!-- 测试 -->
          </div>
        </li>

        <!-- 统计数量 -->
        <li class="acquiescent-li">
          <img src="../../assets/imageOne/number.png" alt class="acquiescent-li-imgone dandu1" />
          <div class="acquiescent-li-div">
            <div>
              <div class="acquiescent-li-divone shuliang">
                统计数量
                <span class="must">*</span>
              </div>
            </div>
            <!-- 测试 -->
            <div class="acquiescent-li-input">
              <el-input
                type="number"
                :rows="10"
                placeholder="只能输入数字"
                v-model.trim="inputA"
                @blur="animateWidthA()"
                @focus="animateWidth()"
                clearable
              ></el-input>
            </div>
            <!-- 测试 -->
          </div>
        </li>

        <!-- 上传图片 -->
        <li class="acquiescent-li ceshi">
          <img src="../../assets/imageOne/image.png" alt class="acquiescent-li-imgone dandu" />
          <div class="acquiescent-li-div">
            <div class="acquiescent-li-divone danone">
              上传图片
              <span class="must">*</span>
            </div>

            <!-- 删除 -->
            <el-button @click="delBtn()" type="primary" v-if="btnShow">删除</el-button>
            <!-- 上传的图片 -->
            <div class="acquiescent-li-pictureBox" v-if="imgShow">
              <img
                preview="1"
                v-for="(item, index) in imageList"
                :key="index"
                v-lazy=" 'bigservers/' + item"
                class="acquiescent-li-picture"
                alt
              />
            </div>
          </div>
          <div class="shangchuan_box">
            <el-upload
              ref="upload"
              action="/account_photo"
              list-type="picture-card"
              :on-preview="handlePictureCardPreview"
              :http-request="handleHttpRequest"
              :on-remove="handleRemove"
              :limit="imgLimit"
            >
              <i class="el-icon-plus"></i>
            </el-upload>
            <el-dialog :visible.sync="dialogVisible">
              <img width="100%" :src="dialogImageUrl" alt />
            </el-dialog>
          </div>
        </li>

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

        <!-- 虫级 -->
        <li class="acquiescent-li bgjiA" v-else>
          <img src="../../assets/imageOne/insect.png" alt class="insect-li-img" />
          <div class="insect-li-div">
            <div class="insect-li-text bingjiA">虫级</div>
            <div class="insect-div-box">
              <div class="insect-text-box">
                <span class="insect-text-box-span">(1)卵:</span>
                <input type="number" placeholder class="insect-inputX" v-model.number="input11" />
              </div>
              <div class="insect-text-box">
                <span class="insect-text-box-span">(2)蛹:</span>
                <input type="number" placeholder class="insect-inputX" v-model.number="input22" />
              </div>
              <div class="insect-text-box">
                <span class="insect-text-box-span-one">(3)幼虫:</span>
                <input type="number" placeholder class="insect-inputE" v-model.number="input33" />
              </div>
              <div class="insect-text-box">
                <span class="insect-text-box-span-one">(4)落虫:</span>
                <input type="number" placeholder class="insect-inputE" v-model.number="input44" />
              </div>
              <div class="insect-text-box">
                <span class="insect-text-box-span-two">(5)齡雄虫1:</span>
                <input type="number" placeholder class="insect-inputA" v-model.number="input55" />
              </div>
              <div class="insect-text-box">
                <span class="insect-text-box-span-two">(6)齡雄虫2:</span>
                <input type="number" placeholder class="insect-inputA" v-model.number="input66" />
              </div>
              <div class="insect-text-box">
                <span class="insect-text-box-span-two">(7)齡雄虫3:</span>
                <input type="number" placeholder class="insect-inputA" v-model.number="input77" />
              </div>
              <div class="insect-text-box">
                <span class="insect-text-box-span-two">(8)齡雄虫4:</span>
                <input type="number" placeholder class="insect-inputA" v-model.number="input88" />
              </div>
              <div class="insect-text-box">
                <span class="insect-text-box-span-two">(9)齡雄虫5:</span>
                <input type="number" placeholder class="insect-inputA" v-model.number="input99" />
              </div>
              <div class="insect-text-box">
                <span class="insect-text-box-span-three">(10)齡雄虫6:</span>
                <input type="number" placeholder class="insect-inputB" v-model.number="input100" />
              </div>
              <div class="insect-text-box">
                <span class="insect-text-box-span-three">(11)齡雌虫1:</span>
                <input type="number" placeholder class="insect-inputB" v-model.number="input111" />
              </div>
              <div class="insect-text-box">
                <span class="insect-text-box-span-three">(12)齡雌虫2:</span>
                <input type="number" placeholder class="insect-inputB" v-model.number="input122" />
              </div>
              <div class="insect-text-box">
                <span class="insect-text-box-span-three">(13)齡雌虫3:</span>
                <input type="number" placeholder class="insect-inputB" v-model.number="input133" />
              </div>
              <div class="insect-text-box">
                <span class="insect-text-box-span-three">(14)齡雌虫4:</span>
                <input type="number" placeholder class="insect-inputB" v-model.number="input144" />
              </div>
              <div class="insect-text-box">
                <span class="insect-text-box-span-three">(15)齡雌虫5:</span>
                <input type="number" placeholder class="insect-inputB" v-model.number="input155" />
              </div>
              <div class="insect-text-box">
                <span class="insect-text-box-span-three">(16)齡雌虫6:</span>
                <input type="number" placeholder class="insect-inputB" v-model.number="input166" />
              </div>
            </div>
          </div>
        </li>
      </ul>
    </el-main>

    <!-- 添加病虫害名称提示框 -->
    <el-dialog
      title="病虫害名称添加"
      :visible.sync="dialogVisibleA"
      width="7rem"
      :before-close="handleClose"
    >
      <el-input
        class="inputStyleedit"
        type="text"
        :rows="10"
        placeholder="输入要添加的病虫害名称"
        v-model.trim="inputPlant"
        maxlength="20"
        clearable
      ></el-input>
      <span slot="footer" class="dialog-footer">
        <el-button class="quxiaoBtn" @click="dialogVisibleA = false, delPlant()">取 消</el-button>
        <el-button
          type="primary"
          class="quedingBtn"
          @click="dialogVisibleA = false, addPlant($event)"
        >确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "acquiescent",
  data() {
    return {
      imgShow: true, //上传图片原img列表
      plantType: localStorage.getItem("plantType"), //作物三大类的区别
      pestName: localStorage.getItem("plantName"),
      loading: true, //加载
      imageList: [], //上传图片数组
      redata: [], //返回的编辑数据
      plantName: localStorage.plantName, //作物名称
      monthType: localStorage.monthType, //月份类型
      monthName: localStorage.yuefen + "月份", //月份
      shengname: localStorage.diquName, //获取地区
      valueA: "", //病害名称数据
      // disabledInput: true, //生育期input框是否禁用
      inputPlant: "", //添加病虫害名称
      dialogVisibleA: false, //添加病害名称弹框
      bingType: "", //作物名称-新建
      fullHeight: document.documentElement.clientHeight,
      area: [], //作物数量单位和数字
      crop: [], //作物数量单位和数字
      //统计方法
      value: [],
      // value: '',
      options: [
        {
          value: "面积大小",
          label: "面积大小",
          children: [
            {
              value: "平方米",
              label: "平方米"
            },
            {
              value: "亩",
              label: "亩"
            }
          ]
        },
        {
          value: "作物数量",
          label: "作物数量",
          children: [
            {
              value: "株数",
              label: "株数"
            },
            {
              value: "叶数",
              label: "叶数"
            }
          ]
        }
      ],
      inputA: "", //数字
      inputB: "", //病害名称
      //病级
      plantIpt: {
        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"
      },

      dialogImageUrl: "",
      dialogVisible: false,
      add: [],
      btnShow: true, //删除按钮显示隐藏
      imgLimit: 2, //限制上传图片张数
      optionsB: [],
      selectedOptionsB: "",
      //虫级
      input11: "0",
      input22: "0",
      input33: "0",
      input44: "0",
      input55: "0",
      input66: "0",
      input77: "0",
      input88: "0",
      input99: "0",
      input100: "0",
      input111: "0",
      input122: "0",
      input133: "0",
      input144: "0",
      input155: "0",
      input166: "0",
      insectShow: 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();
    this.redataAxios(); //请求数据

    //作物种类数据
    // this.optionsB = JSON.parse(localStorage.getItem("pestName"));

    //判断病级在本地的值是否为空
    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.plantIpt.input1 = "病级1";
      this.plantIpt.input3 = "病级2";
      this.plantIpt.input5 = "病级3";
      this.plantIpt.input7 = "病级4";
      this.plantIpt.input9 = "病级5";
      this.plantIpt.input11 = "病级6";
    }

    //判读是虫级还是病级
    if (localStorage.getItem("defaultType") == "1") {
      //病级
      this.insectShow = true;
    } else if (localStorage.getItem("defaultType") == "2") {
      //虫级
      this.insectShow = false;
    }

    //判断当前是否重新选择了作物选择
    // if (localStorage.getItem("pestName") == null) {
    //   //当前页面请求病虫害名称
    //   this.plantInsectAxios();
    // }
  },

  created() {
    let _this = this;
  },
  computed: {},
  methods: {
    //点击进入作物选择
    zuowu() {
      var _this = this;
      // _this.$router.push('/screen_plant')

      //判断是否选择了地址,选择了就显示病害和虫害的选择
      var monthID = _this.redata.month; //月份ID
      var regionID = _this.redata.city_id; //地区ID
      var radioData = localStorage.getItem("defaultType");

      if (monthID !== null && regionID !== null && radioData !== null) {
        localStorage.setItem("yfenID", monthID);
        _this.$router.push("/screen_plant");
      } else {
        this.$message({
          type: "warning",
          message: "请先选择病虫害!"
        });
      }
    },

    //点击进入地区选择
    diqu() {
      let _this = this;
      _this.$router.push("/provinceList");
    },

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

    //病虫害名称数据请求
    plantInsectAxios() {
      var _this = this;
      //判断作物名称
      if (_this.pestName !== null) {
        var harm_name = _this.pestName;
      } else if (_this.pestName == null) {
        var harm_name = _this.redata.pest;
      }
      //判断月份
      if (localStorage.getItem("yuefenID") !== null) {
        var month = localStorage.getItem("yuefenID");
      } else if (localStorage.getItem("yuefenID") == null) {
        var month = _this.redata.month;
      }
      let postData = _this.$qs.stringify({
        ret: "details",
        harm_name: harm_name, //作物名称
        pest_sort: _this.redata.pest_sort, //病虫害区别 1是病害 2是虫害
        month_id: month //月份ID
      });
      console.log(_this.redata.pest_sort);

      _this
        .$axios({
          url: "bigservers/city",
          method: "post",
          data: postData,
          headers: {
            "Content-Type": "application/x-www-form-urlencoded"
          }
        })
        .then(res => {
          if (res.status == 200) {
            if (res.data.code !== null) {
              _this.optionsB = res.data;
            } else {
            }
          } else {
            this.$message({
              type: "warning",
              message: "请求失败，请检查网络!",
              duration: 1500
            });
          }
        });
    },

    //编辑默认数据接口
    redataAxios() {
      let _this = this;
      var data = localStorage.getItem("defaultID"); //默认数据ID
      let postData = _this.$qs.stringify({
        user_id: data,
        ret: "see"
      });
      _this
        .$axios({
          method: "POST",
          url: "bigservers/seeuser",
          data: postData,
          headers: {
            "Content-Type": "application/x-www-form-urlencoded"
          }
        })
        .then(res => {
          if (res.status == 200) {
            _this.redata = res.data[0];
            _this.inputB = res.data[0].growth_stages; //生育期
            // _this.value.push(res.data[0].cens_method); //统计方法
            _this.inputA = res.data[0].area; //作物数量
            localStorage.setItem("diquID", res.data[0].city_id);

            //动态设置上传图片张数限制
            if (res.data[0].addr_photo !== "null") {
              var nums = res.data[0].addr_photo.length;
              nums = parseInt(nums)
              this.imgLimit = this.imgLimit - nums;
              _this.imageList = res.data[0].addr_photo; //上传图片
              
              localStorage.setItem("add", res.data[0].addr_photo); //存上传的图片
              _this.btnShow = true
            } else {
              this.imgLimit = 3
              _this.btnShow = false
            }

            //判断当前是虫级还是病级
            if (localStorage.getItem("defaultType") == "1") {
              //病级
              // var numA = num.replace(/[\u4e00-\u9fa5]/gi, "");
              var data = res.data[0].pestname;
              var num = JSON.stringify(data);
              var a = num.replace(/病级1:/g, "");
              var b = a.replace(/病级2:/g, "");
              var c = b.replace(/病级3:/g, "");
              var d = c.replace(/病级4:/g, "");
              var e = d.replace(/病级5:/g, "");
              var f = e.replace(/病级6:/g, "");
              var dat = JSON.parse(f);
              _this.plantIpt.input2 = dat[0];
              _this.plantIpt.input4 = dat[1];
              _this.plantIpt.input6 = dat[2];
              _this.plantIpt.input8 = dat[3];
              _this.plantIpt.input10 = dat[4];
              _this.plantIpt.input12 = dat[5];
            } else if (localStorage.getItem("defaultType") == "2") {
              //虫级
              var arr = res.data[0].pestname;
              arr = JSON.stringify(arr);
              var a = arr.replace(/齡雄虫1:/g, "");
              var b = a.replace(/齡雄虫2:/g, "");
              var c = b.replace(/齡雄虫3:/g, "");
              var d = c.replace(/齡雄虫4:/g, "");
              var e = d.replace(/齡雄虫5:/g, "");
              var f = e.replace(/齡雄虫6:/g, "");

              var g = f.replace(/齡雌虫1:/g, "");
              var h = g.replace(/齡雌虫2:/g, "");
              var r = h.replace(/齡雌虫3:/g, "");
              var j = r.replace(/齡雌虫4:/g, "");
              var k = j.replace(/齡雌虫5:/g, "");
              var l = k.replace(/齡雌虫6:/g, "");
              var numA = l.replace(/[\u4e00-\u9fa5]/gi, "");
              numA = numA.replace(/:/g, "");
              var dat = JSON.parse(numA);
              //虫级
              _this.input11 = dat[0];
              _this.input22 = dat[1];
              _this.input33 = dat[2];
              _this.input44 = dat[3];
              _this.input55 = dat[4];
              _this.input66 = dat[5];
              _this.input77 = dat[6];
              _this.input88 = dat[7];
              _this.input99 = dat[8];
              _this.input100 = dat[9];
              _this.input111 = dat[10];
              _this.input122 = dat[11];
              _this.input133 = dat[12];
              _this.input144 = dat[13];
              _this.input155 = dat[14];
              _this.input166 = dat[15];

              _this.inputA = res.data[0].area; //作物数量
            }
            localStorage.setItem("defaultPlantname", res.data[0].pest_name); //作物名称
            localStorage.setItem("defaultPlanttype", res.data[0].crop_sort); //作物类型
            localStorage.setItem("defaultMonthID", res.data[0].month); //月份ID
            _this.loading = false;
          } else {
            this.$notify.error({
              title: "失败",
              message: "数据请求失败",
              duration: 1000
            });
          }
          this.plantInsectAxios();
        })
        .catch(error => {
          console.log(error);
        });
    },

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

    //返回
    goBack() {
      let _this = this;
      localStorage.removeItem("iptList"); //病虫害值
      localStorage.removeItem("area"); //作物数量
      localStorage.removeItem("add"); //上传图片
      localStorage.removeItem("classify_palnt"); //病害名称
      localStorage.removeItem("unit"); //统计方法
      localStorage.removeItem("plantNumber"); //作物数量
      // _this.$router.push("/home");
      _this.$router.replace("/home");
    },

    // 判断必填项是否都以填完
    judge() {
      // 病虫害ID 生育期 病虫害照片路径 统计面积 病虫值 统计方法
      if (
        this.inputB && //生育期
        (localStorage.getItem("area") || this.redata.cens_method) && //统计方法1
        (localStorage.getItem("unit") || this.redata.cens_method) && //统计方法2
        this.inputA && //作物数量
        (localStorage.getItem("diquName") || this.redata.city) && //地区
        (localStorage.getItem("month") || this.redata.month) && //月份
        (localStorage.getItem("add") || this.redata.addr_photo) //图片
      ) {
        this.baocun();
      } else {
        this.$message.error("必填项没有完成不能保存！！");
      }
    },

    //保存病级值
    bingji() {
      let _this = this;
      let list = localStorage.iptList; //原有值
      if (list) {
        var b1 = JSON.parse(list);
        b1.push(_this.plantIpt.input1 + ":" + _this.plantIpt.input2);
        b1.push(_this.plantIpt.input3 + ":" + _this.plantIpt.input4);
        b1.push(_this.plantIpt.input5 + ":" + _this.plantIpt.input6);
        b1.push(_this.plantIpt.input7 + ":" + _this.plantIpt.input8);
        b1.push(_this.plantIpt.input9 + ":" + _this.plantIpt.input10);
        b1.push(_this.plantIpt.input11 + ":" + _this.plantIpt.input12);

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

        var b2 = JSON.stringify(adlist);
      }
      localStorage.setItem("iptList", b2);
    },

    //保存虫级值
    chongji() {
      let _this = this;
      //存input框中输入的值
      let list = localStorage.iptList; //原有值
      if (list) {
        var b1 = JSON.parse(list);
        b1.push("卵" + ":" + _this.input11);
        b1.push("蛹" + ":" + _this.input22);
        b1.push("幼虫" + ":" + _this.input33);
        b1.push("落虫" + ":" + _this.input44);
        b1.push("齡雄虫1" + ":" + _this.input55);
        b1.push("齡雄虫2" + ":" + _this.input66);
        b1.push("齡雄虫3" + ":" + _this.input77);
        b1.push("齡雄虫4" + ":" + _this.input88);
        b1.push("齡雄虫5" + ":" + _this.input99);
        b1.push("齡雄虫6" + ":" + _this.input100);
        b1.push("齡雌虫1" + ":" + _this.input111);
        b1.push("齡雌虫2" + ":" + _this.input122);
        b1.push("齡雌虫3" + ":" + _this.input133);
        b1.push("齡雌虫4" + ":" + _this.input144);
        b1.push("齡雌虫5" + ":" + _this.input155);
        b1.push("齡雌虫6" + ":" + _this.input166);

        var b2 = JSON.stringify(b1);
      } else {
        let adlist = [];
        adlist.push("卵" + ":" + _this.input11);
        adlist.push("蛹" + ":" + _this.input22);
        adlist.push("幼虫" + ":" + _this.input33);
        adlist.push("落虫" + ":" + _this.input44);
        adlist.push("齡雄虫1" + ":" + _this.input55);
        adlist.push("齡雄虫2" + ":" + _this.input66);
        adlist.push("齡雄虫3" + ":" + _this.input77);
        adlist.push("齡雄虫4" + ":" + _this.input88);
        adlist.push("齡雄虫5" + ":" + _this.input99);
        adlist.push("齡雄虫6" + ":" + _this.input100);
        adlist.push("齡雌虫1" + ":" + _this.input111);
        adlist.push("齡雌虫2" + ":" + _this.input122);
        adlist.push("齡雌虫3" + ":" + _this.input133);
        adlist.push("齡雌虫4" + ":" + _this.input144);
        adlist.push("齡雌虫5" + ":" + _this.input155);
        adlist.push("齡雌虫6" + ":" + _this.input166);
        var b2 = JSON.stringify(adlist);
      }
      localStorage.setItem("iptList", b2);
    },

    //点击完成按钮给后端发送作物种类，作物数量，病级分类，病虫害值等数据
    baocun() {
      let _this = this;
      //判读是虫级还是病级
      if (localStorage.getItem("defaultType") == "1") {
        //病级
        _this.bingji(); //调用保存病级值
        // 将用户修改的病级存在本地
        localStorage.setItem("input1", _this.plantIpt.input1);
        localStorage.setItem("input2", _this.plantIpt.input3);
        localStorage.setItem("input3", _this.plantIpt.input5);
        localStorage.setItem("input4", _this.plantIpt.input7);
        localStorage.setItem("input5", _this.plantIpt.input9);
        localStorage.setItem("input6", _this.plantIpt.input11);
      } else if (localStorage.getItem("defaultType") == "2") {
        //虫级
        _this.chongji(); //调用保存虫级值
      }

      //判断是新建还是编辑
      if (localStorage.getItem("defaultID") !== null) {
        //编辑
        if (_this.imageList.length != 0) {
          var imgdata = localStorage.getItem('add')
          _this.imageList.push(imgdata)
          localStorage.setItem('add', _this.imageList)
        }

        var postData = _this.$qs.stringify({
          harm_id: localStorage.getItem("defaultHarmID"), //病虫害ID
          growth_stages: _this.inputB, //生育期
          addr_photo: localStorage.getItem("add"), //病虫害照片路径
          area: this.inputA, //统计面积
          pestname: localStorage.getItem("iptList"), //病害值
          // cens_method:
          //   localStorage.getItem("area") + localStorage.getItem("unit"), //统计方法
          cens_method:
            localStorage.getItem("area") + localStorage.getItem("unit") == 0
              ? this.redata.cens_method
              : localStorage.getItem("area") + localStorage.getItem("unit") //统计方法
        });
      } else if (localStorage.getItem("defaultID") == null) {
        //新建
        var postData = _this.$qs.stringify({
          harm_id: localStorage.getItem("classify_palnt"), //病虫害ID
          growth_stages: _this.inputB, //生育期
          addr_photo: localStorage.getItem("add"), //病虫害照片路径
          area: localStorage.getItem("plantNumber"), //统计面积
          pestname: localStorage.getItem("iptList"), //病害值
          cens_method:
            localStorage.getItem("area") + localStorage.getItem("unit") //统计方法
        });
      }
      console.log(localStorage.getItem('add'))
      _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({
              title: "失败",
              message: "数据保存失败",
              duration: 1000
            });
          } else if (res.data.code == 200) {
            // _this.$router.push("home");
            _this.$router.replace("home");
            this.$notify({
              title: "成功",
              message: "数据保存成功了",
              type: "success",
              duration: 1000
            });
            //删除存在本地的值
            this.delData();
          }
        })
        .catch(error => {
          alert("请求失败");
          console.log(error);
        });
    },

    //统计方法的值
    handleChange(value) {
      console.log(value);
      localStorage.setItem("area", value[0]); //作物数量还是面积
      localStorage.setItem("unit", value[1]); //单位
    },

    //监听数字input-失去焦点
    animateWidthA() {
      if (this.inputA === "") {
        this.$notify({
          title: "警告",
          message: "这是必填项，不能为空",
          type: "warning",
          duration: 1000
        });
      } else {
        localStorage.setItem("plantNumber", this.inputA); // 存数量
      }
    },

    //监听数字input-获取焦点
    animateWidth() {
      // if (
      //   localStorage.getItem("area") === null &&
      //   localStorage.getItem("unit") === null
      // ) {
      //   this.$notify({
      //     title: "警告",
      //     message: "请先选择统计方法之后，再填写数量",
      //     type: "warning",
      //     duration: 1000
      //   });
      // }
    },

    //监听病害名称添加input-失去焦点-病害名称
    exhibition() {
      let _this = this;
      _this.dialogVisibleA = true
    },
    handleClose(done) {
      let _this = this;
      _this.dialogVisibleA = false;
    },
    //添加病虫害名称弹框确定事件
    addPlant() {
      let _this = this;
      //判断月份是哪来的
      if (localStorage.getItem("yuefenID") !== null) {
        var month = localStorage.getItem("yuefenID");
      } else if (localStorage.getItem("yuefenID") == null) {
        var month = _this.redata.month;
      }

      //判断分类名称
      if (localStorage.getItem("plantName") !== null) {
        var harm = localStorage.getItem("plantName");
      } else if (localStorage.getItem("plantName") == null) {
        var harm = _this.redata.pest;
      }

      var postData = _this.$qs.stringify({
        ret: "add_harm",
        harm: harm, //分类名称
        pest_sort: localStorage.getItem("defaultType"), //病虫害区分
        pest_name: _this.inputPlant, //病虫害名称
        month_id: month //月份ID
      });

      _this
        .$axios({
          url: "bigservers/city",
          method: "post",
          data: postData,
          headers: {
            "Content-Type": "application/x-www-form-urlencoded"
          }
        })
        .then(res => {
          if (res.data.code == 200) {
            this.$message({
              type: "success",
              message: "病害名称新建成功！",
              duration: 1500
            });
            this.plantInsectAxios();
          } else if (res.data.code == 201) {
            this.$message({
              showClose: true,
              message: "该病害名称已经存在了！",
              type: "warning"
            });
          } else if (res.data.code == null) {
            this.$message({
              type: "warning",
              message: "该病害名称新建失败！",
              duration: 1500
            });
          }
          _this.inputPlant = "";
        })
        .catch(err => {
          console.log(err);
        });
    },
    //添加病虫害名称弹框取消事件
    delPlant() {
      let _this = this;
      _this.inputPlant = "";
    },

    //生育期input获取焦点事件
    animateWidthC() {
      let _this = this;
      //判断是否选择病害名称
      if (
        localStorage.getItem("classify_palnt") !== null &&
        _this.inputB === ""
      ) {
        this.$notify({
          title: "警告",
          message: "此项为必填项，请填写完后再填写下一项",
          type: "warning",
          duration: 1000
        });
      }
    },

    //保存成功后删除存在本地的数据
    delData() {
      //第二步页面的数据
      localStorage.removeItem("iptList"); //病虫害值
      localStorage.removeItem("area"); //作物数量
      localStorage.removeItem("add"); //上传图片
      localStorage.removeItem("classify_palnt"); //病害名称
      localStorage.removeItem("unit"); //统计方法
      localStorage.removeItem("plantNumber"); //作物数量

      //第一步页面数据
      localStorage.removeItem("diquID"); //地区ID
      localStorage.removeItem("diquName"); //地区名称
      localStorage.removeItem("regionData"); //地区
      localStorage.removeItem("defaultMonthID"); //月份ID
      localStorage.removeItem("month"); //月份
      localStorage.removeItem("screebIndex");
      localStorage.removeItem("plantType");
      localStorage.removeItem("plantName");
      localStorage.removeItem("pestName");
      localStorage.removeItem("radioData");
      localStorage.removeItem("screenIndex");
      localStorage.removeItem("defaultPlanttype");
      localStorage.removeItem("defaultPlantname");
      localStorage.removeItem("yuefenID");
      localStorage.removeItem("yuefen");
    },

    //点击进入上传图片页面
    handleRemove(file, fileList) {},
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    handleHttpRequest(file) {
      let _this = this;
      let form = new FormData();
      form.append("file", file.file);
      _this
        .$axios({
          method: "post",
          url: "bigservers/account_photo",
          anync: true,
          data: form,
          headers: {
            "Content-Type": "multipart/form-data"
          }
        })
        .then(res => {
          _this.add.push(res.data.src);
          _this.btnShow = true;
          //判断当前add图片key是否有值
          // if (localStorage.getItem("add") !== null) {
          //   var a = localStorage.getItem("add");
          //   var arr = [];
          //   arr.push(a);
          //   arr.push(_this.add[0]);
          //   console.log(arr);
          //   localStorage.setItem("add", arr);
          //   console.log(localStorage.getItem("add"));
          // }
          localStorage.setItem("add", _this.add);
        })
        .catch(error => {
          console.log(err);
        });
    },

    //删除上传的图片
    delBtn() {
      let _this = this;
      var imgA = localStorage.getItem("add");
      var id = _this.redata.id
      let postData = _this.$qs.stringify({
        pic_list: imgA,
        id: id
      });
      _this
        .$axios({
          method: "post",
          url: "bigservers/del_account_photo",
          data: postData,
          headers: {
            "Content-Type": "application/x-www-form-urlencoded"
          }
        })
        .then(res => {
          if (res.data.code == 200) {
            this.$notify({
              title: "成功",
              message: "图片删除成功",
              type: "success"
            });
            _this.imgShow = false;
            localStorage.removeItem("add");
            this.$refs.upload.clearFiles();
            this.imageList = []
          } else {
            this.$notify.error({
              title: "失败",
              message: "图片删除失败"
            });
          }
        })
        .catch(error => {
          console.log(error);
          this.$notify.error({
            title: "失败",
            message: "图片删除失败"
          });
        });
    },

    //下拉框选中病害名称
    resultB(e) {
      localStorage.setItem("classify_palnt", e);
      // this.disabledInput = false; //生育期
    }
  }
};
</script>

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