<template>
  <div class="plantinsectset-box" :style="'height:' + fullHeight + 'px'">
    <!-- 页头 -->
    <el-header>
      <el-page-header title @back="goBack" content="设置详情"></el-page-header>

      <el-popover placement="top" width="160" v-model="visible" v-if="isShow">
        <p>确定要将该数据设置为默认数据吗？</p>
        <div style="text-align: right; margin: 0">
          <el-button size="mini" type="text" @click="visible = false">取消</el-button>
          <el-button type="primary" size="mini" @click="visible = false, set()">确定</el-button>
        </div>
        <el-button slot="reference">设置默认</el-button>
      </el-popover>

      <el-popover placement="top" width="160" v-model="visible" v-else>
        <p>确定要取消该数据的默认吗？</p>
        <div style="text-align: right; margin: 0">
          <el-button size="mini" type="text" @click="visible = false">取消</el-button>
          <el-button type="primary" size="mini" @click="visible = false, del()">确定</el-button>
        </div>
        <el-button class="delBtn" slot="reference">取消默认</el-button>
      </el-popover>

      <div class="img_box">
        <span class="demonstration"></span>
        <el-carousel trigger="click" height="5.5rem">
          <el-carousel-item v-for="item in this.imgList" :key="item">
            <img preview="1" v-lazy=" 'bigservers/' + item" alt class="img_box_img" />
          </el-carousel-item>
        </el-carousel>
      </div>
    </el-header>

    <!-- 调查详情主内容 -->
    <el-main>
      <div class>
        <ul class="plantinsectset-ul">
          <!-- 调查时间 -->
          <li class="plantinsectset-ul-li">
            <img src="../../assets/imageOne/39.png" alt class="plantinsectset-ul-li-img" />
            <div class="plantinsectset-ul-li-box">
              <div class="plantinsectset-ul-li-text">调查时间</div>
              <div v-if="errorShow" class="plantinsectset-ul-li-time">{{redata.upl_time}}</div>
            </div>
          </li>

          <!-- 采集地区 -->
          <li class="plantinsectset-ul-li site">
            <img src="../../assets/imageOne/10.png" alt class="plantinsectset-ul-li-img image-one" />
            <div class="plantinsectset-ul-li-box site_box">
              <div class="plantinsectset-ul-li-text text-one">采集地区</div>
              <div v-if="errorShow" class="plantinsectset-ul-li-time time-one">{{ redata.city }}</div>
            </div>
          </li>

          <!-- 采集人 -->
          <li class="plantinsectset-ul-li">
            <img src="../../assets/imageOne/14.png" alt class="plantinsectset-ul-li-img" />
            <div class="plantinsectset-ul-li-box">
              <div class="plantinsectset-ul-li-text text-three">采集人</div>
              <div
                v-if="errorShow"
                class="plantinsectset-ul-li-time time-three"
              >{{redata.user_name}}</div>
            </div>
          </li>

          <!-- 生育期 -->
          <li class="plantinsectset-ul-li">
            <img src="../../assets/assets/1.png" alt class="plantinsectset-ul-li-img monthImgA" />
            <div class="plantinsectset-ul-li-box">
              <div class="plantinsectset-ul-li-text text-four">生育期</div>
              <div class="plantinsectset-ul-li-time time-four">{{redata.growth_stages}}</div>
            </div>
          </li>

          <!-- 统计分类 -->
          <li class="plantinsectset-ul-li">
            <img src="../../assets/assets/3.png" alt class="plantinsectset-ul-li-img monthImgA" />
            <div class="plantinsectset-ul-li-box">
              <div class="plantinsectset-ul-li-text text-six">统计分类</div>
              <div class="plantinsectset-ul-li-time time-six">{{this.plantType + redata.pest}}</div>
            </div>
          </li>

          <!-- 统计方法 -->
          <li class="plantinsectset-ul-li">
            <img src="../../assets/assets/2.png" alt class="plantinsectset-ul-li-img monthImgA" />
            <div class="plantinsectset-ul-li-box">
              <div class="plantinsectset-ul-li-text text-six">统计方法</div>
              <div
                v-if="errorShow"
                class="plantinsectset-ul-li-time time-six"
              >按{{redata.cens_method}}统计</div>
            </div>
          </li>

          <!-- 统计面积 -->
          <li class="plantinsectset-ul-li">
            <img src="../../assets/imageOne/36.png" alt class="plantinsectset-ul-li-img fangkuai" />
            <div class="plantinsectset-ul-li-box">
              <div class="plantinsectset-ul-li-text text-seven">统计面积</div>
              <div v-if="errorShow">
                <div class="plantinsectset-ul-li-time time-seven">{{redata.area}}</div>
              </div>
            </div>
          </li>

          <!-- 病害名称 -->
          <li class="plantinsectset-ul-li">
            <img src="../../assets/imageOne/17.png" alt class="plantinsectset-ul-li-img" />
            <div v-if="errorShow" class="plantinsectset-ul-li-box">
              <div class="plantinsectset-ul-li-text text-eight">病虫害名称</div>
              <div class="plantinsectset-ul-li-time time-eight">{{redata.pest_name}}</div>
            </div>
          </li>

          <!-- 病害级别 -->
          <!-- <li class="plantinsectset-ul-li li-one" v-if="errorShow"> -->
          <li class="plantinsectset-ul-li" v-if="errorShow">
            <img src="../../assets/imageOne/34.png" alt class="plantinsectset-ul-li-img fangkuai" />
            <el-collapse v-model="activeName" accordion>
              <el-collapse-item title="病虫害值" name="4">
                <div
                  class="insect-li-txt"
                  v-for="item in this.redata.pestname"
                  :key="item"
                >{{ item }}</div>
              </el-collapse-item>
            </el-collapse>
          </li>
        </ul>
      </div>
    </el-main>
  </div>
</template>

<script>
export default {
  name: "plantinsectset",
  inject: ["reload"], //注入reload方法
  data() {
    return {
      isShow: true, //默认设置
      plantType: "", //作物类型
      statistical_method: "", //统计面积单位
      fullHeight: document.documentElement.clientHeight,
      redata: [], //数据
      activeName: "1", //手风琴效果
      errorShow: false, //页面数据
      visible: false,
      imgList: [], //后端传来的图片
      bingzhi: [] //转换后的病值
    };
  },
  components: {
  },
  created() {
    let _this = this;
    if (
      localStorage.getItem("plantsetID") !== null &&
      localStorage.getItem("insectsetID") == null
    ) {
      //病害
      var user_id = localStorage.getItem("plantsetID");
    } else if (
      localStorage.getItem("insectsetID") !== null &&
      localStorage.getItem("plantsetID") == null
    ) {
      //虫害
      var user_id = localStorage.getItem("insectsetID");
    }
    let postData = _this.$qs.stringify({
      user_id: user_id,
      ret: "see"
    });
    _this
      .$axios({
        method: "post",
        url: "bigservers/seeuser",
        data: postData,
        headers: {
          "Content-Type": "application/x-www-form-urlencoded"
        }
      })
      .then(res => {
        _this.redata = res.data[0];
        _this.imgList = res.data[0].addr_photo;
        _this.errorShow = true;

        //判断当前是否为默认数据
        console.log(_this.redata.id);
        if (_this.redata.id == localStorage.getItem("defaultID")) {
          _this.isShow = false;
        } else {
          _this.isShow = true;
        }

        //判断当前是什么作物
        if (res.data[0].crop_sort == "1") {
          _this.plantType = "粮食作物";
        } else if (res.data[0].crop_sort == "2") {
          _this.plantType = "经济作物";
        } else if (res.data[0].crop_sort == "1") {
          _this.plantType = "林木";
        }
      })
      .catch(error => {
        alert("失败");
        console.log(error);
      });
  },
  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();
  },
  methods: {
    //动态获取浏览器高度
    get_boderHeight() {
      const that = this;
      window.onresize = () => {
        return (() => {
          window.fullHeight = document.documentElement.clientHeight;
          that.fullHeight = window.fullHeight;
        })();
      };
    },

    goBack() {
      let _this = this;
      if (localStorage.getItem("insectsetID") !== null) {
        //虫害
        // _this.$router.push("/insectset");
        _this.$router.replace("/insectset");
      } else if (localStorage.getItem("plantsetID")) {
        //病害
        // _this.$router.push("/plantset");
        _this.$router.replace("/plantset");
      }
    },

    //病害设置默认
    set() {
      let _this = this;
      if (
        localStorage.getItem("plantsetID") !== null &&
        localStorage.getItem("insectsetID") == null
      ) {
        //病害
        var user_id = localStorage.getItem("plantsetID");
      } else if (
        localStorage.getItem("insectsetID") !== null &&
        localStorage.getItem("plantsetID") == null
      ) {
        //虫害
        var user_id = localStorage.getItem("insectsetID");
      }
      let postData = _this.$qs.stringify({
        ret: "def",
        user_id: user_id
      });
      _this
        .$axios({
          method: "post",
          url: "bigservers/seeuser",
          data: postData,
          headers: {
            "Content-Type": "application/x-www-form-urlencoded"
          }
        })
        .then(res => {
          if (res.data.code == 200) {
            this.$message({
              type: "success",
              message: "设置默认成功!",
              duration: 1500
            });
            if (
              localStorage.getItem("plantsetID") !== null &&
              localStorage.getItem("insectsetID") == null
            ) {
              //病害
              // _this.$router.push("/plantset");
              _this.$router.replace("/plantset");
              localStorage.setItem("defaultType", "1");
            } else if (
              localStorage.getItem("insectsetID") !== null &&
              localStorage.getItem("plantsetID") == null
            ) {
              //虫害
              // _this.$router.push("/insectset");
              _this.$router.replace("/insectset");
              localStorage.setItem("defaultType", "2");
            }
            localStorage.setItem("defaultID", user_id); //设置默认数据ID
            localStorage.setItem("defaultHarmID", _this.redata.harm_id); //设置默认数据harm_id
          } else {
            this.$message({
              type: "error",
              message: "设置默认失败!",
              duration: 1500
            });
          }
        })
        .catch(error => {
          this.$message({
            type: "error",
            message: "设置默认失败!",
            duration: 1500
          });
        });
    },

    //病虫害取消默认
    del() {
      let _this = this;
      if (
        localStorage.getItem("plantsetID") !== null &&
        localStorage.getItem("insectsetID") == null
      ) {
        //病害
        var user_id = localStorage.getItem("plantsetID");
      } else if (
        localStorage.getItem("insectsetID") !== null &&
        localStorage.getItem("plantsetID") == null
      ) {
        //虫害
        var user_id = localStorage.getItem("insectsetID");
      }
      let postData = _this.$qs.stringify({
        ret: "del",
        user_id: user_id
      });

      _this
        .$axios({
          method: "post",
          url: "bigservers/seeuser",
          data: postData,
          headers: {
            "Content-Type": "application/x-www-form-urlencoded"
          }
        })
        .then(res => {
          if (res.data.code == 200) {
            this.$message({
              type: "success",
              message: "取消默认成功!"
            });
            if (
              localStorage.getItem("plantsetID") !== null &&
              localStorage.getItem("insectsetID") == null
            ) {
              //病害
              // _this.$router.push("/plantset");
              _this.$router.replace("/plantset");
              // localStorage.setItem("defaultType", "1");
              localStorage.removeItem("defaultType");
            } else if (
              localStorage.getItem("insectsetID") !== null &&
              localStorage.getItem("plantsetID") == null
            ) {
              //虫害
              // _this.$router.push("/insectset");
              _this.$router.replace("/insectset");
              // localStorage.setItem("defaultType", "2");
              localStorage.removeItem("defaultType");
            }
            localStorage.removeItem("defaultID"); //设置默认数据ID
            localStorage.removeItem("defaultHarmID"); //设置默认数据harm_id
          } else {
            this.$message({
              type: "error",
              message: "取消默认失败!"
            });
          }
        })
        .catch(error => {
          this.$message({
            type: "error",
            message: "取消默认失败!"
          });
        });
    }
  }
};
</script>

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