<template>
  <div class="page-cancelClassList-body">
    <!-- <div class="fit row no-wrap items-start content-start">
      <div class="cancelClassList-left col-xl-1 col-lg-1 col-md-2 col-sm-3 col-xs-3">
        <div v-for="item in titleList" class="left-text">
          {{item.name}}
        </div>
        <div v-for="item in numList" class="left-text">
          {{item.name}}
        </div>
      </div>
      <div class="cancelClassList-right col-xl-21 col-lg-21 col-md-20 col-sm-19 col-xs-19">
        <div class="cancelClassList-right-box Xscroll fit row no-wrap" :class="{}">
          <div class="right-box" v-for="item in 25">
            <div class="content-title courseName activeOne">名称</div>
            <div class="content-title teacherName">老师名字</div>
            <div class="content-title traineesName activeOne">学员名字</div>
            <div class="right-content" v-for="item in 3">
              <div class="content-multiple fit row">
                <div class="content-tetx activeOne">理解</div>
                <div class="content-tetx activeTwo">活动2</div>
              </div>
              <div class="content-show">
                <div></div>
                语音1语音1语音1语音1
              </div>
            </div>
          </div>
        </div>
      </div>
    </div> -->
    <!-- :style="{'height':tableHeight+'px'}" -->
    <div v-if="dataList.length>0" ref="table" class="list-box" :style="{'height':tableHeight+'px'}">
        <table style="border-collapse: collapse;"
        
        :style="{'width':dataList.length>20?'1900px':'auto',}"
      class="tableBox" border="1px">
        <tr>
          <td class="cancelClassList-left" style="width: 70px;">
            报名课程
          </td>
          <template v-for="(item,index) in dataList">
            <td :key="index+400000" class=" courseName">
              {{item.CourseName}}
            </td>
          </template>
        </tr>
        <tr>
          <td class="cancelClassList-left">
            中教
          </td>
          <template v-for="(item,index) in dataList">
            <td :key="index+500000" class="teacherName">
              {{item.TeacherName}}
            </td>
          </template>
        </tr>
        <tr>
          <td class="cancelClassList-left">
            姓名
          </td>
          <template v-for="(item,index) in dataList">
            <td :key="index+600000" class="traineesName">
              {{item.StuName}}
            </td>
          </template>
        </tr>
        <template v-for="(rItem,rIndex) in MaxLength ">
          <tr :key="rIndex">
            <td class="cancelClassList-left">
              {{rIndex+1}}
            </td>
            <template v-for="(item,index) in dataList">
              <template v-if="item.ChapterList&&item.ChapterList[rIndex]">
                <td :key="index" :style="{background:getColor(item.ChapterList[rIndex].State)}">
                  {{"第"+item.ChapterList[rIndex].ChapterNo+"次课"}}
                  <q-tooltip content-class="bg-indigo" :offset="[10, 10]">
                    {{item.ChapterList[rIndex].ChapterName}}
                  </q-tooltip>
                </td>
              </template>
              <template v-else>
                <td :key="index">
                </td>
              </template>
            </template>
          </tr>
        </template>
      </table>
    </div>
    
    <div v-else style="padding: 100px;text-align: center;">暂无数据</div>
  </div>
</template>

<script>
  export default {
    props: {
      dataList: {
        type: Array,
        default: null,
      },
      MaxLength: {
        type: Number,
        default: 0,
      },
      loading: {
        type: Boolean,
        default: false,
      }
    },
    meta: {
      title: "学员消课统计",
    },
    components: {

    },
    data() {
      return {
        tableHeight: 500,
        titleList: [{
            name: '课程名称'
          },
          {
            name: '课程老师'
          },
          {
            name: '学员姓名'
          },
        ],
        numList: [{
            name: '1'
          },
          {
            name: '2'
          },
          {
            name: '3'
          }
        ]
      };
    },
    created() {
      setTimeout(() => {
        // this.tableHeight = window.innerHeight - this.$refs.table.$el.offsetTop - 90;
        this.tableHeight = window.innerHeight - 200;
      }, 100)
    },
    mounted() {

    },
    methods: {
      getColor(State) {
        var color = "";
        if (State == 1) {
          color = "#6FE053";
        } else if (State == 2) {
          color = "#FA716A";
        } else if (State == 3) {
          color = "#BDD7EE";
        } else if (State == 4) {

        }
        return color;
      }
    },
  };
</script>
<style lang="scss" scoped>
  .list-box{
    width: 100%;
    overflow: auto;
  }
  .tableBox tr,.tableBox tr td{
    text-align: center;
  }
  .page-cancelClassList-body {
    margin-top: 20px;
  }

  .cancelClassList-left {
    background: #E5E5E5;
  }

  .left-text {
    width: 100%;
    padding: 0 20px;
    height: 40px;
    line-height: 40px;
    border-bottom: 1px solid #DDDEE0;
    text-align: center;
    font-size: 14px;
  }

  .left-text:first-child,
  .left-text:nth-child(2),
  .left-text:nth-child(3),
  .left-text:nth-child(4) {
    font-weight: bold;
  }

  .left-text:last-child {
    border-bottom: 0;
  }

  .cancelClassList-right {
    overflow: hidden;
  }

  .courseName {
    background: #F8CBAD;
  }

  .courseName.activeOne {
    background: #FFD964;
  }

  .courseName.activeTwo {
    background: #F4B183;
  }

  .teacherName {
    background: #C4C4F5;
  }

  .traineesName {
    background: #CEF5A5;
  }

  .traineesName.activeOne {
    background: #F5AFAF;
    
  }

  .cancelClassList-right-box {}

  .Xscroll {
    overflow-x: scroll;
  }

  .right-box {
    display: flex;
    flex-direction: column;
    font-size: 13px;
  }

  .content-title:first-child {
    border-top: 1px solid #DDDEE0;
  }

  .content-title {
    width: 100%;
    padding: 0 5px;
    height: 40px;
    line-height: 40px;
    overflow: hidden;
    text-align: center;
    border-bottom: 1px solid #DDDEE0;
    border-right: 1px solid #DDDEE0;
  }

  .right-content {
    /* display: flex;
        flex-direction: column; */
    width: 90px;
    height: 40px;
    border-bottom: 1px solid #DDDEE0;
    border-right: 1px solid #DDDEE0;
    position: relative;
    cursor: pointer;
  }

  .right-content:last-child {
    border-bottom: 0;
  }

  .content-single,
  .content-tetx {
    flex: 1;
    flex-shrink: 0;
    text-align: center;
    word-break: break-all;
    text-overflow: ellipsis;
    display: -webkit-box;
    /** 对象作为伸缩盒子模型显示 **/
    -webkit-box-orient: vertical;
    /** 设置或检索伸缩盒对象的子元素的排列方式 **/
    -webkit-line-clamp: 2;
    /** 显示的行数 **/
    overflow: hidden;
    padding: 0 5px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .content-single.activeOne,
  .content-tetx.activeOne {
    background: #6FE053;
  }

  .content-tetx.activeTwo,
  .content-tetx.activeTwo {
    background: #FA716A;
  }

  .content-tetx.activeThree,
  .content-tetx.activeThree {
    background: #BDD7EE;
  }

  .content-tetx {
    border-right: 1px solid #DDDEE0;
  }

  .content-tetx:last-child {
    border: 0;
  }

  .content-multiple {
    display: flex;
  }

  .content-show {
    position: absolute;
    top: -60px;
    left: -50px;
    background: #ffffff;
    border-radius: 10px;
    padding: 10px;
    display: none;
    background: #fff;
    padding: 10px 19px;
    box-shadow: 5px 5px 20px 5px #ccc;
  }

  .content-show div {
    width: 0px;
    height: 0px;
    border: 8px solid transparent;
    border-top-color: #ffffff;
    position: absolute;
    bottom: -15px;
    right: 20px;
  }

  .right-content:hover .content-show {
    /* display: block; */
  }
</style>