<template>
  <div class="page-content">
    <q-table :pagination="pageMsg" :loading="loading" no-data-label="暂无相关数据" flat
      class="sticky-column-table sticky-right-column-table" separator="none" :data="data" :columns="columns"
      :visible-columns="visibleColumns" row-key="name">
      <template v-slot:top>
        <div class="col-2 q-table__title">试听班级管理</div>
        <q-space />
        <div class="page-option">
          <q-btn color="accent" v-if="authObj&&authObj.isShowEdit" 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-ReserveType="props">
        <q-td :props="props">
          <span v-if="props.row.ReserveType==0">正常试听</span>
          <span v-if="props.row.ReserveType==1">跟班试听</span>
        </q-td>
      </template>
      <template v-slot:body-cell-JoinNum="props">
        <q-td auto-width :props="props">
          <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-dropdown v-if="authObj&&authObj.isShowEdit" flat size="xs" color="dark" label="更多">
            <q-list>
              <q-item clickable v-close-popup @click="goUrl(props.row)">
                <q-item-section>
                  <q-item-label>学员名单</q-item-label>
                </q-item-section>
              </q-item>
              <q-item clickable v-close-popup @click="goAuditPayment(props.row)">
                <q-item-section>
                  <q-item-label>收支明细</q-item-label>
                </q-item-section>
              </q-item>
              <q-item clickable v-close-popup @click="editVisitor(props.row)"  v-if="props.row.ReserveType==0">
                <q-item-section>
                  <q-item-label>修改</q-item-label>
                </q-item-section>
              </q-item>
              <q-item clickable v-close-popup @click="deleteReserve(props.row)">
                <q-item-section>
                  <q-item-label>删除</q-item-label>
                </q-item-section>
              </q-item>
            </q-list>
          </q-btn-dropdown>
        </q-td>
      </template>
      <template v-slot:bottom>
      </template>
    </q-table>
    <reserveForm v-if="isShowReserve" :save-obj="reserveObj" @close="closeReserveForm" @success="refreshPage">
    </reserveForm>
  </div>
</template>

<script>
  import {
    RemoveReserveClass
  } from '../../api/scheduling/schedu'
  import reserveForm from '../schedul/reserve-form'
  export default {
    props: {
      data: {
        type: Array,
        default: null
      },
      loading: {
        type: Boolean,
        default: false
      },
      authObj: {
        type: Object,
        default: null
      }
    },
    components: {
      reserveForm
    },
    data() {
      return {
        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: 'LessonName',
            label: '试听课程',
            align: 'left',
            field: 'LessonName',
          },
          {
            name: 'JoinNum',
            label: '试听人数',
            align: 'left',
            field: 'JoinNum',
          },
          {
            name: 'OrderCount',
            label: '转订单人数',
            align: 'left',
            field: 'OrderCount',
          },
          {
            name: 'ConversionRates',
            label: '转化率',
            align: 'left',
            field: 'ConversionRates',
          },
          {
            name: 'ClassContent',
            label: '试讲内容',
            align: 'left',
            field: 'ClassContent',
          },
          {
            name: 'ReserveType',
            label: '类型',
            align: 'left',
            field: 'ReserveType',
          },
          {
            name: 'CreateByName',
            label: '创建人',
            align: 'left',
            field: 'CreateByName',
          },
          {
            name: 'TeacherId',
            label: '操作',
            field: 'TeacherId'
          }
        ],
        //表格可见列
        visibleColumns: [
          'TeacherName', 'ClassDateStr', 'ClassTime', 'RoomName', 'LessonName', 'JoinNum', 'OrderCount', 'ConversionRates', 'ClassContent', "ReserveType",
          'CreateByName','TeacherId'
        ], //可见列
        reserveObj: {},
        isShowReserve: false,
        pageMsg: {
          rowsPerPage: 10
        },
      }
    },
    created() {
      if (this.authObj && !this.authObj.isShowEdit) {
        this.visibleColumns.splice(this.visibleColumns.length - 1, 1);
        this.visibleColumns.splice(7, 1);
      }
    },
    mounted() {

    },
    methods: {
      //编辑试听
      editVisitor(obj) {
        if (obj) {
          this.reserveObj = obj
        } else {
          this.reserveObj = null
        }
        this.isShowReserve = true;
      },
      //关闭弹窗
      closeReserveForm() {
        this.isShowReserve = false
      },
      refreshPage() {
        this.$emit('success');
      },
      goUrl(i) {
        let path = "/sale/reserveStudentList"
        let queryObj = {
          classId: i.ReserveClassId,
          name: i.TeacherName,
          date: i.ClassDateStr
        }
        this.OpenNewUrl(path, queryObj)
      },
      //跳转收支明细
      goAuditPayment(obj) {
        this.OpenNewUrl('../../sale/AudiopaymentDetail', {
          ReserveClassId: obj.ReserveClassId
        })
      },
      //删除试听课
      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(() => {

        });
      },

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