<template>
	<view class="text-center pd-b-px-55">
		<van-sticky>
			<van-nav-bar
					  title="店铺"
					  left-arrow
					  @click-left="onClickLeft"
			>
				<template #left>
					<van-icon name="arrow-left" size="25" color="#323233" />
				</template>
			</van-nav-bar>
			<div class="shop_body">
				<div style="display: flex;padding: 1.3rem">
					<img style="width: 6rem;height: 3.6rem;border-radius: 3rem"
					     :src="state.brandInfo.imgPath" alt="">
					<div class="shop_title">
						<p>{{state.brandInfo.brandName}}</p>
						<p style="font-size: 12px">粉丝：{{state.brandInfo.favCount}}</p>
					</div>
				</div>
				<div class="about">
					<span v-if="!state.brandInfo.isFav" @click="brandFav">+关注</span>
					<span v-else @click="brandDel">已关注</span>
				</div>
			</div>
			<van-tabs v-model:active="state.active" color="#ff6600" line-width="206rpx"
				    title-active-color="#ff6600" @click-tab="changeTab">
				<van-tab title="全部商品">
				</van-tab>
				<van-tab title="新品">
				</van-tab>
			</van-tabs>
		</van-sticky>
		<div style="margin-top: .2rem"></div>
		<van-list :loading="state.good.loading" :finished="state.good.finished" finished-text="没有更多了" offset="10"
			    @load="onGoodLoad">
			<van-grid :center="false" :column-num="1">
				<van-grid-item class="text-left" v-for="(item, index) in state.good.list" :key="index"
						   @click="goto(`/pages/good/detail?skuId=${item.skuId}&spuId=${item.spuId}`)">
					<van-row>
						<van-col span="7" style="position: relative">
							<van-image class="self_center" width="200rpx" height="200rpx" lazy-load
								     :src="item.mainImg" />
							<!--店铺活动角标-->
							<div class="sign" v-if="item.subScriptImgUrl">
							<img :src="item.subScriptImgUrl" alt="" />
							<div class="discount" style="color: rgba(247, 103, 67, 1)">{{item.discount}}</div>
							</div>
							<view style="position: absolute;left: 0;bottom: 0">
								<van-image v-if="item.zoneIcon" width="60rpx" lazy-load :src="item.zoneIcon" />
								<van-image v-if="item.isVideoIcon" class="pd-l-5" width="32rpx" height="32rpx" src="/static/img/play.png" />
							</view>
						</van-col>
						<van-col span="16" offset="1">

							<p class="text-s ellipsis line_over2 pd-t-10" style="height: 32px;margin-bottom:6px">
								{{ item.title }}
							</p>
							<div style="line-height: 1.2rem" v-if="item.salePrice !== null">
								<p class="text-ss">{{ item.size }}</p>
								<p class="text-gray text-ss"></p>
								<div v-if="item.actPrice">
									<div >
										<p class="text-gray text-ss " style="float: right;margin-right: 20px">
											零售价￥
											<text class="text-bold text-l">{{ item.productPrice }}</text>
										</p>
										<div class="text-gray text-ss line-through" >
									优惠价￥
									<text class="text-bold text-l">{{ item.salePrice }}</text>
								</div>
									</div>
								</div>
								<div v-if="!item.actPrice">
									<p class="text-gray text-ss line-through">零售价￥{{ item.productPrice
										}} </p>
									<p class="text-orange text-ss" >
										优惠价￥
										<text class="text-bold text-l">{{ item.salePrice }}</text>
									</p>
								</div>
								<p class="text-orange text-ss" v-if="item.actPrice">
									活动价￥
									<text class="text-bold text-l">{{ item.actPrice }}</text>
								</p>
							</div>
							<div style="line-height: 1.2rem" v-else>
								<p class="text-ss">{{ item.size }}</p>
								<p class="text-gray text-ss"></p>
								<p class="text-gray text-ss line-through"
								   style="font-size: 15px;margin-top: 5px" v-if="item.actPrice">
									零售价￥
									<text class="text-bold text-l">{{ item.productPrice }}</text>
								</p>
								<p class="text-orange text-ss"
								   style="color: #ff8b3e;font-size: 15px;margin-top: 5px" v-else>
									零售价￥
									<text class="text-bold text-l">{{ item.productPrice }}</text>
								</p>
								<p class="text-orange text-ss"
								   style="color: #ff8b3e;font-size: 15px;margin-top: 5px" v-if="item.actPrice">
									活动价￥
									<text class="text-bold text-l">{{ item.actPrice }}</text>
								</p>
							</div>
						</van-col>
					</van-row>
				</van-grid-item>
			</van-grid>
		</van-list>
		<view v-if="state.good.fail" class="text-ss text-gray pd-50" @click="failReset">请求失败，点击重试
			<van-icon name="replay" />
		</view>
		<view class="fix_rb">
			<van-image width="40px" class="btn toTop" :class="{ 'show': state.showToTop }"
				     src="/static/img/rb_top.png"
				     @tap="gotoTop" />
		</view>
	</view>
</template>

<script setup lang="ts">
    import api from "@/api";
    import {onMounted, reactive, getCurrentInstance} from 'vue';
    import {onPageScroll} from '@dcloudio/uni-app'

    const state = reactive({
        showToTop: false,
        brandInfo: {},
        skuId: '',
        params: {},
        active: 0,
        good: {
            loading: false,
            finished: false,
            fail: false,
            page: 0,
            list: [] as any
        }
    })
    onMounted(() => {
        state.params.brandId = getCurrentInstance().ctx.$page.options.brandId || ''
        getBrandOtherInfo()
    });

    function gotoTop() {
        uni.pageScrollTo({
            scrollTop: 0
        });
    }

    onPageScroll(e => {
        state.showToTop = e.scrollTop > 100
    })

    function brandDel() {
        api.brandDel({
            brandIds: [state.params.brandId],
        }).then(res => {
            getBrandOtherInfo()
        })
    }

    function brandFav() {
        api.brandFav({
            brandId: state.params.brandId,
            link: uni.getStorageSync('subdomain'),
        }).then(res => {
            getBrandOtherInfo()
        })
    }

    function onClickLeft() {
        history.back()
    }

    function goto(url: any) {
        url && uni.navigateTo({url})
    }

    function changeTab(e) {
        state.good.list = []
        state.good.page = 0
        if (e.name == 0) {
            state.params['sortType'] = 0
        }
        if (e.name == 1) {
            state.params['sortType'] = 1
        }
        onGoodLoad()
    }

    function getBrandOtherInfo() {
        api.getBrandOtherInfo({
            brandId: state.params.brandId
        }).then(res => {
            state.brandInfo = res
        })
    }

    function onGoodLoad() {
        if (state.good.loading || state.good.fail) return
        state.good.loading = true
        ++state.good.page
        api.getBrandList({
            ...state.params,
            pageSize: 20,
            pageNum: state.good.page,
            link: uni.getStorageSync('subdomain'),
        }).then((data: any) => {
            if (!data||!data.hasNextPage){
                state.good.finished = true
            }
            state.good.list.push(...data.list)
        })
            .catch(() => {
                state.good.fail = true
            })
            .finally(() => {
                state.good.loading = false
            })
    }

    function failReset() {
        state.good.page -= 1
        state.good.finished = false
        state.good.fail = false
        onGoodLoad()
    }
</script>

<style lang="scss" scoped>
	.fix_rb {
		position: fixed;
		bottom: 75px;
		right: 12px;
		z-index: 6;
		transition: all ease-in-out .2s;
		.toTop {
			opacity: 0;

			&.show {
				opacity: 1;
			}
		}
	}

	.shop_body {
		background: url("/static/img/brandShop_bg.png") no-repeat center 0px;
		background-position: center 0px;
		background-size: cover;
		height: 6rem;
		/*background: linear-gradient(to right, #ff744b, #f9a281);*/
		position: relative;
		.shop_title {
			text-align: left;
			line-height: 1.6rem;
			margin-left: 1rem;
			margin-top: .1rem;
			color: #ffffff;
			font-weight: 500;
		}
	}

	.about {
		border-radius: 20px;
		border: 1px solid #ff6800;
		padding: 8px 20px;
		position: absolute;
		top: 36%;
		right: 5%;
		background: #fc6820;
		font-size: 12px;
		color: #ffffff;
	}

	:root {
		--van-sidebar-selected-border-height: 30px;
	}

	.search_bar {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		width: 100vw;
		z-index: 5;
	}

	.banner_top {
		height: 43.5vw;
	}

	.banner_afterTop,
	.banner_afterTap {
		height: 20vw;
	}

	.block_title {
		margin: 40 rpx auto 25 rpx auto;
		width: 60vw;
	}
</style>
