<template>
  <q-dialog v-model="persistent" content-class="bg-grey-1" persistent transition-show="scale" transition-hide="scale">
    <q-card style="width: 800px;max-width:900px;">
      <q-card-section>
        <div class="text-h6">试听课信息</div>
      </q-card-section>
      <q-card-section>
        <div class="row wrap">
          <div class="col-6 q-pb-lg q-pr-lg">
            <q-field borderless>
               <template v-slot:prepend>
                <q-input filled v-model="msg.StartClassDate" mask="date" label="开始日期">
                  <template v-slot:append>
                    <q-icon name="event" class="cursor-pointer">
                      <q-popup-proxy ref="StartClassDate" transition-show="scale" transition-hide="scale">
                        <q-date v-model="msg.StartClassDate" @input="getStarttime()" />
                      </q-popup-proxy>
                    </q-icon>
                  </template>
                </q-input>
              </template>
              <template v-slot:append>
                <q-input filled v-model="msg.EndClassDate" mask="date" label="结束日期">
                  <template v-slot:append>
                    <q-icon name="event" class="cursor-pointer">
                      <q-popup-proxy ref="EndClassDate" transition-show="scale" transition-hide="scale">
                        <q-date v-model="msg.EndClassDate" @input="getEndTime()" />
                      </q-popup-proxy>
                    </q-icon>
                  </template>
                </q-input>
              </template>
            </q-field>
          </div>
          <div class="col-6 q-pr-lg q-pb-lg">
            <q-select @input="resetSearch" filled option-value="TId" option-label="TeacherName" v-model="msg.TeacherId"
              :options="TeacherList" emit-value map-options label="老师" clearable />
          </div>
        </div>
      </q-card-section>
      <q-card-section class="q-pt-none scroll" style="max-height: 70vh">
        <q-table :pagination="msg" :loading="loading" no-data-label="暂无相关数据" style="margin-top:20px;" flat
          class="sticky-column-table sticky-right-column-table" separator="none" :data="dataList" :columns="columns"
          row-key="name">
          <template v-slot:top="props">
            <div class="col-2 q-table__title"></div>
            <q-space />
          </template>
          <template v-slot:body-cell-ClassTime="props">
            <q-td :props="props">
              {{props.row.ClassTime}}-{{props.row.EndTime}}
            </q-td>
          </template>
          <template v-slot:body-cell-Id="props">
            <q-td :props="props">
              <q-btn flat size="xs" icon="edit" color="accent" @click="getStuInfo(props.row)" style="font-weight:400"
                label="报入" />
            </q-td>
          </template>
          <template v-slot:bottom>
            <q-pagination class="full-width justify-end" v-model="msg.pageIndex" color="primary" :max="PageCount"
              :input="true" @input="changePage" />
          </template>
        </q-table>
      </q-card-section>
      <q-separator />
      <q-card-actions align="right" class="bg-white">
        <q-btn label="关闭" flat color="grey-10" style="font-weight:400 !important" @click="closeSaveForm" />
      </q-card-actions>
    </q-card>
  </q-dialog>
</template>

<script>
  import {
    GetReserveClassPage
  } from '../../api/scheduling/schedu'
  import {
    getTeacherDropDownList
  } from "../../api/school/index";
  export default {
    components: {},
    data() {
      return {
        persistent: true,
        loading: false,
        msg: {
          pageIndex: 1,
          pageSize: 10,
          rowsPerPage: 10,
          StartClassDate: "", //开始时间
          EndClassDate: "", //结束时间
          TeacherId: "", //教师编号
          ClassRoomId: "", //教室编号
        },
        PageCount: 0,
        columns: [{
            name: 'TeacherName',
            label: '老师',
            field: 'TeacherName',
            align: 'left'
          },
          {
            name: 'ClassDateStr',
            field: 'ClassDateStr',
            label: '日期',
            align: 'left',
          },
          {
            name: 'ClassTime',
            field: 'ClassTime',
            label: '时间',
            align: 'left'
          },
          {
            name: 'RoomName',
            label: '教室',
            field: 'RoomName',
            align: 'left'
          },
          {
            name: 'RoomNum',
            label: '人数',
            field: 'RoomNum',
            align: 'left'
          },
          {
            name: 'ClassContent',
            label: '主讲内容',
            field: 'ClassContent',
            align: 'left'
          },
          {
            name: 'Id',
            label: '操作',
          }
        ],
        TeacherList: [], //教师列表
        dataList: [],
        StuObj: {}
      }
    },
    created() {
      this.GetTeacherList();
    },
    mounted() {
      let nowDay = new Date();
      var year = nowDay.getFullYear(); //年
      var month = nowDay.getMonth() + 1; //月
      var day = nowDay.getDate(); //日
      var currentDay= year + '-' + (month<10?('0'+month):month) + '-' + day;
      this.msg.StartClassDate = currentDay;
      this.getList();
    },
    methods: {
      //获取教师下拉
      GetTeacherList() {
        getTeacherDropDownList({}).then(res => {
          if (res.Code == 1) {
            this.TeacherList = res.Data;
          }
        });
      },
      closeSaveForm() {
        this.$emit('close')
        this.persistent = false
      },
      //重新查询
      resetSearch() {
        this.msg.pageIndex = 1;
        this.getList();
      },
      changePage(val) {
        this.msg.pageIndex = val;
        this.getList()
      },
      //获取课程系列分页列表
      getList() {
        GetReserveClassPage(this.msg).then(res => {
          if (res.Code == 1) {
            this.dataList = res.Data.PageData;
            this.PageCount = res.Data.PageCount;
          }
        })
      },
      //点击报入
      getStuInfo(item) {
        if (item) {
          this.StuObj.ClassRoomId = item.ClassRoomId;
          this.StuObj.TeacherId = item.TeacherId;
          this.StuObj.ReserveClassId = item.ReserveClassId;
          this.StuObj.ClassDateStr = item.ClassDateStr;
          this.StuObj.ClassTime = item.ClassTime;
          this.StuObj.EndTime = item.EndTime;
          this.StuObj.ClassContent = item.ClassContent;
        }
        this.$emit('getchildInfo', this.StuObj);
        this.closeSaveForm();
      },
      getStarttime() {
        this.$refs.StartClassDate.hide();
        this.resetSearch();
      },
      getEndTime()
      {
        this.$refs.EndClassDate.hide();
        this.resetSearch();
      }
    },
  }

</script>
<style>
 
</style>
