<style>
</style>
<template>
  <div class="page-body">
    <div class="page-search row items-center">
      <div class="col row wrap q-mr-lg q-col-gutter-md">
        <div class="col-3">
          <q-input @change="resetSearch" clearable standout="bg-primary text-white" v-model="msg.QOrderId" label="订单编号"
            @clear="resetSearch" maxlength="30" />
        </div>
        <div class="col-3">
          <q-select @input="resetSearch" standout="bg-primary text-white" v-model="msg.AuditStatus"
            :options="StatusOpts" option-value="Id" option-label="Name" label="状态" emit-value map-options />
        </div>
        <div class="col-3">
          <q-input @change="resetSearch" clearable standout="bg-primary text-white" v-model="msg.ProtocolNum"
            label="合同编号" @clear="resetSearch" maxlength="30" />
        </div>
        <div class="col-3">
          <q-input @change="resetSearch" clearable standout="bg-primary text-white" v-model="msg.PartyAName"
            label="学生姓名" @clear="resetSearch" maxlength="30" />
        </div>
      </div>
    </div>
    <courserefund-form :loading="loading" :dataList="dataList" :authObj="authObj" @success="refreshClassProtocol">
    </courserefund-form>
    <q-pagination class="full-width justify-end" v-model="msg.pageIndex" color="primary" :max="pageCount" :input="true"
      @input="changePage" />
  </div>
</template>
<script>
  import {
    GetBackClassProtocolPage
  } from "../../api/sale/contract";
  import courserefundForm from "../../components/course/courserefund-form"
  export default {
    meta: {
      title: "退课协议管理",
    },
    components: {
      courserefundForm
    },
    data() {
      return {
        loading: true,
        msg: {
          pageIndex: 1,
          pageSize: 12,
          PartyAName: '',
          AuditStatus: -1,
          QOrderId: '',
          ProtocolNum: '',
          IsQueryAll: 0,
          Id: "",
        },
        pageCount: 0,
        dataList: [],
        //状态下拉
        StatusOpts: [{
            Id: -1,
            Name: "不限",
          },
          {
            Id: 1,
            Name: "审核中",
          },
          {
            Id: 2,
            Name: "审核通过",
          },
          {
            Id: 3,
            Name: "驳回",
          },
          {
            Id: 4,
            Name: "待签字",
          },
          {
            Id: 5,
            Name: "待确认",
          },
          {
            Id: 6,
            Name: "生效",
          },
        ],
        authObj: {
          isShowCopyLink: true, //显示复制链接
          isShowSure: true, //显示确认退课协议按钮
        }
      };
    },
    created() {
      if (this.$route.query.Id) {
        this.msg.Id = this.$route.query.Id;
      }
    },
    mounted() {
      this.getList();
    },
    methods: {
      //刷新页面
      refreshClassProtocol() {
        this.getList();
      },
      //获取校区列表
      getList() {
        this.loading = true;
        GetBackClassProtocolPage(this.msg).then((res) => {
          this.loading = false;
          if (res.Code == 1) {
            this.dataList = res.Data.PageData;
            this.pageCount = res.Data.PageCount;
          }
        });
      },
      //重新查询
      resetSearch() {
        this.msg.pageIndex = 1;
        this.getList();
      },
      //分页改变
      changePage(val) {
        this.msg.pageIndex = val;
        this.getList();
      },
    },
  };

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

</style>
