<template>
  <div class="container">
    <div class="tiezitop tiezilisttopk">
      <div class="hometopbark hometopbackk flextwo">
        <div class="homesearch flexone">
          <img src="../../../assets/sousuo.png" alt="" class="souimg" />
          <div class="souenter">
            <input
              type="text"
              placeholder="请输入关键词搜索"
              v-model="keyword"
              @blur="finish"
            />
          </div>
        </div>
        <div class="searchpro flexone" @click="showprovince">
          <div class="proname">{{ proname }}</div>

          <img src="../../../assets/xiasanjiao.png" alt="" class="xiasanjiao" />
        </div>
      </div>
    </div>
    <!-- 帮工招聘 -->
    <div class="tiezikind flextwo" v-if="kindtype == 2">
      <div
        class="tiezikinditem"
        :class="search_type == 1 ? 'tiezikindactive' : ''"
        @click="seltiekind(1)"
      >
        招聘
      </div>
      <div
        class="tiezikinditem"
        :class="search_type == 2 ? 'tiezikindactive' : ''"
        @click="seltiekind(2)"
      >
        求职
      </div>
    </div>
    <!-- 面坊转让 -->
    <div class="tiezikind flextwo" v-if="kindtype == 3">
      <div
        class="tiezikinditem"
        :class="search_type == 3 ? 'tiezikindactive' : ''"
        @click="seltiekind(3)"
      >
        求购
      </div>
      <div
        class="tiezikinditem"
        :class="search_type == 4 ? 'tiezikindactive' : ''"
        @click="seltiekind(4)"
      >
        转让
      </div>
    </div>
    <!-- 征婚交友 -->
    <div class="tiezikind flextwo" v-if="kindtype == 4">
      <div
        class="tiezikinditem"
        :class="search_type == 5 ? 'tiezikindactive' : ''"
        @click="seltiekind(5)"
      >
        找男友
      </div>
      <div
        class="tiezikinditem"
        :class="search_type == 6 ? 'tiezikindactive' : ''"
        @click="seltiekind(6)"
      >
        找女友
      </div>
    </div>
    <!-- 帖子列表 -->
    <div class="tiezhlist">
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
      >
        <tiezicontent :tiezilist="tiezilist" :showpull="showpull" />
      </van-list>
    </div>

    <!-- 选择器 -->
    <van-picker
      title="标题"
      show-toolbar
      :columns="citylist"
      @confirm="onConfirm"
      @cancel="onCancel"
      v-if="showcity"
    />
  </div>
</template>

<script>
import tiezicontent from "@/components/tiezicontent.vue";
import area from "../../../utils/area.js";
import { changename } from "../../../utils/base.js"; //城市去掉市
export default {
  components: {
    tiezicontent
  },
  data() {
    return {
      tiezisel: 1,
      showcity: false,
      citylist: area.province_list,
      tiezilist: [],
      showpull: true,
      loading: false,
      finished: false,
      proname: "",
      province_id: "",
      kindtype: "",
      search_type: "",
      keyword: "",
      page: 1
    };
  },
  created() {
    document.title = "短视频专区";
    // 分类id
    this.kindtype = this.$route.query.id;
    if (this.kindtype == 2) {
      // 帮工招聘
      this.search_type = 1;
    } else if (this.kindtype == 3) {
      //面坊转让
      this.search_type = 3;
    } else if (this.kindtype == 4) {
      //征婚交友
      this.search_type = 5;
    }
    // localStorage.setItem("proname", "天津");
    this.proname = localStorage.getItem("proname");
    this.getprovinceid();
  },
  methods: {
    // 显示省份
    showprovince() {
      this.showcity = true;
    },
    // 1 帮工2 招聘 3求购 4 转让 5 找男友 6 找女友
    seltiekind(id) {
      this.search_type = id;
      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);
    },

    // 关键词搜索
    finish() {
      this.page = 1;
      this.tiezilist = [];
      this.getteizilist();
    },
    // 确定选择城市
    onConfirm(value, index) {
      let tat = this;
      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();
    },

    // 根据城市名字获取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 => {
          that.province_id = res.data.id;
          that.tiezilist = [];
          that.page = 1;
          // 获取论坛列表
          this.getteizilist();
        })
        .catch(err => {
          console.log(err);
        });
    },

    // 获取论坛列表
    getteizilist() {
      let that = this;
      var url = "/api/forum/get_forum";
      var params = {
        search_type: that.search_type,
        keyword: that.keyword,
        province_id: that.province_id,
        type: that.kindtype,
        page: that.page,
        pageNum: 10
      };
      console.log("参数", params);
      that.$axios
        .post(url, params)
        .then(res => {
          console.log(res);
          that.tiezilist = that.tiezilist.concat(res.data);
          if (that.page > 1) {
            if (res.data.length == 0) {
              that.showpull = false;
            }
          }
           that.tiezilist.forEach(function(value,index,array){
              value.content=richTextFormat(value.content)
          })
          that.tiezilist=that.tiezilist;
          that.$forceUpdate()
        })
        .catch(err => {
          console.log(err);
        });
    },

    onCancel() {
      this.showcity = false;
    },
    tiezidetail() {
      this.$router.push({
        path: "/tiezidetail",
        query: {
          type: 3
        }
      });
    }
  }
};
</script>

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