<template>
    <view class="shift-application fixed-bot-padding">
        <view class="a-warn">注：私教课以及教练预约的课程不可换班</view>
        <view class="a-tit">我的换班</view>
        <view class="a-ipts">
            <picker :range="courseList" range-key="name" @change="courseChange">
                <view class="i-view">
                    <input placeholder="请选择课程" disabled v-model="selectInfo.courseInfo.name" />
                    <image mode="aspectFit" src="/static/images/triangle_c33.png"></image>
                </view>
            </picker>
            <picker :range="classList" range-key="class_name" @change="classChange">
                <view class="i-view">
                    <input placeholder="请选择班级" disabled v-model="selectInfo.classInfo.class_name"  />
                    <image mode="aspectFit" src="/static/images/triangle_c33.png"></image>
                </view>
            </picker>
            <picker :range="coachList" range-key="name" @change="coachChange">
                <view class="i-view">
                    <input placeholder="请选择换班教练" disabled v-model="selectInfo.coachInfo.name" />
                    <image mode="aspectFit" src="/static/images/triangle_c33.png"></image>
                </view>
            </picker>
            <!-- <picker :range="timeList" range-key="_time" @change="timeChange"> -->
                <view class="i-view" @click="showTimeModal">
                    <input placeholder="请选择换班时间" disabled v-model="selectedTimeTxt" />
                    <image mode="aspectFit" src="/static/images/triangle_c33.png"></image>
                </view>
            <!-- </picker> -->
        </view>
        <view class="a-tip">
            <view>换班需要换班教练的时间为空闲。</view>
            <view>换班后您的时间为空闲，记得前往我的时间。</view>
            <view>管理您的时间哦。</view>
        </view>
        <view class="a-mask" v-if="isShowTimeModal">
            <view class="m-content">
                <scroll-view class="c-list" scroll-y="">
                    <view v-for="(e, i) in timeList" :key="i" :class="['l-item', tempSelectTimeID.includes(e.id)?'active':'']" @click="timeSelect(e)">{{e._time || '-'}}</view>
                </scroll-view>
                <view class="c-btns">
                    <view hover-class="hover-active" @click="isShowTimeModal = false">取消</view>
                    <view hover-class="hover-active" @click="confirmTimeSelected">确定</view>
                </view>
            </view>
        </view>
        <view class="fixed-bot-btn"><view hover-class="hover-active" @click="submitBtn">提交换班申请</view></view>
    </view>
</template>

<script>
import { mapState } from 'vuex';
import { API } from '../../../js/api';
import { servers } from '../../../js/server';
import util from '../../../utils/util';
export default {
    computed: {
        ...mapState([ 'storeInfo' ]),
        selectedTimeTxt(){
            let { selectTimeIDS, timeList } = this;
            let txtArr =  timeList.filter(e=>selectTimeIDS.includes(e.id)).map(e=>e._time);
            return txtArr.join(',') || '';
        }
    },
    data(){
        return {
            courseList: [], // 课程列表
            classList: [], // 班级列表
            coachList: [], // 教练列表
            timeList: [], // 时间列表
            selectTimeIDS: [], // 已选时间
            tempSelectTimeID: [], // 临时选中
            isShowTimeModal: false,
            selectInfo: {
                courseInfo: {
                    name: ''
                },
                classInfo: {
                    class_name: ''
                },
                coachInfo: {
                    name: ''
                },
            }
        }
    },
    onLoad(){
        this.getCourseList({});
    },
    methods: {
        submitBtn: util.debounce(function(){
            let { courseInfo, classInfo, coachInfo } = this.selectInfo;
            let { selectTimeIDS } = this;
            if(!courseInfo.id || !classInfo.id || !coachInfo.id || selectTimeIDS.length<=0 )return util.showNone('请选择完整！');
            util.showLoad();
            servers.post({
                url: API.addShiftWorkRecord,
                data: {
                    course_id: courseInfo.id,
                    class_id: classInfo.id,
                    accept_coach_id: coachInfo.id,
                    course_duration_ids: selectTimeIDS,
                },
                isDefaultGet: false,
            })
            .then(res=>{
                util.hideLoad();
                if(res.data.code == 0){
                    util.showModal({
                        title: '提示',
                        content: res.data.message || '操作成功！',
                        success: ele=>{
                            if(ele.confirm)util.routeTo(`/pages/shift/record/record`, 'nT')
                        }
                    })
                }else{
                    util.showModal({
                        title: '提示',
                        content: res.data.message || '操作失败！'
                    })
                }
            })
            .catch(util.hideLoad)

            
        }, 300, 300),
        showTimeModal(){
            this.isShowTimeModal = true;
            this.tempSelectTimeID = [...this.selectTimeIDS];
        },
        timeSelect(e){
            let { tempSelectTimeID } = this;
            this.tempSelectTimeID = tempSelectTimeID.includes(e.id) ? 
                                    tempSelectTimeID.filter(el=>el!=e.id) : 
                                    [...tempSelectTimeID, e.id];
        },
        confirmTimeSelected(){
            this.selectTimeIDS = [...this.tempSelectTimeID];
            this.isShowTimeModal = false;
        },
        // 教练切换
        coachChange(e){
            let { coachList, selectInfo } = this;
            if(!selectInfo.classInfo.id)return util.showNone('请选择班级！');
            let _coachInfo  = coachList[e.detail.value] || {};
            this.timeList = [];
            this.selectTimeIDS = [];
            this.selectInfo = {
                ...selectInfo,
                coachInfo: _coachInfo
            };

            this.getShiftWorkClassTimes(selectInfo.courseInfo.id);
        },
        // 班级切换
        classChange(e){
            let { classList, selectInfo } = this;
            if(!selectInfo.courseInfo.id)return util.showNone('请选择课程！');
            let _classInfo  = classList[e.detail.value] || {};
            this.timeList = [];
            this.selectTimeIDS = [];
            this.selectInfo = {
                ...selectInfo,
                classInfo: _classInfo,
                coachInfo: {
                    name: ''
                }
            };
            this.getCoachList();
        },
        // 课程切换
        courseChange(e){
            let { courseList } = this;
            let _courseInfo  = courseList[e.detail.value] || {};
            this.timeList = [];
            this.selectTimeIDS = [];
            this.selectInfo = {
                courseInfo: _courseInfo,
                classInfo: {
                    class_name: ''
                },
                coachInfo: {
                    name: ''
                }
            };
            this.getClassList( _courseInfo.id );
            
        },

        // 时间列表
        getShiftWorkClassTimes(courseId){
            util.showLoad();
            servers.get({
                url: API.getShiftWorkClassTimes,
                data: { courseId },
                failMsg: '加载失败！'
            })
            .then(res=>{
                util.hideLoad();
                let _list = res || [];

                this.timeList = _list.map(e=>{
                    return {
                        ...e,
                        _time: `${e.date} ${e.start_duration}~${e.end_duration}`
                    }
                });
            })
        },
        // 教练列表
        getCoachList(){
            util.showLoad();
            let { storeInfo } = this;
            servers.get({
                url: API.getCoachList,
                data: { stadium_id: storeInfo.id  },
                failMsg: '加载失败！'
            })
            .then(res=>{
                util.hideLoad();
                let _list = res.list || [];
                this.coachList = _list;
            })
        },
        // 班级列表
        getClassList( course_id ){
            util.showLoad();
            servers.get({
                url: API.course.getClassList,
                data: { course_id, type: 0 },
                failMsg: '加载失败！'
            })
            .then(res=>{
                util.hideLoad();
                let _list = res.list || [];
                this.classList = _list;
                console.warn(_list)
            })
        },
        // 课程列表
        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,
                    have_class_way: 2,
                },
                failMsg: '加载失败！'
            })
            .then(res=>{
                util.hideLoad();
                let _list = res.list || [];
                this.courseList = _list;
            })
        }
    }
}
</script>

<style lang="scss">
    @import "~style/public.scss";
    .a-mask{
        position: fixed;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        z-index: 10;
        background-color: rgba($color: #000000, $alpha: .5);
        .m-content{
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            width: 80%;
            height: 800upx;
            border-radius: 10upx;
            background-color: #fff;
            padding: 24upx;
            .c-list{
                margin-bottom: 24upx;
                height: 600upx;
                .l-item{
                    margin-bottom: 12upx;
                    height: 80upx;
                    border: 2upx solid #d8d8d8;
                    color: #333;
                    line-height: 76upx;
                    text-align: center;
                    font-size: 36upx;
                    
                    border-radius: 10upx;
                    &.active{
                        border-color: $themeColor;
                        color: $themeColor;
                    }
                }
            }
            .c-btns{
                @include centerFlex(center);
                >view{
                    margin: 0 24upx;
                    width: 200upx;
                    height: 88upx;
                    line-height: 88upx;
                    text-align: center;
                    border-radius: 44upx;
                    background-color: $themeColor;
                    font-size: 32upx;
                    color: #fff;
                    border: 2upx solid $themeColor;
                    &:first-child{
                        color: $themeColor;
                        background-color: #fff;
                    }
                }
            }
        }   
    }
    page{
        background-color: #fff;
    }
    .shift-application{
        
    }
    .a-warn{
        margin-bottom: 52upx;
        height: 92upx;
        line-height: 92upx;
        text-align: center;
        font-size: 28upx;
        color: #FF873D;
        background-color: rgba($color: #FF873D, $alpha: .2);
    }
    .a-tit{
        line-height: 44upx;
        text-align: center;
        font-size: 32upx;
        font-weight: 500;
        color: #333;

    }
    .a-ipts{
        padding-top: 24upx;
        .i-view{
            margin: 0 auto 24upx;
            width: 538upx;
            height: 88upx;
            border: 2upx solid #d8d8d8;
            border-radius: 10upx;
            padding: 0 20upx;
            @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;
            }
        }

    }
    .a-tip{
        margin: 0 auto;
        width: 538upx;
        >view{
            font-size: 26upx;
            line-height: 36upx;
            color: #9a9a9d;
        }
    }
    .fixed-bot-btn{
        border-top: 2upx solid #D8D8D8;
    }
    
</style>