<template>
    <div class="index">
        <!-- 顶部搜索栏 start -->
        <div style="text-align:left">
            <DatePicker format="yyyy-MM-dd" type="date" placeholder="Select date" style="width: 200px"></DatePicker>
            <Button type="primary" icon="ios-search">
                <span>搜索</span>
            </Button>
        </div>
        <!-- 顶部搜索栏 end -->
        <!-- 学生考勤栏 start -->
        <div class="index-title">
            <span class="index-text">学生考勤</span>
            <span class="index-details">详情</span>
        </div>
        <div class="index-work">
            <i-Circle
                :size="225"
                :trail-width="15"
                :stroke-width="15"
                :percent="75"
                stroke-linecap="square"
                stroke-color="#43a3fb">
                <div class="demo-Circle-custom">
                    <h1>86%</h1>
                    <p>
                        学生实到率
                    </p>
                </div>
            </i-Circle>
            <div class="work-total">
                <div class="work-total-div">
                    <span class="work-total-title">应到学生</span>
                    <span class="work-total-num">775</span>
                </div>
                <div class="work-total-div">
                    <span class="work-total-title">实到学生</span>
                    <span class="work-total-num">705</span>
                </div>
            </div>
            <div class="workList-card">
                <Row type="flex" align="middle">
                    <Col span="8" v-for="(work,index) in workList" :key="index" shadow="true">
                        <div class="workList-text-div workList-text">
                            <span class="workList-title">{{work.title}}</span>
                            <span class="workList-num" :class="{'workList-num-err':index==1||index==5}">{{work.num}}</span>
                        </div>
                    </Col>
                </Row>
            </div>
        </div>
        <!-- 学生考勤栏 end -->
        <!-- 老师课耗栏 star -->
        <div>
           <div class="index-title">
                <span class="index-text">老师课耗</span>
                <span class="index-details">详情</span>
            </div> 
        </div>
        <div class="add-padding">
          <div>
              <i-Circle 
                  :size="240"
                  :trail-width="4"
                  :stroke-width="6"
                  :percent="19"
                  stroke-color="#7DDFC9">
                  <span class="demo-Circle-inner">40<span>人</span></span>
              </i-Circle>
              <div class="teacher-num">
                  上课教师数量
              </div>
          </div>
          <div class="line"></div>
          <div>
              <i-Circle 
                  :size="240"
                  :trail-width="4"
                  :stroke-width="6"
                  :percent="19">
                  <span class="demo-Circle-inner blue">73<span>节</span></span>
              </i-Circle>
              <div class="teacher-num">
                  教师上课教课时
              </div>
          </div>
        </div>
        <!-- 缴费情况栏 start -->
        <div class="index-title">
            <span class="index-text">应缴费用情况</span>
            <span class="index-details">详情</span>
        </div>
       <Row class="add-padding">
            <Col v-for="(cost,i) in costList" :key="i" :span="24/costList.length">
                <div class="cost-pirce">
                    <sup class="sign">¥</sup>{{cost.price}}
                </div>
                <div class="teacher-num">
                    <div>{{cost.title}}</div>
                </div>
                <div class="cost-carl-div" :class="{'cost-carl-div-flex':cost.length>1}">
                    <div v-for="(list,ind) in cost.list" :key="ind" class="cost-carl">
                        <img :src="ind==1?require('../../../assets/renw.png'):require('../../../assets/toux.png')" class="cost-avatar">
                        <div>
                            <div class="cost-num">{{list.num}}</div>
                            <div class="cost-title">{{list.title}}</div>
                        </div>
                    </div>
                </div>
            </Col>
        </Row>
    </div>
</template>
<script>
export default {
    data(){
        return {
            workList:[
                {"title":"请假","num":2},
                {"title":"旷课","num":1},
                {"title":"停课","num":7},
                {"title":"退费","num":3},
                {"title":"转学","num":0},
                {"title":"流失","num":2},
            ],
            costList:[
                {
                    "title":"缴费总金额",
                    "price":"13600.00",
                    "list":[
                        {"title":"新学员人数","num":"38"},
                        {"title":"缴费学生人数","num":"60"}
                    ]
                },
                {
                    "title":"退费总金额",
                    "price":"3600.00",
                    "list":[
                        {"title":"新学员人数","num":"38"}
                    ]
                }
            ]
        }
    }
}
</script>

<style lang="less" scoped>
.count-style{
  font-size: 50px;
}
.index{
    color: #000000;
    .ivu-btn{
        padding: 0 4px;
        margin-left: 8px;
        height: 30px;
    }
    .index-title{
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom:1px solid #EFEFEF;
        margin-top: 34px;
        .index-text{
            font-size: 24px;
            padding: 8px 0;
        }
        .index-details{
            font-size: 20px;
            color: #3DA4FF;
        }
    }
    .index-work{
        padding:45px 39px 0 39px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        .demo-Circle-custom{
            & h1{
                color: #4BCCEE;
                font-size: 36px;
            }
            & p{
                color: #657180;
                font-size: 20px;
                margin: 19px 0 15px;
            }
        }
    }


    .work-total{
        .work-total-div{
            padding: 20px 10px 20px 10px;
            display: flex;
            justify-content: center;
            align-items: center;
            .work-total-title{
                font-size: 20px;
                color: #657180;
                margin-right: 16px;
            }
            .work-total-num{
                font-size: 36px;
                color: #4597FF;
            }
        }
    }
    .workList-card{
        width: 787px;
        height: 100%;
        .workList-text-div{ 
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin:0 0 36px 20px;
            height: 120px;
            border: 1px solid #D7D6DB;
            border-radius: 5px;  
            padding:38px 33px; 
            box-shadow: 0px 0px 4px 2px #EBEBEB;        
            .workList-title{
                font-size: 30px;
            }
            .workList-num{
                font-size: 45px;
                color:#3DA4FF;
            }
            .workList-num-err{
                color:#FF0000;
            }
        }
    }

    .demo-Circle-inner{
        color: #7DDFC9;
        font-size: 50px;
        font-weight: bold;
        & span{
            color: #000000;
            font-size: 43px;
            font-weight: normal;
        }
    }
    .blue{
        color: #4A88F0;
    }
    .line{
        height: 240px;
        border-right: 1px solid #F4F4F5;
        display: inline-block;
        text-align: center;
    }
    .add-padding{
        display: flex;
        justify-content: space-around;
        padding-top: 45px;
        .teacher-num{
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 30px;
        }
        .cost-pirce{
            font-size: 56px;
            color: #3DA4FF;
            display: flex;
            align-items: center;
            justify-content: center;
            .sign{
                font-size: 33px;
                color: #000000;
            }
        }
        .cost-carl-div-flex{
            justify-content: space-between;
        }
        .cost-carl-div{
            display: flex;
            justify-content: center;
            align-content: center;
            width: 100%;
            .cost-carl{
                margin: 69px 16px 0;
                width: 323px;
                height: 141px;
                border: 1px solid #D7D6DB;
                border-radius: 5px;  
                padding:38px 33px; 
                box-shadow: 0px 0px 4px 2px #EBEBEB; 
                display: flex;
                align-items: center;
                .cost-avatar{
                    width: 43px;
                    height: 49px;
                    margin-right: 42px;
                }
                .cost-num{
                    font-size: 36px;
                    font-weight: 600;
                    color: #FD753C;
                }
                .cost-title{
                    font-size: 25px;
                }
            }
        }
    }
}
</style>
