<template>
    <div class="bookingset">
        <m-header />

        <div class="book-title">课程信息</div>
        <van-cell-group class="search">
            <van-field
                type="text"
                label="课程班名称"
                input-align="right"
                placeholder="请输入班级名称" />
            <van-cell title="科目名称" 
                      :value="setList.courseText" 
                      readonly 
                      is-link
                      clickable
                      @click="endShow = true" />
            <van-cell title="每课时长" 
                      :value="setList.dealText" 
                      readonly 
                      is-link
                      clickable
                      @click="longTime = true" />
        </van-cell-group>

        <div class="book-title">课程信息</div>
        <div class="section">
            <div class="week-section">
                <p class="active">一<span>01</span></p>
                <p>二<span>02</span></p>
                <p>三<span>03</span></p>
                <p>四<span>04</span></p>
                <p>五<span>05</span></p>
                <p>六<span>06</span></p>
                <p class="disabled">七<span>07</span></p>
            </div>
            <div class="day-section">
                <span class="day" v-for="i in 20" :key="i">09:00</span>
            </div>

            <div class="button-group">
                <van-button type="info" round size="large">确定</van-button>
            </div>
        </div>
        
        <van-action-sheet
            v-model="longTime"
            :actions="[{name: '收入'}, { name: '支出' }]"
            cancel-text="取消"
            @cancel="longTime = false"
            @select="onDealSelect"/>
    </div>
</template>
<script>
import MHeader from '@/components/MHeader'
export default {
    name: 'bookingset',
    components: { MHeader },
    data() {
        return {
            longTime: false,
            setList: {
                startText: '选择开始时间',
                courseText: '请选择',
                dealText: '请选择'
            }
        }
    },
    methods: {
        onSearch() {
            // 开始查询
            // console.log(this.setList)
        },
        onDealSelect() {
            // 交易收支
            this.longTime = false
        },
        formatter(type, value) { // 格式化时间
            if (type === 'year') {
                return `${value}年`;
            } else if (type === 'month') {
                return `${value}月`
            } else if(type === 'day') {
                return `${value}日`
            } else if(type === 'hour') {
                return `${value}时`
            } else if(type === 'minute') {
                return `${value}分`
            }
            return value;
        }
    }
}
</script>
<style lang='less' scoped>
@import url('../../assets/commonLess/variable.less');
.search .van-cell {
    padding: .13rem .16rem;
    font-size: .16rem;
}

.result {
    margin-top: .1rem;
    .count {
        font-size: .12rem;
        color: @tFontColor;
    }
    .add {
        color: @orangeColor;
    }
}
/deep/.van-field__label {
    width: .9rem;
}
.book-title {
    padding: .04rem 0;
    font-size: .12rem;
    color: @mFontColor;
    text-align: center;
}
.section {
    background: @whiteColor;
    padding: .2rem .16rem;
}
.week-section {
    display: flex;
    justify-content: space-between;
    padding-bottom: .2rem;
    p {
        display: inline-flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: .4rem;
        height: .44rem;
        font-size: .12rem;
        line-height: 1.3;
        background: #2C9A94;
        border-radius: .06rem;
        color: @whiteColor;
        span {
            display: block;
            font-size: .16rem;
        }
        &.active {
            background: #F5F8FB;
            color: @mColor;
        }
        &.disabled {
            background: @sFontColor;
            color: @mFontColor;
        }
    }
}
.day-section {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: .3rem;
    .day {
        font-size: .14rem;
        color: @mFontColor;
        border: 1px solid #E2E0E0;
        border-radius: .02rem;
        text-align: center;
        padding: .08rem .2rem;
        margin-right: .1rem;
        margin-bottom: .1rem;
        &:nth-child(4n + 4) {
            margin-right: 0;
        }
        &.active {
            background-color: @mColor;
            color: @whiteColor;
        }
    }
}
</style>