<template>
  <div class="wrap">
    <!-- 头部 -->
    <div class="top">
       <i-form :model="form" inline>
          <Form-item prop="date">
          <row>
            <i-col span="12">
                <Date-picker v-model="form.date" type="date" placeholder="选择日期" style="width: 200px"></Date-picker>
            </i-col>
          </row>
          </Form-item>
          <Form-item>
            <i-button type="primary">提交</i-button>
        </Form-item>
      </i-form>
      <div class="info">
        <h3>学生考勤</h3>
        <a href="#">详情</a>
      </div>
    </div>
    <!-- 内容上部 -->
    <div class="contentTop clearfix">
          <!-- <div id="myChart" :style="{ width: '300px', height: '300px' }"></div> -->

           <i-circle :percent="80" stroke-linecap='square' :stroke-width='15' :size='200' :trail-width='15'>
              <span class="demo-circle-inner" style="font-weight:600">{{stuArrived+'%'}}</span><br />
              <span class="demo-circle-inner" style="font-size:18px;color:black;">学生实到率</span>
          </i-circle>
           <div class="ContentTopCenter" style="margin-right:50px">
              <p>应到学生<span>{{shouldPerson}}</span></p><br />
              <p>实到学生<span>{{reallyPerson}}</span></p>
            </div>
          <div id="ContentTopRight" style="padding:40px 0 0 0;margin-left:60px">
             <Row>
                  <i-col span="4" v-for="item in stuInfo" :key="item.id">
                      <div id="topRight">
                        <p>{{item.reason}}<span :class="{'red':item.red,'blue':item.blue}">{{item.num}}</span>
                        </p>
                      </div>
                  </i-col>
              </Row>
          </div>
        </i-col>
    </Row>
    </div>
    <!-- 内容中部 -->
    <div class="contentCenter">
      <div class="info">
        <h3>老师课耗</h3>
        <a href="#">详情</a>
      </div>
      <div class="teacher">
        <Row type="flex" justify="center" class="code-row-bg">
          <i-col span="12">
            <i-circle :percent="40" stroke-color="#7DDFC9" :size='130'>
               <div class="demo-circle-custom">
                <h1><span>40</span>人</h1>
                </div>
            </i-circle>
            <h3>上课教师的数量</h3>
          </i-col>
          <i-col span="12">
            <i-circle :percent="73"  :size='130' class="hour" stroke-color="#4A88F0">
                <div class="demo-circle-custom">
                <h1><span>73</span>节</h1>
                </div>
            </i-circle>
            <h3>教师上课课时</h3>
          </i-col>
        </Row>
      </div>

    </div>
    <!-- 内容下部 -->
    <div class="contentBottom">
      <div class="info">
        <h4>应用缴费情况</h4>
        <a href="#">详情</a>
      </div>
      <div class="money">
         <Row type='flex' justify='center'>
            <i-col span="14">
              <h1>￥<span>{{totalMoney+'.00'}}</span></h1>
              <h3>缴费总金额</h3>
              <div class="moneyBottom" >
                <div class="moneyInfo">
                 <div class="studentNum">
                  <img src="../../../assets/img/user2.png" alt="">
                 </div>
                 <div class="moneyNum">
                   <span>{{newStu}}</span>
                   <h4>新学员人数</h4>
                 </div>
              </div>
              <div class="moneyInfo" >
                 <div class="submitNum"></div>
                  <img src="../../../assets/img/list.png" style="width:30px" alt="">
                 <div class="moneyNum">
                   <span>{{submitPerson}}</span>
                   <h4>缴费学生人数</h4>
                 </div>
              </div>
              </div>
            </i-col>
            <i-col span="10">
               <h1>￥<span>{{totalMoney+'.00'}}</span></h1>
              <h3>缴费总金额</h3>
              <div class="moneyInfo" style="margin-left:140px">
                <img src="../../../assets/img/user2.png" style="width:30px" alt="">

                 <div class="moneyNum">
                   <span>{{newStu}}</span>
                   <h4>新学员人数</h4>
                 </div>
              </div>
            </i-col>
        </Row>
      </div>
    </div>

  </div>
</template>

<script>
export default {
  name: 'home',
  components: {
  },
  data () {
    return {
      stuArrived: 86,
      shouldPerson: 45,
      reallyPerson: 30,
      totalMoney: 12360.00,
      newStu: 38,
      submitPerson: 60,
      form: {
        date: ''
      },
      stuInfo: [
        {
          id: 1,
          reason: '请假',
          num: 2,
          red: false,
          blue: true
        },
        {
          id: 2,
          reason: '旷课',
          num: 1,
          red: true,
          blue: false

        },
        {
          id: 3,
          reason: '停课',
          num: 2,
          red: false,
          blue: true

        },
        {
          id: 4,
          reason: '退费',
          num: 2,
          red: false,
          blue: true

        },
        {
          id: 5,
          reason: '转学',
          num: 2,
          red: false,
          blue: true

        },
        {
          id: 6,
          reason: '流失',
          num: 2,
          red: true,
          blue: false

        }
      ]
    }
  },
  mounted () {
    // this.drawLine()
  },
  methods: {
  }
}
</script>

<style lang="less">
#topRight{
  width: 150px;
  height: 70px;
  background:rgba(255,255,255,1);
  border:1px solid rgba(215, 214, 219, 1);
  box-shadow:0px 0px 5px 0px rgba(30,30,30,0.71);
  border-radius:3px;
  margin: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  p{
    font-size:20px;
    font-family:'Microsoft YaHei';
    font-weight:600;
    color:rgba(0,0,0,1);
    line-height:56px;
    span{
      font-size:29px;
      font-family:'FZZhengHeiS-EB-GB';
      font-weight:400;
      line-height:56px;
      padding-left: 20px;
    }
  }

}
// 公共样式
.blue{
  color:rgba(61,164,255,1);

}
.red{
  font-size: 30px;
  color: red;
}
 .info{
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid rgba(239,239,239,1);
  padding-bottom: 10px;
  }
.clearfix:after {
  content: "";
  display: block;
  clear: both;
}
.demo-circle-inner{
  font-size:30px;
  font-family:'FZZhengHeiS-EB-GB';
  color:rgba(75,204,238,1);
  line-height:40px;
}
// 样式
   #contentTopRight{
    padding-top: 40px;
   }
.wrap{
  background: white;
  padding: 10px;
}
.contentTop{
  // #myChart{
  //   float: left;
  // }
  .ivu-chart-circle{
    float: left;
    margin:50px 40px 0  30px;
  }
  .ContentTopCenter{
    // flex:1;
    float: left;
    display: flex;
    align-items: center;
    flex-direction: column;
    margin-top: 70px;
    p{
      font-size: 20px;
      font-family: "MicrosoftYaHeiLight";
      color: #010101;
      span{
        padding-left: 10px;
        color: #4597FF;
        font-size: 30px;
        font-family: "FZZDHJW--GB1-0";
      }

    }
  }
   }
.contentCenter{
  .teacher{
    padding: 20px 0;
    .ivu-col {
      display: flex;
      // justify-content: center;
      align-items: center;
      flex-direction: column;
      .demo-circle-custom{
        h1{
          span{
           font-size:37px;
            font-family:"FZZhengHeiS-EB-GB";
            font-weight:600;
            color:rgba(125,223,201,1);
            line-height:70px;
          }
        }
      }
      .hour{
        h1{
          span{
            font-size:38px;
            font-family:FZZhengHeiS-EB-GB;
            font-weight:600;
            color:rgba(74,136,240,1);
            line-height:72px;
          }
        }
      }
      h3{
        padding-top: 20px;
      }
    }
  }
}
.contentBottom{
  padding-bottom: 50px;

  h1{
    text-align: center;
     padding-top: 50px;
    span{
      font-size:32px;
      font-family:FZZhengHeiS-EB-GB;
      font-weight:800;
      color:rgba(61,164,255,1);
      line-height:52px;
    }
  }
  h3{
    text-align: center;
    font-size:16px;
    font-family:Microsoft YaHei;
    font-weight:400;
    color:rgba(0,0,0,1);
    line-height:52px;
  }
  .moneyBottom{
    margin-left:120px;
  }
  .moneyInfo{
    float: left;
    margin-left: 20px;
    padding-left: 20px;
    width: 162px;
    height: 71px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: white;
    box-shadow: 0 0 10px grey;
    .studentNum{
      flex: 1;
      display: flex;
      justify-content: center;
      align-items: center;
      img{
        height: 35px;
      }

    }
     .moneyNum{
        flex:3;
        margin-left: 10px;
        span{
          font-size:20px;
          font-family:FZZhengHeiS-EB-GB;
          font-weight:600;
          color:rgba(253,117,60,1);
          line-height:33px;
        }

      }

  }
  }

</style>
