<template>
  <div class="container">
    <div class="hometop">
      <div class="hometopbar flextwo">
        <!-- ../../../assets/touxiang_img@2x.png -->
        <img
          :src="userinfo.avatar"
          alt=""
          class="homelogo"
        />
        <div class="homesearch flexone">
          <!-- <img src="../../../assets/sousuo.png" alt="" class="souimg" /> -->
          <div class="souenter">
            <input
              type="text"
              placeholder="请输入关键词搜索"
              v-model="keyword"
              @blur="finishword"
            />
          </div>
        </div>
        <div class="searchpro flexone" @click="selectpro">
          <div class="proname">{{ proname }}</div>

          <img src="../../../assets/xiasanjiao.png" alt="" class="xiasanjiao" />
        </div>
      </div>
      <div class="docswiper">
        <van-swipe
          class="my-swipe"
          :autoplay="2000"
          indicator-color="white"
          :loop="true"
        >
          <van-swipe-item v-for="(item, index) in bannertop" :key="index">
            <div class="bannerimg">
              <img :src="item.image" alt="" />
            </div>
          </van-swipe-item>
        </van-swipe>
      </div>
    </div>

    <div class="homepagebox">
      <div class="homekind flexone">
        <div
          class="homepageboxitem flexfour"
          @click="duanshipin(1, item)"
          v-for="(item, index) in tiezikind"
          :key="index"
        >
          <img :src="item.image" alt="" class="homepageitemimg" />
          <div class="homepageitemname">{{ item.name }}</div>
        </div>
      </div>
      <div class="homefenlei flextwo">
        <div
          class="fenleiword"
          :class="fenlei == 0 ? 'fenleiactive' : ''"
          @click="getfen(0)"
        >
          默认
        </div>
        <div
          class="fenleiword"
          :class="fenlei == 1 ? 'fenleiactive' : ''"
          @click="getfen(1)"
        >
          热门
        </div>
        <div
          class="fenleiword"
          :class="fenlei == 2 ? 'fenleiactive' : ''"
          @click="getfen(2)"
        >
          最高点赞
        </div>
      </div>
      <!-- 帖子列表 -->
      <div class="nodata" v-if="tiezilist.length == 0">暂无数据</div>
      <div class="tiezhlist" v-else>
        <van-list
          v-model="loading"
          :finished="finished"
          finished-text="没有更多了"
          @load="onLoad"
        >
          <div
            class="tieziitem"
            v-for="(item, index) in tiezilist"
            :key="index"
            @click="luntandetail(item)"
           
          >
            <div class="tiezitop flexone">
              <div class="tieziimg">
                <img :src="item.user.avatar" alt="" />
              </div>
              <div class="tieziright"  v-if="showlist">
                <div class="tiezirighttop flex">
                  <div class="timeright">
                    <div class="tieziming">{{ item.user.nickname }}</div>
                    <div class="tiezifen">{{item.createtime}} </div>
                  </div>

                  <div>
                    <div class="vipimg" v-if="item.forum_type == 1">
                      <img src="../../../assets/vip_icon@2x.png" alt="" />
                      <div class="vipname">{{ item.user.level.name1 }}</div>
                    </div>
                     <div class="tiezizhuan" v-for="(item,index) in item.user.label" :key="index" >{{item.name_label}}</div>
                  </div>
                  <!-- {{item.user.label.length}} -->
                  <!-- v-if="item.user.label.length!=0" -->
                  <div class="flex" v-if="item.user.label!='[]'">
                     <img  
                    :src="itemk.logo_image"
                    class="banggongimg"
                    alt=""
                    v-for="(itemk, index) in item.user.label"
                    :key="index"
                   
                  />
                        <!-- <img
                    src="../../../assets/peisong_icon@2x.png"
                    class="banggongimg"
                    alt=""
                  /> -->
                  </div>
                 
                 
                  
                
                  <img
                    src="../../../assets/yirenzheng_icon@2x.png"
                    class="banggongimg"
                    alt=""
                    v-if="item.is_card == 1"
                  />
                </div>
                <div class="tiezibto flexone"></div>
              </div>
            </div>
            <div class="tiezicontent">
              <div class="teizicontenttop flextwo">
                <div class="tiezicontentname">{{ item.title }}</div>
                <img
                  src="../../../assets/xingxing_icon@2x.png"
                  alt=""
                  class="starimg"
                  v-if="item.is_collect==1"
                   @click.stop="collect(index,item.id)"
                />
                <img
                  src="../../../assets/weishoucang_icon@2x.png"
                  alt=""
                  class="starimg"
                  v-else
                   @click.stop="collect(index,item.id)"
                />
              </div>
              <div class="tieziwordbox" v-html="item.content"></div>

              <div
                class="teiziimgbox flexone"
                v-if="item.video != null"
                @click.stop="govideo(item.video)"
              >
                <div class="videoimg">
                  <img :src="item.video_image" alt="" />
                  <img
                    src="../../../assets/bofang_icon@2x.png"
                    alt=""
                    class="videobtn"
                  />
                </div>
              </div>
              <div class="teiziimgbox flexone" v-if="item.images != null">
                <div
                  class="tieziimgimg"
                  v-for="(item, indexk) in item.images"
                  :key="indexk"
                  @click.stop="previewimg(index, indexk, item)"
                >
                  <img :src="item" alt="" />
                </div>
              </div>
              <div class="tiezipingbot">
                <div class="teizipingitem flexone" v-if="item.comment != 0">
                  <img
                    src="../../../assets/pinglun_icon@2x.png"
                    alt=""
                    class="lunimg"
                  />
                  {{ item.comment }}
                </div>
                <div
                  class="teizipingitem flexone"
                  @click.stop="praisedian(item, index)"
                >
                  <img
                    src="../../../assets/zan_icon@2x.png"
                    alt=""
                    class="lunimg zanimg"
                    v-if="item.is_praise == 1"
                  />
                  <img
                    src="../../../assets/nodianzan.png"
                    alt=""
                    class="lunimg zanimg"
                    v-if="item.is_praise == 2"
                  />
                  {{ item.praise }}
                </div>
                <div class="teizipingitem flexone">
                 <img
                src="../../../assets/number.png"
                alt=""
                class="lunimg zanimg"
              />
              {{item.view}}
                </div>
              </div>
            </div>
          </div>
        
        </van-list>
      </div>
    </div>
    <!-- 弹出层 -->
    <div class="register" v-if="showpublish">
      <div class="publishwrap">
        <div class="flextwo">
          <div class="homepageboxitem flexfour">
            <img
              src="../../../assets/duanzhipin.png"
              alt=""
              class="homepageitemimg"
            />
            <div class="homepageitemname">短视频区</div>
          </div>
          <div class="homepageboxitem flexfour">
            <img
              src="../../../assets/banggong.png"
              alt=""
              class="homepageitemimg"
            />
            <div class="homepageitemname">帮工招聘</div>
          </div>
          <div class="homepageboxitem flexfour">
            <img
              src="../../../assets/zhuanrang.png"
              alt=""
              class="homepageitemimg"
            />
            <div class="homepageitemname">面坊转让</div>
          </div>
          <div class="homepageboxitem flexfour">
            <img
              src="../../../assets/zhenghun.png"
              alt=""
              class="homepageitemimg"
            />
            <div class="homepageitemname">征婚交友</div>
          </div>
        </div>
        <div class="chahao" @click="hidetanceng">
          <img src="../../../assets/chahao.png" alt="" />
        </div>
      </div>
    </div>
    <!-- 选择器 -->
    <van-picker
      title="标题"
      show-toolbar
      :columns="citylist"
      @confirm="onConfirm"
      @cancel="onCancel"
      v-if="showcity"
    />

    <tabBar v-bind:active="0" />
  </div>
</template>

<script>
import Vue from "vue";
import wx from "weixin-js-sdk";
import tabBar from "@/components/tabsec.vue";
import { Swipe, SwipeItem, List, Toast } from "vant";
import area from "../../../utils/area.js";
import { changename } from "../../../utils/base.js"; //城市去掉市
import { text } from "../../../utils/base.js"; //富文本格式化
import {richTextFormat} from "../../../utils/base.js" //富文本超出显示省略号

Vue.use(List);
Vue.use(Swipe);
Vue.use(SwipeItem);
export default {
  components: {
    tabBar
  },
  data() {
    return {
      fenlei: 0,
      showlist:false,
      showpublish: false,
      tiezikind: [],
      tiezilist: [],
      loading: false,
      finished: false,
      showpull: true,
      page: 1,
      citylist: area.province_list,
      showcity: false,
      proname: "",
      province_id: "",
      keyword: "",
      bannertop: [], // 顶部轮播图
      userinfo:''

      
    };
  },
  created() {
    document.title = "中国面条";
    // 获取顶部轮播图
    this.getbannertop();
    // 获取jssdk
    this.getappid();
    // 获取帖子分类
    this.gettiezikind();
    // 获取用户信息
    this.getuserinfo()
   
  },
  beforeRouteEnter(to, from, next) {
    var u = navigator.userAgent;
    var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
    // XXX: 修复iOS版微信HTML5 History兼容性问题
    if (isiOS && to.path !== location.pathname) {
      // 此处不可使用location.replace
      location.assign(to.fullPath);
    } else {
      next();
    }
  },
  methods: {
     // 获取用户信息
    getuserinfo() {
      let that = this;
      var url = "/api/member/index";
      var params = {};
      console.log("7766554", params);
      that.$axios
        .post(url, params)
        .then(res => {
          that.userinfo = res.data;
         
        })
        .catch(err => { });
    },
    // 收藏和取消收藏
    collect(index,id){
      let that = this;
      var url = "/api/forum/collect";
      var params = {
        forum_id: id
      };
      console.log("7766554", params);
      that.$axios
        .post(url, params)
        .then(res => {
          let newtiezilist=that.tiezilist;
          if( newtiezilist[index].is_collect==2){
              newtiezilist[index].is_collect=1;
              Toast("收藏成功")
          }else{
            newtiezilist[index].is_collect=2;
              Toast("取消收藏成功")
          }
         
          that.tiezilist=newtiezilist;
          that.$forceUpdate()
          that.bannertop = res.data;
        })
        .catch(err => {
          console.log(err);
        });
    },
   
   
   // 获取轮播图
    getbannertop() {
      let that = this;
      var url = "/api/sundry/get_slide2";
      var params = {};
      console.log("7766554", params);
      that.$axios
        .post(url, params)
        .then(res => {
          console.log(res, "000000");
          that.bannertop = res.data;
        })
        .catch(err => {
          console.log(err);
        });
    },
    // 确定选择城市
    onConfirm(value, index) {
      console.log(value, index);
      let that = this;
      this.showcity = false;
      if (changename(value) != "") {
        that.proname = changename(value);
      } else {
        that.proname = value;
      }
      that.page = 1;
      that.tiezilist = [];
      that.getprovinceid();
    },
    onCancel() {
      this.showcity = false;
    },
    // 选择城市
    selectpro() {
      this.showcity = true;
    },
    // 输入完成之后
    finishword() {
      this.page = 1;
      this.tiezilist = [];
      this.getteizilist();
    },
    onLoad() {
      // 异步更新数据
      // setTimeout 仅做示例，真实场景中一般为 ajax 请求
      setTimeout(() => {
        let newpage = this.page;
        newpage++;
        this.page = newpage;
        this.getteizilist();
        // 加载状态结束
        this.loading = false;
        // 数据全部加载完成
        if (this.showpull == false) {
          this.finished = true;
        }
      }, 1000);
    },
    getlocation() {
      console.log(999999);
    },
    // 获取appid
    getappid() {
      let that = this;
      console.log(34734894890);
      let urlk = window.location.href;
      var url = "/api/user/get_jssdk";
      let param = {
        url: urlk
      };

      that.$axios
        .post(url, param)
        .then(function (res) {
          console.log(res, "jssdkjsskd");
          wx.config({
            debug: false,
            appId: res.data.appId, // 和获取Ticke的必须一样------必填，公众号的唯一标识
            timestamp: res.data.timestamp, // 必填，生成签名的时间戳
            nonceStr: res.data.nonceStr, // 必填，生成签名的随机串
            signature: res.data.signature, // 必填，签名，见附录1
            //需要分享的列表项:发送给朋友，分享到朋友圈，分享到QQ，分享到QQ空间
            jsApiList: ["imagePreview","geoLocation"]
          });

          wx.ready(function() {
            wx.getLocation({
              type: "gcj02", // 默认为wgs84的gps坐标，如果要返回直接给openLocation用的火星坐标，可传入'gcj02'
              success: function (res) {
                console.log(res, "获取地理位置");
                var url =
                  "https://restapi.amap.com/v3/geocode/regeo?key=735d888fa7a9599eea4de210edc32335&location=" +
                  res.longitude +
                  "," +
                  res.latitude +
                  "&output=JSON&batch=false&roadlevel=0";
                that.$http
                  .get(url)
                  .then(mapres => {
                    console.log(mapres, "详细地址");
                  })
                  .catch(function (maperr) {
                    that.proname = maperr.regeocode.addressComponent.province;
                    if (changename(that.proname) != "") {
                      that.proname = changename(that.proname);
                    }
                    localStorage.setItem("proname", that.proname);
                    that.getprovinceid();
                  });
              }
            });
          });
        })
        .catch(function (err) {
          console.log(err);
        });
    },

    // 根据城市名字获取id
    getprovinceid() {
      let that = this;
      var url = "/api/question/get_area";
      var params = {
        province_name: that.proname
      };
      console.log("7766554", params);
      that.$axios
        .post(url, params)
        .then(res => {
          console.log(res, "000000");
          that.province_id = res.data.id;
          that.tiezilist = [];
          that.page = 1;
          // 获取论坛列表
          this.getteizilist();
        })
        .catch(err => {
          console.log(err);
        });
    },
    // 获取分类列表
    gettiezikind() {
      let that = this;
      console.log(34734894890);
      let urlk = window.location.href;
      var url = "/api/forum/get_forum_category";
      let param = {
          type:2
      };
      that.$axios
        .post(url, param)
        .then(function (res) {
          that.tiezikind = res.data;
          console.log(that.tiezikind);
        })
        .catch(function (err) {
          console.log(err);
        });
    },

    // 获取帖子列表
    getteizilist() {
      let that = this;
      console.log(34734894890);
      let urlk = window.location.href;
      var url = "/api/forum/get_forum";
      let param = {
        province_id: that.province_id,
        search_type: "",
        keyword: that.keyword,
        type: that.type,
        order: that.fenlei,
        page: that.page,
        pageNum: 10
      };

      that.$axios
        .post(url, param)
        .then(function (res) {
          that.tiezilist = that.tiezilist.concat(res.data);
          that.tiezilist.forEach(function (value, index, array) {
            value.content = text(value.content);
          });
          if (that.page > 1) {
            if (res.data.length == 0) {
              that.showpull = false;
            }
          }
          setTimeout(function(){
            that.showlist=true
          },200)
          console.log(that.tiezilist);
          that.tiezilist.forEach(function(value,index,array){
              value.content=richTextFormat(value.content)
          })
          that.tiezilist=that.tiezilist;
          that.$forceUpdate()
        })
        .catch(function (err) {
          console.log(err);
        });
    },
    // 论坛详情
    luntandetail(item) {
      this.$router.push({
        path: "/tiezidetail",
        query: { id: item.id }
      });
    },
    // 点赞和取消点赞
    praisedian(item, index) {
      let that = this;
      if (that.tiezilist[index].is_praise == 2) {
        Toast("点赞成功");
        that.tiezilist[index].is_praise = 1;
        that.tiezilist[index].praise = that.tiezilist[index].praise + 1;
      } else {
        Toast("取消点赞成功");
        that.tiezilist[index].is_praise = 2;
        that.tiezilist[index].praise = that.tiezilist[index].praise - 1;
      }

      that.tiezilist = that.tiezilist;

      var url = "/api/forum/praise";
      var params = {
        forum_id: item.id
      };
      console.log("参数", params);
      that.$axios
        .post(url, params)
        .then(res => {
          console.log(res);
        })
        .catch(err => {
          console.log(err);
        });
    },
    // 进入video
    govideo(src) {
      console.log(src);
      this.$router.push({
        path: "/videoplay",
        query: { url: src }
      });
    },
    getfen(id) {
      this.fenlei = id;
      this.page = 1;
      this.tiezilist = [];
      this.getteizilist();
    },
    hidetanceng() {
      this.showpublish = false;
    },
    // 预览图片
    previewimg(index, indexk, item) {
      wx.previewImage({
        current: item, // 当前显示图片的http链接
        urls: this.tiezilist[index].images // 需要预览的图片http链接列表
      });
    },
    duanshipin(id, item) {
      console.log(id, item.id);
      if (item.id == 1) {
        this.$router.push({
          path: "/duanshipinlist",
          query: {
            id: item.id
          }
        });
      } else if (item.id == 2) {
        this.$router.push({
          path: "/duanshipinlist",
          query: {
            id: item.id
          }
        });
      } else if (item.id == 3) {
        this.$router.push({
          path: "/duanshipinlist",
          query: {
            id: item.id
          }
        });
      } else if (item.id == 4) {
        this.$router.push({
          path: "/duanshipinlist",
          query: {
            id: item.id
          }
        });
      } 
       else if (item.id == 5) {
        this.$router.push({
          path: "/zhongmianzixun"
        });
      } else if (item.id == 6) {
        this.$router.push({
          path: "/articledetail",
          query: {
            name: '中面资质'
          }
        });
      }

      else if (item.id == 7) {
        this.$router.push({
          path: "/tousuweiquan"
        });
      }

      else if (item.id == 8) {
        this.$router.push({
          path: "/mykaoshi"
        });
      }

      else if (item.id == 8) {
        this.$router.push({
          path: "/mykaoshi"
        });
      }
    }
  }
};
</script>

<style scoped>
@import "../../style/homepage.css";
.van-picker {
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 999;
  width: 100%;
}
.nodata {
  color: #999;
  font-size: 0.28rem;
  text-align: center;
  margin: 2rem auto 0;
}
</style>