<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': !isComponents }, { 'full-height': isComponents }]"
  >
    <div class="page-search row items-center" v-if="!isComponents">
      <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="[
        { 'poage-content': !isComponents },
        { 'full-height': isComponents }
      ]"
    >
      <q-tabs
        v-if="!isComponents"
        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"
        :class="[
          { 'my-sticky-header-table': isComponents },
          { 'full-height': isComponents }
        ]"
        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>
      <!-- 显示教师考核申请 -->
      <assessmentbillForm
        v-if="isShowAssessmentForm"
        :seting-obj="billObj"
        :showType="showType"
        @close="closeBillForm"
        @success="refreshPage"
      ></assessmentbillForm>
    </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";
import assessmentbillForm from "../../components/sale/assessmentbill-form.vue";
export default {
  meta: {
    title: "我的业务单据"
  },
  props: {
    isComponents: {
      type: Boolean,
      default: false
    },
    receipt: {
      type: Number,
      default: 0
    },
    billId: {
      type: String,
      default: ""
    }
  },
  components: {
    backbillForm,
    createbackbillForm,
    changebillForm,
    stopbillForm,
    ordertransForm,
    temporaryClassForm,
    leaveBillForm,
    zujuanBillForm,
    examBillForm,
    tougaoForm,
    vipcoursebillForm,
    assessmentbillForm
  },
  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课程申请详情
      isShowAssessmentForm: false //手否显示教师考核申请
    };
  },
  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;
    if (this.isComponents) {
      this.data = this.outData;
      this.tabCheck = "3";
    }
    //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.isShowAssessmentForm = 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;
      }
      //Vip课程申请
      else if (item.ReceiptType == 11) {
        this.isShowVipCourseForm = true;
      }
      //教师考核申请
      else if (item.ReceiptType == 12) {
        this.isShowAssessmentForm = 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.isShowAssessmentForm = false;
      this.billObj = {};
      this.getStuBackBill();
      if (this.isComponents) {
        this.$emit("success");
      }
    },
    //获取下拉数据
    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();
    },
    billId: function(val) {
      if (this.isComponents) {
        this.msg.Id = val;
        this.resetSearch();
      }
    },
    receipt: function(val) {
      if (this.isComponents) {
        this.msg.ReceiptType = val == 0 ? "" : val.toString();
        this.resetSearch();
      }
    }
  }
};
</script>
<style lang="sass">
@import url('~assets/css/table.sass')
</style>
