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

  #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;
  }
</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="getRecord()" option-label="TeacherName"
            v-model="msg.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-top:30px;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="timecenter">
            <div style="height:80px;  border-left:1px solid #366595; position:absolute;  left:130px;">
              <ul>
                <li class="cicle1" v-for="(item,index) in dataList.resultList" :class="{'reCordRed':item.ColorType==1,'reCordBlue':item.ColorType==2,
                'reCordOrange':item.ColorType==3}" :style="{'top':getTop(index)}">
                  {{getFirst(item.TeacherName)}}
                </li>
              </ul>
            </div>
          </div>
          <div class="col-4" id="timeright" style="margin-left:50px;width:80%;">
            <div v-for="item in dataList.resultList" style="margin-bottom:10px;">
              <p>{{item.TeacherName}}</p>
              <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
        },
        dataList: {},
        TeacherList: [], //关联老师下拉
      }
    },
    created() {
      this.msg.School_Id = this.setingObj.School_Id;
      this.msg.ClassId = this.setingObj.ClassId;
      this.msg.TeacherId = this.setingObj.Teacher_Id;
      this.getRecord();
    },
    mounted() {
      this.GetTeacherList();
    },
    methods: {
      getRecord() {
        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);
        }
      },
      getTop(index) {
        return index * 77 + 'px';
      }
    },
  }

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

</style>
