<template>
  <div class="particulars-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">
        <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 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="particulars-ul">
          <!-- 调查时间 -->
          <li class="particulars-ul-li">
            <img src="../../assets/imageOne/39.png" alt class="particulars-ul-li-img" />
            <div class="particulars-ul-li-box">
              <div class="particulars-ul-li-text">调查时间</div>
              <div v-if="errorShow" class="particulars-ul-li-time">{{redata.upl_time}}</div>
            </div>
          </li>

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

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

          <!-- 月份 -->
          <li class="particulars-ul-li site">
            <img src="../../assets/assets/5.png" alt class="particulars-ul-li-img monthImg" />
            <div class="particulars-ul-li-box site_box">
              <div class="particulars-ul-li-text textAA">月份</div>
              <div v-if="errorShow" class="particulars-ul-li-time time-one">{{ redata.month + '月份'}}</div>
            </div>
          </li>

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

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

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

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

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

          <!-- 病害级别 -->
          <!-- <li class="particulars-ul-li li-one" v-if="errorShow"> -->
          <li class="particulars-ul-li" v-if="errorShow">
            <img src="../../assets/imageOne/34.png" alt class="particulars-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: "particulars",
  inject: ["reload"], //注入reload方法
  data() {
    return {
      plantType: "", //作物类型
      statistical_method: "", //统计面积单位
      fullHeight: document.documentElement.clientHeight,
      redata: [], //数据
      activeName: "1", //手风琴效果
      errorShow: false, //页面数据
      visible: false,
      imgList: [], //后端传来的图片
      bingzhi: [] //转换后的病值
    };
  },
  components: {},
  created() {
    let _this = this;
    let postData = _this.$qs.stringify({
      user_id: localStorage.examineID,
      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;
        //判断是作物还是昆虫
        // if (res.data[0].statistical === "病害") {
        //   _this.isShow = true;
        // } else {
        //   _this.isShow = false;
        // }
        _this.errorShow = 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;
      // _this.$router.push("/examine");
      _this.$router.replace("/examine");
    },

    //删除数据
    del() {
      let _this = this;
      var a = localStorage.getItem("examineID");
      var b = new Array(a);
      b = JSON.stringify(b);
      let postData = _this.$qs.stringify({
        ret: "all_del",
        user_id: b
      });
      //判断是否跟默认数据ID一致
      if (localStorage.getItem("defaultID") == a) {
        this.$confirm("该条数据是默认数据, 是否继续删除?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        })
          .then(() => {
            _this
              .$axios({
                url: "bigservers/seeuser",
                method: "post",
                data: postData,
                headers: {
                  "Content-Type": "application/x-www-form-urlencoded"
                }
              })
              .then(res => {
                if (res.status == 200) {
                  if (res.data.code == 200) {
                    this.$message({
                      message: "删除成功",
                      type: "success",
                      duration: 1500
                    });
                    localStorage.removeItem("defaultID"); //删除默认ID
                    localStorage.removeItem("defaultType"); //删除默认类型
                    const timer = setInterval(() => {
                      // _this.$router.push("/examine");
                      _this.$router.replace("/examine");
                      location.reload();
                    }, 1000);
                  } else if (res.data.code == null) {
                    this.$message.error("删除错误，请重试");
                  }
                } else {
                  this.$message.error("请求失败，请查看网络");
                }
              })
              .catch(err => {
                console.log(err);
              });
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消删除"
            });
          });
      } else {
        _this
          .$axios({
            url: "bigservers/seeuser",
            method: "post",
            data: postData,
            headers: {
              "Content-Type": "application/x-www-form-urlencoded"
            }
          })
          .then(res => {
            if (res.status == 200) {
              if (res.data.code == 200) {
                this.$message({
                  message: "删除成功",
                  type: "success",
                  duration: 1500
                });
                const timer = setInterval(() => {
                  // _this.$router.push("/examine");
                  _this.$router.replace("/examine");
                  location.reload();
                }, 1000);
              } else if (res.data.code == null) {
                this.$message.error("删除错误，请重试");
              }
            } else {
              this.$message.error("请求失败，请查看网络");
            }
          })
          .catch(err => {
            console.log(err);
          });
      }
    }
  }
};
</script>

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