<template>
	<view class="tabbar-page tabbar-page-padding">
		<view class="w100 h-186" style="background-image: linear-gradient(to bottom,#F2BCBF,#F7F6FA);">
			<uni-nav-bar :title="tabTitle" :border="false" backgroundColor="transparent" class="fw-b"></uni-nav-bar>
		</view>
		<view class="w100 rows rowsm rowsb">
			<scroll-view scroll-y="true" class="w-180 mr-20 bgff br-20 tabbar-scroll-area">
				<view class="w100 h-90 rows rowsm rowsc" :class="ids==item.id?'col fw-b':'col333'" v-for="(item,index) in types" :key="index"
				@click="onSel(index,item)">
					<text class="fs-26 one_overflow">{{item.name}}</text>
				</view>
			</scroll-view>
			<view class="rows rowsl">
				<scroll-view scroll-y="true" class="w-542 tabbar-scroll-area">
					<view class="rows rowsl" v-if="list.length>0">
						<view class="w-542 rows rowsm mb-30 mr-15" v-for="(item,index) in list" :key="index"
						@click="$tools.goNext(`/pageOne/indexs/detail?id=${item.id}`)">
							<image class="w-168 h-168 br-20 mr-20" :src="$tools.oss(item.image)" mode="aspectFill"></image>
							<view class="h-168 rows rowsl rowsb">
								<text class="fs-28 fw-b two_overflow">{{item.name}}</text>
								<view class="w100 rows rowsm rowsb w-340">
									<text class="fs-30 fw-b">￥{{item.price}}</text>
									<text class="fs-24 col888">销量{{item.sales}}</text>
								</view>
							</view>
						</view>
					</view>
					<view class="w100 rows rowsc h-600 rowsm" v-else>
						<image class="w-436 h-366" src="/static/other/5.png" mode=""></image>
					</view>
				</scroll-view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				select: 0,
				types: [],
				list: [],
				ids: '',
				promotionUnlocked: false
			}
		},
		onLoad(e) {
			this.ids = e.id
			this.syncPromotionStatus()
			this.category()
		},
		onShow() {
			this.syncPromotionStatus()
			this.syncCustomTabBar()
			if (this.types.length === 0) {
				this.category()
			}
		},
		computed: {
			tabTitle() {
				return this.promotionUnlocked ? '分类' : '商城'
			}
		},
		methods: {
			syncPromotionStatus() {
				this.promotionUnlocked = this.$tools.getPromotionUnlocked()
			},
			syncCustomTabBar() {
				this.$tools.setTabbarSelectedPath('/pages/tabbar/sort')
				if (typeof this.getTabBar === 'function') {
					const tabBar = this.getTabBar()
					if (tabBar && typeof tabBar.syncPromotionStatus === 'function') {
						setTimeout(() => {
							tabBar.syncPromotionStatus('/pages/tabbar/sort')
						}, 0)
					}
				}
			},
			onSel(index, item) {
				this.ids = item.id
				this.select = index
				this.shop()
			},
			category() {
				this.$tools.axios('POST', 'shop/category').then(res => {
					this.types = res.data
					if (!this.ids) {
						this.ids = res.data[this.select].id
					}
					this.shop()
				})
			},
			shop() {
				this.$tools.axios('POST', 'shop/shop', {
					category_id: this.ids,
				}).then(res => {
					this.list = res.data
				})
			}
		}
	}
</script>

<style>
	page{
		background-color: #F7F6FA;
	}
</style>
