<style scoped>
	.box {
		padding: 0.225rem;
		margin: 0.425rem 0;
		box-shadow: 0.0625rem 0.3125rem 0.3125rem #ffffff;
		text-align: center;
		background: #f1f5f8;
		border: 1px solid #d6d8d9;
	      /*解决iOS滚动条卡住的问题*/
		-webkit-overflow-scrolling: touch;
	}

	.right_side {
		position: fixed;
		width: 0.55rem;
		height: 100%;
		right: 0;
		top: 2.6rem;
		z-index: 999;
	}

	.right_side .letter_slider {
		position: absolute;
		width: 1.8rem;
		overflow: hidden;
		right: 0;
		top: 0;
		background: #ffffff;
		height: 87%;
		overflow-y: auto;
		z-index: 999;
	}

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

	.radio {
		margin-bottom: 1rem;
		padding-bottom: 1rem;
		border-bottom: 1px solid #dcdcdc;
		padding-left: 1rem;
	}

	.radio:first-child {
		padding-top: 1rem;
	}

	.radio:last-child {
		margin-bottom: 0;
	}

	.last_box:last-child {
		padding-bottom: 2.6rem;
	}
</style>
<template>
	<view style="background: #f1f5f8;height: 100vh">
		<div v-show="!showHome">
			<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>
			</van-sticky>
			<div v-if="index==0">
				<!--<h4 style="color: #539fe7;padding: 10px">#{{item.name}}</h4>-->
				<!--<div style="background: #ffffff;">-->
					<!--<van-row style="padding: 30rpx 0;margin: 0 1rem">-->
						<!--<van-col span="7" class="box" v-for="son in item.menus"-->
							   <!--@click="choiceType(son)" style="margin-right: 10px">-->
							<!--{{son.name}}-->
						<!--</van-col>-->
					<!--</van-row>-->
				<!--</div>-->
				<div v-for="item in list">
					<div v-for="son in item.menus">
						<p style="color: #539fe7;padding: 10px">#{{son.name}}</p>
						<div style="background: #ffffff;">
							<van-row style="margin-left: 12px">
								<van-col style="margin-right: 5px"  span="7" class="box" v-for="sun in son.menus" @click="choiceType(sun)">
									<span style="margin-top: 5px;font-size: 14px;text-align: center">
										{{sun.name}}</span>
								</van-col>
							</van-row>
						</div>
					</div>
				</div>
			</div>
			<div v-else-if="index==5">
				<van-radio-group v-for="item in list.letter" v-model="params.brandId">
					<div :id="item" style="margin-top: -50px;padding-top: 50px;background: #ffff">
						<van-divider><span style="color: #2b2b2b;font-size: 34rpx;font-weight: bold">{{item}}</span>
						</van-divider>
						<div style="background: #ffffff" class="last_box">
							<van-radio :name="son.id" v-for="son in list.menu[item]" class="radio"
								     @click="chaneRadio(son.name)">
								<img v-if="son.img"
								     v-lazy="son.img"
								     style="vertical-align: middle;margin: 0 10px"
								     width="55"
								     height="37"
								     :src="son.img"
								/>
								{{son.name}}
							</van-radio>
						</div>
					</div>
					<div class="right_side">
						<div class="letter_slider">
							<ul v-for="item in brankList">
								<li class="letter_slider_li" @click="changeLi(item)">{{item}}</li>
							</ul>
						</div>
					</div>
				</van-radio-group>
			</div>
			<div v-else>
				<div>
					<h4 style="color: #539fe7;padding: 10px">#{{changeName(index.toString())}}</h4>
					<div style="background: #ffffff;">
						<van-row style="padding: 30rpx 0;margin: 0 1rem">
							<van-col v-for="item in list" span="7" class="box"
								   @click="choiceType(index!=4?item.name:item)"
								   style="margin-right: 10px">
								<span v-if="index!=4">{{item.name}}</span>
								<span v-else>{{changeZq(item.name)}}</span>
							</van-col>
						</van-row>
					</div>
				</div>
			</div>
		</div>
		<van-sticky>
			<van-tabs v-model:active="active" color="#EBA926" line-width="206rpx"
				    title-active-color="#EBA926" v-show="showHome">
				<van-tab title="分类检索">
					<Combination />
				</van-tab>
				<van-tab title="组合筛选">
					<div>
						<van-cell :title="item.name" @click="getTypeList(index)" is-link :value="item.text"
							    v-for="(item,index) in typeList" />
						<div style="margin: 10rpx 10rpx;padding-top: 50rpx">
							<van-button color="#ff6600" size="large" @click="save">确认</van-button>
						</div>
						<div style="margin: 10rpx 10rpx">
							<van-button size="large" @click="clearParams">清空</van-button>
						</div>
					</div>
				</van-tab>
			</van-tabs>
		</van-sticky>
	</view>
	<tabbar :current="tabIndex" :list="listS" @tab-change="changeIndex" />
</template>

<script lang="ts">
    import {Toast} from 'vant';
    import api from "@/api";
    import Combination from './model/combination.vue';
    import {reactive, toRefs, onMounted, onRenderTriggered, watch} from 'vue';
    import tabbar from "@/components/layout/tabbar.vue";

    // 接口规范
    interface thatProps {
        showHome: Boolean,
        active: Number,
    }

    export default {
        //打印出上个页面传递的参数。
        onLoad(option) {
            if (option.good == 1) {
                this.active = 1
            }
        },
        components: {
            Combination,tabbar
        },
        setup() {
            const that: thatProps = reactive({
                listS: [
                    {
                        text: "首页",
                        icon: "wap-home",
                    },
                    {
                        text: "分类",
                        icon: "bars",
                    },
                    {
                        text: "购物车",
                        icon: "shopping-cart",
                        badge: 0
                    },
                    {
                        text: "我的",
                        icon: "manager",
                    },
                ],
                tabIndex:1,
                dataList: {},
                brankList: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'],
                params: {
                    minSalePrice: '',
                    maxSalePrice: '',
                    material: '',
                    styleName: '',
                    space: '',
                    color: '',
                    zone: '',
                    brandId: '',
                    menuId: '',
                },
                showHome: true,
                typeList: [
                    {
                        name: '类型',
                        text: ''
                    },
                    {name: '风格'},
                    {name: '材质'},
                    {name: '价格'},
                    {name: '权益'}, {name: '品牌'}, {name: '空间'}, {name: '色温'}],
                list: [{name: '热门标签', list: ['吊灯1', '吊灯2', '吊灯3', '吊灯4', '吊灯5', '吊灯6', '吊灯', '吊灯', '吊灯']}],
                active: 0,
                index: 0,
		    changeIndex(index){
                    that.tabIndex = index
                    uni.navigateTo({
                        url: `/pages/index?index=${index}`,
                    });
		    },
                chaneRadio(e) {
                    console.log(e);
                    that.typeList[that.index].text = e
                    that.showHome = true
                },
                clearParams() {
                    that.params = {
                        minSalePrice: '',
                        maxSalePrice: '',
                        material: '',
                        styleName: '',
                        space: '',
                        color: '',
                        zone: '',
                        search: ''
                    }
                    that.typeList.forEach(item => {
                        item.text = ''
                    })
                },
                changeZq: (name) => {
                    switch (name) {
                        case 'TTT':
                            return '淘淘淘专区'
                        case 'VIP':
                            return 'PLUS'
                        case 'XIAN_LIANG':
                            return '限量专区'
                        case 'XIAO_E':
                            return '小E专区'
                        case 'YAN_XUAN':
                            return '严选专区'
                        case 'YOU_XUAN':
                            return '优选专区'
                        case 'XIN_P':
                            return '新品专区'
                        case 'AUTONOM_HD':
                            return '活动专区'
                    }
                },
                changeName: (index) => {
                    switch (index) {
                        case '1':
                            return '风格'
                        case '2':
                            return '材质'
                        case '3':
                            return '价格'
                        case '4':
                            return '权益'
                        case '5':
                            return '品牌'
                        case '6':
                            return '空间'
                        case '7':
                            return '色温'
                    }
                },
                changeLi: (e) => {
                    let topH1 = document.getElementById(e)

                    topH1.scrollIntoView({
                        behavior: 'smooth',
                    })
                },
                // 非空校验
                isEmpty(a) {
                    if (a === "") return true; //检验空字符串
                    if (a === "null") return true; //检验字符串类型的null
                    if (a === "undefined") return true; //检验字符串类型的 undefined
                    if (!a && a !== 0 && a !== "") return true; //检验 undefined 和 null
                    if (Array.prototype.isPrototypeOf(a) && a.length === 0) return true; //检验空数组
                    if (Object.prototype.isPrototypeOf(a) && Object.keys(a).length === 0) return true;  //检验空对象
                    return false;
                },
                //组合筛选拼接url
                dealUrlFormData(url, data) {
                    let params = []
                    Object.keys(data).forEach((key) => {
                        if (!that.isEmpty(data[key])) {
                            params.push(encodeURIComponent(key) + "=" + encodeURIComponent(data[key]))
                        }
                    })
                    return url + '?' + params.join("&");
                },
                save: () => {
                    localStorage.setItem('isClassify', true)
                    uni.navigateTo({
                        url: that.dealUrlFormData('/pages/goodList/index', that.params),
                    });
                },
                choiceType: (type) => {
                    if (that.index == 0) {
                        that.params.menuId = type.id
                        that.typeList[that.index].text = type.name
                        that.showHome = true
                        return
                    }
                    if (that.index == 3) {
                        let minSalePrice = ''
                        let maxSalePrice = ''
                        if (type.indexOf('元以下') > -1) {
                            maxSalePrice = type.replace('元以下', '')
                        } else if (type.indexOf('以上') > -1) {
                            minSalePrice = type.replace('以上', '')
                        } else {
                            let str = type.replace('元', '')
                            minSalePrice = str.split('-')[0]
                            maxSalePrice = str.split('-')[1]
                        }
                        that.params['minSalePrice'] = minSalePrice
                        that.params['maxSalePrice'] = maxSalePrice
                        that.typeList[that.index].text = type
                        that.showHome = true
                        return
                    }
                    if (that.index == 4) {
                        that.params.zone = type.id
                        that.typeList[that.index].text = that.changeZq(type.name)
                        that.showHome = true
                        return
                    }

                    if (that.index == 1) that.params.styleName = type
                    if (that.index == 2) that.params.material = type
                    if (that.index == 5) that.params.brandId = type
                    if (that.index == 6) that.params.space = type
                    if (that.index == 7) that.params.color = type
                    that.typeList[that.index].text = type
                    that.showHome = true
                },
                getTypeList: (index) => {
                    that.showHome = false
                    that.index = index
                    switch (index) {
                        case 0:
                            return that.list = that.dataList.type
                        case 1:
                            return that.list = that.dataList.style
                        case 2:
                            return that.list = that.dataList.material
                        case 3:
                            return that.list = that.dataList.price
                        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.dataList.zone[k].resource[0].iconpath = 'https://img.edsmall.com/ewy/resource/image/61dc6af3-c2a4-4d5b-870b-d146430175b3.png'
                                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)
                        case 6:
                            return that.list = that.dataList.room
                        case 7:
                            return that.list = that.dataList.color
                    }
                },
                onClickLeft: () => {
                    that.showHome = true
                },
                getBanner: () => {
                    api.sortAndSearch({link: uni.getStorageSync("subdomain") }).then((res: any) => {
                        that.dataList = res
                        that.list = res.type
                    })
                }
            })
            // watch
            watch([() => that.index], (newValue, oldValue) => {
                // console.log(newValue);
                // console.log(oldValue);
            })
            onMounted(() => {
                that.getBanner()
            })
            // watch
            onRenderTriggered((event) => {

            })
            const refState = toRefs(that)
            return {
                ...refState
            }
        }
    }
</script>

