<!--  -->
<template>
  <div class="home1_box" :style="'height:' + fullHeight + 'px'">
    <!-- 头部 -->
    <div class="home_headrBox">
      <div class="home_divBox">
        <div class="home_headrBox-tlt">发现</div>
        <img
          @click="newDatas()"
          src="../../assets/image/new/14.png"
          alt
          class="home_headrBox-img"
        />
      </div>
    </div>

    <!-- tab切换交流、鉴定、方案 -->
    <div class="home1_box_main">
      <!-- 标题 -->
      <div class="navlist">
        <ul>
          <li
            class="navli"
            v-for="(item, index) in navList"
            :class="{ activeT: nowIndex === index }"
            @click="tabClick(index)"
            :key="index"
          >
            <div class="navliVal">{{ item.name }}</div>
          </li>
        </ul>
      </div>

      <!-- 相应内容 -->
      <div
        class="swiper-container swiper_con"
        style="background: #f7f8fc; margin-bottom: 1rem"
      >
        <div class="swiper-wrapper">
          <!-- 交流 -->
          <div class="swiper-slide" ref="viewBox">
            <ul class="home1_box_main-ulA" v-if="interflowShow">
              <li
                class="home1_box_main-listA"
                v-for="(item, index) in this.interflowDat"
                :key="index"
                @click="
                  interflowDetails(
                    item.id,
                    item.visit_num,
                    item.reply_num,
                    item.exist,
                    item.like_num,
                    item.photo
                  )
                "
              >
                <!-- 用户信息 -->
                <div class="home1_box_main-listA-userBox">
                  <img
                    preview="1"
                    v-lazy="'http://192.168.1.8:8002/' + item.photo"
                    alt
                    class="home1_box_main-listA-userBox-img"
                  />

                  <div class="home1_box_main-listA-userBox-txt">
                    <div class="home1_box_main-listA-userBox-name">
                      {{
                        item.user_remark == null
                          ? item.username
                          : item.user_remark
                      }}
                    </div>
                    <div class="home1_box_main-listA-userBox-time">
                      {{ item.time }}
                    </div>
                  </div>
                </div>

                <!-- 交流内容-文字 -->
                <div class="home1_box_main-listA-writing">
                  {{ item.problem }}
                </div>

                <!-- 交流图片 -->
                <div class="home1_box_main-listA-image">
                  <ul class="home1_box_main-listA-image-ul">
                    <li
                      class="home1_box_main-listA-image-list"
                      v-for="itemA in item.img"
                      :key="itemA"
                      @click="imgShow(itemA)"
                      preview="1"
                    >
                      <img
                        v-lazy="'http://192.168.1.8:8002/' + itemA"
                        alt
                        class="home1_box_main-listA-imageList"
                      />
                    </li>
                  </ul>
                </div>

                <!-- 交流数据的查看评论点赞 -->
                <div class="home1_box_main-listA-operation">
                  <ul class="home1_box_main-listA-operation-ul">
                    <li class="home1_box_main-listA-operation-list">
                      <img
                        src="../../assets/image/new/8.png"
                        alt
                        class="home1_box_main-listA-operation-listImg"
                      />
                      <div class="home1_box_main-listA-operation-listNum">
                        {{ item.visit_num }}
                      </div>
                    </li>
                    <li class="home1_box_main-listA-operation-list">
                      <img
                        src="../../assets/image/new/10.png"
                        alt
                        class="home1_box_main-listA-operation-listImg"
                      />
                      <div class="home1_box_main-listA-operation-listNum">
                        {{ item.reply_num }}
                      </div>
                    </li>
                    <li class="home1_box_main-listA-operation-list">
                      <!-- 未点赞 -->
                      <img
                        @click.stop="like(item.id, index)"
                        v-if="item.exist === '0'"
                        src="../../assets/image/new/3.png"
                        alt
                        class="home1_box_main-listA-operation-listImg"
                      />
                      <!-- 点赞了 -->
                      <img
                        v-else
                        @click.stop="noLike(item.id, index)"
                        src="../../assets/image/new/23.png"
                        alt
                        class="home1_box_main-listA-operation-listImg"
                      />
                      <div class="home1_box_main-listA-operation-listNum">
                        {{ item.like_num }}
                      </div>
                    </li>
                  </ul>
                </div>
              </li>
            </ul>

            <!-- 暂空判断 -->
            <div class="collect_judge" id="empty" v-else>
              <img
                src="../../assets/image/wu.png"
                alt
                class="collect_judge_img"
              />
              <div class="collect_judge_text">抱歉，暂无交流</div>
            </div>
          </div>

          <!-- 鉴定 -->
          <div class="swiper-slide">
            <ul class="home1_box-main-authenticateUl" v-if="interflowShow">
              <li
                class="home1_box-main-authenticateList"
                v-for="(item, index) in interflowDat"
                @click="authenticateDetails(item.id)"
                :key="index"
              >
                <div class="home1_box-main-authenticateList-box1">
                  <img
                    preview="1"
                    v-lazy="'http://192.168.1.8:8002/' + item.img[0]"
                    alt
                    class="home1_box-main-authenticateList-box1-img"
                  />
                  <div class="home1_box-main-authenticateList-box1-txt">
                    {{ item.problem }}
                  </div>
                </div>

                <div class="home1_box-main-authenticateList-box2">
                  <div class="home1_box-main-authenticateList-box3">
                    <img
                      preview="1"
                      v-lazy="'http://192.168.1.8:8002/' + item.photo"
                      alt
                      class="home1_box-main-authenticateList-box3-img"
                    />
                    <div class="home1_box-main-authenticateList-box3-name">
                      {{ item.username }}
                    </div>
                  </div>
                  <img
                    src="../../assets/image/new/10.png"
                    alt
                    class="home1_box-main-authenticateList-box4-img"
                  />
                </div>
              </li>
            </ul>

            <!-- 暂空判断 -->
            <div class="collect_judge" id="empty" v-else>
              <img
                src="../../assets/image/wu.png"
                alt
                class="collect_judge_img"
              />
              <div class="collect_judge_text">抱歉，暂无鉴定</div>
            </div>
          </div>

          <!-- 方案 -->
          <div class="swiper-slide">
            <ul class="home1_box-main-authenticateUlA">
              <li class="home1_box-main-authenticateListA">
                <div class="home1_box-main-authenticateListA-box1">
                  <img
                    src="../../assets/image/timg4.jpg"
                    alt
                    class="home1_box-main-authenticateListA-box1-img"
                  />
                  <div class="home1_box-main-authenticateListA-box1-txt">
                    这是什么虫子？以前好像见过<span
                      class="home1_box-main-authenticateListA-box1-num"
                      >1天前</span
                    >
                  </div>
                </div>
              </li>

              <li class="home1_box-main-authenticateListA">
                <div class="home1_box-main-authenticateListA-box1">
                  <img
                    src="../../assets/image/timg4.jpg"
                    alt
                    class="home1_box-main-authenticateListA-box1-img"
                  />
                  <div class="home1_box-main-authenticateListA-box1-txt">
                    这是什么虫子？以前好像见过<span
                      class="home1_box-main-authenticateListA-box1-num"
                      >1天前</span
                    >
                  </div>
                </div>
              </li>

              <li class="home1_box-main-authenticateListA">
                <div class="home1_box-main-authenticateListA-box1">
                  <img
                    src="../../assets/image/timg4.jpg"
                    alt
                    class="home1_box-main-authenticateListA-box1-img"
                  />
                  <div class="home1_box-main-authenticateListA-box1-txt">
                    这是什么虫子？以前好像见过<span
                      class="home1_box-main-authenticateListA-box1-num"
                      >1天前</span
                    >
                  </div>
                </div>
              </li>
            </ul>
          </div>
        </div>
      </div>

      <!-- 新建弹出菜单 -->
      <!-- <el-drawer
        :visible.sync="drawer"
        direction="btt"
        :show-close="showClo"
        :with-header="false"
        :modal="false"
      > -->
      <el-drawer
        :visible.sync="drawer"
        direction="btt"
        :show-close="showClo"
        :with-header="false"
        :close-on-click-modal="false"
      >
        <ul class="home_main-drawerUl">
          <li class="home_main-drawerList" @click="newExchange()">发交流</li>
          <li class="home_main-drawerList" @click="newAuthenticate()">
            求鉴定
          </li>
          <li
            class="home_main-drawerList"
            @click="drawer = false"
            style="border: 0; border-top: 2px solid #f3f3f3"
          >
            取消
          </li>
        </ul>
      </el-drawer>
    </div>

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

<script>
import bottomNav from "../bottomNav/bottomNav"; //底部导航栏
// import Swiper from "swiper";
// import "swiper/css/swiper.min.css";
// import "swiper/js/swiper.min.js";

export default {
  name: "home1",
  components: {
    bottomNav, //底部导航
  },
  data() {
    //这里存放数据
    return {
      fullHeight: document.documentElement.clientHeight, //自适应高度
      activeName: "second", //tab切换交流、鉴定、方案
      // tab切换交流、鉴定、方案
      navList: [{ name: "交流" }, { name: "鉴定" }, { name: "方案" }],
      nowIndex: 0,
      mySwiper: "",
      botNav: true, //底部导航
      // 交流
      interflowShow: true, //暂无数据
      interflowDat: [], //交流列表数据
      isClick: true, //点赞开关
      amplificationShow: false, //查看大图
      imgList: "",
      drawer: false,
      showClo: false,
      // 鉴定
      // authenticateDat: [], //鉴定列表数据
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {
    fullHeight(val) {
      //监控浏览器高度变化
      if (!this.timer) {
        this.fullHeight = val;
        this.timer = true;
        let that = this;
        setTimeout(function () {
          //防止过度调用监测事件，导致卡顿
          that.timer = false;
        }, 400);
      }
    },

    // 监听切换
    nowIndex(val) {
      if (val == 0) {
        //交流
        this.interflowData();
      } else if (val == 1) {
        //鉴定
        this.interflowData();
      } else if (val == 2) {
        //方案
      }
    },
  },
  //方法集合
  methods: {
    //动态获取浏览器高度
    get_boderHeight() {
      const that = this;
      window.onresize = () => {
        return (() => {
          window.fullHeight = document.documentElement.clientHeight;
          that.fullHeight = window.fullHeight;
        })();
      };
    },

    // tab切换交流、鉴定、方案
    initSwiper() {
      var that = this;
      that.mySwiper = new Swiper(".swiper-container", {
        initialSlide: 0,
        autoplay: false,
        keyboardControl: true,
        autoHeight: true,
        observer: true, //修改swiper自己或子元素时，自动初始化swiper
        observeParents: true,
        autoplayDisableOnInteraction: false, //解决拖动之后不能自动轮播
        preventLinksPropagation: false, // 阻止点击事件冒泡
        onSlideChangeStart: function (swiper) {
          //这个是当swiper被改变是的回调函数，可以拿到当前索引
          console.log(swiper.activeIndex);
          // alert(swiper.activeIndex);
          that.nowIndex = swiper.activeIndex;
        },
        // onSlideChangeTransitionStart: function (swiper, event) {},
      });
    },
    tabClick(index) {
      this.nowIndex = index;
      if (!this.mySwiper.slideTo) {
        this.initSwiper();
      }
      // this.mySwiper.slideTo(index, 300, false);
      this.mySwiper.slideTo(index, 500, false);
    },

    // 交流、鉴定列表接口
    interflowData() {
      var that = this;
      if (that.nowIndex == 0) {
        var diverse = "1"; //交流
      } else if (that.nowIndex == 1) {
        var diverse = "0"; //鉴定
      }
      that
        .$axios({
          method: "get",
          url: "http://192.168.1.8:8002/user_answer",
          params: {
            page: 1,
            ret: "all", //区别是全部还是个人
            diverse: diverse, //区别鉴定还是交流
          },
          headers: {
            "Content-Type": "multipart/form-data",
          },
        })
        .then((res) => {
          if (res.data.num !== 0) {
            var data = res.data.dat;
            that.interflowDat = [];
            that.interflowDat = data;
            that.interflowShow = true;
          } else if (res.data.num === 0) {
            this.gerenShow = false;
            that.interflowShow = false;
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 交流点赞
    like(id, index) {
      var that = this;
      var isClick = that.isClick;
      // var postData = that.$qs.parse({
      //   id: id, //id
      //   ret: "add", //点赞
      //   req: "title", //主问题
      // });
      var form = new FormData();
      form.append("id", id);
      form.append("ret", "answers"); //ret  answers问题点赞  comment评论点赞
      form.append("req", "add"); //req  add 点赞 move 取消点赞
      if (isClick === true) {
        that.isClick = false;
        that
          .$axios({
            method: "post",
            url: "http://192.168.1.8:8002/answer_praise",
            data: form,
            headers: {
              "Content-Type": "multipart/form-data",
            },
          })
          .then((res) => {
            if (res.data.code === "200") {
              this.$message({
                type: "success",
                message: "点赞成功!",
                duration: 1500,
              });
              that.interflowDat[index].exist = "1"; //改变点赞状态
              that.interflowDat[index].like_num =
                that.interflowDat[index].like_num + 1; //改变点赞数据
            } else {
              this.$notify.error({
                title: "错误",
                message: "点赞出错了！！",
                duration: 1500,
              });
            }
          })
          .catch((err) => {
            console.log(err);
          });
        setTimeout(function () {
          that.isClick = true;
        }, 1500);
      }
    },
    // 交流取消点赞
    noLike(id, index) {
      var that = this;
      var isClick = that.isClick;
      var form = new FormData();
      form.append("id", id);
      form.append("ret", "answers"); //ret  answers问题点赞  comment评论点赞
      form.append("req", "move"); //req  add 点赞 move 取消点赞
      if (isClick === true) {
        that.isClick = false;
        that
          .$axios({
            method: "post",
            url: "http://192.168.1.8:8002/answer_praise",
            data: form,
            headers: {
              "Content-Type": "multipart/form-data",
            },
          })
          .then((res) => {
            if (res.data.code === "200") {
              that.$message({
                type: "success",
                message: "取消点赞成功！",
                duration: 1500,
              });
              that.interflowDat[index].exist = "0"; //改变点赞状态
              that.interflowDat[index].like_num =
                that.interflowDat[index].like_num - 1; //改变点赞数量
            } else {
              that.$notify.error({
                title: "错误",
                message: "取消点赞出错了！！",
                duration: 1500,
              });
            }
          })
          .catch((err) => {
            console.log(err);
          });
        setTimeout(function () {
          that.isClick = true;
        }, 1500);
      }
    },
    // 点击进入交流详情
    interflowDetails(id, visit_num, replys, like, like_num, photo) {
      var that = this;
      this.$router.push({
        name: "field_details",
        query: {
          id: id, //id
          visit_num: visit_num, //查看
          replys: replys, //评论
          like: like, //点赞状态
          like_num: like_num, //点赞次数
          photo: photo, //头像
        },
      });
    },
    //点击进入新建交流页面
    newExchange() {
      this.drawer = false;
      this.$router.push("/questions");
    },

    //  点击进入鉴定详情
    authenticateDetails(id) {
      var that = this;
      that.$router.push({
        name: "addData_details",
        query: {
          id: id, //id
          // visit_num: visit_num, //查看
          // replys: replys, //评论
          // like: like, //点赞状态
          // like_num: like_num, //点赞次数
        },
      });
    },
    //点击进入新建鉴定页面
    newAuthenticate() {
      this.drawer = false;
      this.$router.push("/fieldsShow");
    },

    //点击轮播图片进行放大
    imgShow(img) {
      this.amplificationShow = true;
      this.imgList = img;
    },

    // 点击弹出新建数据选择框
    newDatas() {
      this.drawer = true;
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    this.get_boderHeight(); //动态获取浏览器高度
    this.initSwiper(); //tab切换交流、鉴定、方案
    this.interflowData(); //交流、鉴定列表接口
  },
};
</script>
<style lang='scss'>
.el-popup-parent--hidden {
  overflow: auto;
}

@import "../../assets/scss/bus.scss";
@import "./css/home1.scss";
</style>