<template>
    <view class="course-list">
        <view class="cl-tab">
            <view :class="[curTabIdx == 0?'active':'']" @click="tabChange(0)">正式课</view>
            <view :class="[curTabIdx == 1?'active':'']" @click="tabChange(1)">体验课</view>
        </view>
        <view class="cl-list">
            <block v-for="(e, i) in courseList" :key="i">
                <view class="cl-item" v-if="curTabIdx == 0">
                    <view class="ci-name">
                        <view>{{e.name || '-'}}</view>
                        <view>{{e.kind || '-'}}</view>
                    </view>
                    <view class="ci-lines" v-if="getCourseType(e.kind) === 0">
                        <text>班级数: </text>{{e.class_number || 0}}
                    </view>
                    <view class="ci-lines">
                        <text>学员人数: </text>{{e.join_person_number || 0}}
                    </view>
                    <view class="cl-btns">
                        <block v-if="getCourseType(e.kind) === 0">
                            <view hover-class="hover-active" v-if="e.have_class_way == 1" @click="orderCourseBtn(e)">预约上课</view>
                            <view hover-class="hover-active" @click="toClass(e)">班级</view>
                        </block>
                        <view hover-class="hover-active" v-if="getCourseType(e.kind) === 1" @click="toStudentList(e)">详情</view>
                    </view>
                </view>
                <view class="cl-ex-item" v-if="curTabIdx == 1">
                    <view class="ei-tit">
                        <view>{{e.name || '-'}}</view>
                        <view>{{e.experience_class_status || '-'}}</view>
                    </view>
                    <view class="ei-line"><text>预约人数:</text>{{e.experience_person_number || 0}}</view>
                    <view class="ei-btns">
                        <view hover-class="hover-active" @click="toExInfo(e)">查看详情</view>
                    </view>
                </view>
            </block>
            
        </view>
        <view class="cl-mask" v-if="isOrderCourseModal">
            <view class="cl-modal">
                <view class="cm-line">
                    <view>选择班级</view>
                    <picker mode="selector" :range="orderClassList" range-key="class_name" @change="modalClassChange">
                        <view class="cl-frame">
                            <input disabled placeholder="请选择班级" v-model="orderInfo.classInfo.class_name" />
                            <image mode="aspectFit" src="/static/images/arrow_cb2.png"></image>
                        </view>
                    </picker>
                </view>
                <view class="cm-line">
                    <view>选择日期</view>
                    <picker mode="date" @change="modalDateChange">
                        <view class="cl-frame">
                            <input disabled placeholder="请选择日期" v-model="orderInfo.date" />
                            <image mode="aspectFit" src="/static/images/arrow_cb2.png"></image>
                        </view>
                    </picker>
                </view>
                <view class="cm-line">
                    <view>选择时间</view>
                    <view class="cl-content">
                        <picker mode="time" @change="modalStartTime">
                            <view class="cc-frame">
                                <input disabled placeholder="请选择时间" v-model="orderInfo.startTime"/>
                                <image mode="aspectFit" src="/static/images/arrow_cb2.png"></image>
                            </view>
                        </picker>
                        <view>-</view>
                        <picker mode="time" @change="modalEndTime">
                            <view class="cc-frame">
                                <input disabled placeholder="请选择时间" v-model="orderInfo.endTime"/>
                                <image mode="aspectFit" src="/static/images/arrow_cb2.png"></image>
                            </view>
                        </picker>
                    </view>
                </view>
                <view class="cm-btns">
                    <view hover-class="hover-active" @click="isOrderCourseModal = false">取消</view>
                    <view hover-class="hover-active" @click="orderModalConfirm" >确定</view>
                </view>
            </view>
        </view>
        
    </view>
</template>

<script>
import { API } from '../../../js/api'
import { servers } from '../../../js/server'
import util from '../../../utils/util'
import { mapState } from 'vuex';
export default {
    computed: {
        ...mapState([ 'storeInfo' ]),
    },
    data(){
        return {
            curTabIdx: 0,
            courseList: [],
            isOrderCourseModal: false,
            orderClassList: [], // 预约上课班级列表
            orderInfo: { // 预约信息
                classInfo: {    
                    id: '',
                    class_name: '',
                },
                date: '',
                startTime: '',
                endTime: '',
            }
        }
    },
    onLoad(){
        this.getCourseList({});
    },
    methods: {
        orderModalConfirm: util.debounce(function(){
            let { orderInfo } = this;
            util.showLoad();
            this.isOrderCourseModal = false;
            servers.post({
                url: API.course.addCoachBooking,
                data: {
                    course_id: orderInfo.classInfo.course_id,
                    class_id: orderInfo.classInfo.id,
                    date: orderInfo.date || '',
                    start_duration: orderInfo.startTime || '',
                    end_duration: orderInfo.endTime || ''
                },
                isDefaultGet: false
            })
            .then(res=>{
                util.hideLoad();
                if(res.data.code == 0){
                    util.showNone(res.data.message || '操作成功！');
                }else{
                    util.showNone(res.data.message || '操作失败！');
                }
            })
        }, 300, 300),
        modalStartTime(e){
            console.warn(e);
            this.orderInfo.startTime = e.detail.value;
            this.$nextTick(_=>this.$forceUpdate());
        },
        modalEndTime(e){
            console.warn(e);
            this.orderInfo.endTime = e.detail.value;
            this.$nextTick(_=>this.$forceUpdate());
        },
        modalDateChange(e){
            console.warn(e);
            this.orderInfo.date = e.detail.value;
            this.$nextTick(_=>this.$forceUpdate());
        },
        // 
        modalClassChange(e){
            let { orderClassList } = this;
            this.orderInfo.classInfo = orderClassList[e.detail.value];
            this.$nextTick(_=>this.$forceUpdate());
        },
        // 体验
        toExInfo(e){
            util.routeTo(`/pages/course/experience/experience?course_id=${e.id}`, 'nT');
        },
        toClass(e){
            console.warn(e);
            let _query = {
                course_id: e.id,
                course_name: e.name,
            }
            util.routeTo(`/pages/course/class_list/class_list?query=${util.jsonStr(_query)}`, 'nT');
        },
        toStudentList(e){
            let _query = {
                course_id: e.id,
                course_name: e.name,
            }
            util.routeTo(`/pages/course/student_list/student_list?query=${util.jsonStr(_query)}`, 'nT');
        },
        orderCourseBtn: util.debounce(function(e){
            this.orderInfo =  { // 预约信息
                classInfo: {    
                    id: '',
                    class_name: '',
                },
                date: '',
                startTime: '',
                endTime: '',
            }
            util.showLoad();
            servers.get({
                url: API.course.getClassList,
                data: {
                    course_id: e.id,
                    type: 0, // 0教练的班级，1换班的班级
                },
                failMsg: '加载班级失败！'
            })
            .then(res=>{
                util.hideLoad();
                this.orderClassList = res.list || [];
                this.isOrderCourseModal = true;
            })
            
        }, 300, 300),
        // 课程类型映射 成班课(0)/私教课(1);
        getCourseType(type = ''){
            return ['成班课', '私教课'].findIndex(e=>e===type);
        },  
        tabChange: util.debounce(function(i){
            this.curTabIdx = i;
            this.courseList = [];
            this.getCourseList({
                is_experience_class: i
            })
        },300,300),
        getCourseList({
            is_experience_class = 0,
            kind = '',
        }){
            let { storeInfo } = this;
            util.showLoad();
            servers.get({
                url: API.course.courseList,
                data: {
                    stadium_id: storeInfo.id,
                    is_experience_class,
                    kind,
                },
                failMsg: '加载失败！'
            })
            .then(res=>{
                util.hideLoad();
                let _list = res.list || [];
                if(_list.length<=0)return util.showNone('没有更多！');
                this.courseList = _list;
                console.warn(res);
            })
            .catch(util.hideLoad)
        }
    }
}
</script>

<style lang="scss">
    @import "~style/public.scss";
    .course-list{

    }
    .cl-tab{
        height: 96upx;
        background-color: #fff;
        @include centerFlex(space-around);
        >view{
            width: 160upx;
            height: 64upx;
            line-height: 64upx;
            text-align: center;
            border-radius: 32upx;
            font-size: 32upx;
            font-weight: 500;
            color: #333;
            &.active{
                background-color: $themeColor;
                color: #fff;
            }
        }
    }
    .cl-list{
        padding: 24upx;
        .cl-item{
            margin-bottom: 24upx;
            padding: 30upx 20upx;
            border-radius: 10upx;
            background-color: #fff;
            .ci-name{
                margin-bottom: 10upx;
                @include centerFlex(space-between);
                >view{
                    &:first-child{
                        flex-grow: 1;
                        line-height: 44upx;
                        font-weight: 500;
                        font-size: 32upx;
                        color: #333;
                        @include textHide(1);
                    }
                    &:nth-child(2){
                        flex-shrink: 0;
                        margin-left: 10upx;
                        font-size: 28upx;
                        line-height: 40upx;
                        color: #333;
                    }
                }
            }
            .ci-lines{
                margin-bottom: 10upx;
                line-height: 52upx;
                font-size: 28upx;
                color: #333;
                @include textHide(1);
                >text{
                    margin-right: 12upx;
                    color: #9A9A9D;
                }
            }
            .cl-btns{
                @include centerFlex(flex-end);
                >view{
                    width: 192upx;
                    height: 72upx;
                    text-align: center;
                    line-height: 72upx;
                    border-radius: 36upx;
                    font-size: 28upx;
                    font-weight: 500;
                    background-color: $themeColor;
                    color: #fff;
                    &:not(:first-child){
                        margin-left: 24upx;
                    }
                }
            }
        }
        .cl-ex-item{
            margin-bottom: 24upx;
            padding: 44upx 24upx 34upx;
            border-radius: 10upx;
            background-color: #fff;
            .ei-tit{
                margin-bottom: 18upx;
                @include centerFlex(space-between);
                >view{
                    &:first-child{
                        line-height: 44upx;
                        font-size: 32upx;
                        font-weight: 500;
                        color: #333;
                        @include textHide(1);
                    }
                    &+view{
                        flex-grow: 0;
                        flex-shrink: 0;
                        font-size: 28upx;
                        color: #9A9A9D;
                        &.active{
                            color: $themeColor;
                        }
                    }
                }
            }
            .ei-line{
                margin-bottom: 20upx;
                font-size: 28upx;
                color: #333;
                @include textHide(1);
                >text{
                    margin-right: 20upx;
                    color: #9A9A9D;
                }
            }
            .ei-btns{
                @include centerFlex(flex-end);
                >view{
                    width: 192upx;
                    height: 72upx;
                    line-height: 68upx;
                    text-align: center;
                    font-size: 28upx;
                    border: 2upx solid $themeColor;
                    border-radius: 36upx;
                    color: $themeColor;
                }
            }

        }
    }
    .cl-mask{
        position: fixed;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        background-color: rgba($color: #000000, $alpha: .5);
    }
    .cl-modal{
        position: absolute;
        left: 50%;
        top: 50%;
        width: 660upx;
        transform: translate(-50%, -50%);
        border-radius: 10upx;
        padding: 50upx 34upx;
        background-color: #fff;
        .cm-line{
            margin-bottom: 24upx;
            @include centerFlex(flex-start);
            >view:first-child{
                flex-shrink: 0;
                flex-grow: 0;
                margin-right: 14upx;
                line-height: 40upx;
                font-size: 28upx;
                color: #333;
            }
            .cl-frame{
                padding: 0 26upx;
                width: 460upx;
                height: 88upx;
                border: 2upx solid #D8D8D8;
                border-radius: 10upx;
                @include centerFlex(space-between);
                >input{
                    flex-grow: 1;
                    height: 100%;
                    font-size: 28upx;
                    color: #333;
                }
                >image{
                    margin-left: 20upx;
                    flex-shrink: 0;
                    width: 28upx;
                    height: 28upx;
                }
            }
            .cl-content{
                width: 460upx;
                @include centerFlex(space-between);
                >view{
                    line-height: 40upx;
                    font-size: 28upx;
                    color: #9a9a9d;
                }
                .cc-frame{
                    padding: 0 12upx;
                    height: 88upx;
                    width: 212upx;
                    border: 2upx solid #D8D8D8;
                    border-radius: 10upx;
                    @include centerFlex(space-between);
                    >input{
                        flex-grow: 1;
                        height: 100%;
                        font-size: 28upx;
                        color: #333;
                    }
                    >image{
                        margin-left: 20upx;
                        flex-shrink: 0;
                        width: 28upx;
                        height: 28upx;
                    }
                }

            }
        }
        .cm-btns{
            @include centerFlex(center);
            >view{
                margin: 0 14upx;
                height: 88upx;
                width: 240upx;
                line-height: 84upx;
                text-align: center;
                border-radius: 44upx;
                border: 2upx solid #D8D8D8;
                font-size: 32upx;
                color: #9A9A9D;
                &+view{
                    background-color: $themeColor;
                    border-color: $themeColor;
                    color: #fff;
                }
            }
        }

    }
</style>