<style>

</style>
<!--预约详情-->
<template>
  <q-dialog v-model="isShowAppointmentDialog" content-class="bg-grey-1" persistent transition-show="scale"
    transition-hide="scale">
    <q-card style="width: 800px; max-width: 900px" class="stop">
      <q-card-section class="row items-center q-pb-none">
        <div class="text-h6">预约详情</div>
        <q-space />
        <q-btn icon="close" flat round dense @click="closeAppointmentForm()" />
      </q-card-section>
      <div style="margin: 20px">
        <q-table :loading="loading" :pagination="pageMsg" no-data-label="暂无相关数据" flat
          class="sticky-column-table sticky-right-column-table" :data="DataList" :columns="columns" row-key="name"
          hide-bottom>
          <template v-slot:body-cell-StartTime="props">
            <q-td :props="props">
              {{props.row.StartTime}} - {{props.row.EndTime}}
            </q-td>
          </template>
          <template v-slot:body-cell-StatusStr="props">
            <q-td :props="props">
              <q-badge :color="props.row.Status == 0 ? 'primary' : 'negative'" :label="props.row.StatusStr" />
            </q-td>
          </template>
        </q-table>
        <q-separator />
      </div>
      <q-card-actions align="right" class="bg-white">
        <q-btn label="关闭" flat color="grey-10" style="font-weight: 400 !important" @click="closeAppointmentForm" />
      </q-card-actions>
    </q-card>
  </q-dialog>
</template>
<script>
  import {
    queryPlanAppointmentDetail,
  } from "../../../api/stuMan/index";

  export default {
    name: "appointmentDetails",
    props: {
      showItem: {
        type: Object,
        default: null,
      },
    },
    data() {
      return {
        isShowAppointmentDialog: true,
        loading: false,
        columns: [{
            name: "StuName",
            label: "姓名",
            field: "StuName",
            align: "left",
          },
          {
            name: "DateStr",
            label: "预约日期",
            field: "DateStr",
            align: "left",
          },
          {
            name: "StartTime",
            label: "预约时段",
            field: "StartTime",
            align: "left",
          },
          {
            name: "StatusStr",
            label: "预约状态",
            field: "StatusStr",
            align: "left",
          },
          {
            name: "CreateTime",
            label: "创建时间",
            field: "CreateTime",
            align: "left",
          }
        ],
        qMsg: {
          PlanAppointmentId: 0,
        },
        pageMsg: {
          rowsPerPage: 1000
        },
        DataList: [],
      };
    },
    created() {
      this.qMsg.PlanAppointmentId = this.showItem.PlanAppointmentId
    },
    mounted() {
      this.getAppointmentDetailsList();
    },
    methods: {
      //关闭弹窗
      closeAppointmentForm() {
        this.$emit("refreshpage");
      },
      //获取预约详情
      getAppointmentDetailsList() {
        this.loading = true;
        queryPlanAppointmentDetail(this.qMsg).then(res => {
          this.loading = false;
          if (res.Code == 1) {
            this.DataList = res.Data;
          }
        });
      }
    },
  };
</script>