<style>
  .Sysuser_Date .el-range-editor .el-range-input {
    background-color: transparent;
  }

  .Sysuser_Date .el-range-editor.el-input__inner {
    background-color: transparent;
  }
  .ReceipTypeName{
    display: inline-block;
    padding: 2px 8px;
    color: white;
    background-color: rgb(233, 82, 82);
    line-height: 16px;
    border-radius: 4px;
  }
</style>
<template>
  <div class="page-body">
    <div class="page-search row items-center">
      <div class="col row wrap q-col-gutter-md">
        <div class="col-3">
          <q-input @change="resetSearch" clearable filled v-model="msg.ClassName"
            label="学员名称/班级名称/老师名称" />
        </div>
        <div class="col-3">
          <q-select @input="resetSearch" filled v-model="msg.AuditStatus" :options="ShowOpts"
            emit-value map-options label="审核状态" />
        </div>
        <div class="col-3">
          <q-select @input="resetSearch" option-value="Id" option-label="Name" filled v-model="msg.ReceiptType" :options="OrderTypeList"
            emit-value map-options label="单据类型" />
        </div>
        <div class="col-3 Sysuser_Date">
          <q-field filled>
             <template v-slot:control>
              <el-date-picker v-model="applyDateList" @change="resetSearch()" value-format="yyyy-MM-dd" type="daterange" style="border:none;"
                 range-separator="至"  start-placeholder="申请开始日期"  end-placeholder="申请结束日期">
                 </el-date-picker>       
            </template>
          </q-field>
        </div>
      </div>
    </div>
    <div class="page-content">
      <q-tabs style="margin-bottom:20px;" v-model="tabCheck" narrow-indicator dense align="left" class="text-primary">
        <q-tab :ripple="false" name="1" label="我发起的" />
        <q-tab :ripple="false" name="3" label="待我审批" />
        <q-tab :ripple="false" name="2" label="已审批" />
        <q-tab :ripple="false" name="4" label="抄送给我的" />
      </q-tabs>
      <q-table :pagination="msg" :loading="loading" no-data-label="暂无相关数据" flat class="sticky-tow-column-table"
        separator="none" :data="data" :columns="columns" row-key="name">
        <template v-slot:body-cell-ReceiptTypeName="props">
          <q-td :props="props">
            <span class="ReceipTypeName">{{props.row.ReceiptTypeName}}</span>
          </q-td>
        </template>
        <template v-slot:bottom>
          <q-pagination class="full-width justify-end" v-model="msg.pageIndex" color="primary" :max="pageCount"
            :input="true" @input="changePage" />
        </template>
        <template v-slot:body-cell-optioned="props">
          <q-td :props="props">
            <template v-if="tabCheck=='3'">
              <q-btn flat size="xs" icon="edit" color="accent" style="font-weight:400" label="审核"
                @click="showBillForm(props.row,2)" />
            </template>
            <template v-else>
              <template v-if="props.row.FinanceId&& props.row.FinanceId>0">
                <a style="cursor:pointer;color:blue;" title="退课财务单据号"
                  @click="goFinaceUrl('FinancialDocumentsDetail',props.row)">{{props.row.FinanceId}}</a>
              </template>
              <template v-else>
                <q-btn v-if="tabCheck=='1' && props.row.AuditStatus==2" flat size="xs" icon="edit" color="accent"
                  style="font-weight:400" label="生成单据" @click="createBillForm(props.row)" />
              </template>
              <q-btn flat size="xs" icon="edit" color="accent" style="font-weight:400" label="查看"
                @click="showBillForm(props.row,1)" />
            </template>
          </q-td>
        </template>
      </q-table>
      <backbill-form v-if="isShowBillForm" :seting-obj="billObj" :showType="showType" @close="closeBillForm"
        @success="refreshPage">
      </backbill-form>
      <createbackbill-form v-if="isShowCreateBillForm" :seting-obj="billObj" @close="closeBillForm"
        @success="refreshPage">
      </createbackbill-form>
    </div>
  </div>
</template>
<script>
  import {
    GetEducationReceiptPage,
    GetEducationReceiptType
  } from '../../api/teacher/index'

  import backbillForm from '../../components/sale/backbill-form';
  import createbackbillForm from '../../components/sale/createbackbill-form';
  export default {
    meta: {
      title: "退课单据"
    },
    components: {
      backbillForm,
      createbackbillForm
    },
    data() {
      return {
        currentUrl: "",
        columns: [{
            name: 'Id',
            label: '单号',
            field: 'Id',
            align: 'left'
          },{
            name: 'Title',
            label: '标题',
            field: 'Title',
            align: 'left'
          },
          {
            name: 'ReceiptTypeName',
            label: '单据类型',
            field: 'ReceiptTypeName',
            align: 'left'
          },
          {
            name: 'AuditStatusName',
            label: '审核状态',
            field: 'AuditStatusName',
            align: 'left'
          },
          {
            name: 'CreateByName',
            label: '创建人',
            field: 'CreateByName',
            align: 'left'
          },
          {
            name: 'CreateTime',
            label: '创建时间',
            field: 'CreateTime',
            align: 'left'
          },
          {
            name: 'optioned',
            label: '操作',
            field: 'BackId'
          }
        ],
        data: [],
        loading: true,
        applyDateList: [], //申请日期
        ShowOpts: [
          {
            label: '审核中',
            value: '1'
          },
          {
            label: '通过',
            value: '2'
          },
          {
            label: '驳回',
            value: '3'
          },
          {
            label: '作废',
            value: '4'
          }
        ],
        msg: {
          pageIndex: 1,
          pageSize: 12,
          rowsPerPage: 12,
          ClassName: "", //学员、班级、老师名称
          AuditStatus: "", //审核状态
          StartTime: "", //开始时间
          EndTime: "", //结束时间
          Conditon: 1,
          ReceiptType:'' //单据类型
        },
        tabCheck: "1",
        pageCount: 0,
        isShowBillForm: false, //是否显示单据表单
        isShowCreateBillForm: false, //是否显示制单表单
        billObj: {}, //单据信息
        showType: 1, //1-查看，2-审核
        OrderTypeList: [],
      
      }
    },
    created() {

    },
    mounted() {
      this.currentUrl = this.$route.path;
      this.getEducationType();
      this.getStuBackBill();
    },
    methods: {
      //跳转到财务单据
      goFinaceUrl(path, rowData) {
        this.$router.push({
          path: '/financial/financalDocument/' + path,
          query: {
            "id": rowData.FinanceId,
            blank: 'y',
            tab: '单据详情'
          }
        })
      },
      //生成财务单据
      createBillForm(item) {
        this.isShowCreateBillForm = true;
        this.billObj = item;
      },
      //关闭表单
      closeBillForm() {
        this.isShowBillForm = false;
        this.isShowCreateBillForm = false;
        this.billObj = {};
      },
      //显示表单
      showBillForm(item, type) {
        this.isShowBillForm = true;
        this.showType = type;
        this.billObj = item;
      },
      //重新查询
      resetSearch() {
        this.msg.pageIndex = 1;
        this.getStuBackBill();
      },
      //翻页
      changePage(val) {
        this.msg.pageIndex = val;
        this.getStuBackBill();
      },
      //获取退课单据分页列表
      getStuBackBill() {
        this.loading = true;
        this.data = [];
        this.pageCount = 0;
        this.msg.Conditon = this.tabCheck;
        if (this.applyDateList && this.applyDateList.length > 0) {
          this.msg.StartTime = this.applyDateList[0];
          this.msg.EndTime = this.applyDateList[1];
        } else {
          this.msg.StartTime = '';
          this.msg.EndTime = '';
        }
        GetEducationReceiptPage(this.msg).then(res => {
          this.loading = false;
          this.data = res.Data.PageData;
          this.pageCount = res.Data.PageCount;
        }).catch(() => {
          this.loading = false;
        })
      },
      //刷新页面
      refreshPage() {
        this.isShowBillForm = false;
        this.billObj = {};
        this.getStuBackBill();
      },
      //获取下拉数据
      getEducationType() {
        GetEducationReceiptType().then(res => {
          if (res.Code == 1) {
            this.OrderTypeList = res.Data;
          }
        }).catch(() => {})
      }
    },
    watch: {
      tabCheck: function (val) {
        this.resetSearch();
      }
    }
  }

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

</style>
