<style>
  .apply_List{
    width:100%;
    height:44px;
    background-color: #F7F7F7;
    line-height: 44px;
    margin-bottom:10px;
  }
  .apply_List span{
    display:inline-block;
    text-align: center;
    font-size:14px;
    color:#000000;
  }
  .guest_Status span{
    cursor: pointer;
    color:#2961FE;
  }
</style>
<!--退课申请-->
<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>
      <div style="margin:20px;">
        <div>
          <div class="apply_List" v-for="(item,index) in studentList" v-if="item.IsShow">
            <span style="width:10%">{{item.GuestName}}</span>
            <span style="width:10%">{{item.SexStr}}</span>
            <span style="width:10%">{{item.Age}}</span>
            <span style="width:20%">{{item.Mobile}}</span>
            <span style="width:20%">
              <template v-if="item.ClassHours">已学：{{item.ClassHours}}课时 </template>
            </span>
            <span style="width:10%">{{item.GuestStateStr}}</span>
            <span style="width:20%;" class="guest_Status">
              <span v-if="item.GuestState==1" @click="clickItem(item,1)">申请</span>
              <span style="margin-left:10px;" v-if="item.GuestState==4" @click="clickItem(item,2)">重新申请</span>
              <span style="margin-left:10px;" v-if="chooseItem&&chooseItem.Id==item.Id" @click="cancelApply">取消申请</span>
            </span>
          </div>
        </div>
        <q-input filled stack-label :dense="false" v-model="applyReason" style="margin-top: 20px" type="textarea"
          class="col-12" label="申请理由" />
        <q-separator />
      </div>
      <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: {
      //取消申请
      cancelApply() {
        this.chooseItem = {};
        if (this.studentList && this.studentList.length > 0) {
          this.studentList.forEach(item => {
            item.IsShow = true;
          })
        }
      },
      //当前点击项
      clickItem(item, type) {
        if (this.studentList && this.studentList.length > 0) {
          this.studentList.forEach(item => {
            item.IsShow = false;
          })
        }
        item.IsShow = true;
        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() {
        if (!this.chooseItem) {
          this.$q.notify({
            type: 'negative',
            position: "top",
            message: `请选择要申请的学员`
          })
          return;
        }
        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;
        }
        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>
