<!--  -->
<template>
  <div
    class="scroll"
    :style="'height:' + fullHeight + 'px'"
    v-loading="loading"
    element-loading-text="拼命加载中"
    element-loading-spinner="el-icon-loading"
    element-loading-background="rgba(0, 0, 0, 0.8)"
    :modal-append-to-body="false"
  >
    <mescroll-vue
      ref="mescroll"
      class="home_box_mescroll"
      :down="mescrollDown"
      :up="mescrollUp"
      @init="mescrollInit"
    >
      <div class="beijing_color">
        <!-- 标题 -->
        <div class="headr_text header">知虫</div>
        <!-- 标题 -->

        <!-- 自定义天气插件 -->
        <div class="weather_box" v-loading="loading" v-if="weatherShow">
          <!-- 图标 -->
          <img :src=" 'bigservers/' + this.tianqiData.code_url" class="weather_img" />

          <!-- 天气情况 -->
          <div class="weather_case">{{this.tianqiData.text}}</div>

          <div class="dizhiBox">
            <!-- 地区 -->
            <div class="weather_area">{{ this.tianqiData.city }}</div>

            <!-- 温度 -->
            <div class="weather_temp">{{ this.tianqiData.temperature }} °</div>
          </div>
        </div>
        <!-- 自定义天气插件 -->

        <!-- 消息提醒 -->
        <el-badge :value="this.messData" class="item" v-show="megShow">
          <img @click="message()" src="../../assets/image/xiaoxi.png" alt class="xiaoxi_img" />
        </el-badge>
        <!-- 消息提醒 -->

        <!-- 轮播 -->
        <div id="htmlWrap" style="background:none;">
          <!--header-->
          <div class="bg545C64" style="background:none;box-shadow:0 0 3px #e5e5e5;"></div>

          <!-- 轮播图 -->
          <div class="bannerWrap" style="width:100%;height: 5.5rem;">
            <!-- Swiper -->
            <div class="swiper-container">
              <div class="swiper-wrapper">
                <div class="swiper-slide" v-for="(item, index) in this.lunboImgList" :key="index">
                  <img :src="item" @click.stop="imgClikc(index)" class="bannerWrap_img" alt />
                </div>
              </div>
              <div class="swiper-pagination swiper-pagination-white" id="swiper-spit"></div>
            </div>
          </div>
          <div style="clear:both;"></div>
        </div>

        <!-- 轮播 -->

        <!-- 交流、识别、个人秀 -->
        <ul class="list_oneBox">
          <!-- 交流 -->
          <li class="list_oneBox_list" @click="issue()">
            <img src="../../assets/image/issue.png" alt class="list_oneBox_list_img" />
            <DIV class="questions">发交流</DIV>
            <DIV class="assistance">寻求农友帮助</DIV>
            <div class="segment"></div>
          </li>
          <!-- 交流 -->

          <!-- 识病虫 -->
          <li class="list_oneBox_list" @click="dialogVisible = true">
            <img src="../../assets/image/camera0.png" alt class="list_oneBox_list_img" />
            <div class="recognize">识病虫</div>
            <div class="capacity">AI一键智能识别</div>
            <div class="segment"></div>
          </li>
          <!-- 识病虫 -->

          <!-- 个人秀 -->
          <li class="list_oneBox_list" @click="fields()">
            <img src="../../assets/image/IMG.png" alt class="list_oneBox_list_img" />
            <div class="beautiful">个人秀</div>
            <div class="countryside">秀出你的农田</div>
          </li>
          <!-- 个人秀 -->
        </ul>
        <!-- 交流、识别、个人秀 -->

        <!-- 识别记录、知识库、搜索、收藏 -->
        <ul class="list_twoBox">
          <li class="list_twoBox_list" @click="memory()">
            <img src="../../assets/image/recording.png" alt class="list_twoBox_list_img" />
            <div class="recording">识别记录</div>
          </li>

          <li class="list_twoBox_list" @click="repository()">
            <img src="../../assets/image/knowledge.png" alt class="list_twoBox_list_img" />
            <div class="knowledge">知识库</div>
          </li>

          <li class="list_twoBox_list" @click="seek()">
            <img src="../../assets/image/search.png" alt class="list_twoBox_list_img" />
            <div class="search">搜索项</div>
          </li>

          <li class="list_twoBox_list" @click="collectAAA()">
            <img src="../../assets/image/favorite.png" alt class="list_twoBox_list_img" />
            <div class="favorite">收藏库</div>
          </li>
        </ul>
        <!-- 识别记录、知识库、搜索、收藏 -->
      </div>

      <!-- tab切换，交流，个人秀 -->
      <ul class="home_box_tabBox beijing_color" :class="navBarFixed == true ? 'navBarWrap' :''">
        <li
          class="home_box_tabBox_list"
          @click="titleA(index)"
          v-for="(item, index) in this.titleData"
          :key="index"
          :class="{activecc: index == ins}"
        >
          <div class="home_box_tabBox_list_title">{{ item }}</div>
        </li>
      </ul>

      <!-- 交流 -->

      <div class="dropdown_box" v-if="this.indexData == 0">
        <div class="dropdown_boxdropdown">
          <!-- 筛选框 A-->
          <!-- <el-dropdown trigger="click" @command="handleCommand">
            <span class="el-dropdown-link">
              {{this.jiaoliu =='' ? this.wendaDtat : this.jiaoliu}}
              <i
                class="el-icon-arrow-down el-icon--right"
              ></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item command="all">全部</el-dropdown-item>
              <el-dropdown-item command="plant">作物</el-dropdown-item>
              <el-dropdown-item command="insect">昆虫</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>-->
          <!-- 筛选框 A-->

          <!-- 筛选框 A-->
          <!-- <el-dropdown trigger="click" @command="handleCommandA">
            <span class="el-dropdown-link">
              {{this.jiaoliu2 =='' ? this.wendaDtatA : this.jiaoliu2}}
              <i
                class="el-icon-arrow-down el-icon--right"
              ></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item command="b">我发起的</el-dropdown-item>
              <el-dropdown-item command="c">我收藏的</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>-->
          <!-- 筛选框 A-->

          <!-- 测试滑块 -->
          <div class="about">
            <div class="idd">
              <ul class="huakuaiUl">
                <!-- <li
                  class="huakuaiLi"
                  :class="{'active':indexTap == index}"
                  v-for="(item,index) in lists"
                  :key="index"
                  @click="indexTap = index"
                >{{item}}</li>-->
                <li
                  class="huakuaiLi"
                  :class="{'active':indexTap == index}"
                  v-for="(item,index) in lists"
                  :key="index"
                  @click="indexTap = index, handleCommand(item)"
                >{{item}}</li>
              </ul>
              <!-- <div class="showBox animated bounceInDown" v-if="indexTap == 2">范德萨范德萨</div> -->
            </div>
          </div>
          <!-- 测试滑块 -->
        </div>

        <!-- 交流数据 -->
        <ul class="home_question_ulBox" v-if="jiaoliuShow">
          <li
            class="home_question_li"
            @click="details($event, item.id)"
            v-for="(item, index) in this.WenDaRedata"
            :key="index"
          >
            <div class="home_question_imageBox">
              <div class="home_question_ulBox_image-box">
                <img v-lazy=" 'bigservers/' + item.img[0]" alt class="home_question_ulBox_image" />
              </div>

              <!-- 类型标识和描述 -->
              <div class="home_question_TAGBox">
                <span class="home_question_TAG">{{ item.ret == 'plant' ? '病害' : '虫害' }}</span>
                <span class="home_question_TAGText">{{ item.problem | ellipsis }}</span>
              </div>
            </div>

            <!-- 用户头像和用户名 -->
            <div class="home_question_NameBox">
              <div class="home_question_NameBox_box">
                <img v-lazy=" 'bigservers/' + item.photo" alt class="home_question_NameBox_image" />
                <div
                  class="home_question_NameBox_text"
                >{{ item.user_remark === '' || item.user_remark === null ? item.username : item.user_remark | ellipsisC }}</div>
              </div>
              <div class="home_question_NameBox_time">{{ item.time }}</div>
            </div>

            <!-- 查看、收藏、回复 -->
            <ul class="home_question_All_box">
              <li class="home_question_All_look">
                <img src="../../assets/image/chakan.png" alt class="home_question_All_look_img" />
                <span class="home_question_All_look_num">{{ item.visit_num }}</span>
              </li>

              <li class="home_question_All_collect">
                <img
                  @click="collect($event, item.id, index)"
                  v-if="item.stroe === '0'"
                  src="../../assets/image/shoucang.png"
                  alt
                  class="home_question_All_collect_img"
                />
                <img
                  @click="collectA($event, item.id, index)"
                  v-else
                  src="../../assets/image/starA.png"
                  alt
                  class="home_question_All_collect_img"
                />
                <span class="home_question_All_collect_num">{{ item.collect_num }}</span>
              </li>

              <li class="home_question_All_collect_reply">
                <img
                  src="../../assets/image/xinxi.png"
                  alt
                  class="home_question_All_collect_reply_img"
                />
                <span class="home_question_All_collect_reply_num">{{ item.reply_num }}</span>
              </li>
            </ul>
          </li>
        </ul>

        <!-- 暂无 -->
        <div class="home-zanwuBox" v-else>
          <img src="../../../static/zanwu.png" alt class="home-zanwuBox-img" />
          <div class="home-zanwuBox-txt">暂无数据</div>
        </div>
      </div>
      <!-- 交流 -->

      <!-- 个人秀 -->
      <div v-else-if="this.indexData == 1" class="container-water-fall">
        <waterfall
          :col="col"
          :width="itemWidth"
          :gutterWidth="gutterWidth"
          :data="fieldShowData"
          @loadmore="loadmore"
          @scroll="scroll"
          isTransition
        >
          <template v-if="gerenShow">
            <div
              @click="fieldDetails($event, item.id)"
              class="cell-item"
              v-for="(item,index) in fieldShowData"
            >
              <img
                :lazy-src="item.img"
                class="fieldShow_image"
                v-if="item.img"
                :src=" 'bigservers/' + item.img[0]"
                alt="加载错误"
              />
              <div class="item-body">
                <div class="item-desc">{{item.problem | ellipsisB}}</div>
                <div class="item-footer">
                  <img class="avatar" :src=" 'bigservers/' + item.photo" />
                  <div
                    class="name"
                  >{{item.user_remark === '' || item.user_remark === null ? item.username : item.user_remark}}</div>
                </div>

                <div class="fieldShow_tubiaoBox">
                  <!-- 查看 -->
                  <div class="fieldShow_tubiaoBox_chakan">
                    <img
                      src="../../assets/image/chakan.png"
                      alt
                      class="fieldShow_tubiaoBox_chakan_img"
                    />
                    <div class="fieldShow_tubiaoBox_chakan_num">{{ item.visit_num }}</div>
                  </div>

                  <!-- 点赞 -->
                  <div class="fieldShow_tdianBox_dianzan">
                    <img
                      @click="like(item.id, index)"
                      v-if="item.like === '0'"
                      src="../../assets/image/give.png"
                      alt
                      class="fieldShow_tdianBox_dianzan_img"
                    />
                    <img
                      v-else
                      @click="noLike(item.id, index)"
                      src="../../assets/image/giveA.png"
                      alt
                      class="fieldShow_tdianBox_dianzan_img"
                    />
                    <div class="fieldShow_tdianBox_dianzan_num">{{ item.like_num }}</div>
                  </div>
                </div>
              </div>
            </div>
          </template>

          <!-- 暂无 -->
          <div class="home-zanwuBox" v-else>
            <img src="../../../static/zanwu.png" alt class="home-zanwuBox-img" />
            <div class="home-zanwuBox-txt">暂无数据</div>
          </div>
        </waterfall>
      </div>
      <!-- 个人秀 -->

      <!-- 手动录入 -->
      <div v-else class>
        <!-- <el-dropdown class="right_box" trigger="click" @command="handleCommandC">
          <span class="el-dropdown-link">
            {{this.shoudong === '' ? this.luruDtat : this.shoudong}}
            <i
              class="el-icon-arrow-down el-icon--right"
            ></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item command="all">全部</el-dropdown-item>
            <el-dropdown-item command="plant">作物</el-dropdown-item>
            <el-dropdown-item command="insect">昆虫</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>-->
        <!-- 筛选框 -->

        <!-- 测试滑块 -->
        <div class="about">
          <div class="idd">
            <ul class="huakuaiUl">
              <!-- <li
                  class="huakuaiLi"
                  :class="{'active':indexTap == index}"
                  v-for="(item,index) in lists"
                  :key="index"
                  @click="indexTap = index"
              >{{item}}</li>-->
              <li
                class="huakuaiLi"
                :class="{'active':indexTapA == index}"
                v-for="(item,index) in listsA"
                :key="index"
                @click="indexTapA = index, handleCommandC(item)"
              >{{item}}</li>
            </ul>
            <!-- <div class="showBox animated bounceInDown" v-if="indexTap == 2">范德萨范德萨</div> -->
          </div>
        </div>
        <!-- 测试滑块 -->

        <!-- 数据列表 -->
        <ul class="manualEntering_ul" v-if="zanwuShow">
          <li
            class="manualEntering_li"
            @click="manualEntering(item.id)"
            v-for="(item, index) in this.see_disease"
            :key="index"
          >
            <div class="manualEntering_li_box">
              <!-- 图片 -->
              <img v-lazy=" 'bigservers/' + item.img[0]" alt class="manualEntering_li_box_img" />
              <!-- 图片 -->

              <!-- 科目和名称 -->
              <div class="manualEntering_li_box_course">
                <!-- 科目 -->
                <div class="manualEntering_li_box_courseText">{{ item.sort |ellipsisA }}</div>
                <!-- 科目 -->

                <!-- 名称 -->
                <div class="manualEntering_li_box_courseNameText">{{ item.name | ellipsisA }}</div>

                <!-- 名称 -->
              </div>
              <!-- 科目和名称 -->

              <!-- 时间 -->
              <div class="manualEntering_li_box_time">{{ item.time }}</div>
              <!-- 时间 -->
            </div>
          </li>
        </ul>

        <!-- 暂无 -->
        <div class="home-zanwuBox" v-else>
          <img src="../../../static/zanwu.png" alt class="home-zanwuBox-img" />
          <div class="home-zanwuBox-txt">暂无数据</div>
        </div>
      </div>

      <!-- 手动录入 -->

      <!-- tab切换，交流，个人秀 -->

      <!-- 点击相机图标弹出选择昆虫或病害窗口 -->
      <el-dialog :modal-append-to-body="false" title="提示" :visible.sync="dialogVisible" width="60%">
        <span>请选择识别类型</span>
        <span slot="footer" class="dialog-footer">
          <!-- 选择昆虫 -->
          <div class="home_box_div">
            <!-- 测试 -->
            <el-button @click="dialogVisible = false, upload()" class="kunchongBtn">昆 虫</el-button>
            <img v-show="sHow" src="../../assets/upload.png" alt id="img" />
            <input
              class="hiddenInputA"
              ref="file"
              type="file"
              accept="image/*"
              @change="uploadChange"
            />
          </div>

          <!-- 选择病害 -->
          <div class="home_box_div">
            <!-- 测试 -->
            <el-button @click="dialogVisible = false, uploadA()" class="binghaiBtn">病 害</el-button>
            <img v-show="sHow" src="../../assets/upload.png" alt id="img" />
            <input
              class="hiddenInputA"
              ref="file"
              type="file"
              accept="image/*"
              @change="uploadChange"
            />
          </div>
        </span>
      </el-dialog>

      <!-- loading -->
      <div v-if="loadingShow" class="loading_box" :style="'height:' + fullHeight + 'px'">
        <div class="loading_box_del" @click="loadingDel()">X</div>

        <div class="loading_box_div">
          <img src="../../../static/dongh.gif" alt class="loading_gif" />
          <div class="loading_text">识别中，请稍等...</div>
        </div>
      </div>
    </mescroll-vue>

    <!-- 上传图片 -->
    <div class="v-simple-cropper">
      <slot></slot>
      <div class="v-cropper-layer" ref="layer">
        <div class="layer-header">
          <button class="cancel" @click="cancelHandle">取消</button>
          <button class="confirm" @click="confirmHandle">裁剪</button>
        </div>
        <img ref="cropperImg" />
      </div>
    </div>

    <!-- 底部导航 -->
    <bottomNav v-show="botNav"></bottomNav>
    <!-- 底部导航 -->
  </div>
</template>

<script>
import bottomNav from "../bottomNav/bottomNav"; //底部导航栏
// 引入mescroll的vue组件
import MescrollVue from "mescroll.js/mescroll.vue";

import Swiper from "swiper";
import "swiper/css/swiper.min.css";
import "swiper/js/swiper.min.js";

import Cropper from "cropperjs";
import "cropperjs/dist/cropper.min.css";

// 按需引入点聚合
// 引入marker
const carList = [{}];
export default {
  props: {
    initParam: Object,
    successCallback: {
      type: Function,
      default: () => {}
    }
  },

  //限时数据文本的字数限时
  filters: {
    ellipsis(value) {
      if (!value) return "";
      if (value.length > 10) {
        return value.slice(0, 10) + "...";
      }
      return value;
    },

    ellipsisA(value) {
      if (!value) return "";
      if (value.length > 5) {
        return value.slice(0, 5) + "...";
      }
      return value;
    },

    ellipsisB(value) {
      if (!value) return "";
      if (value.length > 8) {
        return value.slice(0, 8) + "...";
      }
      return value;
    },

    ellipsisC(value) {
      if (!value) return "";
      if (value.length > 3) {
        return value.slice(0, 3) + "...";
      }
      return value;
    }
  },
  // name: "Bmaptrace",
  name: "home",
  components: {
    bottomNav,
    MescrollVue // 注册mescroll组件
  },
  data() {
    //这里存放数据
    const self = this;
    return {
      option: {
        img: "",
        outputSize: 1, //剪切后的图片质量（0.1-1）
        full: false, //输出原图比例截图 props名full
        outputType: "png",
        canMove: true,
        original: false,
        canMoveBox: true,
        autoCrop: true,
        autoCropWidth: 132,
        autoCropHeight: 132,
        fixedBox: true,
        fixedNumber: [1, 1]
      },

      isClick: true, //点赞开关
      gerenShow: true, //个人秀暂无判断
      jiaoliuShow: true, //交流暂无判断
      zanwuShow: true, //手动录入暂无判断
      jiaoliu: "", //交流筛选
      jiaoliu2: "", //交流筛选2
      shoudong: "", //手动录入筛选
      menuTree: [],
      loading: true, //页面加载
      wendaDtat: localStorage.getItem("commandLeiWen"), //昆虫或作物
      wendaDtatA: localStorage.getItem("commandWen"), //交流
      luruDtat: localStorage.getItem("commandLuru"), //交流
      ins: localStorage.getItem("homeIndex"), //active
      titleData: ["交流", "个人秀", "手动录入"],
      see_disease: [], //手动录入数据
      indexData: localStorage.getItem("homeIndex"), //下标
      lunboImgList: [
        "bigservers/discern_photos/rotation/1.png",
        "bigservers/discern_photos/rotation/2.png",
        "bigservers/discern_photos/rotation/3.png"
      ], //轮播图
      mapShow: false, //地图
      botNav: true, //底部导航
      activeName: "second", //tab切换
      youkeName: sessionStorage.getItem("login"), //游客name
      isShow: true, // 判断账号详情是否有数据或是账号类型是否为游客登录
      fullHeight: document.documentElement.clientHeight,
      direction: "ltr", //抽屉弹框方向
      result: "", //用户点击选中的图片
      loadingShow: false, //请求等待动画
      loading: true, //天气插件加载
      tianqiData: "", //天气数据
      sHow: false, //预览对象
      dengLV: true, //判断账号类型是游客还是用户；如果是游客那就将更多和搜索框隐藏
      numData: "", //游客账号的识别体验次数
      aaa: "1111",
      megShow: true, //往下滚动时将消息提醒隐藏
      //交流数据
      WenDaRedata: [],
      //交流数据
      collectShow: true,
      //个人秀
      fieldShowData: [],
      col: 2,
      fieldShowShow: "", //点赞
      navBarFixed: false, //吸顶效果
      weatherShow: true, //天气插件显示
      messData: "", //提示消息
      //上拉加载下拉刷新mescroll组件
      mescroll: null, // mescroll实例对象
      mescrollDown: {}, //下拉刷新的配置. (如果下拉刷新和上拉加载处理的逻辑是一样的,则mescrollDown可不用写了)
      mescrollUp: {
        // 上拉加载的配置.
        callback: this.upCallback, // 上拉回调,此处简写; 相当于 callback: function(page, mescroll) { }
        //以下是一些常用的配置,当然不写也可以的.
        page: {
          num: 0, //当前页 默认0,回调之前会加1; 即callback(page)会从1开始
          size: 6 //每页数据条数,默认10
        },
        isBounce: true, //根据记录的滚动条高度回弹
        htmlNodata: '<p class="upwarp-nodata">-- 已经到底了! --</p>',
        noMoreSize: 6, //如果列表已无数据,可设置列表的总数量要大于5才显示无更多数据;
        // 避免列表数据过少(比如只有一条数据),显示无更多数据会不好看
        // 这就是为什么无更多数据有时候不显示的原因
        toTop: {
          //回到顶部按钮
          src:
            "http://pic.51yuansu.com/pic3/cover/00/65/23/5896fa4bc81fc_610.jpg", //图片路径,默认null,支持网络图
          offset: 500 //列表滚动1000px才显示回到顶部按钮
        },
        onScroll: function(mescroll, y, isUp) {
          //吸顶
          // if (y > 500) {
          //   self.navBarFixed = true;
          // } else {
          //   self.navBarFixed = false;
          // }
        },
        lazyLoad: {
          use: true // 是否开启懒加载,默认false
        }
      },
      aggregate: "", //后端传来数据的总条数
      //上传
      cropper: null,
      filename: "",
      dialogVisible: false, //选择昆虫还是病害识别
      sHow: false, //预览对象
      fileA: "", //上传图片

      //交流测试滑块
      indexTap: localStorage.getItem("commandLeiWen"),
      lists: ["全部", "作物", "昆虫", "我发起的", "我收藏的"],

      //手录测试滑块
      indexTapA: localStorage.getItem("commandLeiWen"),
      listsA: ["全部", "作物", "昆虫"]
    };
  },
  beforeRouteEnter(to, from, next) {
    // 如果没有配置顶部按钮或isBounce,则beforeRouteEnter不用写
    next(vm => {
      // 滚动到原来的列表位置,恢复顶部按钮和isBounce的配置
      vm.$refs.mescroll && vm.$refs.mescroll.beforeRouteEnter();
    });
  },
  beforeRouteLeave(to, from, next) {
    // 如果没有配置顶部按钮或isBounce,则beforeRouteLeave不用写
    // 记录列表滚动的位置,隐藏顶部按钮和isBounce的配置
    this.$refs.mescroll && this.$refs.mescroll.beforeRouteLeave();
    next();
  },

  //监听属性 类似于data概念
  computed: {
    itemWidth() {
      //   return 138 * 0.5 * (document.documentElement.clientWidth / 375);
      return 350 * 0.5 * (document.documentElement.clientWidth / 375);
    },
    gutterWidth() {
      return 20 * 0.5 * (document.documentElement.clientWidth / 375);
    }
  },
  //监控data中的数据变化
  watch: {
    fullHeight(val) {
      //监控浏览器高度变化
      if (!this.timer) {
        this.fullHeight = val;
        this.timer = true;
        let that = this;
        setTimeout(function() {
          //防止过度调用监测事件，导致卡顿
          that.timer = false;
        }, 400);
      }
    },

    botNav(val) {},

    ins(val) {},

    menuTree() {
      this.reFresh = false;
      this.$nextTick(() => {
        this.reFresh = true;
      });
    }
  },
  //方法集合
  methods: {
    // 初始化裁剪插件
    init() {
      let cropperImg = this.$refs["cropperImg"];
      this.cropper = new Cropper(cropperImg, {
        viewMode: 1,
        dragMode: "none",
        initialAspectRatio: 1,
        aspectRatio: 1,
        preview: ".before",
        background: false,
        autoCropArea: 0.6,
        zoomOnWheel: false
      });
    },
    // 点击上传按钮-昆虫
    upload() {
      var _this = this;
      localStorage.setItem("insect", "昆虫"); //添加一个昆虫标识在本地
      localStorage.removeItem("plant"); //删除病害标识
      //删除测试
      localStorage.removeItem("ba64dataA");
      localStorage.removeItem("axiosData"); //清除本地中的昆虫病害数据
      localStorage.removeItem("ba64data"); //清除本地中用户选择的图片
      localStorage.removeItem("memoryID");
      localStorage.removeItem("memoryDistinction");
      localStorage.removeItem("collectID");
      localStorage.removeItem("collectDistinction");
      localStorage.removeItem("seek_dataID");
      localStorage.removeItem("Point");
      this.$refs["file"].click();
    },

    // 点击上传按钮-病害
    uploadA() {
      var _this = this;
      localStorage.setItem("plant", "病害"); // 添加一个病害标识在本地
      localStorage.removeItem("insect"); //删除昆虫标识
      //删除测试
      localStorage.removeItem("ba64dataA");
      localStorage.removeItem("axiosData"); //清除本地中的昆虫病害数据
      localStorage.removeItem("ba64data"); //清除本地中用户选择的图片
      localStorage.removeItem("memoryID");
      localStorage.removeItem("memoryDistinction");
      localStorage.removeItem("collectID");
      localStorage.removeItem("collectDistinction");
      localStorage.removeItem("seek_dataID");
      localStorage.removeItem("Point");
      this.$refs["file"].click();
    },
    // 选择上传文件
    uploadChange(e) {
      let file = e.target.files[0];
      this.fileA = file; //传递给data中
      this.filename = file["name"];
      let URL = window.URL || window.webkitURL;
      this.$refs["layer"].style.display = "block";
      this.cropper.replace(URL.createObjectURL(file));
    },
    // 取消上传
    cancelHandle() {
      this.cropper.reset();
      this.$refs["layer"].style.display = "none";
      this.$refs["file"].value = "";
    },
    //上传
    confirmHandle() {
      let _this = this;
      _this.base();
      //获取图片的ba64编码
      this.cropper.reset();
      this.$refs["layer"].style.display = "none";
      this.loadingShow = true;
      // console.log(_this.fileA);
      // 判断用户选择的病害还是昆虫;
      // if (localStorage.getItem("insect") !== null) {
      //   //虫害
      //   let form = new FormData();
      //   form.append("imageFile", _this.fileA);
      //   form.append("imageType", "1");
      //   form.append("uniqueKey", "84e6eb40f3a616dd14b1fefc75425006");
      //   form.append("username", "yunfei");
      //   form.append("gis", "118.279643#31.221456");
      //   this.$axios({
      //     method: "post",
      //     url: "academysciences/recognizationSys/api/recognization",
      //     anync: true,
      //     data: form,
      //     headers: {
      //       "Content-Type": "multipart/form-data"
      //     }
      //   })
      //     .then(res => {
      //       self.botNav = true; //隐藏底部导航
      //       if (
      //         res.data.msg === "识别失败_！" ||
      //         res.data.msg === "" ||
      //         res.data.data === null
      //       ) {
      //         this.$message({
      //           type: "error",
      //           message: "识别失败!"
      //         });

      //         this.$router.push({
      //           name: "show",
      //           params: { data: form.get("imageFile") }
      //         });
      //         localStorage.setItem("recordID", "1");
      //         this.loadingShow = false;
      //       } else {
      //         this.$notify({
      //           title: "成功",
      //           message: "识别成功",
      //           type: "success"
      //         });
      //         localStorage.setItem(
      //           "axiosData",
      //           JSON.stringify(res.data.data[0])
      //         );
      //         this.$router.push({
      //           name: "show",
      //           params: { data: form.get("imageFile") }
      //         });
      //         localStorage.setItem("recordID", "1");
      //         console.log(form.get("imageFile"));
      //       }
      //       this.$router.push({
      //         name: "show",
      //         params: { data: form.get("imageFile") }
      //       });
      //       localStorage.setItem("recordID", "1");
      //       this.loadingShow = false;
      //       this.$refs["file"].value = "";
      //     })
      //     .catch(error => {
      //       // window.clearInterval(timer);  //销毁计时器
      //       this.$message({
      //         type: "error",
      //         message: "识别失败!"
      //       });
      //       this.$router.push({
      //         name: "show",
      //         params: { data: form.get("imageFile") }
      //       });
      //       localStorage.setItem("recordID", "1");
      //       this.loadingShow = false;
      //       this.$refs["file"].value = "";
      //     });
      // } else if (localStorage.getItem("plant") !== null) {
      //   //病害
      //   let form = new FormData();
      //   form.append("imageFile", _this.fileA);
      //   form.append("imageType", "2");
      //   form.append("uniqueKey", "84e6eb40f3a616dd14b1fefc75425006");
      //   form.append("username", "yunfei");
      //   form.append("gis", "118.279643#31.221456");
      //   this.$axios({
      //     method: "post",
      //     url: "academysciences/recognizationSys/api/recognization",
      //     anync: true,
      //     data: form,
      //     headers: {
      //       "Content-Type": "multipart/form-data"
      //     }
      //   })
      //     .then(res => {
      //       _this.botNav = true; //隐藏底部导航
      //       if (
      //         res.data.msg === "识别失败_! " ||
      //         res.data.msg === "" ||
      //         res.data.data === null
      //       ) {
      //         this.$message({
      //           type: "error",
      //           message: "识别失败!"
      //         });
      //         _this.botNav = true; //隐藏底部导航

      //         this.$router.push({
      //           name: "show",
      //           params: { data: form.get("imageFile") }
      //         });
      //         localStorage.setItem("recordID", "1");
      //       } else {
      //         this.$notify({
      //           title: "成功",
      //           message: "识别成功",
      //           type: "success"
      //         });
      //         localStorage.setItem(
      //           "axiosData",
      //           JSON.stringify(res.data.data[0])
      //         );
      //       }
      //       this.$router.push({
      //         name: "show",
      //         params: { data: form.get("imageFile") }
      //       });
      //       localStorage.setItem("recordID", "1");
      //       this.loadingShow = false;
      //       this.$refs["file"].value = "";
      //     })
      //     .catch(error => {
      //       this.$message({
      //         type: "error",
      //         message: "识别失败aaaaaaa!"
      //       });
      //       this.$router.push({
      //         name: "show",
      //         params: { data: form.get("imageFile") }
      //       });
      //       localStorage.setItem("recordID", "1");
      //       this.loadingShow = false;
      //       this.$refs["file"].value = "";
      //     });
      // }
    },

    base() {
      var _this = this;
      var files = _this.fileA;
      if (files) {
        var file = files;
        var reader = new FileReader();
        reader.readAsDataURL(file);
        reader.onload = function() {
          img.src = this.result;
        };
        var img = new Image(),
          width = 1024, //image resize   压缩后的宽
          quality = 0.8, //image quality  压缩质量
          canvas = document.createElement("canvas"),
          drawer = canvas.getContext("2d");
        img.onload = function(e) {
          console.log(e)
          canvas.width = width;
          canvas.height = width * (img.height / img.width);
          drawer.drawImage(img, 0, 0, canvas.width, canvas.height);
          var base64 = canvas.toDataURL("image/jpeg", quality); // 这里就拿到了压缩后的base64图片
          localStorage.setItem("ba64dataA", base64);
        };
      }
    },

    // mescroll组件初始化的回调,可获取到mescroll对象
    mescrollInit(mescroll) {
      this.mescroll = mescroll; // 如果this.mescroll对象没有使用到,则mescrollInit可以不用配置
    },

    // 上拉回调 page = {num:1, size:10}; num:当前页 ,默认从1开始; size:每页数据条数,默认10
    upCallback(page, mescroll) {
      let _this = this;
      let index = localStorage.getItem("homeIndex");
      if (index == 0) {
        //请求交流数据
        this.$axios({
          method: "get",
          url: "bigservers/user_answer",
          params: {
            page: this.mescrollUp.page.num,
            ret: localStorage.getItem("commandLeiWenA")
          }
        })
          .then(res => {
            //判断data中的变量是否为空 ，为空的话存后端发来的总条数
            if (this.aggregate === "") {
              //存变量
              this.aggregate = res.data.num;
              var b = "6";
              this.aggregate = this.aggregate / b;
              this.aggregate = Math.ceil(this.aggregate); //将小数点转换为整数
              console.log(this.aggregate);
            }
            // console.log(this.aggregate);
            // console.log(this.mescrollUp.page.num);

            //删除了默认的每页条数后判断数是否大于页码
            if (this.mescrollUp.page.num <= this.aggregate) {
              this.$axios({
                method: "get",
                url: "bigservers/user_answer",
                params: {
                  page: this.mescrollUp.page.num,
                  ret: localStorage.getItem("commandLeiWenA")
                }
              })
                .then(res => {
                  // this.jiaoliuShow = true;
                  let arr = res.data.dat;
                  // 如果是第一页需手动置空列表
                  if (page.num === 1) this.WenDaRedata = [];
                  // 把请求到的数据添加到列表
                  this.WenDaRedata = this.WenDaRedata.concat(arr);

                  // 数据渲染成功后,隐藏下拉刷新的状态
                  this.$nextTick(() => {
                    mescroll.endSuccess(arr.length);
                  });
                })
                .catch(error => {
                  mescroll.endErr();
                });
            } else if (this.mescrollUp.page.num > this.aggregate) {
              if (res.data.num === 0) {
                this.jiaoliuShow = false;
              }
              // 数据渲染成功后,隐藏下拉刷新的状态
              this.$nextTick(() => {
                mescroll.endSuccess(this.aggregate);
              });
            }
          })
          .catch(error => {
            mescroll.endErr();
          });
      } else if (index == 1) {
        //请求个人秀数据
        this.$axios({
          method: "get",
          url: "bigservers/user_farm_show",
          params: {
            page: this.mescrollUp.page.num
          }
        })
          .then(res => {
            //判断data中的变量是否为空 ，为空的话存后端发来的总条数
            if (this.aggregate === "") {
              //存变量
              this.aggregate = res.data.num;
              var b = "6";
              this.aggregate = this.aggregate / b;
              this.aggregate = Math.ceil(this.aggregate); //将小数点转换为整数
            }

            //删除了默认的每页条数后判断数是否大于页码
            if (this.mescrollUp.page.num <= this.aggregate) {
              this.$axios({
                method: "get",
                url: "bigservers/user_farm_show",
                params: {
                  page: this.mescrollUp.page.num
                }
              })
                .then(res => {
                  this.gerenShow = true;
                  let arr = res.data.dat;
                  // 如果是第一页需手动置空列表
                  if (page.num === 1) this.fieldShowData = [];
                  // 把请求到的数据添加到列表
                  this.fieldShowData = this.fieldShowData.concat(arr);
                  // 数据渲染成功后,隐藏下拉刷新的状态
                  this.$nextTick(() => {
                    mescroll.endSuccess(arr.length);
                  });
                })
                .catch(error => {
                  mescroll.endErr();
                });
            } else if (this.mescrollUp.page.num > this.aggregate) {
              if (res.data.num === 0) {
                this.gerenShow = false;
              }
              // 数据渲染成功后,隐藏下拉刷新的状态
              this.$nextTick(() => {
                mescroll.endSuccess(this.aggregate);
              });
            }
          })
          .catch(error => {
            mescroll.endErr();
          });
      } else if (index == 2) {
        //判断ret是否为空
        let commandIndex = localStorage.getItem("commandIndex");
        if (localStorage.getItem("commandIndex") !== null) {
          var retA = commandIndex;
        } else if (localStorage.getItem("commandIndex") == null) {
          var retA = "all";
        }
        //请求手动录入数据
        this.$axios({
          method: "get",
          url: "bigservers/see_disease",
          params: {
            page: this.mescrollUp.page.num,
            ret: retA
            // ret: "all"
          }
        })
          .then(res => {
            //判断data中的变量是否为空 ，为空的话存后端发来的总条数
            if (this.aggregate === "") {
              //存变量
              this.aggregate = res.data.num;
              var b = "6";
              this.aggregate = this.aggregate / b;
              this.aggregate = Math.ceil(this.aggregate); //将小数点转换为整数
            }
            this.zanwuShow = true;
            let arr = res.data.dat;
            // 如果是第一页需手动置空列表
            if (page.num === 1) this.see_disease = [];
            // 把请求到的数据添加到列表
            this.see_disease = this.see_disease.concat(arr);
            // 数据渲染成功后,隐藏下拉刷新的状态
            this.$nextTick(() => {
              mescroll.endSuccess(arr.length);
            });

            //删除了默认的每页条数后判断数是否大于页码
            if (this.mescrollUp.page.num <= this.aggregate) {
              this.$axios({
                method: "get",
                url: "bigservers/see_disease",
                params: {
                  page: this.mescrollUp.page.num,
                  ret: retA
                }
              })
                .then(res => {
                  this.zanwuShow = true;
                  let arr = res.data.dat;
                  // 如果是第一页需手动置空列表
                  if (page.num === 1) this.see_disease = [];
                  // 把请求到的数据添加到列表
                  this.see_disease = this.see_disease.concat(arr);
                  // 数据渲染成功后,隐藏下拉刷新的状态
                  this.$nextTick(() => {
                    mescroll.endSuccess(arr.length);
                  });
                })
                .catch(error => {
                  mescroll.endErr();
                });
            } else if (this.mescrollUp.page.num > this.aggregate) {
              if (res.data.num === 0) {
                this.zanwuShow = false;
              }
              // 数据渲染成功后,隐藏下拉刷新的状态
              this.$nextTick(() => {
                mescroll.endSuccess(this.aggregate);
              });
            }
          })
          .catch(error => {
            mescroll.endErr();
          });
      }

      this.messAjax(); //请求消息提醒总数
    },

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

    // 点击搜索图标
    seek() {
      let _this = this;
      //判断账号类型是用户还是游客
      if (localStorage.getItem("ret") === "user") {
        _this.$router.push("/seek");
        localStorage.setItem("homeSeek", "1");
        //删除本地存储
        localStorage.removeItem("seekBiaishi");
        localStorage.removeItem("memoryID");
        localStorage.removeItem("memoryDistinction");
        localStorage.removeItem("collectID");
        localStorage.removeItem("collectDistinction");
        localStorage.removeItem("showID");
        localStorage.removeItem("Point");
        localStorage.removeItem("axiosData");
      } else if (localStorage.getItem("ret") === "tourist") {
        this.$notify({
          title: "警告",
          message: "游客暂时不能使用该功能，抱歉",
          type: "warning",
          duration: 1000
        });
      }
      // _this.$router.push("/seek");
    },

    //点击进入知识库页面
    repository() {
      let _this = this;
      //判断账号类型是用户还是游客
      if (localStorage.getItem("ret") === "user") {
        _this.$router.push("/repository");
      } else if (localStorage.getItem("ret") === "tourist") {
        this.$notify({
          title: "警告",
          message: "游客暂时不能使用该功能，抱歉",
          type: "warning",
          duration: 1000
        });
      }
    },

    //点击我的收藏跳转
    collectAAA() {
      let _this = this;
      //判断账号类型是用户还是游客
      if (localStorage.getItem("ret") === "user") {
        _this.$router.push("/collect");
        location.reload();
        //删除本地存储
        localStorage.removeItem("memoryID");
        localStorage.removeItem("memoryDistinction");
        localStorage.removeItem("seek_dataID");
        localStorage.removeItem("showID");
        localStorage.removeItem("Point");
        localStorage.removeItem("axiosData");
      } else if (localStorage.getItem("ret") === "tourist") {
        this.$notify({
          title: "警告",
          message: "游客暂时不能使用该功能，抱歉",
          type: "warning",
          duration: 1000
        });
      }
    },

    //点击识别记录跳转
    memory() {
      let _this = this;
      //判断账号类型是用户还是游客
      if (localStorage.getItem("ret") === "user") {
        _this.$router.push("/memory");
        location.reload();
        //删除本地存储数据
        localStorage.removeItem("collectID");
        localStorage.removeItem("collectDistinction");
        localStorage.removeItem("seek_dataID");
        localStorage.removeItem("showID");
        localStorage.removeItem("Point");
        localStorage.removeItem("axiosData");
      } else if (localStorage.getItem("ret") === "tourist") {
        this.$notify({
          title: "警告",
          message: "游客暂时不能使用该功能，抱歉",
          type: "warning",
          duration: 1000
        });
      }
      // _this.$router.push("/memory");
    },

    //点击编辑跳转
    compile() {
      let _this = this;
      //判断账号类型是用户还是游客
      if (localStorage.getItem("ret") === "user") {
        _this.$router.push("/mine");
      } else if (localStorage.getItem("ret") === "tourist") {
        this.$notify({
          title: "警告",
          message: "游客暂时不能使用该功能，抱歉",
          type: "warning",
          duration: 1000
        });
      }
      // _this.$router.push("/mine");
    },

    //点击进入留言反馈
    meg() {
      let _this = this;
      //判断账号类型是用户还是游客
      if (localStorage.getItem("ret") === "user") {
        _this.$router.push("/message");
      } else if (localStorage.getItem("ret") === "tourist") {
        this.$notify({
          title: "警告",
          message: "游客暂时不能使用该功能，抱歉",
          type: "warning",
          duration: 1000
        });
      }
    },

    //判断
    pandui() {
      var _this = this;
      //判断本地存储中是否存有值
      if (localStorage.getItem("tianqiData") !== null) {
        //有值
        var data = localStorage.getItem("tianqiData");
        var data = JSON.parse(data); //获取到存在本地的值
        _this.tianqiPan(data);
      } else if (localStorage.getItem("tianqiData") === null) {
        var b = localStorage.getItem("addrData");
        //没有值
        this.tianqiAxios(b);
      }
    },

    //天气插件判断当前是否已过期
    tianqiPan(data) {
      var _this = this;
      var aaa = data.time; //获取到存在本地值中的时间
      //获取当前时间
      var myDate = new Date();
      var time = myDate.getTime();

      if (time - aaa > 60000) {
        localStorage.removeItem("tianqiData");
        var aaa = localStorage.getItem("addrData");
        _this.tianqiAxios(aaa);
      } else if (time - aaa < 60000) {
        var data = localStorage.getItem("tianqiData");
        var aaa = JSON.parse(data).val;
        _this.tianqiData = aaa;
        _this.loading = false; //隐藏加载动画
      }
    },

    //交流，个人秀
    handleClick(e) {},

    //进入新建交流页面
    issue() {
      var _this = this;
      //判断账号类型是用户还是游客
      if (localStorage.getItem("ret") === "user") {
        _this.$router.push("/questions");
        localStorage.removeItem("add");
        // location.reload();
      } else if (localStorage.getItem("ret") === "tourist") {
        this.$notify({
          title: "警告",
          message: "游客暂时不能使用该功能，抱歉",
          type: "warning",
          duration: 1000
        });
      }

      // this.$router.push("/questions");
    },

    // 下拉筛选框-作物或昆虫收藏我发起的
    handleCommand(name) {
      if (name === "全部") {
        // localStorage.setItem("commandLeiWen", "全部");
        localStorage.setItem("commandLeiWen", "0");
        localStorage.setItem("commandLeiWenA", "all");
        this.jiaoliu = "全部";
        this.handleCommandA("all");
      } else if (name === "作物") {
        // localStorage.setItem("commandLeiWen", "作物");
        localStorage.setItem("commandLeiWen", "1");
        localStorage.setItem("commandLeiWenA", "plant");
        this.jiaoliu = "作物";
        this.handleCommandA("plant");
      } else if (name === "昆虫") {
        // localStorage.setItem("commandLeiWen", "昆虫");
        localStorage.setItem("commandLeiWen", "2");
        localStorage.setItem("commandLeiWenA", "insect");
        this.jiaoliu = "昆虫";
        this.handleCommandA("insect");
      } else if (name === "我发起的") {
        // localStorage.setItem("commandWen", "我发起的");
        localStorage.setItem("commandWen", "3");
        localStorage.setItem("commandWenA", "user");
        this.jiaoliu2 = "我发起的";
        this.sponsorQuestions();
      } else if (name === "我收藏的") {
        // localStorage.setItem("commandWen", "我收藏的");
        localStorage.setItem("commandWen", "4");
        this.jiaoliu2 = "我收藏的";
        this.questionsCollect();
      }
    },

    // 下拉筛选框-交流
    handleCommandA(command) {
      this.$axios({
        method: "get",
        url: "bigservers/user_answer",
        params: {
          page: 1,
          ret: command
        }
      })
        .then(res => {
          if (res.data.num !== 0) {
            this.WenDaRedata = res.data.dat;
            this.jiaoliuShow = true;
          } else if (res.data.num === 0) {
            this.jiaoliuShow = false;
          }
        })
        .catch(error => {
          console.log(error);
        });
    },

    //点击进入交流详情
    details(e, id) {
      let _this = this;
      if (
        e.target.className === "home_question_TAGBox" ||
        e.target.className === "home_question_ulBox_image" ||
        e.target.className === "home_question_All_box"
      ) {
        //获取点击对象
        let el = e.currentTarget;
        let listId = id;
        localStorage.setItem("home_questionID", listId);
        localStorage.removeItem("add");
        _this.$router.push("/questions_details");
      }
    },

    //交流收藏
    questionsCollect() {
      this.$axios({
        method: "get",
        url: "bigservers/answer_praise",
        params: {
          page: 1
        }
      })
        .then(res => {
          if (res.data.num !== 0) {
            this.WenDaRedata = res.data.dat;
            this.jiaoliuShow = true;
          } else if (res.data.num === 0) {
            this.jiaoliuShow = false;
          }
        })
        .catch(err => {
          console.log(err);
        });
    },

    //请求交流数据
    wendaAjax() {
      //请求交流数据
      this.$axios({
        method: "get",
        url: "bigservers/user_answer",
        params: {
          page: 1,
          ret: "all"
        }
      })
        .then(res => {
          if (res.data.num !== 0) {
            this.WenDaRedata = res.data.dat;
            // var num = res.data.dat
            // for (var i = 0; i < num.length; i++) {
            //   console.log(num[i].ret)
            // }
            this.jiaoliuShow = true;
          } else if (res.data.num === 0) {
            this.jiaoliuShow = false;
          }
        })
        .catch(error => {
          console.log(error);
        });
    },

    //我发起的交流
    sponsorQuestions() {
      this.$axios({
        method: "get",
        url: "bigservers/user_answer",
        params: {
          ret: "user",
          page: 1
        }
      })
        .then(res => {
          if (res.data.dat.length !== "") {
            this.WenDaRedata = res.data.dat;
          } else if (res.data.dat.length === "") {
          }
        })
        .catch(err => {
          console.log(err);
        });
    },

    //点击进入新建个人秀
    fields() {
      var _this = this;
      //判断账号类型是用户还是游客
      if (localStorage.getItem("ret") === "user") {
        localStorage.removeItem("add");
        _this.$router.push("/fieldsShow");
      } else if (localStorage.getItem("ret") === "tourist") {
        this.$notify({
          title: "警告",
          message: "游客暂时不能使用该功能，抱歉",
          type: "warning",
          duration: 1000
        });
      }

      // this.$router.push("/fieldsShow");
    },

    // 个人秀事件
    scroll(scrollData) {
      // console.log(scrollData);
    },

    // loadmore(index) {
    loadmore() {
      this.fieldShowData = this.data.concat(this.fieldShowData);
    },
    //请求个人秀数据
    tianjianxiuAjax() {
      this.$axios({
        method: "get",
        url: "bigservers/user_farm_show",
        params: {
          page: 1
        }
      })
        .then(res => {
          if (res.data.num !== 0) {
            this.gerenShow = true;
            this.fieldShowData = res.data.dat;
            this.img = res.data.dat;
          } else if (res.data.num === 0) {
            this.gerenShow = false;
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    //进入个人秀详情页面
    fieldDetails(e, id) {
      let _this = this;
      if (
        e.target.className === "item-desc" ||
        e.target.className === "item-footer" ||
        e.target.className === "fieldShow_image animation" ||
        e.target.className === "avatar animation" ||
        e.target.className === "fieldShow_tubiaoBox_chakan" ||
        e.target.className === "fieldShow_tubiaoBox_chakan_img animation" ||
        e.target.className === "name"
      ) {
        localStorage.setItem("fieldDetailsId", id);
        this.$router.push("/field_details");
      }
    },

    //点击进入消息提醒页面
    message() {
      var _this = this;
      //判断账号类型是用户还是游客
      if (localStorage.getItem("ret") === "user") {
        this.$router.push("/message_list");
        this.messData = ""; //将消息提示清零
      } else if (localStorage.getItem("ret") === "tourist") {
        this.$notify({
          title: "警告",
          message: "游客暂时不能使用该功能，抱歉",
          type: "warning",
          duration: 1000
        });
      }
    },

    //消息提醒的总数
    messAjax() {
      let _this = this;
      _this
        .$axios({
          method: "get",
          url: "bigservers/user_news"
        })
        .then(res => {
          if (res.data.num === 0) {
          }
          if (res.data.num > 0) {
            _this.messData = res.data.num;
          }
        })
        .catch(err => {
          console.log(err);
        });
    },

    //手动录入-病虫害筛选
    handleCommandC(name) {
      if (name === "全部") {
        localStorage.setItem("commandLuru", "全部");
        localStorage.setItem("commandLuruA", "all");
        this.shoudong = "all";
      } else if (name === "作物") {
        localStorage.setItem("commandLuru", "作物");
        localStorage.setItem("commandLuruA", "plant");
        this.shoudong = "plant";
      } else if (name === "昆虫") {
        localStorage.setItem("commandLuru", "昆虫");
        localStorage.setItem("commandLuruA", "insect");
        this.shoudong = "insect";
      }
      localStorage.setItem("commandIndex", this.shoudong);
      this.manualEntering_ajax(this.shoudong);
    },

    //请求手动录入列表数据
    manualEntering_ajax(ret) {
      let _this = this;
      //判断ret是否为空
      if (ret === undefined) {
        var ret = "all";
      } else if (ret !== undefined) {
        var ret = ret;
      }
      _this
        .$axios({
          method: "get",
          url: "bigservers/see_disease",
          params: {
            ret: ret,
            page: 1
          }
        })
        .then(res => {
          if (res.data.num !== 0) {
            this.see_disease = res.data.dat;
            this.zanwuShow = true;
          } else if (res.data.num === 0) {
            this.zanwuShow = false;
          }
        })
        .catch(err => {
          console.log(err);
        });
    },

    //点击进入手动录入详情页面
    manualEntering(id) {
      localStorage.setItem("manualEnteringID", id);
      this.$router.push("/addData_details");
    },

    //tab切换
    titleA(index) {
      this.indexData = index;
      this.ins = index;
      localStorage.setItem("homeIndex", index);
      if (index == 1) {
        this.tianjianxiuAjax();
      }
    },

    //自定义天气插件测试
    tianqiAxios(b) {
      var b = localStorage.getItem("addrData");
      this.$axios({
        method: "get",
        url: "bigservers/weather",
        params: {
          city: b
        }
      })
        .then(res => {
          this.loading = false; //隐藏加载动画
          this.tianqiData = res.data;

          //获取当前时间
          var myData = new Date();
          var time = myData.getTime(); //这是在存值时的时间
          var key = "tianqiData";
          var data = JSON.stringify({
            val: res.data,
            time: time
          });
          localStorage.setItem(key, data);
        })
        .catch(err => {
          console.log(err);
        });
    },

    //交流列表收藏
    collect(e, id, index) {
      let _this = this;
      var isClick = _this.isClick;
      let postData = _this.$qs.parse({
        id: id,
        ret: "plus"
      });
      if (isClick === true) {
        _this.isClick = false;
        _this
          .$axios({
            method: "post",
            url: "bigservers/answer_praise",
            data: postData
          })
          .then(res => {
            if (res.data === 0) {
              this.$message({
                type: "success",
                message: "收藏成功!",
                duration: 1500
              });
              _this.WenDaRedata[index].stroe = "1"; //改变收藏状态
              _this.WenDaRedata[index].collect_num =
                _this.WenDaRedata[index].collect_num + 1; //改变收藏数量
            } else if (res.data === 1) {
              this.$notify.error({
                title: "错误",
                message: "收藏出错了！！",
                duration: 1500
              });
            }
          })
          .catch(err => {
            console.log(err);
          });
        setTimeout(function() {
          _this.isClick = true;
        }, 1500);
      }
    },

    //交流列表取消收藏
    collectA(e, id, index) {
      let _this = this;
      var isClick = _this.isClick;
      let postData = _this.$qs.parse({
        id: id,
        ret: "off"
      });
      if (isClick === true) {
        _this.isClick = false;
        _this
          .$axios({
            method: "post",
            url: "bigservers/answer_praise",
            data: postData
          })
          .then(res => {
            if (res.data === 0) {
              this.$message({
                type: "success",
                message: "取消收藏成功!",
                duration: 1500
              });
              _this.WenDaRedata[index].stroe = "0"; //改变收藏状态
              _this.WenDaRedata[index].collect_num =
                _this.WenDaRedata[index].collect_num - 1; //改变收藏数量
            } else if (res.data === 1) {
              this.$notify.error({
                title: "错误",
                message: "取消收藏出错了！！",
                duration: 1500
              });
            }
          })
          .catch(err => {
            console.log(err);
          });
        setTimeout(function() {
          _this.isClick = true;
        }, 1500);
      }
    },

    //个人秀点赞
    like(id, index) {
      let _this = this;
      var isClick = _this.isClick;
      let postData = _this.$qs.parse({
        id: id,
        req: "one",
        ret: "addr"
      });
      if (isClick === true) {
        _this.isClick = false;
        _this
          .$axios({
            method: "post",
            url: "bigservers/farm_likes",
            data: postData
          })
          .then(res => {
            if (res.data === 0) {
              this.$message({
                type: "success",
                message: "点赞成功!",
                duration: 1500
              });
              _this.fieldShowData[index].like = "1"; //改变点赞状态
              _this.fieldShowData[index].like_num =
                _this.fieldShowData[index].like_num + 1; //改变点赞数量
            } else if (res.data === 1) {
              this.$notify.error({
                title: "错误",
                message: "收藏出错了！！",
                duration: 1500
              });
            }
          })
          .catch(err => {
            console.log(err);
          });
        setTimeout(function() {
          _this.isClick = true;
        }, 1500);
      }
    },

    //个人秀取消点赞
    noLike(id, index) {
      let _this = this;
      var isClick = _this.isClick;
      let postData = _this.$qs.parse({
        id: id,
        req: "one",
        ret: "off"
      });
      if (isClick === true) {
        _this.isClick = false;
        _this
          .$axios({
            method: "post",
            url: "bigservers/farm_likes",
            data: postData
          })
          .then(res => {
            if (res.data === 0) {
              this.$message({
                type: "success",
                message: "取消点赞成功!",
                duration: 1500
              });
              _this.fieldShowData[index].like = "0"; //改变点赞状态
              _this.fieldShowData[index].like_num =
                _this.fieldShowData[index].like_num - 1; //改变点赞数量
            } else if (res.data === 1) {
              this.$notify.error({
                title: "错误",
                message: "取消收藏出错了！！",
                duration: 1500
              });
            }
          })
          .catch(err => {
            console.log(err);
          });
        setTimeout(function() {
          _this.isClick = true;
        }, 1500);
      }
    },

    //等待动画关闭按钮
    loadingDel() {
      this.loadingShow = false;
      location.reload();
    },

    //点击轮播图片进入相应页面
    imgClikc(index) {
      var _this = this;
      //判断当前是需要跳转到哪里
      if (index == 0) {
        //知识库
        _this.$router.push("/repository");
      } else if (index == 1) {
        //发交流
        _this.$router.push("/questions");
      } else if (index == 2) {
        //昆虫识别
        _this.dialogVisible = true;
      }
      // console.log(index)
    }
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    // this.weather(); //请求天气插件
    window.addEventListener("scroll", this.watchScroll); //吸顶效果
    // this.weather(); //请求天气插件

    //判断本地存储为空时进行保存下标为0
    if (localStorage.getItem("homeIndex") === null) {
      localStorage.setItem("homeIndex", 0);
    }

    if (localStorage.getItem("commandLeiWen") === null) {
      localStorage.setItem("commandLeiWen", "昆虫或作物");
    }

    if (localStorage.getItem("commandWen") === null) {
      // localStorage.setItem("commandWen", "交流");
      localStorage.setItem("commandWen", "我的");
    }

    if (localStorage.getItem("commandLuru") === null) {
      localStorage.setItem("commandLuru", "昆虫或作物");
    }

    //判断当前是否有交流数据的ret值
    if (localStorage.getItem("commandLeiWenA") === null) {
      localStorage.setItem("commandLeiWenA", "all");
    }
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    var _this = this;
    this.init(); //图片剪切
    this.get_boderHeight();
    // this.tianjianxiuAjax(); //请求个人秀数据
    this.wendaAjax(); //请求交流数据
    this.manualEntering_ajax(); //请求手动录入列表数据

    this.pandui(); //先判断天气插件是否需要更新

    // 【注意2:】
    // 轮播图 · 初始化设定
    var swiper = new Swiper(".swiper-container", {
      spaceBetween: 30,
      effect: "fade",
      autoplay: {
        delay: 3000,
        disableOnInteraction: false, // 取消鼠标操作后的轮播暂停【无操作轮播继续】【参考链接1】
        stopOnLastSlide: false // 在最后一页停止
      },
      pagination: {
        el: ".swiper-pagination",
        clickable: true
      },
      navigation: {
        nextEl: ".swiper-button-next",
        prevEl: ".swiper-button-prev"
      }
    });
  }
};
</script>
<style lang="scss">
@import "../../assets/scss/bus.scss";
@import "../../assets/scss/home.scss";

//自定义天气插件显示样式
.home_box_mescroll {
  width: 100%;
  height: 100%;
  overflow-y: auto;
}
.weather_box {
  position: relative;
  // position: absolute;
  // left: 0.05rem;
  // top: 0.52rem;
  left: 0.05rem;
  top: -1.48rem;
  border: 1px solid #ecf0f2;
  width: 38%;
  height: 1.8rem;
  border-radius: 15px;
  background: #ecf0f2;
}

.dizhiBox {
  display: flex;
  justify-content: space-evenly;
  padding-top: 0.7rem;
}

//天气情况
.weather_case {
  font-size: 15px;
  margin: 0.1rem 0 -0.3rem 1.7rem;
}

.weather_area {
  font-size: 18px;
  font-weight: 600;
}

.weather_temp {
  font-size: 20px;
}

.weather_img {
  position: absolute;
  top: -0.6rem;
  left: 0.1rem;
  width: 1.6rem;
  height: 1.6rem;
}
</style>

<style>
/* @import "./css/lovecircle.css"; */
/* 轮播图 */
.bannerWrap {
  /* margin: 1.5rem 0 0.5rem 0; */
  margin: -1.8rem 0 0.5rem 0;
}
.swiper-container {
  width: 100%;
  height: 100%;
}
.swiper-slide {
  background-position: center;
  background-size: cover;
}
.bannerWrap_img {
  width: 100%;
  height: 100%;
}
</style>


<style lang="less">
.v-simple-cropper {
  .file {
    display: none;
  }
  .v-cropper-layer {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: #fff;
    z-index: 99999;
    display: none;
    .layer-header {
      position: absolute;
      top: 0;
      left: 0;
      z-index: 99999;
      background: #fff;
      width: 100%;
      height: 0.8rem;
      padding: 0 0.2rem;
      box-sizing: border-box;
    }
    .cancel,
    .confirm {
      line-height: 0.8rem;
      font-size: 0.28rem;
      background: inherit;
      border: 0;
      outline: 0;
      float: left;
    }
    .confirm {
      float: right;
    }
    img {
      position: inherit !important;
      border-radius: inherit !important;
      float: inherit !important;
    }
  }
}
</style> 

<style lang="scss" scoped>
.huakuaiUl::-webkit-scrollbar {
  display: none;
}
.active {
  color: #fff;
  font-weight: bolder;
  border: 1px solid #f06084;
  background: #f06084;
}
.idd {
  width: 100%;
  overflow: hidden;
  .huakuaiUl {
    display: flex;
    align-items: center;
    overflow: auto;
    padding-left: 0;
    list-style: none;
    .huakuaiLi {
      text-align: center;
      font-size: 15px;
      -ms-flex-negative: 0;
      flex-shrink: 0;
      padding: 10px;
      margin: 5px;
    }
  }
}
</style>