<template>
  <view class="Circle_friends">
    <view class="circle_friends_wrapper">

      <zbpSwiper></zbpSwiper>

      <view class="tabs_wrapper">
        <u-tabs :list="tabsData.list" @click="tabsChange" lineColor="#F84221" keyName="cate_name"></u-tabs>
      </view>

      <view class="goods">
        <block v-for="(item,index) in cateGoods" :key="index">
          <view class="goods_item" @click="gogogo(item)">
            <view style="height: 294.74rpx;">
              <u--image :src="item.image[0]" width="342.11rpx" height="294.74rpx" :showLoading="true" lazyLoad fade
                duration="450">
                <template v-slot:loading>
                  <u-loading-icon color="#f5f5f5"></u-loading-icon>
                </template>
              </u--image>
            </view>
            <view class="botm">
              <view class="title">{{item.title}}</view>
              <view class="goods_info flex_a_c">
                <view class="l_info flex_a_c">
                  <image :src="(item.author && item.author.avatar) || '/static/images/f.png'" mode="aspectFill"
                    class="g_img"></image>
                  <view class="g_name">{{item.author && item.author.nickname}}</view>
                </view>
                <view class="nice_box" @click.stop="giveStart(item)">
                  <text class="iconfont" :class="item.relevance_id ? 'icon-shoucang1' : 'icon-dianzan'"></text>
                  <text class="collect">{{item.count_start}}</text>
                </view>
              </view>
            </view>
          </view>
        </block>
      </view>
      <view class="empty_wrapper" v-if="emptyShow">
        <u-empty :show="emptyShow" mode="list" icon="http://cdn.uviewui.com/uview/empty/list.png"></u-empty>
      </view>
    </view>

    <u-picker :defaultIndex="[0,0]" :show="showPicker" ref="uPicker" :columns="columnData" @confirm="confirm"
      @cancel="showPicker = false" @change="changeHandler" keyName="name"></u-picker>
    <u-loadmore :status="status" />
    <!-- <view class="bg_color"></view> -->

    <!-- <m-tabbar native>
      <template v-slot:tabbar_index_2>
        <view class="custom_style">
          <view class="custom_style_icon"></view>
        </view>
      </template>
    </m-tabbar> -->
  </view>
</template>

<script>
  import mTabbar from '@/components/m-tabbar/m-tabbar.vue'
  import zbpSwiper from '@/components/zbpSwiper'
  import easyLoadimage from '@/components/easy-loadimage/easy-loadimage.vue';
  import { getSlideAPI } from '@/api/lihai.js'
  import { graphicLstApi, getTopicList, graphicStartApi } from '@/api/community.js'
  import { getIndexData, getDiy } from '@/api/api.js'
  import { getGeocoder, merClassifly } from '@/api/store.js';
  import { getArea, getStreet } from '@/api/article.js';
  import { Toast } from '@/libs/uniApi'
  export default {
    components: {
      mTabbar,
      zbpSwiper,
      easyLoadimage
    },
    data() {
      return {
        status: 'loadmore',
        bgColor: '',
        showPicker: false,
        columnData: [],
        show: false,
        tabsData: {
          list: [],
          tabsActive: 0
        },
        where: {
          category_id: 0,
          page: 1,
          limit: 15
        },
        currentItemId: 69, // 默认获取 社区的数据 0 表示推荐 || 69 社区
        keyword: '',
        location: '',
        emptyShow: false,
        street: '',
        cateGoods: []
      }
    },
    onPullDownRefresh() {
      this.getCateList()
      this.getGoods()
      this.selfLocation()
      this.Area()
      uni.stopPullDownRefresh()
    },
    onLoad() {
      this.getCateList()
      this.getGoods()
      this.selfLocation()
      this.Area()
    },
    onShow() {},
    onReachBottom() {
      if (this.status == 'nomore') return;
      this.status = 'loading';
      this.where.page = ++this.where.page;
      this.getGoods()
    },
    methods: {
      confirm(e) {
        this.where.street_id = e.value[1].code
        this.showPicker = false
      },
      changeHandler(e) {
        const {
          columnIndex,
          value,
          values,
          index,
          picker = this.$refs.uPicker
        } = e;
        if (columnIndex === 0) {
          getStreet({
            area_code: value[0]['code']
          }).then(res => {
            this.$refs.uPicker.setColumnValues(1, res.data);
          });
        }
      },
      Area() {
        getArea({
          city_code: 510500
        }).then(res => {
          this.$refs.uPicker.setColumnValues(0, res.data);
          this.Street(res.data[0]['code']);
        });
      },
      Street(code) {
        getStreet({
          area_code: code
        }).then(res => {
          this.$refs.uPicker.setColumnValues(1, res.data);
        });
      },
      gogogo(item) {
        if (this.tabsData.tabsActive == 1) {
          uni.navigateTo({
            //#ifdef APP
            url: '/pages/short_video/appSwiper/index?id=' + item.community_id,
            //#endif
            //#ifndef MP || H5
            url: '/pages/short_video/nvueSwiper/index?id=' + item.community_id
            //#endif
          })
        } else {
          uni.navigateTo({
            url: '/pages/plantGrass/plant_detail/index?id=' + item.community_id
          })
        }
      },
      giveStart(item) {
        let status = item.relevance_id ? 0 : 1
        graphicStartApi(item.community_id, {
          status: status
        }).then(res => {
          if (item.relevance_id) {
            item.count_start--;
            item.count_start = item.count_start == 0 ? 0 : item.count_start
            item.relevance_id = false
          } else {
            item.count_start++;
            item.relevance_id = true
          }
        })
      },
      getGoods: function(item) {
		  console.log(item);
        graphicLstApi(this.where).then(res => {
          this.cateGoods.push(...res.data.list)
          if (res.data.list.length < this.where.limit) this.status = 'nomore'
          if (this.where.page == 1 && res.data.list.length <= 0) this.emptyShow = true
          if (item.index == 1) {
            uni.navigateTo({
              // #ifdef MP || H5
              url: '/pages/short_video/nvueSwiper/index?id=' + this.cateGoods[0].community_id
              // #endif
              // #ifdef APP
              url: `/pages/short_video/appSwiper/index?id=${this.cateGoods[0].community_id}`
              // #endif
            })
          }
        })
      },
      /*获取分类列表*/
      async getCateList() {
        const { data } = await getTopicList()
        this.tabsData.list = [{
          cate_name: "推荐",
          category_id: 0
        }, {
          cate_name: "视频",
          category_id: -1,
          children: []
        }, ...data]
      },
      tabsChange(item) {
        this.cateGoods = []
        this.where.category_id = item.category_id
        this.where.page = 1
        this.getGoods(item)
        this.street_id = item.id
        this.tabsData.tabsActive = item.index

      },
      selfLocation() {
        const that = this
        uni.getLocation({
          type: 'gcj02',
          timeout: '10',
          success: (res) => {
            let latitude, longitude;
            latitude = res.latitude.toString();
            longitude = res.longitude.toString();
            getGeocoder({ lat: latitude, long: longitude }).then(res => {
              that.$store.commit('setLocation', res.data)
              that.street = res.data.address_component.street
            }).catch(err => {
              uni.showToast({
                title: err,
                icon: 'none'
              })
            })
          },
          fail: (err) => {
            uni.showToast({
              title: "获取定位超时",
              icon: 'none',
              duration: 2000
            });
          }
        });
      },
    }
  }
</script>

<style lang="scss">
  page {
    // background: linear-gradient(180deg, #FFFFFF 0%, #F6F6F6 100%);
  }

  .Circle_friends {
    position: relative;
    padding: 0 0 87.72rpx 0;
    background: linear-gradient(180deg, #FFFFFF 0%, #F6F6F6 100%);
  }

  .circle_friends_wrapper {
    position: relative;
    z-index: 2;
  }


  .search_wrapper {
    width: 694.74rpx;
    margin: 0 auto;
  }

  .tabs_wrapper {
    width: 694.74rpx;
    margin: 0 auto;
    margin-bottom: 21.05rpx;
  }

  .empty_wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .goods {
    margin: 0 auto;
    width: 694.74rpx;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;

    .goods_item {
      width: 342.11rpx;
      height: 491.23rpx;
      border-radius: 8px;
      overflow: hidden;
      background-color: #fff;
      display: flex;
      flex-direction: column;
      margin-bottom: 10.53rpx;

      .goods_img {
        width: 100%;
        height: 294.74rpx;

        /deep/.easy-loadimage {
          width: 100%;
          height: 294.74rpx;
          // border-radius: 8rpx;
          position: relative;
        }
      }

      .botm {
        flex: 1;
        padding: 0 14.04rpx;
        padding-bottom: 21.05rpx;
        display: flex;
        flex-direction: column;
        justify-content: space-between;

        .title {
          margin: 12px 0;
          width: 100%;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
        }

        .goods_info {
          justify-content: space-between;

          .g_img {
            width: 60rpx;
            height: 60rpx;
            border-radius: 50%;
          }

          .g_name {
            margin-left: 8.77rpx;
            width: 100.63rpx;
            text-overflow: ellipsis;
            /* 溢出显示省略号 */
            overflow: hidden;
            /* 溢出隐藏 */
            white-space: nowrap;
            /* 强制不换行 */
          }

          .nice_box {
            display: flex;
            align-items: center;

            .isshow {
              color: #FE3530 !important;
            }

            .iconfont {
              font-size: 30rpx;
            }

            .icon-shoucang1 {
              color: #F84221;
            }

            .collect {
              font-size: 24rpx;
              margin-left: 5rpx;
            }
          }
        }
      }
    }
  }
</style>