<template>
    <div class="context">
        <div class="mainTitle">
            <h5>
                2020年暑假训练时间安排
            </h5>
            <span>第33周  8/10 - 8/16</span>
        </div>
        <div class="table">
            <div class="tableTitle">
                <span>时间</span>
                <span>星期一</span>
                <span>星期二</span>
                <span>星期三</span>
                <span>星期四</span>
                <span>星期五</span>
                <span>星期六</span>
                <span>星期日</span>
            </div>
            <div class="tableContext">
                <div class="times">
                    <span v-for="time in times">{{time.BeginStr}}-{{time.EndStr}}</span>
                </div>
                <div class="rows">
                    <em :style="{background:tab.ClassColor}"  v-for="tab in weekday1">
                        {{tab.ClassName}}
                    </em>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import {
        ClassListQuery,
        VipUserListQuery,
    } from "../api/getApiRes";
    import Global from '../Global.js'
    let qs = require('qs');
    export default {
        data() {
            return {
                weekday1:[],
                lessonList:[],
                times:[
                    {"BeginStr":"08:30","EndStr":"09:30"},
                    {"BeginStr":"08:30","EndStr":"09:30"},
                    {"BeginStr":"08:30","EndStr":"09:30"},
                    {"BeginStr":"08:30","EndStr":"09:30"},
                    {"BeginStr":"08:30","EndStr":"09:30"},
                    {"BeginStr":"08:30","EndStr":"09:30"},
                ],
                table: [{"SpdId":185,"PlanId":1,"WeekDay":1,"BeginStr":"08:30","EndStr":"09:30","ClassId":31,"TopLimit":10,"ConsumeHour":1,"Base":{"CreatedAt":"2020-09-04T10:49:59.28047+08:00","CreateUser":0,"UpdatedAt":"2020-09-04T10:49:59.28047+08:00","LasteditUser":0}},{"SpdId":186,"PlanId":1,"WeekDay":1,"BeginStr":"08:30","EndStr":"09:30","ClassId":31,"TopLimit":10,"ConsumeHour":1,"Base":{"CreatedAt":"2020-09-04T10:49:59.281139+08:00","CreateUser":0,"UpdatedAt":"2020-09-04T10:49:59.281139+08:00","LasteditUser":0}},{"SpdId":187,"PlanId":1,"WeekDay":1,"BeginStr":"08:30","EndStr":"09:30","ClassId":31,"TopLimit":10,"ConsumeHour":1,"Base":{"CreatedAt":"2020-09-04T10:49:59.281592+08:00","CreateUser":0,"UpdatedAt":"2020-09-04T10:49:59.281592+08:00","LasteditUser":0}},{"SpdId":188,"PlanId":1,"WeekDay":1,"BeginStr":"08:30","EndStr":"09:30","ClassId":31,"TopLimit":10,"ConsumeHour":1,"Base":{"CreatedAt":"2020-09-04T10:49:59.282043+08:00","CreateUser":0,"UpdatedAt":"2020-09-04T10:49:59.282043+08:00","LasteditUser":0}},{"SpdId":189,"PlanId":1,"WeekDay":1,"BeginStr":"09:30","EndStr":"10:30","ClassId":34,"TopLimit":10,"ConsumeHour":1,"Base":{"CreatedAt":"2020-09-04T10:49:59.282465+08:00","CreateUser":0,"UpdatedAt":"2020-09-04T10:49:59.282465+08:00","LasteditUser":0}},{"SpdId":190,"PlanId":1,"WeekDay":2,"BeginStr":"08:40","EndStr":"09:40","ClassId":34,"TopLimit":1,"ConsumeHour":1,"Base":{"CreatedAt":"2020-09-04T10:49:59.283074+08:00","CreateUser":0,"UpdatedAt":"2020-09-04T10:49:59.283074+08:00","LasteditUser":0}},{"SpdId":191,"PlanId":1,"WeekDay":2,"BeginStr":"08:40","EndStr":"09:40","ClassId":36,"TopLimit":1,"ConsumeHour":1,"Base":{"CreatedAt":"2020-09-04T10:49:59.283591+08:00","CreateUser":0,"UpdatedAt":"2020-09-04T10:49:59.283591+08:00","LasteditUser":0}},{"SpdId":192,"PlanId":1,"WeekDay":2,"BeginStr":"08:40","EndStr":"09:40","ClassId":36,"TopLimit":1,"ConsumeHour":1,"Base":{"CreatedAt":"2020-09-04T10:49:59.284042+08:00","CreateUser":0,"UpdatedAt":"2020-09-04T10:49:59.284042+08:00","LasteditUser":0}},{"SpdId":193,"PlanId":1,"WeekDay":2,"BeginStr":"08:40","EndStr":"09:40","ClassId":31,"TopLimit":1,"ConsumeHour":1,"Base":{"CreatedAt":"2020-09-04T10:49:59.284499+08:00","CreateUser":0,"UpdatedAt":"2020-09-04T10:49:59.284499+08:00","LasteditUser":0}},{"SpdId":194,"PlanId":1,"WeekDay":3,"BeginStr":"08:40","EndStr":"09:40","ClassId":36,"TopLimit":1,"ConsumeHour":1,"Base":{"CreatedAt":"2020-09-04T10:49:59.284914+08:00","CreateUser":0,"UpdatedAt":"2020-09-04T10:49:59.284914+08:00","LasteditUser":0}},{"SpdId":195,"PlanId":1,"WeekDay":4,"BeginStr":"08:40","EndStr":"09:40","ClassId":36,"TopLimit":1,"ConsumeHour":1,"Base":{"CreatedAt":"2020-09-04T10:49:59.285352+08:00","CreateUser":0,"UpdatedAt":"2020-09-04T10:49:59.285352+08:00","LasteditUser":0}},{"SpdId":196,"PlanId":1,"WeekDay":5,"BeginStr":"08:40","EndStr":"09:40","ClassId":31,"TopLimit":1,"ConsumeHour":1,"Base":{"CreatedAt":"2020-09-04T10:49:59.285751+08:00","CreateUser":0,"UpdatedAt":"2020-09-04T10:49:59.285751+08:00","LasteditUser":0}},{"SpdId":197,"PlanId":1,"WeekDay":6,"BeginStr":"08:40","EndStr":"09:40","ClassId":36,"TopLimit":1,"ConsumeHour":1,"Base":{"CreatedAt":"2020-09-04T10:49:59.286178+08:00","CreateUser":0,"UpdatedAt":"2020-09-04T10:49:59.286178+08:00","LasteditUser":0}},{"SpdId":198,"PlanId":1,"WeekDay":7,"BeginStr":"08:40","EndStr":"09:40","ClassId":34,"TopLimit":1,"ConsumeHour":1,"Base":{"CreatedAt":"2020-09-04T10:49:59.286588+08:00","CreateUser":0,"UpdatedAt":"2020-09-04T10:49:59.286588+08:00","LasteditUser":0}}],
            }
        },
        mounted() {
            this.panelSelect();
        },
        methods: {
            getData(){
                this.weekday1 = this.table.filter(function(v){
                    if(v.WeekDay == 1){
                        return v;
                    }
                });
                console.log(this.weekday1);
            },
            // 加载选项
            panelSelect() {
                let that = this;
                let param = {
                    token: localStorage.token,
                    vipType: '',
                    start: 1,
                    expDay: 0,
                    tableMax: 9999,
                };
                let postdata = qs.stringify(param);
                ClassListQuery(postdata).then(res => {
                    let json = res;
                    if (json.Code == 0) {
                        // that.dialogdata = json.Rs;
                        that.lessonList = turnClassResToOption(json.Rs);
                        for (let i = 0; i < that.table.length; i++) {
                            for (let j = 0; j < that.lessonList.length; j++) {
                                if(that.table[i].ClassId == that.lessonList[j].key){
                                    that.table[i].ClassName = that.lessonList[j].label;
                                    that.table[i].ClassColor = that.lessonList[j].ClassColor;
                                }
                            }
                        }
                        console.log(that.table);
                        that.getData();
                        // this.table.map(function(item){
                        //     if(item.PlanId == val){
                        //         res = item.label
                        //     }
                        // })
                    } else {
                        that.$message.error(json.Memo);
                    }
                })
            },

        },
    }
</script>

<style scoped>
    .mainTitle h5 {
        font-family: "Source Han Sans CN";
        font-weight: normal;
        font-size: 26px;
        text-align: center;
        color: #373737;
        margin: 0;
    }

    .context {
        margin: 0;
        padding: 0;
    }

    /deep/ .el-dialog__header, /deep/ .el-dialog__body {
        margin: 0;
        padding: 0;
    }
    .table {
        width: 100%;
        overflow: hidden;
        display: block;
        margin: 0 auto;
    }
    .mainTitle span {
        font-family: "Source Han Sans CN";
        font-weight: normal;
        font-size: 16px;
        text-align: left;
        color: #bdbdbd;
    }
    .tableContext {
        width: 100%;
        overflow: hidden;
        display: block;
        margin: 0 auto;
    }
    .tableContext .times {
        width: 113px;
        line-height: 60px;
        text-align: center;
        font-family: "Source Han Sans CN";
        font-weight: normal;
        font-size: 14px;
        line-height: 40px;
        color: #545454;
        float: left;
    }
    .times span {
        width: 100%;
        overflow: hidden;
        display: block;
        margin: 0 auto;
        height: 60px;
        line-height: 60px;
        background: #82BFFF;
        border-bottom: 2px solid #fff;
    }
    .tableTitle {
        width: 100%;
        overflow: hidden;
        display: block;
        margin: 0 auto;
    }
    .tableTitle span {
        width: 113px;
        height: 30px;
        line-height: 30px;
        font-family: "Source Han Sans CN";
        font-weight: normal;
        font-size: 12px;
        text-align: center;
        color: #222;
        float: left;
        background: #F0F2F5;
    }
    .rows {
        width: 113px;
        overflow: hidden;
        float: left;
    }
    .rows em {
        width: 113px;
        height: 60px;
        line-height: 60px;
        font-family: "Source Han Sans CN";
        font-weight: normal;
        font-size: 12px;
        text-align: center;
        overflow: hidden;
        display: block;
        margin: 0 auto;
        border-bottom: 2px solid #fff;
    }

</style>