<template>
    <div class="container">
        <div class="lt">
            <div class="top">
                <ul>
                    <li @click="goPage('member')">
                        <img src="../assets/img/main/member.png" height="54" width="54"/>
                        <div class="liRight">
                            <h5>会员人数</h5>
                            <span>2239</span>
                        </div>
                        <div class="btLine">
                            <em class="emlt">
                                <i class="el-icon-caret-top"></i>
                                今日新增 36
                            </em>
                            <em class="emrt">
                                <i class="el-icon-caret-top"></i>
                                较昨日新增 +6
                            </em>
                        </div>
                    </li>
                    <li @click="goPage('record')">
                        <img src="../assets/img/main/appoint.png" height="54" width="54"/>
                        <div class="liRight">
                            <h5>预约人数</h5>
                            <span>2239</span>
                        </div>
                        <div class="btLine">
                            <em class="emlt">
                                <i class="el-icon-caret-top"></i>
                                今日预约 36
                            </em>
                            <em class="emrt">
                                <i class="el-icon-caret-top"></i>
                                较昨日新增 +6
                            </em>
                        </div>
                    </li>
                    <li @click="goPage('lesson')">
                        <img src="../assets/img/main/lesson.png" height="54" width="54"/>
                        <div class="liRight">
                            <h5>课程数量</h5>
                            <span>2239</span>
                        </div>
                        <div class="btLine">
                            <em class="emlt">
                                <i class="el-icon-caret-top"></i>
                                已预约课程 36
                            </em>
                        </div>
                    </li>
                </ul>
            </div>

            <div class="finish">
                <div class="title">
                    <h5>下课管理</h5>
                    <span>{{getNowDate}}</span>
                </div>
                <ul>
                    <li v-for="c in classList">
                        <div class="finListTitle" :style="{ background:c.color }">
                            {{c.name}}
                        </div>
                        <div class="context">
                            <div class="ctl">
                                <span>上课时间：  {{c.timeLong}}</span>
                                <span>上课人数： {{c.kick}} 人</span>
                            </div>
                            <br>
                            <br>
                            <el-button type="primary" plain @click="goPage('finish')">下课</el-button>
                        </div>
                    </li>
                </ul>
            </div>

            <div class="appoint">
                <div class="title" >
                    <h5>预约课程</h5>
                    <span>{{getNowDate}}</span>
                </div>
                <div class="appointCard">
                    <el-card class="box-card" v-for="c in classList" >
                        <div class="cardTitle blue"  :style="{ color:c.color }">
                            {{c.name}}
                        </div>
                        <span>
                           {{c.timeLong}}
                        </span>
                        <em>最大预约人数 <i>{{c.kick}}</i></em>
                        <em>已预约人数 <i>{{c.kick}}</i></em>
                        <em>预约状态 <s class="blue">可预约</s></em>
                    </el-card>
                </div>
            </div>
        </div>
        <div class="rt">
            <div class="rtContext">
                <div class="rtTitle">
                    <h5>最新预约</h5>
                    <span @click="goPage('appoint')">查看全部</span>
                </div>
                <ul>
                    <li v-for="as in appointList">
                        <div class="asTitle">
                            <img src="../assets/img/main/Oval.png" alt="">
                          <span>
                                {{as.tel}}
                          </span>
                        </div>
                        <div class="asContent">
                            <span>预约时间：<em>{{as.create.substr(11,9)}}</em></span>
                            <span>预约状态：<em>{{as.Status == 1 ?'预约成功':'预约失败'}}</em></span>
                            <span>预约课程：<s class="blue" :style="{ background:as.color }"> {{as.name}}</s></span>
                            <span>剩余课时：<em>{{as.kick}}课时</em></span>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</template>

<script>
    import {testTable} from "../api/getApiRes";

    let qs = require('qs');
    export default {
        data() {
            return {
                editableTabsValue: '1',
                getNowDate: getNowDate(),
                classList: [],
                appointList: [],
            }
        },
        mounted() {
            let that = this;

            // 下课管理
            this.ClassQuery();
            this.appointQuery();
            this.timer = setInterval(() => {
                that.appointQuery();
            }, 10000);
        },
        destroyed () {
            clearInterval(this.timer);//页面销毁时清除定时器
        },
        methods: {
            goPage(url) {
                this.$router.push({
                    path: '/' + url,
                    query: {}
                })
            },
            // 下课管理
            ClassQuery() {
                let that = this;
                that.loading = true;
                let param = {
                    token: localStorage.token,
                };
                let postdata = qs.stringify(param);
                testTable(postdata).then(res => {
                    let json = res;
                    if (json.Code == 0) {
                        that.loading = false;
                        if (json.Rs) {
                            that.classList = json.Rs;
                            console.log(that.classList);
                        }
                    } else {
                        that.$message.error(json.Memo);
                    }
                })
            },
            // 最新预约
            appointQuery() {
                let that = this;
                that.loading = true;
                let param = {
                    token: localStorage.token,
                };
                let postdata = qs.stringify(param);
                testTable(postdata).then(res => {
                    let json = res;
                    if (json.Code == 0) {
                        that.loading = false;
                        if (json.Rs) {
                            that.appointList = json.Rs;
                        }
                    } else {
                        that.$message.error(json.Memo);
                    }
                })
            }
        },
        components: {}
    }
</script>

<style scoped>

    ul, li {
        list-style: none;
        margin: 0;
        padding: 0;

    }

    em {
        font-style: normal;
    }

    .container {
        width: 100%;
        overflow: hidden;
        display: block;
        margin: 0 auto;
        padding-bottom: 60px;
    }

    .container .lt {
        width: 1173px;
        float: left;
        margin-top: 10px;
    }

    .container .rt {
        width: 410px;
        height: 100%;
        float: right;
    }

    .lt .top {
        width: 100%;
        overflow: hidden;
        display: block;
        margin: 0 auto;
    }

    .lt .top li {
        width: 377px;
        height: 160px;
        float: left;
        background: #fff;
        border-radius: 12px;
        margin-right: 20px;
        cursor: pointer;
    }

    .lt .top li:nth-child(3) {
        margin-right: 0;
    }

    .top li img {
        float: left;
        margin-top: 37px;
        margin-left: 30px;
        margin-right: 24px;
    }

    .top li .liRight {
        width: 200px;
        float: left;
        margin-top: 37px;
    }

    .top .liRight h5 {
        margin: 0;
        padding: 0;
        text-align: left;
    }

    .top .liRight span {
        width: 100%;
        overflow: hidden;
        display: block;
        margin: 0 auto;
        text-align: left;
        font-size: 26px;
        font-family: Arial;
        margin-top: 7px;
        margin-bottom: 20px;
    }

    .btLine {
        width: 100%;
        overflow: hidden;
        display: block;
        margin: 0 auto;
        border-top: 1px solid #F0F2F5;
        padding-top: 17px;
    }

    .btLine em {
        font-size: 14px;
    }

    .btLine .emlt {
        width: 50%;
        float: left;
    }

    .btLine i {
        font-size: 18px;
        color: #BDBDBD;
    }

    .finish {
        width: 100%;
        overflow: hidden;
        display: block;
        margin: 0 auto;
        background: #fff;
        margin-top: 20px;
        border-radius: 12px;
        padding-top: 30px;
        padding-bottom: 0px;
    }

    .finish .title {
        overflow: hidden;
        display: block;
        margin: 0 auto;
        padding-left: 30px;
    }

    .finish .title h5 {
        margin: 0;
        float: left;
        font-size: 18px;
    }

    .finish .title span {
        float: right;
        margin-right: 43px;
        font-size: 14px;
        color: #717171;
    }

    .finish ul {
        overflow: hidden;
        display: block;
        padding-left: 30px;
        padding-right: 30px;
        margin: 0 auto;
        margin-top: 25px;
    }

    .finish ul li {
        width: 347px;
        height: 144px;
        float: left;
        margin-bottom: 24px;
    }

    .finish ul li:nth-child(2) {
        margin-left: 24px;
        margin-right: 24px;
    }

    .finish ul li:nth-child(5) {
        margin-left: 24px;
        margin-right: 24px;
    }

    .finish li .finListTitle {
        width: 100%;
        height: 35px;
        line-height: 35px;
        overflow: hidden;
        display: block;
        margin: 0 auto;
        background-color: #3799FF;
        border-top-left-radius: 7px;
        border-top-right-radius: 7px;
        color: #fff;
    }

    .finish li .context {
        width: 344px;
        overflow: hidden;
        display: block;
        margin: 0 auto;
        border: 1px solid #E8E8E8;
        border-top: none;
        padding-top: 16px;
        padding-bottom: 16px;
    }

    .context .ctl {
        width: 231px;
        float: left;
        padding-left: 16px;
    }

    .ctl span {
        width: 100%;
        height: 30px;
        line-height: 30px;
        overflow: hidden;
        display: block;
        margin: 0 auto;
        background-color: #F8F8F8;
        color: #404040;
        font-size: 14px;
        margin-bottom: 15px;
    }

    .ctl span:nth-child(2) {
        margin-bottom: 0px;
    }

    /deep/ .el-button--primary.is-plain {
        background-color: #fff;
    }

    /deep/ .el-button--primary.is-plain:hover {
        color: #005EA2 !important;
    }

    .blue {
        color: #3799FF;
    }

    .appoint {
        width: 100%;
        overflow: hidden;
        display: block;
        margin: 0 auto;
        background: #fff;
        margin-top: 20px;
        border-radius: 12px;
        padding-top: 30px;
        padding-bottom: 0px;
    }

    .appoint .title {
        overflow: hidden;
        display: block;
        margin: 0 auto;
        padding-left: 30px;
    }

    .appoint .title h5 {
        margin: 0;
        float: left;
        font-size: 18px;
    }

    .appoint .title span {
        float: right;
        margin-right: 43px;
        font-size: 14px;
        color: #717171;
    }

    .appoint .appointCard {
        overflow: hidden;
        display: block;
        margin: 0 auto;
        padding-top: 26px;
        padding-bottom: 30px;
        padding-left: 30px;
        padding-right: 30px;
    }

    /deep/ .el-card {
        width: 150px;
        float: left;
        margin-right: 31px;
        padding: 0;
        border-radius: 12px;
    }

    /deep/ .el-card:nth-child(last) {
        margin-right: 0;
    }

    /deep/ .el-card__body {
        padding: 0;
    }

    .cardTitle {
        width: 100%;
        overflow: hidden;
        display: block;
        margin: 0 auto;
        height: 40px;
        line-height: 40px;
        background: #F0F2F5;
    }

    .appointCard span {
        width: 100%;
        overflow: hidden;
        display: block;
        margin: 0 auto;
        color: #777777;
        font-family: Arial;
        margin-top: 10px;
        margin-bottom: 10px;
        font-size: 16px;
    }

    .appointCard em {
        overflow: hidden;
        display: block;
        margin: 0 auto;
        font-size: 12px;
        margin-bottom: 20px;
        text-align: left;
        padding-left: 16px;
        padding-right: 16px;
    }

    .appointCard em i {
        float: right;
        color: #000000;
        padding-right: 3px;
    }

    .appointCard em s {
        width: 47px;
        height: 20px;
        line-height: 20px;
        text-align: center;
        font-style: normal;
        text-decoration: none;
        float: right;
        border-radius: 3px;
    }

    .appointCard em s.blue {
        background-color: #E5F2FF;
    }

    .rtContext {
        width: 100%;
        overflow: hidden;
        display: block;
        margin: 0 auto;
        margin-top: 10px;
        background: #fff;
        padding: 0;
        border-radius: 12px;
        min-height: 920px;
        background: #fff;
    }

    .rtContext .rtTitle {
        overflow: hidden;
        display: block;
        margin: 0 auto;
        padding: 30px;
    }

    .rtTitle h5 {
        margin: 0;
        float: left;
        font-size: 18px;
    }

    .rtTitle span {
        float: right;
        font-size: 14px;
        color: #BDBDBD;
        cursor: pointer;
    }

    .rtContext ul {
        overflow: hidden;
        display: block;
        margin: 0 auto;
        padding-left: 30px;
        padding-right: 30px;
    }

    .rtContext li {
        width: 100%;
        overflow: hidden;
        display: block;
        margin: 0 auto;
        border-bottom: 1px solid #F0F2F5;
        padding-top: 30px;
        padding-bottom: 10px;
    }

    .asTitle {
        width: 100%;
        height: 30px;
        overflow: hidden;
        display: block;
        margin: 0 auto;
        text-align: left;
        line-height: 20px;
        color: #000000;
        font-size: 14px;
    }
    .asTitle img {
        float: left;
        margin-right: 5px;
    }

    .asTitle span {
        /*width: 26px;*/
        height: 30px;
        line-height: 26px;
        float: left;
        margin-right: 10px;
    }

    .asContent {
        width: 100%;
        overflow: hidden;
        display: block;
        margin: 0 auto;
    }

    .asContent span {
        width: 50%;
        float: left;
        font-size: 14px;
        color: #BDBDBD;
        margin-bottom: 10px;
        text-align: left;
        text-indent: 8px;
    }

    .asContent span em {
        color: #000;
        text-align: left;
    }

    .asContent span s {
        text-decoration: none;
        color: #000;
        border-radius: 250px;
        padding: 3px 5px;
    }

    .asContent span s.blue {
        background-color: #E5F2FF;
    }
    .box-card em {
        font-style: normal;
    }
</style>
