<template>
	<view class="classList-box">
        <view class="classList-content-box" v-for="(i,indexs) in classList" :key="indexs">
            <template v-if="i.SubList.length>0">
                <view class="content-time">
                    <view class="time-Wire">
                        <view class="time-round"></view>
                    </view>
                    <view class="time-date">
                        <view class="time-num">
                            <view>{{i.DateStr.slice(5,7)}}/</view>
                            <view>{{i.DateStr.slice(8,10)}}日</view>
                        </view>
                        <view class="time-text">
                        {{getDateData(i.DateStr)}}
                        </view>
                    </view>
                </view>
                <van-swipe-cell class="content-right"
                    :class="{'activeOne':indexs==0,'activeTwo':indexs==1,
                    'activeThree':indexs==2,'activeFour':indexs==3,
                    'activeFive':indexs==4,'activeSix':indexs==5,
                    'activeSeven':indexs==6}"
                    id="swipe-cell"
                    :right-width="116"
                    async-close
                    :disabled="true">
                    <view class="content-text-box">
                        <view class="right-box">
                            <view v-for="(item,index) in i.SubList.sort((a,b)=>{a-b})"
                            :key="index"
                            class="Festival-box activeOne"
                            :class="{'activeOne':item.StartTime=='09:30','activeTwo':item.StartTime=='11:10',
                            'activeThree':item.StartTime=='13:30','activeFour':item.StartTime=='15:10',
                            'activeFive':item.StartTime=='16:50','activeSix':item.StartTime=='19:00'}">
                                <view>第
                                    <text v-if="item.StartTime=='09:30'">一</text>
                                    <text v-if="item.StartTime=='11:10'">二</text>
                                    <text v-if="item.StartTime=='13:30'">三</text>
                                    <text v-if="item.StartTime=='15:10'">四</text>
                                    <text v-if="item.StartTime=='16:50'">五</text>
                                    <text v-if="item.StartTime=='19:00'">六</text>
                                节</view>
                                <view>
                                    {{item.StartTime}}
                                </view>
                            </view>
                        </view>
                    </view>
                    <view slot="right" class="van-swipe-cell__right">
                        <van-button square type="danger" custom-style="height:100%;">删除</van-button>
                    </view>
                </van-swipe-cell>
            </template>
        </view>
	</view>
</template>

<script>
	import {
		ref,
		toRefs,
		reactive,
		getCurrentInstance,
		onMounted
	} from 'vue'
	export default {
		components: {

		},
		props: ['classList'],
		setup(props) {
			const {
				proxy
			} = getCurrentInstance()
			const data = reactive({
				
			})
			const methods = {
				// 获取日期
		        getDateData(d) {
                    let date = new Date(d)
                    let week = date.getDay()
                    let weekStr = ""
                    switch (week) {
                        case 0:
                            weekStr = '星期日';
                            break;
                        case 1:
                            weekStr = '星期一';
                            break;
                        case 2:
                            weekStr = '星期二';
                            break;
                        case 3:
                            weekStr = '星期三';
                            break;
                        case 4:
                            weekStr = '星期四';
                            break;
                        case 5:
                            weekStr = '星期五';
                            break;
                        case 6:
                            weekStr = '星期六';
                            break;
                    }
                    return weekStr
                },
				
			}
			onMounted(() => {

			})
			return {
				...toRefs(data),
				...methods
			}
		},
	}
</script>

<style scoped>
	.classList-content-box{
        display: flex;
        justify-content: space-between;
        padding: 0 50rpx 0 0;
    }
    .content-time{
        display: flex;
        flex-shrink: 0;
        margin-right: 59rpx;
        padding: 0 0 0 33rpx;
        
    }
    .classList-content-box:last-child .time-Wire{
        /* background: #ffffff; */
    }
    .time-Wire{
        width: 1rpx;
        height: 100%;
        background: #A9A9A9;
        position: relative;
        flex-shrink: 0;
        margin-top: 50rpx;
    }
    .time-round{
        width: 15rpx;
        height: 15rpx;
        background: #111111;
        border-radius: 50%;
        position: absolute;
        left: -6rpx;
        top: 0;
    }
    .time-date{
        display: flex;
        flex-direction: column;
        margin-left: 33rpx;
        padding: 40rpx 0 0 0;
    }
    .time-num{
        display: flex;
        font-size: 26rpx;
        font-weight: 800;
        color: #111111;
    }
    .time-num view:first-child{
        font-size: 22rpx;
        padding: 3rpx 0 0 0;
        font-weight: 400;
    }
    .time-text{
        font-size: 26rpx;
        color: #111111;
        font-weight: 500;
    }
    .content-right{
        position: relative;
        flex-grow: 1;
        border-radius: 24rpx;
        padding: 0 0 0 38rpx;
        overflow: hidden;
        margin-bottom: 50rpx;
    }
    .content-text-box{
        padding: 5rpx 0 34rpx 0;
    }
    .content-right.activeOne{
		background: #FDEAD5;
	}
	.content-right.activeTwo{
		background: #EDD9FF;
	}
	.content-right.activeThree{
		background: #D7F2E9;
	}
	.content-right.activeFour{
		background: #FFF1F4;
	}
	.content-right.activeFive{
		background: #E5F3FE;
	}
	.content-right.activeSix{
		background: #EDF8F9;
	}
    .content-right.activeSeven{
		background: #E5E6FA;
	}
    .right-box{
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
    }
    .Festival-box{
        display: flex;
        margin-top: 29rpx;
        padding: 7rpx 19rpx;
        border-radius: 10rpx;
        color: #ffffff;
        margin-right: 31rpx;
        font-size: 28rpx;
    }
    .Festival-box:nth-child(2n){
        margin-right: 0;
    }
    .Festival-box view:last-child{
        margin-left: 15rpx;
        font-size: 26rpx;
        padding: 3rpx 0 0 0;
    }
    .Festival-box.activeOne{
		background: #FF9626;
	}
	.Festival-box.activeTwo{
		background: #B966FF;
	}
	.Festival-box.activeThree{
		background: #35B881;
	}
	.Festival-box.activeFour{
		background: #FE606A;
	}
	.Festival-box.activeFive{
		background: #0588F8;
	}
	.Festival-box.activeSix{
		background: #33BED9;
	}
	.van-swipe-cell__right {
		position: absolute;
		top: 0;
        bottom: 0;
		height: 100%;
		right: -111rpx;
		width:232px;
		-webkit-transform: translate3d(100%, 0, 0);
		transform: translate3d(100%, 0, 0);
	}
</style>
