<template>
  <!--学员预约统计-->
  <div style="padding: 20px 0;height: 700px;overflow-y: scroll;">
    <div class="page-content">
      <div class="list-box" v-loading="loading">
        <div v-for="(item,index) in tableData" class="listbox" :key="index" >
          <div class="list-content">
            <div class="content-week">
              <p>{{item.DateStr}}</p>
              <p>{{item.WeekStr}}</p>
            </div>
            <div class="content-right">
              <div v-for="(subItem,subIndex) in item.TimeList" class="right-box" :key="subIndex">
                <div class="content-class">
                  <div v-if="subItem.StartTime=='09:30'">第一节课</div>
                  <div v-if="subItem.StartTime=='11:10'">第二节课</div>
                  <div v-if="subItem.StartTime=='13:30'">第三节课</div>
                  <div v-if="subItem.StartTime=='15:10'">第四节课</div>
                  <div v-if="subItem.StartTime=='16:50'">第五节课</div>
                  <div v-if="subItem.StartTime=='19:00'">第六节课</div>
                </div>
                <div class="content-name">
                  <div v-for="(stuItem,stuIndex) in subItem.StuList" :key="stuIndex">
                    <q-badge color="blue" @click="getStuRight(stuItem)">
                      {{stuItem.StuName}}
                    </q-badge>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="height10"></div>
        </div>
      </div>
    </div>
    <appointmentDetails v-if="isShowDetails" :showItem="showItem" @refreshpage="refreshpage"></appointmentDetails>
    <!-- 学员信息抽屉 -->
    <studentRight-form v-if="isShowStuRight" :isJudgeTrans="isJudgeTrans" :BelongType="BelongType" :save-obj="stuOption"
      @close="closeStuForm" @success="refreshStuList" @reload="refreshStuList">
    </studentRight-form>
  </div>
</template>
<script>
  import appointmentDetails from "./appointmentDetails";
  import studentRightForm from "../../../components/school/student/studentRight-form"; //学员信息
  export default {
    props: {
      tableData: {
        type: Array,
        default: null,
      },
      loading: {
        type: Boolean,
        default: false,
      }
    },
    meta: {
      title: "学员预约统计",
    },
    components: {
      appointmentDetails,
      studentRightForm
    },
    data() {
      return {
        columns: [{
            name: "DateStr",
            label: "日期",
            field: "DateStr",
            align: "left",
          },
          {
            name: "TimeList",
            label: "时段(人数)",
            field: "TimeList",
            align: "left",
            field: row => row.TimeList
          }
        ],
        pageMsg: {
          rowsPerPage: 1000
        },
        //是否显示预约详情
        isShowDetails: false,
        showItem: {},
        isShowStuRight: false,
        stuOption: null,
        BelongType: 1,
        isJudgeTrans: 1,
      };
    },
    created() {},
    mounted() {},
    methods: {
      // 学员信息
      getStuRight(obj) {
        if (obj) {
          this.stuOption = {
            StuId: obj.StuId,
            noEdit: true
          };
          this.BelongType = obj.BelongType;
        }
        this.isShowStuRight = true;
      },
      closeStuForm() {
        this.isShowStuRight = false;
      },
      refreshStuList() {
        this.$emit('chang')
      },
      //刷新页面
      refreshpage() {
        this.isShowDetails = false;
        this.showItem = {};
      },
      //显示预约详情
      ShowStuAppoint(item) {
        this.showItem = item;
        this.isShowDetails = true;
      }
    },
  };
</script>
<style>
  .list-haeder div:first-child {
    width: 270px;
    flex-shrink: 0;
    text-align: center;
    border-right: 1px solid #eeeeee;
  }

  .list-haeder div:last-child {
    padding: 0 0 0 10px;
  }

  .list-haeder {
    line-height: 40px;
    display: flex;
    border-bottom: 1px solid #eeeeee;
    color: #ffffff;
    background: #305496;
  }

  .content-name div {
    margin-left: 5px;
    cursor: pointer;
  }

  .content-name {
    height: 40px;
    overflow: hidden;
    flex-grow: 1;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    border-bottom: 1px solid #eeeeee;
    background: #ffffff;
  }

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

  .content-class {
    width: 150px;
    line-height: 40px;
    height: 40px;
    overflow: hidden;
    flex-shrink: 0;
    text-align: center;
    background: #F2F4F7;
    border-bottom: 1px solid #eeeeee;
  }

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

  .right-box {
    display: flex;
    align-items: center;
  }

  .content-right {
    flex-grow: 1;
  }

  .content-week {
    width: 120px;
    flex-shrink: 0;
    text-align: center;

  }

  .list-content {
    display: flex;
    align-items: center;
    /* box-shadow: 0px 6px 14px 0px rgba(176, 176, 176, 0.2); */
  }

  .listbox {
    display: flex;
    flex-direction: column;
  }

  .list-box {
    display: flex;
    flex-direction: column;
    border: 1px solid #eeeeee;
  }

  .list-box .listbox:last-child .height10 {
    height: 0;
    border: 0;
  }

  .height10 {
    width: 100%;
    height: 20px;
    background: #F2F4F7;
    border-top: 1px solid #eeeeee;
    border-bottom: 1px solid #eeeeee;
  }

  .num-text {
    cursor: pointer;
    color: blue;
    text-decoration: underline;
    margin-left: 10px;
    margin-right: 30px;
  }
</style>
<style lang="sass">
  @import url('~assets/css/table.sass')
</style>