<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" @change="onChange">
				<van-sidebar-item v-for="(item,index) in categoryList" :key="index" :title="item.name" />
			</van-sidebar>
			<div class="right-content" >
				<div class="card-shop" v-for="item in 10">
					<van-row>
						<van-col span="8" style="border-bottom-left-radius: 80px;">
							<view class="image-container">
								<van-image   fit="cover"  lazy-load src="https://img.edsmall.com/ROOT/ETao/gl/busiImage/166d3cd3-fe6d-44b7-9e2d-cb6d7ad6b0a6.png"
										 loading-icon="https://img.edsmall.com/ROOT/ETao/fenxiao/h5/default1.png"  />
							</view>
						</van-col>
						<van-col span="15">

							<view style="padding: 15rpx;background: #ffffff">
								<text class="text-s ellipsis line_over2" style="text-align: left;background: #ffffff;line-height: 36rpx">
									魅泰 MTTCB095白-05A套餐 成套灯具 现代风格魅泰 MTTCB095白-05A套餐 成套灯具 现代风格MTTCB095白-05A套餐 成套灯具 现代风格
								</text>
							</view>
							<view style="display: flex;background: #ffffff;padding: 15rpx;margin-top: 20rpx" class="text01">
								<view  class="text-orange text-ss">￥
									<text class="text-bold text-l">898</text>
								</view>
								<view  class="text-ss" style="margin-left: 16rpx">
									<text class="text-gray text-ss line-through">￥888</text>
								</view>
								<view style="width: 80rpx">

								</view>
								<view style="text-align: right">
									<img  src="../../static/img/car_search.png"
									     style="width: 1.8rem;margin-top: -5px" alt="">
								</view>
							</view>
						</van-col>
					</van-row>
				</div>
			</div>
		</div>
	</div>
</template>

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

    export default {
        setup() {
            const that = reactive({
                categoryList: [{name: "智能艺术灯", type: 'menuId'}, {name: "智能筒射灯", type: 'styleName'}, {
                    name: "智能磁吸灯",
                    type: 'material'
                }, {name: "智能橱柜灯", type: 'money'}, {name: "智能灯带", type: 'zone'}, {name: "智能光源", type: 'brandId'}, {
                    name: "智能面板",
                    type: 'space'
                }, {name: "萌光套餐", type: 'color'}, {name: "萌光智选", type: 'colo1r'}, {name: "智选服务", type: 'col12or'}],
                list: [],
                categoryIndex: 0,
                dataList: {},
                toGoodList: (search) => {
                    uni.navigateTo({
                        url: `/pages/goodList/index?${that.categoryList[that.categoryIndex].type}=${search}`,
                    });
                },
                changeLi: (e) => {
                    let topH1 = document.getElementById(e)
                    topH1.scrollIntoView({
                        behavior: 'smooth',
                    })
                },
                goBack() {
                    PageUtils.goBack()
                },
                changeName: (name) => {
                    switch (name) {
                        case 'TTT':
                            return '淘淘淘专区'
                            break;
                        case 'VIP':
                            return 'PLUS'
                            break;
                        case 'XIAN_LIANG':
                            return '限量专区'
                            break;
                        case 'XIAO_E':
                            return '小E专区'
                            break;
                        case 'YAN_XUAN':
                            return '严选专区'
                            break;
                        case 'YOU_XUAN':
                            return '优选专区'
                            break;
                        case 'XIN_P':
                            return '新品专区'
                            break;
                        case 'AUTONOM_HD':
                            return '活动专区'
                    }
                },
                getBanner: () => {
                    api.sortAndSearch({link: uni.getStorageSync("subdomain") }).then((res: any) => {
                        that.dataList = res
                        that.list = res.type
                    })
                },
                onChange: (e) => {
                    switch (e) {
                        case 0:
                            that.list = []
                            setTimeout(() => {
                                that.list = that.dataList.type
                            }, 0)
                            return
                            break;
                        case 1:
                            return that.list = that.dataList.style
                            break;
                        case 2:
                            return that.list = that.dataList.material
                            break;
                        case 3:
                            return that.list = that.dataList.price
                            break;
                        case 4:
                            that.list = []
                            for (let k in that.dataList.zone) {
                                that.dataList.zone[k].resource[0].id = that.dataList.zone[k].id
                                that.dataList.zone[k].resource[0].name = k
                                that.list.push(that.dataList.zone[k].resource[0])
                            }
                            break;
                        case 5:
                            Toast.loading({
                                duration:300,
                                message: '加载中...',
                                forbidClick: true,
                                loadingType: 'spinner',
                            });
                            setTimeout(()=>{
                                return that.list = that.dataList.brand
                            },200)
                            break;
                        case 6:
                            return that.list = that.dataList.room
                            break;
                        case 7:
                            return that.list = that.dataList.color
                            break;
                    }
                }
            });
            onMounted(() => {
                that.getBanner()
            })
            const refState = toRefs(that)
            return {
                ...refState
            }
        }
    }

</script>

<style scoped>
	.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>