<template>
  <div class="flexOne comSummary MainPlan">
    <div>
      <table class="ClassPlanTable plantHead" style="border-collapse:collapse;width:100%;margin:15px 0 0 0;">
        <thead>
          <tr>
            <th colspan="16">教室使用记录</th>
          </tr>
          <tr>
            <th>周一</th>
            <th>周二</th>
            <th>周三</th>
            <th>周四</th>
            <th>周五</th>
            <th>周六</th>
            <th>周日</th>
          </tr>
        </thead>
      </table>
      <div class="planTabDiv" ref="planTabDiv">
        <table class="ClassPlanTable planClass-table" ref="PlanTable" style="border-collapse:collapse;margin-top:0;">
          <tbody>
            <tr v-for="(item,index) in tbodayData.fridayList" :key="index">
              <td>
                <div class="plan_ClassDate">{{tbodayData.mondayList[index].ClassDate}}</div>
                <mateitem @unusual="taggleUserHistory" v-if="tbodayData.mondayList&&tbodayData.mondayList[index].SubList"
                  :dayData="tbodayData.mondayList[index]"></mateitem>
              </td>
              <td>
                <div class="plan_ClassDate">{{tbodayData.tuesdayList[index].ClassDate}}</div>
                <mateitem @unusual="taggleUserHistory" v-if="tbodayData.tuesdayList&&tbodayData.tuesdayList[index].SubList"
                  :dayData="tbodayData.tuesdayList[index]"></mateitem>
              </td>
              <td>
                <div class="plan_ClassDate">{{tbodayData.wednesdayList[index].ClassDate}}</div>
                <mateitem @unusual="taggleUserHistory" v-if="tbodayData.wednesdayList&&tbodayData.wednesdayList[index].SubList"
                  :dayData="tbodayData.wednesdayList[index]"></mateitem>
              </td>
              <td>
                <div class="plan_ClassDate">{{tbodayData.thursdayList[index].ClassDate}}</div>
                <mateitem @unusual="taggleUserHistory" v-if="tbodayData.thursdayList&&tbodayData.thursdayList[index].SubList"
                  :dayData="tbodayData.thursdayList[index]"></mateitem>
              </td>
              <td>
                <div class="plan_ClassDate">{{tbodayData.fridayList[index].ClassDate}}</div>
                <mateitem @unusual="taggleUserHistory" v-if="tbodayData.fridayList&&tbodayData.fridayList[index].SubList"
                  :dayData="tbodayData.fridayList[index]"></mateitem>
              </td>
              <td>
                <div class="plan_ClassDate">{{tbodayData.saturdayList[index].ClassDate}}</div>
                <mateitem @unusual="taggleUserHistory" v-if="tbodayData.saturdayList&&tbodayData.saturdayList[index].SubList"
                  :dayData="tbodayData.saturdayList[index]"></mateitem>
              </td>
              <td>
                <div class="plan_ClassDate">{{tbodayData.sundayList[index].ClassDate}}</div>
                <mateitem @unusual="taggleUserHistory" v-if="tbodayData.sundayList&&tbodayData.sundayList[index].SubList"
                  :dayData="tbodayData.sundayList[index]"></mateitem>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
    <UserHistory ref="history"  :classroomId="classroomUserId"></UserHistory>
  </div>

</template>

<script>
  import lunarCalendar from "./js/lunarCalendar"
  import UserHistory from "./userHistory"
  import mateitem from "./mateitem.vue"
  export default {
    props: {
      tbodayData: {
        type: [Array,Object],

      },
      startT: {
        type: String,
        default: ''
      }
    },
    components: {
      UserHistory,
      mateitem
    },
    data() {
      return {
        classroomUserId: ""
      };
    },

    methods: {
      taggleUserHistory(i) {
        this.classroomUserId = i.Id
        this.$refs.history.changeShow()
      },
    },

    mounted() {
    
    }
  };

</script>
<style>
  .MainPlan .ClassPlanTable {
    width: 100%;
    color: #000;
  }

  .ClassPlanTable th,
  .ClassPlanTable td {
    border: 1px solid #d1d1d1;
    height: 40px;
  }

  .planClass-table td {
    vertical-align: top;
    padding: 5px;
    width: 14%;
  }

  .MainPlan {
    margin: 20px;
  }

  .MainPlan .plan_ClassDate {
    height: 30px;
    line-height: 30px;
    font-size: 15px;
    font-weight: bold;
  }

  .MainPlan .plantHead th {
    border-bottom: 0;
  }

  .MainPlan .planTabDiv {
    max-height: calc(100vh - 280px);
    height: calc(100vh - 280px);
    overflow-y: overlay;
    /* margin-right: -3px; */
  }

  .planTabDiv::-webkit-scrollbar {
    width: 3px;
    height: 3px;
    background-color: #F5F5F5;
  }

  /*!*定义滚动条轨道 内阴影+圆角*!*/
  .planTabDiv::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
    border-radius: 10px;
    background-color: #F5F5F5;
  }

  /*!*定义滑块 内阴影+圆角*!*/
  .planTabDiv::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: -webkit-gradient(linear, 0 0, 0 100%, color-stop(.5, rgba(255, 255, 255, .2)), color-stop(.5, transparent), to(transparent));
    background-color: #0ae;
  }

  .MainPlan .el-collapse-item__header {
    font-size: 12px;
    line-height: normal;
    color: #000;
  }

  .MainPlan .plan_Inner {
    font-size: 12px;
    color: #000;
    display: flex;
    margin-top: 5px;
  }

  .MainPlan .plan_LeftTitle {
    width: 60px;
    text-align: right;
    flex-shrink: 0
  }

  .MainPlan .plan_RightInner {
    width: 100%;
  }

  .MainPlan .commonTimeStr {
    display: inline-block;
    color: #fff;
    padding: 1px 3px;
    border-radius: 5px;
  }

  .MainPlan .greenTime {
    background-color: green;
  }

  .MainPlan .blueTime {
    background-color: blue;
  }

  .MainPlan .orangeTime {
    background-color: orange;
  }

  .MainPlan .plan_Tdiv {
    text-overflow: ellipsis;
    overflow: hidden;
    word-break: break-all;
  }

</style>
