<template>
	<div class="container" style="background: #ffffff">
		<div class="main">
			<van-sidebar 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 v-for="item in list" style="margin:26rpx 10rpx" v-if="categoryIndex==0">
					<van-divider><span
							  style="color: #2b2b2b;font-size: 34rpx;font-weight: bold">{{item.name}}</span>
					</van-divider>
					<div v-for="son in item.menus">
						<p style="margin: 10px 0;font-size: 24rpx;font-weight: bold">{{son.name}}</p>
						<van-grid :border="false" :column-num="3">
							<van-grid-item v-for="sun in son.menus" @click="toGoodList(sun.id)">
								<div>
									<van-image :src="sun.icon"  width="15vw" height="15vw"/>
									<p style="margin-top: 5px;font-size: 12px;text-align: center">
										{{sun.name}}</p>
								</div>
							</van-grid-item>
						</van-grid>
					</div>
				</div>
				<div v-if="categoryIndex!=0&&categoryIndex!=5">
					<van-grid :border="true" :column-num="3">
						<van-grid-item v-for="item in list">
							<div @click="toGoodList(categoryIndex!=4?item.name:item.id)" style="text-align: center">
								<van-image  :src="categoryIndex==4?item.iconpath:item.img" />
								<p style="margin-top: 5px;font-size: 12px;text-align: center;margin-bottom: 10px">
									<span v-if="categoryIndex!=4">{{item.name}}</span>
									<span v-else>{{changeName(item.name)}}</span>
								</p>
							</div>
						</van-grid-item>
					</van-grid>
				</div>
				<div v-if="categoryIndex==5">
					<div v-for="item in list.letter" style="padding-right: 1rem">
						<van-divider><span :id="item"
									 style="color: #2b2b2b;font-size: 34rpx;font-weight: bold">{{item}}</span>
						</van-divider>
						<van-grid :border="false" :column-num="3">
							<van-grid-item v-for="son in list.menu[item]" @click="toGoodList(son.id)">
								<div>
									<van-image v-if="son.img" :src="son.img" width="15vw" height="15vw"
									/>
									<p style="margin-top: 5px;font-size: 12px;text-align: center">
										{{son.name}}</p>
								</div>
							</van-grid-item>
						</van-grid>
					</div>
				</div>
				<div class="right_side" v-if="categoryIndex==5&&list.letter">
					<div class="letter_slider">
						<ul v-for="item in list.letter">
							<li class="letter_slider_li" @click="changeLi(item)">{{item}}</li>
						</ul>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script lang="ts">
    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'}],
                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',
                    })
                },
                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()
                let search = getCurrentInstance().$pageInstance.attrs.act
                if(search){
                    that.categoryIndex = search
                    that.onChange(Number(that.categoryIndex))
                }
            })
            const refState = toRefs(that)
            return {
                ...refState
            }
        }
    }

</script>

<style scoped>
	.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: 88vh;
		overflow-x: scroll;
		padding-bottom: 10px;
	}

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

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