<template>
  <div class="page-body">
    <div class="page-search row items-center">
    </div>
    <div class="page-content">
      <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>
          <div class="col-12 q-table__title">{{name}}-{{date}}试听学员名单</div>
          <q-space />
          <div class="page-option">
          </div>
        </template>
        <template v-slot:body-cell-SpeakState="props">
          <q-td :props="props">
            <template v-if="props.row.OrderCount>0">
              <q-badge color="green">
                试讲成功
              </q-badge>
            </template>
            <template v-else>
              <q-badge color="red">
                试讲失败
              </q-badge>
            </template>
          </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>
    </div>
    <visitor-form v-if="isShowVisitor" :save-obj="visitObjOption" @close="closeVisitorForm" @success="refreshPage">
    </visitor-form>
    <schedulFanke v-if="isShowDetail" @close="closeDetail" :save-obj="sendObj"></schedulFanke>
    <appoint-form v-if="isShowFangke" :save-obj="visitObjOption" @close="closeAppoint" @success="refreshPage">
    </appoint-form>
  </div>
</template>

<script>
  import {
    queryVisitorReservePage,
  } from '../../api/scheduling/schedu'
  import schedulFanke from '../../components/schedul/schedul-fanke'
  import visitorForm from '../../components/schedul/visitor-form'
  import appointForm from '../../components/schedul/appoint-form'
  export default {
    meta: {
      title: "试听学员名单"
    },
    components: {
      schedulFanke,
      visitorForm,
      appointForm
    },
    data() {
      return {
        msg: {
          pageIndex: 1,
          pageSize: 10,
          rowsPerPage: 10,
          IsQueryAll: 1,
          QReserveClassIds: "",
          KeyWords: "",
        },
        name: "",
        date: "",
        pageCount: 0,
        dataList: [],
        loading: false,
        columns: [{
            name: 'VisitorName',
            label: '姓名',
            required: true,
            field: 'VisitorName',
            align: 'left'
          },
          {
            name: 'StuTel',
            label: '学员电话',
            field: 'StuTel',
            align: 'left'
          },
          {
            name: 'QQ',
            label: 'QQ',
            field: 'QQ',
            align: 'left'
          },
          {
            name: 'WeChatNo',
            label: '微信号',
            field: 'WeChatNo',
            align: 'left'
          },
          {
            name: 'LessonName',
            label: '试听课程',
            field: 'LessonName',
            align: 'left'
          },
          {
            name: 'TeacherName',
            label: '试讲老师',
            field: 'TeacherName',
            align: 'left'
          },
          {
            name: 'OrderCount',
            label: '订单数量',
            field: 'OrderCount',
            align: 'left'
          },
          {
            name: 'SpeakState',
            label: '试讲',
            field: 'SpeakState',
            align: 'left'
          },
          {
            name: 'RoomName',
            label: '教室',
            field: 'RoomName',
            align: 'left'
          },
          {
            name: 'CreateByName',
            label: '创建人',
            field: 'CreateByName',
            align: 'left'
          },
          {
            name: 'CreateTimeStr2',
            label: '创建时间',
            field: 'CreateTimeStr2',
            align: 'left'
          },
        ],
        sendObj: {},
        isShowDetail: false,
        isShowVisitor: false,
        visitObjOption: null,
        isShowFangke: false, //是否显示填写预约
      }
    },
    mounted() {
      this.getList();
    },
    created() {
      if (this.$route.query.classId) {
        this.msg.ReserveClassId = this.$route.query.classId
      }
      if (this.$route.query.name) {
        this.name = this.$route.query.name
      }
      if (this.$route.query.date) {
        this.date = this.$route.query.date
      }
    },
    methods: {
      //新增访客
      editVisitor(obj) {
        if (obj) {
          this.visitObjOption = obj;
        } else {
          this.visitObjOption = null;
        }
        this.isShowVisitor = true;
      },
      getList() {
        this.loading = true;
        queryVisitorReservePage(this.msg).then(res => {
          this.loading = false;
          this.dataList = res.Data.PageData;
          this.pageCount = res.Data.PageCount;
        }).catch(() => {
          this.loading = false;
        })
      },
      resetSearch() {
        this.msg.pageIndex = 1;
        this.getList();
      },
      changePage(val) {
        this.msg.pageIndex = val;
        this.getList();
      },
      //过滤备注显示
      getRemarks(remark) {
        if (remark.length > 10) {
          return remark.substring(0, 10) + '...';
        } else {
          return remark;
        }
      },
      //获取详情
      getDetail(obj) {
        this.sendObj = obj;
        this.isShowDetail = true;
      },
      //关闭
      closeDetail() {
        this.isShowDetail = false;
      },
      //关闭访客弹窗
      closeVisitorForm() {
        this.isShowVisitor = false;
        this.isShowDetail = false;
      },
      //刷新页面
      refreshPage() {
        this.isShowVisitor = false;
        this.isShowDetail = false;
        this.getList();
      },
      //打开约课
      getAppointment(item) {
        this.visitObjOption = item;
        this.isShowFangke = true;
      },
      closeAppoint() {
        this.isShowFangke = false;
      }
    }
  }
</script>
<style scoped>
  .border-bottom {
    border-bottom: 1px dashed #EEE;
    padding-bottom: 5px;
    margin-bottom: 5px;
  }
</style>
<style lang="sass">
  @import url('~assets/css/table.sass')
</style>