<template>
  <view>
    <custom-nav-bar position="fixed" color="black" left-text="我的收藏" left-arrow />

    <view class="life-section">
      <van-tabs :active="tabs.active" @click-tab="onChange($event, { tagId: 'collectionTabs' })" id="collectionTabs"
        line-width="40px">
        <van-tab :title="key.label" :name="key.value" :data-item="key" v-for="(key, index) in tabs.typeList" :key="index">
          <view v-if="myInfoPageList.length !== 0">
            <view  class="life-conent" @tap="headleDetails" :data-item="item"
              v-for="(item, index1) in myInfoPageList" :key="index1">
              <image class="life-conent-image" :src="item.merchantPhoto"></image>

              <view class="life-conent-article">
                <view class="life-conent-title uniline">{{ item.merchantName }}</view>
                <view class="life-conent-block text-line-3">{{ item.merchantIntroduce }}</view>
              </view>
            </view>
            <view v-if="myInfoPageList.length == 0">
              <van-empty description="暂无数据" />
            </view>
          </view>
        </van-tab>
      </van-tabs>
    </view>
  </view>
</template>

<script>
  // const app = getApp();
  // const {
  //   publicApi,
  //   myApi
  // } = app.globalData.api;
  import * as myApi from '@/api/myApi';
  import * as publicApi from '@/api/publicApi';
  export default {
    components: {},
    data() {
      return {
        tabs: {
          active: 0,
          merchantType: 1,
          typeList: []
        },
        params: {
          pageNo: 1,
          pageSize: 10
        },
        myInfoPageList: []
      };
    },
    /**
     * 生命周期函数--监听页面加载
     */
    onLoad() {
      this.getmerchantTypeApi();
      this.myInfoPageApi();
    },
    methods: {
      /**
       * 接口
       */
      async getmerchantTypeApi() {
        const res = await publicApi.getDictDataApi({
          dictType: 'merchant_type',
          pageNo: 1,
          pageSize: 30
        });
        if (res.data) {
          this.tabs = {
            ...this.tabs,
            typeList: res.data.list.reverse()
          }
        }
      },

      async myInfoPageApi() {
        const {
          pageNo,
          pageSize
        } = this.params;
        const res = await myApi.myInfoPageApi({
          merchantType: this.tabs.merchantType,
          pageNo: pageNo,
          pageSize: pageSize
        });
        if (res.data) {
          this.myInfoPageList = res.data.list
        }
      },

      onChange(event, _dataset) {
        /* ---处理dataset begin--- */
        // this.handleDataset(event, _dataset);
        /* ---处理dataset end--- */
        console.log(event)
        const {
          typeList
        } = this.tabs;
        this.tabs = {
          typeList: typeList,
          active: event.name,
          merchantType: typeList[event.name].value
        }
        this.myInfoPageApi();
      },

      // 进入详情页
      headleDetails(event) {
        const {
          referId
        } = event.currentTarget.dataset.item;
        uni.navigateTo({
          url: `/packages/public/pages/details/details?name=店铺详情&referId=${referId}`
        });
      }
    }
  };
</script>
<style lang="less">
  .life-section {
    padding: 14rpx 24rpx 0;

    .title {
      font-size: 36rpx;
      font-weight: 500;
      color: #000000;
      line-height: 36rpx;
      position: relative;
      z-index: 1;
      padding-left: 6rpx;
      justify-content: space-between;

      .block {
        font-size: 26rpx;
        font-weight: 400;
        color: #999999;
      }

      &::after {
        content: '';
        position: absolute;
        left: 0;
        bottom: 0;
        z-index: -1;
        width: 175rpx;
        height: 10rpx;
        background: var(--title-guides-color);
        border-radius: 2rpx;
      }
    }
  }

  .van-tabs__wrap {
    border-bottom: 1px solid #c1c1c1;
  }

  .life-conent {
    margin-top: 37rpx;
    display: flex;
    justify-content: space-between;
    padding-bottom: 24rpx;
    border-bottom: 1px solid #efefef;

    .life-conent-image {
      width: 160rpx;
      height: 160rpx;
      border-radius: 10rpx;
    }

    .life-conent-article {
      flex: 1;
      margin-left: 24rpx;

      .life-conent-title {
        font-size: 30rpx;
        font-weight: 500;
        color: #333333;
        line-height: 30rpx;
      }

      .life-conent-block {
        margin-top: 21rpx;
        font-size: 26rpx;
        font-weight: 400;
        color: #666666;
        line-height: 38rpx;
      }
    }
  }
</style>