<style>
  .Sysuser_Date .el-input__inner {
    background: transparent !important;
    border: 0 !important;
  }

</style>
<template>
  <div class="page-body">
    <div class="page-search row items-center">
      <div class="col row wrap q-mr-lg q-col-gutter-md">
        <div class="col-4">
          <div class="col-4 Sysuser_Date">
            <q-field filled>
               <template v-slot:control>
                <el-date-picker v-model="msg.StartClassDate" value-format="yyyy-MM-dd" type="date" placeholder="开始时间"
                  size="small" style="width:47%;" @change="resetSearch" clear-icon="iconfont icon-guanbi">
                </el-date-picker>至
                <el-date-picker v-model="msg.EndClassDate" value-format="yyyy-MM-dd" type="date" placeholder="结束时间"
                  size="small" style="width:47%;" @change="resetSearch" clear-icon="iconfont icon-guanbi">
                </el-date-picker>
              </template>
            </q-field>
          </div>
        </div>
        <div class="col-3">
          <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 class="col-3">
          <q-select @input="resetSearch" filled stack-label option-value="RoomId" option-label="RoomName"
            v-model="msg.ClassRoomId" ref="ClassRoomId" :options="ClassRoomList" label="关联教室" clearable :dense="false"
            class="col-6 q-pb-lg" emit-value map-options />
        </div>
      </div>
    </div>
    <q-table :pagination="msg" :loading="loading" no-data-label="暂无相关数据" 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 />
        <div class="page-option" style="display:none;">
          <q-btn color="accent" size="sm" class="q-mr-md" icon="add" label="添加试听" @click="editVisitor(null)" />
        </div>
      </template>
      <template v-slot:body-cell-TeacherName="props">
        <q-td>
          <template v-if="props.row.TeacherId==0">
            <span style="color:red">未指定</span>
          </template>
          <template>
            {{props.row.TeacherName}}
          </template>
        </q-td>  
      </template>
      <template v-slot:body-cell-ClassContent="props">
        <q-td :props="props">
          <div style="min-width: 150px;word-break: break-word;white-space: normal;">
            {{props.row.ClassContent}}
          </div>
        </q-td>
      </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-CreateByName="props">
        <q-td :props="props">
          {{props.row.CreateByName}}<br />
          {{props.row.CreateTimeStr}}
        </q-td>
      </template>
      <template v-slot:body-cell-JoinNum="props">
        <q-td auto-width :props="props" style="width:25%">
          <span style="color:red;cursor:pointer":class="{'underLine':(props.row.VisitorList&&props.row.VisitorList.length>0)}">
            {{props.row.JoinNum}}
            <q-tooltip :offset="[10, 10]">
              点击查看名单
            </q-tooltip>
            <q-popup-proxy v-if="props.row.VisitorList&&props.row.VisitorList.length>0">
              <div style="min-width:360px;max-width:360px;">
                <q-banner>
                  <q-chip dense v-for="(subItem,subindex) in props.row.VisitorList" :key="subindex">
                    {{subItem.VisitorName}}</q-chip>
                </q-banner>
              </div>
            </q-popup-proxy>
          </span>
        </q-td>
      </template>
      <template v-slot:body-cell-TeacherId="props">
        <q-td :props="props">
           <q-btn flat size="xs" color="accent" @click="goUrl(props.row)" style="font-weight:400"
            label="学员名单" />
          <q-btn flat size="xs" icon="edit" color="accent" @click="editVisitor(props.row)" style="font-weight:400"
            label="修改" />
          <q-btn flat size="xs" icon="delete" @click="deleteReserve(props.row)" color="negative" 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>
    <reserveForm v-if="isShowReserve" :save-obj="reserveObj" @close="closeReserveForm" @success="refreshPage">
    </reserveForm>
  </div>
</template>

<script>
  import {
    GetReserveClassPage,
    RemoveReserveClass
  } from '../../api/scheduling/schedu'
  import {
    getTeacherDropDownList,
    queryClassRoomList
  } from "../../api/school/index";

  import reserveForm from '../../components/schedul/reserve-form'

  export default {
    meta: {
      title: "试听课管理"
    },
    components: {
      reserveForm
    },
    data() {
      return {
        msg: {
          pageIndex: 1,
          pageSize: 10,
          rowsPerPage: 10,
          StartClassDate: "", //开始时间
          EndClassDate: "", //结束时间
          TeacherId: "", //教师编号
          ClassRoomId: "", //教室编号
        },
        dataList: [],
        loading: false,
        PageCount: 0,
        columns: [{
            name: 'TeacherName',
            label: '老师',
            field: 'TeacherName',
            align: 'left'
          },
          {
            name: 'ClassDateStr',
            label: '日期',
            align: 'left',
            field: 'ClassDateStr',
          },
          {
            name: 'ClassTime',
            label: '试听时间',
            align: 'left',
            field: 'ClassTime',
          },
    
          {
            name: 'RoomName',
            label: '教室',
            align: 'left',
            field: 'RoomName',
          },
          // {
          //   name: 'RoomNum',
          //   label: '人数',
          //   align: 'left',
          //   field: 'RoomNum',
          // },
          {
            name: 'JoinNum',
            label: '试听人数',
            align: 'left',
            field: 'JoinNum',
          },
          {
            name: 'ClassContent',
            label: '主讲内容',
            align: 'left',
            field: 'ClassContent',
          },
          {
            name: 'CreateByName',
            label: '创建人',
            align: 'left',
            field: 'CreateByName',
          },
          {
            name: 'TeacherId',
            label: '操作',
            field: 'TeacherId'
          }
        ],
        TeacherList: [],
        ClassRoomList: [],
        isShowReserve: false,
        reserveObj: {}
      }
    },
    mounted() {
      let nowDay = new Date();
      var year = nowDay.getFullYear(); //年
      var month = nowDay.getMonth() + 1; //月
      var day = nowDay.getDate(); //日
      this.msg.StartClassDate = year + '-' + month + '-' + day;

      this.GetTeacherList();
      this.getClassRoomList();
      this.getList()
    },
    methods: {
      //重新查询
      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;
          }
        })
      },
      //获取教师下拉
      GetTeacherList() {
        getTeacherDropDownList({
          IsQLeave:0
        }).then(res => {
          if (res.Code == 1) {
            this.TeacherList = res.Data;
          }
        });
      },
      //获取教室下拉
      getClassRoomList() {
        queryClassRoomList({}).then(res => {
          if (res.Code == 1) {
            this.ClassRoomList = res.Data;
          }
        })
      },
      //编辑试听
      editVisitor(obj) {
        if (obj) {
          this.reserveObj = obj
        } else {
          this.reserveObj = null
        }
        this.isShowReserve = true;
      },
      //删除试听课
      deleteReserve(item) {
        let delMsg = {
          ReserveClassId: item.ReserveClassId,
        };
        this.$q.dialog({
          title: '提示信息',
          message: '是否确定删除该试听课？',
          cancel: true,
          persistent: true,
          ok: "确定",
          cancel: "取消",
        }).onOk(() => {
          RemoveReserveClass(delMsg).then(res => {
            if (res.Code == 1) {
              this.$q.notify({
                icon: 'iconfont icon-chenggong',
                color: 'accent',
                timeout: 2000,
                message: '删除成功！',
                position: 'top'
              })
              this.getList();
            }
          })
        }).onCancel(() => {

        });
      },
      //关闭弹窗
      closeReserveForm() {
        this.isShowReserve = false
      },
      //刷新页面
      refreshPage() {
        this.getList();
      },
       goUrl(i) {
        let path="/sale/reserveStudentList"
        let queryObj={
           classId:i.ReserveClassId ,
           name:i.TeacherName,
           date:i.ClassDateStr
        }
        this.OpenNewUrl(path, queryObj)
        
      }
    }
  }

</script>
<style lang="sass">
  @import url('~assets/css/table.sass')

</style>
