<!--退课申请-->
<template>
  <q-dialog v-model="IsShowBackClassDialog" content-class="bg-grey-1" persistent transition-show="scale"
    transition-hide="scale">
    <q-card style="width: 800px;max-width:900px;">
      <q-card-section>
        <div class="text-h6">退课申请</div>
      </q-card-section>
      <q-table :loading="loading" no-data-label="暂无相关学员数据" flat class="sticky-column-table" separator="none"
        :data="studentList" :columns="columns" hide-bottom row-key="Id">
        <template v-slot:body-cell-optioned="props">
          <q-td :props="props">
            <div style="min-width:190px;width:100%">
              <q-btn v-if="props.row.GuestState==1" flat size="xs" icon="iconfont icon-shenhe" color="info"
                style="font-weight:400" class="q-mr-xs" label="申请" @click="clickItem(props.row,1)" />
              <q-btn v-if="props.row.AuditStatus==3" flat size="xs" icon="iconfont icon-ziyuan" color="warning"
                style="font-weight:400" class="q-mr-xs" label="重新申请" @click="clickItem(props.row,2)" />
            </div>
          </q-td>
        </template>
      </q-table>
      <q-input filled stack-label :dense="false" v-model="applyReason" style="margin-top: 20px" type="textarea"
        class="col-12" label="申请理由" />
      <q-separator />
      <q-card-actions align="right" class="bg-white">
        <q-btn label="取消" flat color="grey-10" style="font-weight:400 !important" @click="closeBackClassForm" />
        <q-btn label="确认申请" color="accent" class="q-px-md" style="font-weight:400 !important"
          @click="saveOrderBackClass" />
      </q-card-actions>
    </q-card>
  </q-dialog>
</template>
<script>
  import {
    getOrderGuestPageList,
    SetBackClassApply
  } from '../../api/sale/sale'
  export default {
    name: "backclass-form",
    props: {
      saveObj: {
        type: Object,
        default: null,
      },
    },
    data() {
      return {
        IsShowBackClassDialog: true,
        backClassMsg: {
          OrderId: 0,
          ClassId: 0,
          pageIndex: 1,
          pageSize: 1000,
        },
        applyReason: "", //申请理由
        loading: false,
        columns: [{
            name: 'GuestName',
            label: '姓名',
            field: 'GuestName',
            align: 'left',
          },
          {
            name: 'SexStr',
            label: '性别',
            field: 'SexStr',
            align: 'left',
          },
          {
            name: 'Age',
            label: '年龄',
            field: 'Age',
            align: 'left',
          },
          {
            name: 'Mobile',
            label: '联系电话',
            align: 'left',
            field: 'Mobile'
          },
          {
            name: 'ClassHours',
            label: '已上课时',
            field: 'ClassHours',
            align: 'left',
          },
          {
            name: 'GuestStateStr',
            label: '状态',
            field: 'GuestStateStr',
            align: 'left'
          },
          {
            name: 'optioned',
            label: '操作',
            field: 'Id'
          }
        ],
        studentList: [], //学员列表
        chooseItem: {}, //当前选择项
      }
    },
    created() {
      this.backClassMsg.OrderId = this.saveObj.OrderId;
      this.backClassMsg.ClassId = this.saveObj.ClassId;
      this.getStudentList();
    },
    methods: {
      //当前点击项
      clickItem(item, type) {
        this.chooseItem = item;
      },
      //关闭弹窗
      closeBackClassForm() {
        this.IsShowBackClassDialog = false;
        this.applyReason = "";
        this.backClassMsg.OrderId = 0;
        this.backClassMsg.ClassId = 0;
        this.chooseItem = {};
        this.$emit('close');
      },
      //获取订单学员列表
      getStudentList() {
        this.studentList = [];
        getOrderGuestPageList(this.backClassMsg).then(res => {
          if (res.Code == 1) {
            this.studentList = res.Data.PageData;
          }
        })
      },
      //获取学员退课申请
      saveOrderBackClass() {
        var applyMsg = {
          GuestId: this.chooseItem.Id,
          OrderId: this.chooseItem.OrderId,
          applyReason: this.applyReason
        };
        if (!applyMsg.GuestId) {
          this.$q.notify({
            type: 'negative',
            position: "top",
            message: `请选择要申请的学员`
          })
          return;
        }
        console.log("item", applyMsg);
        SetBackClassApply(applyMsg).then(res => {
          if (res.Code == 1) {
            this.$q.notify({
              icon: 'iconfont icon-chenggong',
              color: 'accent',
              timeout: 2000,
              message: '修改成功！',
              position: 'top'
            })
            //调用父页面成功方法
            this.$emit('success');
            this.IsShowBackClassDialog = false
          }
        })
      }
    }
  }

</script>
