<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 {
    height: 40px;
    line-height: 40px;
    margin-top: 10px;
    border-radius: 2px;
    font-size: 12px;
    padding-left: 20px;
    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;
  }
</style>
<template>
  <div class="page-body">
    <div class="page-content recordForm">
      <div class="row wrap" style="display:flex;justify-content:flex-end">
        <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 q-pr-lg q-pb-lg" emit-value map-options />
        </div>
      </div>
      <div>
        <div class="col-10" style="margin:20px 0 60px 0;display:flex;"
          v-if="dataList.resultList&&dataList.resultList.length>0">
          <div class="col-4" id="timeleft">
            <div v-for="item in dataList.resultList">
              {{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.resultList" 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">
                签到数{{item.CheckNum}}，缺勤数{{item.NoCheckNum}}
              </div>
            </div>
          </div>
        </div>
      </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: 12,
          School_Id: 0,
          ClassId: 0
        },
        TeacherId:0,
        dataList: {},
        TeacherList: [], //关联老师下拉
      }
    },
    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;
          }
        })
      },
      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;
          }
        })

      },
      //获取教师下拉
      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>
