<template>
	<div class="container" style="background: #ffffff">
		<van-sticky>
			<view class="justify-center bg-white sh pd-px-20 mg-b-20">
				<van-icon class="top-left" name="arrow-left" @tap="goBack" />
				<view class="top-center">智能专区</view>
			</view>
		</van-sticky>
		<div class="main">
			<van-sidebar style="width:180rpx;" class="sidebar" v-model="categoryIndex" >
				<van-sidebar-item class="my-sidebar-item-font-size" @click="onChange(item.id)" v-for="(item,index) in categoryList" :key="item.id" :title="item.name" />
			</van-sidebar>
			<div class="right-content" >
				<van-list v-if="inited"  :loading="good.loading" :finished="good.finished" finished-text="没有更多了"
					    offset="10" @load="onGoodLoad">
					<div class="card-shop" v-for="item in good.list">
						<van-row>
							<van-col span="8" style="border-bottom-left-radius: 80px;">
								<view class="image-container" @click="goto(`/pages/good/detail?skuId=${item.skuId}&spuId=${item.spuId}`)">
									<van-image   fit="cover"  lazy-load :src="item.mainImg"
											 loading-icon="https://img.edsmall.com/ROOT/ETao/fenxiao/h5/default1.png"  />
								</view>
							</van-col>
							<van-col span="16">

								<view style="padding: 15rpx;background: #ffffff" @click="goto(`/pages/good/detail?skuId=${item.skuId}&spuId=${item.spuId}`)">
									<text class="text-s ellipsis line_over2" style="text-align: left;background: #ffffff;line-height: 36rpx">
										{{ item.title }}
									</text>
								</view>
								<view style="display: flex;justify-content: space-between;align-items: center">
									<view style="display: flex;background: #ffffff;padding: 15rpx;margin-top: 10rpx" class="text01">
										<view  class="text-orange text-ss">￥
											<text class="text-bold text-l">{{ item.salePrice }}</text>
										</view>
										<view  class="text-ss" style="margin-left: 16rpx">
											<text class="text-gray text-ss line-through">￥{{ item.productPrice }}</text>
										</view>
									</view>
									<view @click="check(item)">
										<img  src="../../static/img/car_search.png"
											style="width: 1.8rem;margin-right: 6rpx" alt="">
									</view>
								</view>
							</van-col>
						</van-row>
					</div>
				</van-list>

			</div>
		</div>
	</div>
</template>

<script lang="ts">
    import { Dialog } from "vant";
    import { PageUtils } from '@/utils/utils';
    import { Toast } from 'vant';
    import api from "@/api";
    import {reactive, toRefs, onMounted,getCurrentInstance} from 'vue';

    export default {
        setup() {
            const state = reactive({
                loading: {
                    cartAdd: false,
                    productFav: false,
                    brandFav: false,
                    share: false
                },
            })
            const that = reactive({
		    temId:null,
                inited:false,
		    temMuneId:null,
                good: {
                    loading: false,
                    finished: false,
                    fail: false,
                    page: 0,
                    list: [] as any
                },
                categoryList: [],
                categoryIndex: 0,
                dataList: {},
                toGoodList: (search) => {
                    uni.navigateTo({
                        url: `/pages/goodList/index?${that.categoryList[that.categoryIndex].type}=${search}`,
                    });
                },
                goto(url) {
                    url && uni.navigateTo({ url })
                },
                cartAdd(data) {
                    if (state.loading.cartAdd) return
                    state.loading.cartAdd = true
                    api.cartAdd({
                        skuId: data.skuId,
                        link: uni.getStorageSync('subdomain'),
                        productQty: 1, // B端去除起订量限制 skuData.value.moq
                    }).then(() => {
                        Toast.success('加入购物车')
                    }).finally(() => {
                        state.loading.cartAdd = false
                    })
                },
                check(item) {
                    const { token } = uni.getStorageSync("user") || {};
                    if (token) {
                        that.cartAdd(item)
                    } else {
                        Dialog.confirm({
                            message: '您尚未登录，请前往登录',
                            title: "提示",
                            cancelButtonText: '取消'
                        }).then(() => {
                            window._wx.miniProgram.redirectTo({url: "/pages/login/login"})
                        });
                    }
                },
                changeLi: (e) => {
                    let topH1 = document.getElementById(e)
                    topH1.scrollIntoView({
                        behavior: 'smooth',
                    })
                },
                goBack() {
                    PageUtils.goBack()
                },
                onGoodLoad() {
                    if (that.good.loading || that.good.fail) return
                    that.good.loading = true
                    that.good.page += 1
                    api.productList({menuId: that.temMuneId, pageNum: that.good.page, sortType: 0, pageSize: 20, link: uni.getStorageSync("subdomain") }).then((data: any) => {
                        if (!data) return
                        if (!data||!data.hasNextPage){
                            that.good.finished = true
                        }
                        if(that.temId==that.temMuneId){
                            that.good.list.push(...data.list)
                        }
                    })
                        .catch(() => {
                            that.good.fail = true
                        })
                        .finally(() => {
                            that.good.loading = false
                        })
                },
                getBanner: () => {
                    api.dzResource().then((res: any) => {
                        that.categoryList = res.benDiMenu
				if(res.benDiMenu&&res.benDiMenu.length>0){
                            that.getList(res.benDiMenu[0].id)
				    that.temMuneId=res.benDiMenu[0].id
                            that.temId=res.benDiMenu[0].id
				}
                    })
                },
                getList(menuId) {
                    api.productList({
                        sortType: 0,
                        menuId: menuId,
                        pageNum: 1,
                        pageSize: 20,
                        link: uni.getStorageSync("subdomain") ? uni.getStorageSync("subdomain") : 'alisa'
                    }).then((data: any) => {
                        if(that.temId==menuId){
                            that.good.list=data.list
				}
                    })
                },
                onChange: (e) => {
		        that.temId=e
                    that.good.page=1
                    that.good.list=[]
                    that.getList(e)
                }
            });
            onMounted(() => {
                that.getBanner()
                setTimeout(() => {
                    that.inited = true
                }, 500)
            })
            const refState = toRefs(that)
            return {
                ...refState
            }
        }
    }

</script>

<style scoped>
	.my-sidebar-item-font-size {
		font-size: 24rpx; /* 调整 van-sidebar-item 的字体大小 */
	}
	.image-container {
		background-color: #ffffff;
		border-top-left-radius: 10px; /* 设置圆角的大小 */
		border-bottom-left-radius: 10px; /* 设置圆角的大小 */
		overflow: hidden;
	}

	.image-container .van-image {
		width: 100%;
		height: 100%;
		border-radius: inherit; /* 继承外层容器的圆角 */
	}
	.card-shop{
		margin-top: 10rpx;
		margin-bottom: 30rpx;
		margin-left: 20rpx;
		width: 530rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 3rpx 12rpx 2rpx rgba(0,0,0,0.08);
		border-radius: 16rpx;
	}
	.van-sidebar-item--select::before{
		background-color:#EBA926;
	}
	.container{
		-webkit-overflow-scrolling: touch;
	}
	.right_side {
		position: fixed;
		width: 0.45rem;
		height: 100%;
		right: 0;
		top: 2.6rem;
		z-index: 999;
	}

	.right_side .letter_slider {
		position: absolute;
		width: 1.6rem;
		overflow: hidden;
		right: 0;
		top: 0;
		height: 87%;
		overflow-y: auto;
		z-index: 9999;
	}

	.right_side .letter_slider_li {
		height: 2rem;
		line-height: 2rem;
		text-align: center;
		font-size: .9rem;
		color: #858585;
	}

	.right-content {
		flex: 1;
		height: 90vh;
		overflow-x: scroll;
		padding-bottom: 10px;
	}

	.sidebar {
		height: 88vh;
		overflow-x: scroll;
		-webkit-overflow-scrolling: touch;
	}

	.main {
		display: flex;
	}
</style>