<style>
  .schedulVisit {
    min-height: calc(100% - 30px);
    padding: 15px;
    margin-top: 30px;
    border-radius: 8px;
    background: #fff;
  }

  .schedulVisit .fangkeTitle {
    color: #000000;
    font-size: 18px;
    font-weight: bold;
  }

  .schedulVisit .fangkeNumb {
    display: inline-block;
    background-color: #BCCEFD;
    color: #2966FE;
    font-size: 15px;
    border-radius: 6px;
    text-align: center;
    line-height: 22px;
    margin-left: 15px;
    padding: 0px 6px;
  }

  .schedulVisit .visit_Date {
    margin-left: 60px;
    color: #000000;
    font-size: 16px;
  }

  .schedulVisit .visit_Date i {
    color: #B4B4B4;
    margin-right: 10px;
  }

  .page-option .el-input__inner {
    background-color: #F1F3F5;
    border: 0;
    height: 34px;
    line-height: 34px;
    border-radius: 10px;
  }

  .page-option .el-input__icon {
    line-height: 34px;
  }

  .schedul_Vtable tr th {
    color: #8E8E8E;
  }

  .schedul_Vtable tr td {
    color: #2D2D2D;
  }

  .visit_FORM .el-input__inner {
    background: #F0F2F5;
    border-radius: 10px;
    height: 34px;
    line-height: 34px;
    border: 0;
  }

  .visit_FORM .el-input__icon {
    line-height: 34px;
  }

  .schedulVisit .q-table {
    padding-bottom: 5px;
  }

  .schedulVisit .q-table tbody td:before {
    background: '' !important;
  }

  .schedulVisit .q-table tbody tr:hover {
    box-shadow: 0px 2px 20px 0px #E4E7FB;
    background: #fff;
    border-radius: 16px
  }

  .schedulVisit .q-table tbody td:before {
    background: transparent !important;
  }

  .scheduVipop .el-textarea__inner {
    background: #F0F2F5 !important;
    border: 0;
  }

</style>
<template>
  <div class="schedulVisit">
    
    <div class="page-content">
      <q-table :pagination="msg" :loading="loading" no-data-label="暂无相关数据" flat
        class="stickycreatInsertStr-column-table schedul_Vtable" separator="none" :data="data" :columns="columns"
        row-key="name" >
        <template v-slot:top="props">
          <div class="fangkeTitle" ref="fkdj">学员出勤记录</div>
           <span class="fangkeNumb">{{data.length}}</span>
          <q-space />
        </template>
        <template v-slot:body-cell-IsCheck="props">
          <q-td :props="props">
            <div v-if="props.row.IsCheck===0">正常</div>
            <div v-if="props.row.IsCheck===1" style="color:#ff0000">缺勤</div>
             <div v-if="props.row.IsCheck===2">未签到</div>
          </q-td>
        </template>
        <template v-slot:bottom>
          <!-- <q-pagination class="full-width justify-end" v-model="msg.pageIndex" color="primary" :max="pageCount"
            :input="true" @input="changePage" /> -->
        </template>
        
      </q-table>
    </div>
  </div>
</template>
<script>
  export default {
    props: {
      tabledata: {
        type: Array,
      
      },
    
    },
    watch: {
      tabledata:{
        handler(val){
          if(val){
            this.data=val
            this.loading=false;
            let page= val.length/this.msg.rowsPerPage
            this.pageCount=Math.ceil(page)
          }
        },
        deep:true
      }
    },
    data() {
      return {
        tabCheck:"first",
        columns: [{
            name: 'GuestName',
            label: '姓名',
            required: true,
            field: 'GuestName',
            align: 'left'
          },
          {
            name: 'Mobile',
            field: 'Mobile',
            label: '电话',
            align: 'left',
          },
          {
            name: 'CourseName',
            field: 'CourseName',
            label: '课程',
            align: 'left'
          },
          {
            name: 'TotalHours',
            label: '总课时',
            field: 'TotalHours',
            align: 'left'
          },
          {
            name: 'SurplusHours',
            label: '剩余课时',
            field: 'SurplusHours',
            align: 'left'
          },
          {
            name: 'IsCheck',
            label: '状态',
            field: 'IsCheck',
            align: 'left'
          },
        ],
        data: [],
        loading: false,
        pageCount: 1,
       
        msg: {
          pageIndex: 1,
          pageSize: 100,
          rowsPerPage: 100,
          PlanId: 0,
          KeyWords: "",
        },

      }
    },
    
    created() {

    },
    mounted() {
      
    },
    methods: {
     
      //初始化权限信息
      initAuth() {
        if (this.authObj) {
          if (this.authObj.isShowAdd != null && !this.authObj.isShowAdd) {
            this.DutyAuthObj.isShowAdd = this.authObj.isShowAdd;
          }
          if (this.authObj.isShowEdit != null && !this.authObj.isShowEdit) {
            this.DutyAuthObj.isShowEdit = this.authObj.isShowEdit;
          }
        }
        
      },
      
      
     
      // //翻页
      changePage(val) {
        let start=0
        if(this.pageCount===1){
          start=0
        }
        let end =this.msg.pageSize*val
        start=end-this.msg.pageSize
        this.data=this.tabledata.slice(start,end)
      },
      
     
     
    }
  }

</script>
<style lang="sass">
  @import url('~assets/css/table.sass')

</style>
