<template>
  <div class="container">
    <div class="hometop">
      <div class="hometopbar flextwo">
        <img
          src="../../../assets/touxiang_img@2x.png"
          alt=""
          class="homelogo"
        />
        <div class="homesearch flexone">
          <!-- <img src="../../../assets/sousuo.png" alt="" class="souimg" /> -->
          <div class="souenter">请输入关键词搜索</div>
        </div>
        <div class="searchpro flexone" @click="selectpro">
          <div class="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>
            <div class="bannerimg">
              <img src="../../../assets/banner.png" alt="" />
            </div>
          </van-swipe-item>
          <van-swipe-item>
            <div class="bannerimg">
              <img src="../../../assets/banner.png" alt="" />
            </div>
          </van-swipe-item>
          <van-swipe-item>
            <div class="bannerimg">
              <img src="../../../assets/banner.png" alt="" />
            </div>
          </van-swipe-item>
          <van-swipe-item>
            <div class="bannerimg">
              <img src="../../../assets/banner.png" alt="" />
            </div>
          </van-swipe-item>
        </van-swipe>
      </div>
    </div>

    <div class="homepagebox ">
      <div class="homekind flexone">
        <div
          class="homepageboxitem flexfour"
          @click="duanshipin(1)"
          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 == 1 ? 'fenleiactive' : ''"
          @click="getfen(1)"
        >
          最新
        </div>
        <div
          class="fenleiword"
          :class="fenlei == 2 ? 'fenleiactive' : ''"
          @click="getfen(2)"
        >
          最热
        </div>
        <div
          class="fenleiword"
          :class="fenlei == 3 ? 'fenleiactive' : ''"
          @click="getfen(3)"
        >
          我的
        </div>
      </div>
      <!-- 帖子列表 -->
      <div class="tiezhlist">
        <van-list
          v-model="loading"
          :finished="finished"
          finished-text="没有更多了"
          @load="onLoad"
        >
          <div
            class="tieziitem"
            v-for="(item, index) in tiezilist"
            :key="index"
          >
            <div class="tiezitop flexone">
              <div class="tieziimg">
                <img :src="item.user.avatar" alt="" />
              </div>
              <div class="tieziright">
                <div class="tiezirighttop flex">
                  <div>
                    <div class="tieziming">{{ item.user.nickname }}</div>
                    <div class="tiezifen">30分钟</div>
                  </div>

                  <div>
                    <div class="vipimg">
                      <img src="../../../assets/vip_icon@2x.png" alt="" />
                      <div class="vipname">VIP1</div>
                    </div>
                    <div class="tiezizhuan">面坊转让</div>
                  </div>
                  <img
                    src="../../../assets/banggong_icon@2x.png"
                    class="banggongimg"
                    alt=""
                  />
                  <img
                    src="../../../assets/peisong_icon@2x.png"
                    class="banggongimg"
                    alt=""
                  />
                  <img
                    src="../../../assets/yirenzheng_icon@2x.png"
                    class="banggongimg"
                    alt=""
                  />
                </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"
                />
                <img
                  src="../../../assets/weishoucang_icon@2x.png"
                  alt=""
                  class="starimg"
                />
              </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)"
                >
                  <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">
                  <img
                    src="../../../assets/zan_icon@2x.png"
                    alt=""
                    class="lunimg zanimg"
                    v-if="item.is_praise == 2"
                  />
                  {{ item.praise }}
                </div>
                <div class="teizipingitem flexone">
                  <img
                    src="../../../assets/cai_icon@2x.png"
                    alt=""
                    class="lunimg zanimg"
                  />
                  1005
                </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"
      @change="onChange"
      v-if="showcity"
    />

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

<script>
import Vue from "vue";
import wx from "weixin-js-sdk";
console.log(area);
console.log(wx);
import tabBar from "@/components/tabBar.vue";
import { Swipe, SwipeItem, List, Toast } from "vant";
import area from "../../../utils/area.js";
console.log(area, "地址地址");
Vue.use(List);
Vue.use(Swipe);
Vue.use(SwipeItem);
export default {
  components: {
    tabBar
  },
  data() {
    return {
      fenlei: 1,
      showpublish: false,
      tiezikind: [],
      tiezilist: [],
      loading: false,
      finished: false,
      showpull: true,
      page: 1,

      citylist: area.province_list,
      showcity: false
    };
  },
  created() {
    document.title = "中国面条";
    // 获取帖子分类
    this.gettiezikind();
    // 获取帖子列表
    this.getteizilist();
    // 获取jssdk
    this.getappid();
  },
  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: {
    onConfirm(value, index) {
      this.showcity = false;
    },
    onChange(picker, value, index) {},
    onCancel() {
      this.showcity = false;
    },
    // 选择城市
    selectpro() {
      this.showcity = true;
    },
    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: true,
            appId: res.data.appId, // 和获取Ticke的必须一样------必填，公众号的唯一标识
            timestamp: res.data.timestamp, // 必填，生成签名的时间戳
            nonceStr: res.data.nonceStr, // 必填，生成签名的随机串
            signature: res.data.signature, // 必填，签名，见附录1
            //需要分享的列表项:发送给朋友，分享到朋友圈，分享到QQ，分享到QQ空间
            jsApiList: ["getLocation"]
          });

          wx.getLocation({
            type: "wgs84", // 默认为wgs84的gps坐标，如果要返回直接给openLocation用的火星坐标，可传入'gcj02'
            success: function(res) {
              console.log(res, "获取地理位置");
              // var latitude = res.latitude; // 纬度，浮点数，范围为90 ~ -90
              // var longitude = res.longitude; // 经度，浮点数，范围为180 ~ -180。
              // var speed = res.speed; // 速度，以米/每秒计
              // var accuracy = res.accuracy; // 位置精度

              let url =
                "https://restapi.amap.com/v3/geocode/regeo?output=xml&location=" +
                res.longitude +
                "," +
                res.latitude +
                "&key=9acc6606cdf7174f62398f7fe460e104&radius=1000&extensions=all";
              // window.location.href = url;
              that.$axios({
                url: "https://restapi.amap.com/v3/geocode/regeo",
                type: "get",
                dataType: "jsonp",
                data: {
                  location: res.longitude + "," + res.latitude, //位置坐标:格式：location=lng<经度>,lat<纬度>
                  key: "9acc6606cdf7174f62398f7fe460e104", //开发密钥（Key）
                  extensions: "base" //base，返回基本地址信息；all 时会返回基本地址信息、附近 POI 内容、道路信息以及道路交叉口信息
                },
                success: function(res) {
                  console.log(res);
                  _this.positionName = res.regeocode.formatted_address; //结构化地址信息
                  _this.positionDesc = res.regeocode.formatted_address; //结构化地址信息
                },
                error: function(err) {
                  alert("服务端错误，请刷新浏览器后重试");
                }
              });
            }
          });
        })
        .catch(function(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 = {};

      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.order,
        page: that.page,
        pageNum: 10
      };

      that.$axios
        .post(url, param)
        .then(function(res) {
          that.tiezilist = that.tiezilist.concat(res.data);
          if (that.page > 1) {
            if (res.data.length == 0) {
              Toast("没有更多了~");
              that.showpull = false;
            }
          }
          console.log(that.tiezilist);
        })
        .catch(function(err) {
          console.log(err);
        });
    },
    // 进入video
    govideo(src) {
      console.log(src);
    },
    getfen(id) {
      this.fenlei = id;
    },
    hidetanceng() {
      this.showpublish = false;
    },
    duanshipin(id) {
      console.log(id);
      if (id == 1) {
        this.$router.push({
          path: "/duanshipinlist"
        });
      } else if (id == 2) {
        this.$router.push({
          path: "/banggonglist"
        });
      } else if (id == 3) {
        this.$router.push({
          path: "/mianfanglsit"
        });
      } else if (id == 4) {
        this.$router.push({
          path: "/zhenghunlist"
        });
      }
    }
  }
};
</script>

<style scoped>
@import "../../style/homepage.css";
.van-picker {
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 999;
  width: 100%;
}
</style>