<template>
  <view class="Circle_friends">
    <view class="circle_friends_wrapper">
      <zbpSwiper :isSelectPlace="true" @selectPlce="selectPlce" :location_Arr="locationArr"></zbpSwiper>
      <view class="shop_wrapper">
        <!-- locationArr.address_reference.town.id -->
        <navigator class="l_yun" hover-class="none"
          :url="`/pages/nongKe/supply_chain/supplier?type_id=10&street_id=${street_id}`"
          :style=" {'background-image': `url(${bgData[0].pic})`}">
          <view class=" text-name">
            <text>{{town}}</text>
            <view class="name_town">-供销综合云市场-</view>
          </view>
        </navigator>
        <view class="r_lihai" @click="go_shop" :style=" {'background-image': `url(${bgData[1].pic})`}">
          <view class="title">里海云仓</view>
        </view>
      </view>
      <view class="tabs_wrapper flex_a_c_j_sb">
        <view class="title flex_a_c">热点资讯</view>
        <navigator class="flex_a_c" hover-class="none" url="/pages/news_list/index">
          更多
          <view class="iconfont icon-gengduo3"></view>
        </navigator>
      </view>
      <view class="article_box">
        <block v-for="(item, index) in recoList.slice(0,2)" :key="index">
          <navigator :url='"/pages/news_details/index?id="+item.article_id' hover-class='none' class='article-item'>
            <view class='text'>
              <view class='name'>{{item.title}}</view>
              <view class="time">{{item.create_time}}</view>
            </view>
            <view class='pictrue'>
              <image :src='item.image_input'></image>
            </view>
          </navigator>
        </block>
      </view>

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

      <view class="goods">
        <block v-for="(item,index) in articleList" :key="index">
          <view class="goods_item" @click="gogogo(item)">
            <image class="goods_img" :src="item.image_input" 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}}</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>

    <!-- <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 zbpSwiper from '@/components/zbpSwiper'
  import { mapGetters } from 'vuex'
  import mTabbar from '@/components/m-tabbar/m-tabbar.vue'
  import { graphicStartApi } from '@/api/community.js'
  import { getArticleList, getArticleCategoryList, get_cloud_shop } from '@/api/api.js'
  import { getHotBanner } from '@/api/store.js'
  import { Toast } from '@/libs/uniApi'
  import { getGeocoder } from '@/api/store.js';
  export default {
    components: {
      mTabbar,
      zbpSwiper
    },
    data() {
      return {
        tabsData: {
          list: [],
          tabsActive: 0
        },
        town: '',
        emptyShow: false,
        articleList: [],
        recoList: [],
        street_id: '',
        bgData: [{ pic: '' }, { pic: '' }],
        store_id: '',
        locationArr: ({}),
        setrecommend_address: "",
        isYunCang: 0
      }
    },
    onLoad() {
      getHotBanner('good').then(res => {
        this.bgData = res.data
      })
      this.getArticle()
      getArticleList(19).then(res => {
        this.recoList = res.data.list
      })
      this.getTownAndStoreId()
    },
    onShow() {},
    computed: mapGetters(['location']),
    watch: {
      location: {
        handler(newVal, oldVal) {
          this.street_id = newVal.address_reference.town.id
          this.getCloudShopMerId(this.street_id)
          this.town = newVal.address_component.street ?? ''
        },
        immediate: true
      }
    },
    methods: {
      getTownAndStoreId() {
        const LOCA = this.location
        this.street_id = LOCA.address_reference.town.id
        this.getCloudShopMerId(this.street_id)
        this.town = LOCA.address_component.street ?? ''
      },
      selectPlce(e) {
        this.street_id = e.value[1].code
        this.town = e.value[1].name
        this.getCloudShopMerId(e.value[1].code)
      },
      getCloudShopMerId(id) {
        get_cloud_shop(id).then(res => {
          res.data.length > 0 ? this.isYunCang = 1 : this.isYunCang = 0
        })
      },
      navigat() {
        uni.navigateTo({
          url: '/pages/store/settledApply/settledApply'
        })
      },
      gogogo(item) {
        uni.navigateTo({
          url: '/pages/news_details/index?id=' + item.article_id
        })
      },
      go_shop() {
        if (this.isYunCang == 0) {
          return Toast('当前区域没有云仓库')
        }
        uni.navigateTo({
          url: `/pages/nongKe/cloud_entrepot/index?street=${this.street_id}&town=${this.town}`
        })
        // uni.navigateTo({
        //   url: '/pages/store/home/index?id=' + this.mer_id + '&LihaiYun=Lihai'
        // })
      },
      async getArticle() {
        let list = []
        const { data } = await getArticleCategoryList()
        data.map((item, index) => {
          if (item.title !== '推荐') {
            list.push(item)
          }
        })
        this.tabsData.list = list
        this.getArticleList(list[0].article_category_id)
      },
      async getArticleList(id) {
        const { data } = await getArticleList(id)
        this.articleList = data.list
      },
      // 点赞
      giveStart(item) {
        let status = item.status ? 0 : 1
        console.log('item', item);
        graphicStartApi(item.community_id, { status: status }).then(res => {
          Toast(res.message)
          this.getArticleList()
        })
      },
      tabsChange(item) {
        this.getArticleList(item.article_category_id)
        this.street_id = item.id
        this.tabsData.tabsActive = item.index
      },
    },
    onPullDownRefresh() {
      uni.stopPullDownRefresh()
    }
  }
</script>

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

  .shop_wrapper {
    height: 192.98rpx;
    width: 694.74rpx;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    margin-top: 0;

    .l_yun {
      width: 456.14rpx;
      border-radius: 16rpx;
      background-repeat: no-repeat;
      background-size: cover;
      overflow: hidden;
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: center;

      .text-name {
        margin-top: 14.04rpx;
        text-align: center;
        color: #fff;
        font-weight: bold;
        font-size: 29.82rpx;

        text {
          font-size: 40.35rpx;
        }
      }

      .yun_title {
        color: #B24322;
        background-color: #ffad99;
        height: 56.14rpx;
        clip-path: polygon(0% 0, 100% 0, 90% 100%, 0 100%);
        text-align: center;
        line-height: 56.14rpx;
        padding: 0 31.58rpx 0 21.05rpx;
        width: max-content;

        .iconlihai {
          font-size: 24.56rpx;
          margin-left: 16rpx;
        }
      }

      .text_cont {
        position: absolute;
        left: 21.05rpx;
        bottom: 47.37rpx;
        color: #7F1616;
        font-weight: 700;
        font-size: 31.58rpx;

        .name_town {
          font-size: 49.12rpx;
        }
      }
    }

    .r_lihai {
      width: 217.54rpx;
      height: 100%;
      font-size: 35.09rpx;
      padding-top: 28.07rpx;
      text-align: center;
      background-repeat: no-repeat;
      background-size: cover;
      box-sizing: border-box;
      border-radius: 16rpx;
      color: #fff;
      font-weight: bold;

      .title {
        margin-top: 105.26rpx;
      }
    }
  }

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

    .title {
      font-size: 31.58rpx;
      font-weight: bold;

      &::before {
        content: '';
        display: inline-block;
        width: 3px;
        height: 31.58rpx;
        background-color: #F84221;
        margin-right: 7.02rpx;
      }
    }
  }

  .article_box {
    height: 100%;
    width: 694.74rpx;
    margin: 0 auto;
    background-color: #fff;
    border-radius: 16rpx;
    padding: 0 24.56rpx;
    box-sizing: border-box;

    .title-box {
      height: 87.72rpx;

      text {
        font-size: 28.07rpx;
      }
    }

    .article-item {
      display: flex;
      // height: 175.44rpx;
      justify-content: space-between;
      border-bottom: 1px solid #f0f0f0;
      padding: 21.05rpx 0;

      .text {
        flex: 1;
        height: 122.81rpx;
        margin-right: 17.54rpx;
        font-size: 24rpx;
        color: #999;
        display: flex;
        flex-direction: column;
        justify-content: space-between;

        .name {
          font-size: 26.32rpx;
          color: #282828;
        }
      }

      .pictrue {
        width: 175.44rpx;
        height: 122.81rpx;

        image {
          width: 100%;
          height: 100%;
          border-radius: 8px;
        }
      }
    }
  }

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