<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;
  }

  .bill_Rearsons {
    width: 250px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
</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.Id" label="单号" maxlength="10" />
        </div>
        <div class="col-3">
          <q-select @input="resetSearch" clearable filled v-model="msg.VerifyStatus" :options="ShowOpts" emit-value
            map-options label="审核状态" />
        </div>
        <div class="col-3">
          <q-select @input="resetSearch" clearable filled option-value="Id" option-label="Name"
            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 sticky-right-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:body-cell-ApplyReason="props">
          <q-td :props="props">
            <div class="bill_Rearsons">
              <template v-if="props.row.ReceiptType == 2">
                <span v-if="props.row.DataObj && props.row.DataObj.ApplyReason">
                  {{ props.row.DataObj.ApplyReason }}
                  <q-tooltip :offset="[0, 10]">
                    {{ props.row.DataObj.ApplyReason }}
                  </q-tooltip>
                </span>
              </template>
              <template v-else>
                <span v-if="props.row.DataObj && props.row.DataObj.Remarks">
                  {{ props.row.DataObj.Remarks }}
                  <q-tooltip :offset="[0, 10]">
                    {{ props.row.DataObj.Remarks }}
                  </q-tooltip>
                </span>
              </template>
            </div>
          </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.DataObj &&
                  props.row.VerifyStatus == 2 &&
                  props.row.ReceiptType == 2 &&
                  props.row.DataObj.FinanceId <= 0 &&
                  tabCheck == '1'
                ">
                <q-btn flat size="xs" icon="directions" color="secondary" style="font-weight: 400" label="签订退课协议"
                  @click="goToBackProtocol(props.row)" />
                 <q-tooltip>
                  用户签订协议后，需要你进行确认，确认好以后系统自动生成财务单据，无需手动干预
                </q-tooltip>
              </template>
              <template v-if="
                  props.row.DataObj &&
                  props.row.VerifyStatus == 2 &&
                  props.row.ReceiptType == 2 &&
                  props.row.DataObj.FinanceId > 0
                ">
                <span @click="
                    goFinaceUrl('FinancialDocumentsDetail', props.row.DataObj)
                  " title="退课财务单据号"
                  style="color: #2961fe; font-weight: bold; cursor: pointer">协议已签订，财务单号：{{ props.row.DataObj.FinanceId }}</span>
              </template>
              <q-btn v-if="props.row.VerifyStatus == 0 && tabCheck == '1'" flat size="xs" icon="delete" color="negative"
                style="font-weight: 400" label="作废" @click="invalidBillForm(props.row)" />
              <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>
      <changebill-form v-if="isShowChangeBillForm" :seting-obj="billObj" :showType="showType" @close="closeBillForm"
        @success="refreshPage">
      </changebill-form>
      <stopbill-form v-if="isShowStopBillForm" :seting-obj="billObj" :showType="showType" @close="closeBillForm"
        @success="refreshPage">
      </stopbill-form>
      <!-- 订单转班-查看 -->
      <ordertrans-form v-if="isShowClassTrans" :seting-obj="billObj" :showType="showType" @close="closeBillForm"
        @success="refreshPage">
      </ordertrans-form>
      <!-- 订单临时上课邀请-查看 -->
      <temporaryClass-form v-if="isShowTemporaryClass" :seting-obj="billObj" :showType="showType" @close="closeBillForm"
        @success="refreshPage">
      </temporaryClass-form>
      <!-- 请假申请 -->
      <leaveBillForm v-if="isShowLeaveBillForm" :seting-obj="billObj" :showType="showType" @close="closeBillForm"
        @success="refreshPage"></leaveBillForm>
      <!-- 组卷审批 -->
      <zujuanBillForm v-if="isShowZujuanBillForm" :seting-obj="billObj" :showType="showType" @close="closeBillForm"
        @success="refreshPage"></zujuanBillForm>
      <!-- 考试申请 -->
      <examBillForm v-if="isShowExamBillForm" :seting-obj="billObj" :showType="showType" @close="closeBillForm"
        @success="refreshPage"></examBillForm>
      <!-- 投稿审批 -->
      <tougaoForm v-if="isShowTougaoForm" :seting-obj="billObj" :showType="showType" @close="closeBillForm"
        @success="refreshPage"></tougaoForm>

      <!-- 显示Vip课程申请 -->
      <vipcoursebillForm v-if="isShowVipCourseForm" :seting-obj="billObj" :showType="showType" @close="closeBillForm"
        @success="refreshPage"></vipcoursebillForm>
    </div>
  </div>
</template>
<script>
  import {
    GetEducationReceiptPage,
    GetEducationReceiptType,
    invalidReceiptInfo,
  } from "../../api/teacher/index";

  import backbillForm from "../../components/sale/backbill-form";
  import changebillForm from "../../components/sale/changebill-form";
  import stopbillForm from "../../components/sale/stopbill-form";
  import createbackbillForm from "../../components/sale/createbackbill-form";
  import ordertransForm from "../../components/sale/ordertrans-form";
  import temporaryClassForm from "../../components/sale/temporaryClassbill-form";
  import leaveBillForm from "../../components/sale/leavebill-form.vue";
  import zujuanBillForm from "../../components/sale/zujuanbill-form.vue";
  import examBillForm from "../../components/sale/exambill-form.vue";
  import tougaoForm from "../../components/sale/tougao-form.vue";
  import vipcoursebillForm from "../../components/sale/vipcoursebill-form.vue";
  export default {
    meta: {
      title: "我的业务单据",
    },
    components: {
      backbillForm,
      createbackbillForm,
      changebillForm,
      stopbillForm,
      ordertransForm,
      temporaryClassForm,
      leaveBillForm,
      zujuanBillForm,
      examBillForm,
      tougaoForm,
      vipcoursebillForm
    },
    data() {
      return {
        currentUrl: "",
        columns: [{
            name: "Id",
            label: "单号",
            field: "Id",
            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: "ApplyReason",
            label: "申请原因",
            field: "ApplyReason",
            align: "left",
          },
          {
            name: "optioned",
            label: "操作",
            field: "BackId",
          },
        ],
        data: [],
        loading: true,
        applyDateList: [], //申请日期
        ShowOpts: [{
            label: "审核中",
            value: "1",
          },
          {
            label: "通过",
            value: "2",
          },
          {
            label: "驳回",
            value: "3",
          },
          {
            label: "作废",
            value: "6",
          },
        ],
        msg: {
          pageIndex: 1,
          pageSize: 12,
          rowsPerPage: 12,
          Id: "",
          VerifyStatus: "", //审核状态
          StartTime: "", //开始时间
          EndTime: "", //结束时间
          Conditon: 1,
          ReceiptType: "", //单据类型
          RelationId: 0,
        },
        tabCheck: "1",
        pageCount: 0,
        isShowBillForm: false, //是否显示单据表单
        isShowCreateBillForm: false, //是否显示制单表单
        isShowChangeBillForm: false, //是否显示调课单据
        billObj: {}, //单据信息
        showType: 1, //1-查看，2-审核
        OrderTypeList: [],
        isShowStopBillForm: false, //是否显示停课订单详情
        isShowClassTrans: false, //是否显示订单转班详情
        isShowTemporaryClass: false, //是否显示临时上课邀请订单详情
        isShowLeaveBillForm: false, //是否显示请假申请单详情
        isShowZujuanBillForm: false, //是否显示组卷申请单详情
        isShowExamBillForm: false, //是否显示考试申请详情
        isShowTougaoForm: false, //是否显示投稿申请详情,
        isShowVipCourseForm: false, //是否显示Vip课程申请详情,
      };
    },
    created() {
      if (this.$route.query.tab) {
        this.tabCheck = this.$route.query.tab;
      }
      if (this.$route.query.ReceiptType) {
        this.msg.ReceiptType = Number(this.$route.query.ReceiptType);
      }
      if (this.$route.query.RelationId) {
        this.msg.RelationId = this.$route.query.RelationId;
      }
      if (this.$route.query.id) {
        this.msg.Id = this.$route.query.id;
      }
    },
    mounted() {
      this.currentUrl = this.$route.path;
      this.getEducationType();
      this.getStuBackBill();
    },
    methods: {
      //跳转到退课协议
      goToBackProtocol(Id) {
        this.OpenNewUrl("/sale/contractRefund", {
          Id: Id,
        });
      },
      //跳转到财务单据
      goFinaceUrl(path, rowData) {
        this.OpenNewUrl("/financial/financalDocument/" + path, {
          id: rowData.FinanceId,
        });
      },
      //生成财务单据
      createBillForm(item) {
        this.$q
          .dialog({
            title: "提示信息",
            message: "退课单据将扣除10%违约金",
            cancel: true,
            persistent: true,
            ok: "确定",
            cancel: "取消",
          })
          .onOk(() => {
            this.isShowCreateBillForm = true;
            this.billObj = item;
          })
          .onCancel(() => {});
      },
      //关闭表单
      closeBillForm() {
        this.isShowBillForm = false;
        this.isShowChangeBillForm = false;
        this.isShowCreateBillForm = false;
        this.isShowStopBillForm = false;
        this.isShowClassTrans = false;
        this.isShowTemporaryClass = false;
        this.isShowLeaveBillForm = false;
        this.isShowZujuanBillForm = false;
        this.isShowExamBillForm = false;
        this.isShowTougaoForm = false;
        this.isShowVipCourseForm = false;
        this.billObj = {};
      },
      //显示表单
      showBillForm(item, type) {
        //调课
        if (item.ReceiptType == 1) {
          this.isShowChangeBillForm = true;
        }
        //退课
        else if (item.ReceiptType == 2) {
          this.isShowBillForm = true;
        }
        //停课
        else if (item.ReceiptType == 3) {
          this.isShowStopBillForm = true;
        }
        //临时上课邀请
        else if (item.ReceiptType == 4) {
          this.isShowTemporaryClass = true;
        }
        //转班
        else if (item.ReceiptType == 5 || item.ReceiptType == 6) {
          this.isShowClassTrans = true;
        }
        //学生请假
        else if (item.ReceiptType == 7) {
          this.isShowLeaveBillForm = true;
        }
        //组卷
        else if (item.ReceiptType == 8) {
          this.isShowZujuanBillForm = true;
        }
        //考试申请
        else if (item.ReceiptType == 9) {
          this.isShowExamBillForm = true;
        }
        //投稿审批
        else if (item.ReceiptType == 10) {
          this.isShowTougaoForm = true;
        } else if (item.ReceiptType == 11) {
          this.isShowVipCourseForm = 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.isShowChangeBillForm = false;
        this.isShowCreateBillForm = false;
        this.isShowStopBillForm = false;
        this.isShowClassTrans = false;
        this.isShowLeaveBillForm = false;
        this.isShowZujuanBillForm = false;
        this.isShowExamBillForm = false;
        this.isShowVipCourseForm = false;
        this.billObj = {};
        this.getStuBackBill();
      },
      //获取下拉数据
      getEducationType() {
        GetEducationReceiptType()
          .then((res) => {
            if (res.Code == 1) {
              this.OrderTypeList = res.Data;
            }
          })
          .catch(() => {});
      },
      //作废
      invalidBillForm(item) {
        let delMsg = {
          Id: item.Id,
        };
        var message = "是否要作废此单据？";
        this.$q
          .dialog({
            title: "提示信息",
            message: message,
            cancel: true,
            persistent: true,
            ok: "确定",
            cancel: "取消",
          })
          .onOk(() => {
            invalidReceiptInfo(delMsg).then((res) => {
              if (res.Code == 1) {
                this.$q.notify({
                  icon: "iconfont icon-chenggong",
                  color: "accent",
                  timeout: 2000,
                  message: "删除成功！",
                  position: "top",
                });
                this.refreshPage();
              } else {
                this.$q.notify({
                  icon: "iconfont icon-chenggong",
                  color: "accent",
                  timeout: 2000,
                  message: res.Message,
                  position: "top",
                });
              }
            });
          })
          .onCancel(() => {});
      },
    },
    watch: {
      tabCheck: function (val) {
        this.resetSearch();
      },
    },
  };
</script>
<style lang="sass">
  @import url('~assets/css/table.sass')
</style>