<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-3 q-pr-lg q-pb-lg">
            <q-select @input="typeChange" filled option-value="Id" option-label="Name" v-model="typeId"
              :options="typeList" emit-value map-options label="类型" clearable />
          </div>
          <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-3 q-pr-lg q-pb-lg">
            <q-select @input="typeChange" 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" v-if="typeId == 0">
          <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-table :pagination="SubMsg" :loading="loading" no-data-label="暂无相关数据" style="margin-top:20px;" flat
          class="sticky-column-table sticky-right-column-table" separator="none" :data="dataListType2"
          :columns="columnsType2" row-key="name" v-if="typeId == 1">
          <template v-slot:top="props">
            <div class="col-2 q-table__title"></div>
            <q-space />
          </template>
          <template v-slot:body-cell-Time="props">
            <q-td :props="props">
              {{ props.row.StartTime }}-{{ props.row.EndTime }}
            </q-td>
          </template>
          <template v-slot:body-cell-RoomNum="props">
            <q-td :props="props">
              {{ props.row.GuestList.length }}
            </q-td>
          </template>
          <template v-slot:body-cell-progress="props">
            <q-td :props="props">
              {{ props.row.Ranks }}/{{ props.row.TotalPlanNum }}
            </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,
    getToDayCoursePlanList
  } 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: "", //教室编号
          ReserveType :1
        },
        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: "LessonName",
            label: "课程名称",
            field: "LessonName",
            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: {},
        typeId: 0,
        typeList: [{
            Name: "正常",
            Id: 0
          },
          {
            Name: "跟班",
            Id: 1
          }
        ],
        SubMsg: {
          pageIndex: 1,
          pageSize: 10,
          rowsPerPage: 10,
          StartDate: "", //开始时间
          EndDate: "", //结束时间
          TeacherId: 0
        },
        dataListType2: [],
        columnsType2: [{
            name: "TeacherName",
            label: "老师",
            field: "TeacherName",
            align: "left"
          },
          {
            name: "ClassDate",
            field: "ClassDate",
            label: "日期",
            align: "left"
          },
          {
            name: "Time",
            field: "Time",
            label: "时间",
            align: "left"
          },
          {
            name: "CourseName",
            label: "课程名称",
            field: "CourseName",
            align: "left"
          },
          {
            name: "RoomName",
            label: "教室",
            field: "RoomName",
            align: "left"
          },
          {
            name: "RoomNum",
            label: "人数",
            field: "RoomNum",
            align: "left"
          },
          {
            name: "progress",
            label: "进度",
            field: "",
            align: "left"
          },
          {
            name: "Id",
            label: "操作"
          }
        ]
      };
    },
    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) {
          if (this.typeId == 0) {
            this.StuObj.ReserveType=0
            this.StuObj.ClassPlanId = item.ClassPlanId;
            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.StuObj.TrialLessonId = item.TrialLessonId;
          } else if (this.typeId == 1) {
            this.StuObj.ReserveType=1
            this.StuObj.ClassPlanId = item.ClassPlanId;
            this.StuObj.ClassRoomId = item.ClassRoomId;
            this.StuObj.TeacherId = item.TeacherId;
            this.StuObj.ReserveClassId = 0;
            this.StuObj.ClassDateStr = item.ClassDate;
            this.StuObj.ClassTime = item.StartTime;
            this.StuObj.EndTime = item.EndTime;
            this.StuObj.ClassContent = 0;
            this.StuObj.TrialLessonId = 0;
            this.StuObj.courseName=item.CourseName
            this.StuObj.className=item.ClassName
          }
        }
        this.$emit("getchildInfo", this.StuObj);
        this.closeSaveForm();
      },
      getStarttime() {
        this.$refs.StartClassDate.hide();
        this.typeChange();
      },
      getEndTime() {
        this.$refs.EndClassDate.hide();
        this.typeChange();
      },
      typeChange() {
        if (this.typeId == 0) {
          this.resetSearch();
        } else if (this.typeId == 1) {
          this.resetSearchType2();
        }
      },
      getListType2() {
        if(!this.msg.StartClassDate){
          this.$q.notify({
            type: 'negative',
            position: "top",
            message: `请选择日期`
          })
          return
        }
        this.SubMsg.StartDate = this.msg.StartClassDate;
        this.SubMsg.EndDate = this.msg.EndClassDate || this.msg.StartClassDate;
        this.SubMsg.TeacherId = this.msg.TeacherId || 0;
        getToDayCoursePlanList(this.SubMsg).then(res => {
          this.dataListType2 = res.Data;
        });
      },
      resetSearchType2() {
        this.SubMsg.pageIndex = 1;
        this.getListType2();
      }
    }
  };

</script>
<style></style>
