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

      <zbpSwiper></zbpSwiper>

      <view class="tabs_wrapper">
        <u-tabs :list="tabsData.list" @click="tabsChange" :activeStyle="tabsData.activeStyle"
          :inactiveStyle="tabsData.inactiveStyle" lineHeight="0" 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)">
            <image class="goods_img" :src="item.image[0]" mode="aspectFill"></image>
            <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>

    <!-- <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 {
    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
    },
    data() {
      return {
        bgColor: '',
        showPicker: false,
        columnData: [],
        show: false,
        swiper: {
          url: [{
            img: ''
          }],
          indicatorDots: true, // 显示面板指示点
          vertical: false, // 滑动方向是否为纵向
          autoplay: true, // 是否自动切换
          interval: 2000, // 自动切换时间间隔
          duration: 500 // 滑动动画时长
        },
        tabsData: {
          list: [],
          tabsActive: 0,
          activeStyle: {
            color: '#fff',
            fontWeight: 'bold',
            borderRadius: '100px',
            backgroundColor: '#F84221',
            padding: '15.79rpx 21.05rpx'
          },
          inactiveStyle: {
            color: '#000',
            padding: '15.79rpx 21.05rpx',
          }
        },
        where: {
          category_id: 0,
          page: 1,
          limit: 30
        },
        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() {},
    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 APP
            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 => {
          Toast(res.message)
          this.getGoods()
        })
      },
      dianji() {
        this.show = !this.show
      },
      // 获取发现商品
      getGoods: function() {
        // 数据写死：默认社区数据 category_id=69&page=1&limit=30
        graphicLstApi(this.where).then(res => {
          this.cateGoods = res.data.list
          res.data.list.length <= 0 ? this.emptyShow = true : this.emptyShow = false
        })
      },
      /*获取分类列表*/
      async getCateList() {
        const {
          data
        } = await getTopicList()
        this.tabsData.list = [{
          cate_name: "推荐",
          category_id: 0
        }, {
          cate_name: "视频",
          category_id: -1,
          children: []
        }, ...data]
      },
      tabsChange(item) {
        this.where.category_id = item.category_id
        this.getGoods()
        this.street_id = item.id
        this.tabsData.tabsActive = item.index
        if (item.index == 1) {
          uni.navigateTo({
            url: '/pages/short_video/nvueSwiper/index?id=' + '136'
          })
        }
      },
      selfLocation() {
        uni.getLocation({
          type: 'gcj02',
          success: (res) => {
            let latitude, longitude;
            latitude = res.latitude.toString();
            longitude = res.longitude.toString();
            getGeocoder({
              lat: latitude,
              long: longitude
            }).then(res => {
              this.$store.commit('setLocation', res.data)
              this.street = res.data.address_component.street
            }).catch(err => {
              uni.showToast({
                title: err,
                icon: 'none'
              })
            })
          },
          fail: (err) => {
            uni.showToast({
              title: err.errMsg,
              icon: 'none',
              duration: 1000
            });
          }
        });
      },
    }
  }
</script>

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

  // 顶部
  .head-wrapper {
    position: relative;
    padding-top: 78.95rpx;
    overflow: hidden;

    .color-lump {
      z-index: 1;
      position: absolute;
      bottom: -86px;
      left: 50%;
      transform: translate(-50%, 0);
      width: 102%;
      height: 133px;
      border-radius: 30px 30px 0 0;
      background-color: #fff;
    }

    .bg-img {
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0;
      /* #ifdef MP || APP-PLUS */
      z-index: -1;
      /* #endif */
      /* #ifdef H5 */
      z-index: 0;
      /* #endif */
      z-index: 0;
      filter: blur(0);
      overflow: hidden;

      img {
        width: 100%;
        height: 100%;
        filter: blur(30rpx);
        transform: scale(1.5);
      }
    }

    .site-box {
      margin: 0 auto;
      width: 694.74rpx;
      height: 66.67rpx;
      margin-bottom: 26.32rpx;
      position: relative;

      // 位置
      .place_wrapper {
        color: #fff;
        margin-right: 24.56rpx;
        font-size: 31.58rpx;

        .town_name {
          margin-left: 10.53rpx;
        }
      }

      .iconfont {
        font-size: 35.09rpx;
      }
    }

    .my-main {
      transition: background-color .5s ease;
    }

    .search_content {
      margin: 0 auto;
      width: 694.74rpx;
      height: 61.4rpx;
      padding: 2px 2px 2px 21.05rpx;
      border-radius: 100px;
      background: #fff;
      margin-bottom: 17.54rpx;
      position: relative;
      box-sizing: border-box;

      .icon-sousuo {
        font-size: 26.32rpx;
        font-weight: bold;
        color: #c8c7c6;
        margin-right: 17.54rpx;
      }

      .search_btn {
        color: #fff;
        width: 105.26rpx;
        height: 52.63rpx;
        line-height: 52.63rpx;
        background: #f84221;
        border-radius: 100px;
        font-size: 28.07rpx;
      }
    }

    .supply_chains-head {
      margin-bottom: 31.58rpx;
      position: relative;
      z-index: 2;

      .swiper {
        width: 694.74rpx;
        height: 242.11rpx;
        margin: 0 auto;

        .swi_item {
          width: 100%;
          height: 242.11rpx;
        }
      }
    }
  }

  .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;
  }



  .bg_color {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    width: 100%;
    height: 940.35rpx;
    background: url("https://lihai001.oss-cn-chengdu.aliyuncs.com/public/kk/luzhou/static4/home_bg.png") no-repeat;
    background-size: cover;
  }

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

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

    ::v-deep .u-tabs__wrapper__nav__item {
      padding: 0 !important;
    }
  }

  .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;
      }

      .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>