<template>
  <div class="page-content" :class="[$q.platform.is.desktop?'':'']">
    <q-table v-if="$q.platform.is.desktop" :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="q-table__title" :class="[$q.platform.is.desktop?'col-2':'col-12']">试听开课管理</div>
        <q-space />
      </template>
      <template v-slot:body-cell-ReservationDate="props">
        <q-td>
          <template>
            {{timeFormatSeconds(props.row.ReservationDate)}}
          </template>
        </q-td>
      </template>
      <template v-slot:body-cell-Demand="props">
        <q-td>
          <template>
           <div v-html="props.row.Demand"></div>
          </template>
        </q-td>
      </template>
      <template v-slot:body-cell-ClassDateStr="props">
        <q-td :props="props">
          <div style="min-width: 150px;word-break: break-word;white-space: normal;">
            {{ props.row.ClassDateStr }} {{ props.row.ClassTime }}
            <template v-if="props.row.ClassDateStr&&props.row.ClassDateStr.length>0">-</template>
            {{ props.row.EndTime }}
          </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-TeacherId="props">
        <q-td :props="props">
          <span @click="editVisitor(props.row)" style="cursor: pointer;margin-right:10px;">修改</span>
          <span @click="DeleteVisitorReserve(props.row.Id)" style="cursor: pointer;">删除</span>
        </q-td>
      </template>
      <template v-slot:bottom>
      </template>
    </q-table>
    <template v-if="$q.platform.is.mobile">
      <q-card class="light-shadow q-pa-md bg-grey-1 rounded-borders q-mb-md" flat v-for="(x, index) in data"
        :key="index">
        <div class="row justify-between">
          <div>学生：<span class="text-blue-5">{{x.StuName}}</span></div>
          <div>试听日期：<span class="text-blue-5">{{timeFormatSeconds(x.ReservationDate)}}</span></div>
        </div>
        <div class="bg-white q-pa-sm q-mt-sm" style="border-radius: 8px;">
          <div>
            <span class="text-grey-6">试听需求：</span><span v-html="">{{x.Demand}}</span>
          </div>
        </div>
        <div class=" q-pa-sm border-radius q-mt-sm" v-if="x.ClassDateStr||x.TeacherName||x.LessonName||x.RoomName">
          <div class="row justify-between" v-if="x.ClassDateStr||x.TeacherName">
            <span v-if="x.ClassDateStr">预约时间：<span class="text-blue-5">{{x.ClassDateStr}}</span></span>
            <span v-if="x.TeacherName">主讲老师：<span class="text-blue-5">{{x.TeacherName}}</span></span>
          </div>
          <div class="row justify-between" v-if="x.LessonName||x.RoomName">
            <span v-if="x.LessonName">课程名称：<span class="text-blue-5">{{x.LessonName}}</span></span>
            <span v-if="x.RoomName">教室：<span class="text-blue-5">{{x.RoomName}}</span></span>
          </div>
        </div>
        <div class="row justify-end">
          <q-btn label="修改" color="primary" flat @click="editVisitor(x)" />
          <q-btn label="删除" color="red-6" flat @click="DeleteVisitorReserve(x.Id)" />
        </div>
      </q-card>
    </template>

    <reserveForm v-if="isShowReserve" :saveObj="reserveObj" @close="closeReserveForm" @success="refreshPage">
    </reserveForm>
  </div>
</template>

<script>
  import {
    RemoveReserveClass,
    RemoveVisitorReserve
  } 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: 'StuName',
            label: '学生名称',
            align: 'left',
            field: 'StuName',
            required: true,
          },
          {
            name: 'ReservationDate',
            label: '试听日期',
            field: 'ReservationDate',
            align: 'left'
          },
          {
            name: 'Demand',
            label: ' 试听需求',
            align: 'left',
            field: 'Demand',
          },
          {
            name: 'ClassDateStr',
            label: ' 预约时间',
            align: 'left',
            field: 'ClassDateStr',
          },
          {
            name: 'TeacherName',
            label: '主讲老师',
            align: 'left',
            field: 'TeacherName',
          },
          {
            name: 'LessonName',
            label: '课程名称',
            align: 'left',
            field: 'LessonName',
          },
          {
            name: 'RoomName',
            label: '教室',
            align: 'left',
            field: 'RoomName',
          },
          {
            name: 'Feedback',
            label: '学员反馈',
            align: 'left',
            field: 'Feedback',
          },
          {
            name: 'TeacherId',
            label: '操作',
            field: 'TeacherId'
          }
        ],
        //表格可见列
        visibleColumns: [
          'StuName', 'ReservationDate', 'Demand', 'ClassDateStr', 'TeacherName', 'LessonName', 'RoomName', '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: {
      //获得年月日时分秒
      //传入日期//例：2020-10-27T14:36:23
      timeFormatSeconds(time, type) {
        let timeStr = "";
        if (time === '0001-01-01T00:00:00') {
          return timeStr;
        }
        var d = time ? new Date(time) : new Date();
        var year = d.getFullYear();
        var month = d.getMonth() + 1;
        var day = d.getDate();
        if (month < 10) month = '0' + month;
        if (day < 10) day = '0' + day;
        if (type == 2) {
          var hours = d.getHours();
          var min = d.getMinutes();
          var seconds = d.getSeconds();
          if (hours < 0) hours = '0' + hours;
          if (min < 10) min = '0' + min;
          if (seconds < 10) seconds = '0' + seconds;
          timeStr += ' ' + hours + ':' + min + ':' + seconds;
        }

        timeStr = year + '-' + month + '-' + day + timeStr;
        return timeStr;
      },
      //编辑试听
      editVisitor(obj) {
        console.log("reserveObj",obj);
        this.reserveObj = obj
        this.isShowReserve = true;
      },
      //关闭弹窗
      closeReserveForm() {
        this.isShowReserve = false
      },
      refreshPage() {
        this.$emit('success');
      },


      //删除试听
      DeleteVisitorReserve(Id) {
        let that = this;
        this.$q
          .dialog({
            title: "提示信息",
            message: "是否确定此试听信息删除？",
            cancel: true,
            persistent: true,
            ok: "确定",
            cancel: "取消"
          })
          .onOk(() => {
            RemoveVisitorReserve({
              Id: Id
            }).then(res => {
              that.$q.notify({
                icon: "iconfont icon-chenggong",
                timeout: 2000,
                message: res.Message,
                position: "top"
              });
              that.$emit('success')
            });
          })
          .onCancel(() => {});
      },

    }
  }

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

</style>
