<style>
  #timeleft div {
    height: 81px;
    color: #333333;
  }

  #timeleft div:last-child {
    height: 71px;
  }

  #timecenter div {
    height: 65px;
    color: #333333;
  }

  #timeright div {
    color: #333333;
  }

  #timeright div p {
    margin: 0 0 0px;
  }

  .recordForm .cicle1 {
    position: absolute;
    left: -15px;
    border-radius: 50%;
    list-style: none;
    width: 30px;
    height: 30px;
    background: #ffffff;
    text-align: center;
    line-height: 30px;
    color: #fff;
  }

  .cicle1:first-child {
    top: -5px !important;
  }

  .recordForm .TeacherContent {
    margin-top: 10px;
    border-radius: 2px;
    font-size: 12px;
    padding: 8px;
    background-color: #F0F5FB;
  }

  .recordForm .reCordRed {
    color: #FDD5dc;
    background-color: #F72E52;
  }

  .recordForm .reCordBlue {
    color: #2961FE;
    background-color: #D4DFFF;
  }

  .recordForm .reCordOrange {
    color: #F28C1D;
    background-color: #FCE8D2;
  }

  .timecenter_Line {
    border-left: 1px solid #366595;
    position: absolute;
    left: 130px;
  }

  .record_List {
    margin-bottom: 10px;
  }

  .record_List:last-child {
    margin-bottom: 0;
  }

  .TeacherNameList {
    position: relative;
  }

  .recordForm .underLine {
    text-decoration: underline;
    cursor: pointer;
  }
  .TeacherNewClass{
    display: flex;
    margin-bottom:3px;
  }
  .TeacherNewClass:last-child{
    margin-bottom:0;
  }
</style>
<template>
  <div class="page-body">
    <div class="page-content recordForm">
      <div class="row wrap" style="display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;">
        <div class="col-3">
          <el-radio-group v-model="checkType" size="mini">
            <el-radio-button :label="1">列表模式</el-radio-button>
            <el-radio-button :label="2">时间轴模式</el-radio-button>
          </el-radio-group>
        </div>
        <div class="col-3">
          <q-select filled stack-label option-value="TId" @input="changeRecord()" option-label="TeacherName"
            v-model="TeacherId" ref="Teacher_Id" :options="TeacherList" label="关联教师" :dense="false" class="col-6"
            emit-value map-options />
        </div>
      </div>
      <div style="padding-bottom:50px;">
        <template v-if="checkType==1">
          <q-table :pagination="msg" no-data-label="暂无相关数据" flat class="sticky-column-table" separator="none"
            :data="dataList" :columns="columns">
            <template v-slot:body-cell-YearStr="props">
              <q-td auto-width :props="props" style="width:25%">
                {{props.row.YearStr}}-{{props.row.MonthStr}}-{{props.row.DayStr}}
              </q-td>
            </template>
            <template v-slot:body-cell-ClassTime="props">
              <q-td auto-width :props="props" style="width:25%">
                <div v-for="(item,index) in props.row.TimeList">
                  {{index+1}}节课 {{item.StartTime}}-{{item.EndTime}}
                </div>
              </q-td>
            </template>
            <template v-slot:body-cell-CheckNum="props">
              <q-td auto-width :props="props" style="width:25%">
                <div v-for="(item,index) in props.row.TimeList">
                  <span style="color:green;" :class="{'underLine':item.CheckList.length>0}">
                    {{item.CheckNum}}
                    <q-popup-proxy v-if="item.CheckList.length>0">
                      <div style="max-width:360px;">
                        <q-banner>
                          <q-chip dense v-for="(subItem,subindex) in item.CheckList" :key="subindex">
                            {{subItem.GuestName}}</q-chip>
                        </q-banner>
                      </div>
                    </q-popup-proxy>
                  </span>
                </div>
              </q-td>
            </template>
            <template v-slot:body-cell-NoCheckNum="props">
              <q-td auto-width :props="props" style="width:25%">
                <div v-for="(item,index) in props.row.TimeList">
                  <span style="color:red;" :class="{'underLine':item.NoCheckList.length>0}">
                    {{item.NoCheckNum}}
                    <q-popup-proxy v-if="item.NoCheckList.length>0">
                      <div style="min-width:360px;max-width:360px;">
                        <q-banner>
                          <q-chip dense v-for="(subItem,subindex) in item.NoCheckList" :key="subindex">
                            {{subItem.GuestName}}</q-chip>
                        </q-banner>
                      </div>
                    </q-popup-proxy>
                  </span>
                </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>
        </template>
        <template v-else>
          <div class="col-10" style="margin-bottom:20px;display:flex;" v-if="dataList&&dataList.length>0">
            <div class="col-4" id="timeleft">
              <div v-for="item in dataList">
                {{item.YearStr}}-{{item.MonthStr}}-{{item.DayStr}}
              </div>
            </div>
            <div class="col-4" id="timeright"
              style="padding-left:25px;margin-left:25px;width:80%;border-left: 1px solid #d1d1d1;">
              <div v-for="item in dataList" class="record_List">
                <div class="TeacherNameList">
                  {{item.TeacherName}}
                  <li class="cicle1" :class="{'reCordRed':item.ColorType==1,'reCordBlue':item.ColorType==2,
                'reCordOrange':item.ColorType==3}" style="position:absolute;top:0;left:-41px;">
                    {{getFirst(item.TeacherName)}}
                  </li>
                </div>
                <div class="TeacherContent">
                  <div v-for="(subItem,subIndex) in item.TimeList" class="TeacherNewClass">
                    <div>{{subIndex+1}}节课 {{subItem.StartTime}}-{{subItem.EndTime}}</div>
                    <div style="color:green;margin:0 20px;" title="签到数">{{subItem.CheckNum}}</div>
                    <div style="color:red;" title="缺勤数">{{subItem.NoCheckNum}}</div>
                  </div> 
                </div>
              </div>
            </div>
          </div>
          <q-pagination class="full-width justify-end" style="margin-bottom:80px;padding-right:43px;"
            v-model="msg.PageIndex" color="primary" :max="pageCount" :input="true" @input="changePage" />
        </template>
      </div>
    </div>
  </div>
</template>
<script>
  import {
    getTeacherDropDownList
  } from '../../api/school/index'
  import {
    GetClassPlanLogPageList
  } from '../../api/course/class'
  export default {
    props: {
      setingObj: {
        type: Object,
        default: null
      }
    },
    components: {

    },
    data() {
      return {
        msg: {
          TeacherId: 0,
          PageIndex: 1,
          PageSize: 10,
          rowsPerPage: 10,
          School_Id: 0,
          ClassId: 0
        },
        TeacherId: 0,
        dataList: [],
        TeacherList: [], //关联老师下拉
        pageCount: 0,
        columns: [{
            name: 'TeacherName',
            label: '教师',
            field: 'TeacherName',
            align: 'left'
          },
          {
            name: 'YearStr',
            label: '日期',
            field: 'YearStr',
            align: 'left',
          },
          {
            name: 'ClassTime',
            label: '上课时间',
            field: 'ClassTime',
            align: 'left'
          },
          {
            name: 'CheckNum',
            label: '签到数',
            field: 'CheckNum',
            align: 'left'
          },
          {
            name: 'NoCheckNum',
            label: '缺勤数',
            field: 'NoCheckNum',
            align: 'left'
          }
        ],
        checkType: 1, //默认列表模式
      }
    },
    created() {

    },
    mounted() {
      this.TeacherId = this.setingObj.Teacher_Id;
      this.getRecord();
      this.GetTeacherList();
    },
    methods: {
      getRecord() {
        this.msg.School_Id = this.setingObj.School_Id;
        this.msg.ClassId = this.setingObj.ClassId;
        this.msg.TeacherId = this.setingObj.Teacher_Id;
        GetClassPlanLogPageList(this.msg).then(res => {
          if (res.Code == 1) {
            this.dataList = res.Data.PageData;
            this.pageCount = res.Data.PageCount;
          }
        })
      },
      changeRecord() {
        this.msg.School_Id = this.setingObj.School_Id;
        this.msg.ClassId = this.setingObj.ClassId;
        this.msg.TeacherId = this.TeacherId;
        GetClassPlanLogPageList(this.msg).then(res => {
          if (res.Code == 1) {
            this.dataList = res.Data.PageData;
            this.pageCount = res.Data.PageCount;
          }
        })
      },
      //翻页
      changePage(val) {
        this.msg.pageIndex = val;
        this.getRecord()
      },
      //获取教师下拉
      GetTeacherList() {
        getTeacherDropDownList({}).then(res => {
          if (res.Code == 1) {
            var obj = {
              TId: 0,
              TeacherName: '全部老师'
            }
            this.TeacherList = res.Data;
            this.TeacherList.unshift(obj);
          }
        })
      },
      getFirst(val) {
        if (val) {
          return val.substr(0, 1);
        }
      },
    },
    watch: {
      setingObj: function (val, oldval) {
        this.getRecord();
        this.GetTeacherList();
      }
    }
  }

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

</style>
