<template>
  <page-layout class="user-like">
    <nav-bar title="我的点赞" @init="onInitNavbar"></nav-bar>
    <u-scroll-view>
      <view class="user-like-tabs-wrapper">
        <view class="user-like-tabs">
          <u-tabs :active.sync="tabActive" :tabs="tabs" @change="tabChange" />
        </view>
      </view>
      <view class="main-container">
        <view class="user-like-list" v-if="!loading">
          <template v-for="(item, index) in likeList">
            <template v-if="tabActive === 'exhibitor'">
              <exhibitor-item :item="item" :footer-hidden="true" :key="index" />
            </template>
            <template v-else>
              <exhibit-item :item="item" :footer-hidden="true" :key="index" />
            </template>
          </template>
        </view>
      </view>
    </u-scroll-view>
  </page-layout>
</template>

<script>
	import NavBar from '@/components/layout/nav-bar'
	import UTabs from '@/components/common/u-tabs'
	import UScrollView from '@/components/common/u-scroll-view'
	import ExhibitItem from '@/pages/exhibitor/components/exhibit-item.vue'
	import ExhibitorItem from '@/pages/exhibitor/components/exhibitor-item.vue'
	import {
		getExhibitorLikeList,
		getExhibitLikeList
	} from '@/api/user'
  import PageLayout from "@/components/layout/page-layout";

	export default {
		options: {
			styleIsolation: 'shared'
		},
		components: {
      PageLayout,
			NavBar,
			UTabs,
			UScrollView,
			ExhibitItem,
			ExhibitorItem
		},
		computed: {},
		data() {
			return {
				loading: false,
				tabActive: 'exhibitor',
				tabs: [{
					label: '展商',
					value: 'exhibitor'
				}, {
					label: '展品',
					value: 'exhibit'
				}],
				likeList: [],
			}
		},
		created() {
			this.checkAuth('/pages/user/like')
			this.loadFontFace('Poppins')
			this.getExhibitorLikeInfo()
		},
		onShow() {},
		methods: {
			tabChange(e) {
				this.tabActive = e.detail.value
				if (this.tabActive === 'exhibitor') {
					this.getExhibitorLikeInfo()
				} else {
					this.getExhibitLikeInfo()
				}
			},
			getExhibitorLikeInfo() {
				this.loading = true
				getExhibitorLikeList().then(res => {
					this.likeList = res.data.data
					this.loading = false
				})
			},
			getExhibitLikeInfo() {
				this.loading = true
				getExhibitLikeList().then(res => {
					this.likeList = res.data.data
					this.loading = false
				})
			}
		}
	}
</script>

<style lang="scss">
	@import "@/static/style/pages/user-like.scss";
</style>
