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

  .billDialog {
    width: 400px;
    min-height: 150px;
  }

  .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 clearable filled v-model="msg.Id" label="单据编号" @input="resetSearch" />
        </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 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="申请结束日期" />
            </template>
          </q-field>
        </div>
      </div>
    </div>
    <div class="page-content">
      <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==1||props.row.ReceiptType==5||props.row.ReceiptType==3||props.row.ReceiptType==4">
                <span>
                  {{props.row.DataObj.Remarks}}
                  <q-tooltip :offset="[0, 10]">
                    {{props.row.DataObj.Remarks}}
                  </q-tooltip>
                </span>
              </template>
              <template v-if="props.row.ReceiptType==2">
                <span>
                  {{props.row.DataObj.ApplyReason}}
                  <q-tooltip :offset="[0, 10]">
                    {{props.row.DataObj.ApplyReason}}
                  </q-tooltip>
                </span>
              </template>
            </div>
          </q-td>
        </template>
        <template v-slot:body-cell-AuditObj="props">
          <q-td :props="props">
            <template v-if="props.row.AuditObj&&props.row.AuditObj.AuditNode">
              <span style="cursor:pointer;color:blue;">{{props.row.AuditObj.AuditNode}}
                <q-tooltip :offset="[10, 10]">
                  <template v-if="props.row.AuditObj.AuditManList"
                    v-for="(sItem,sIndex) in props.row.AuditObj.AuditManList">
                    <span :key="sIndex">{{sItem.AuditManName}} 待审</span><br />
                  </template>
                </q-tooltip>
              </span>
            </template>
          </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">
            <q-btn flat size="xs" v-if="IsEditEduReceipAudit &&(props.row.VerifyStatus==0||props.row.VerifyStatus==1)"
              icon="edit" color="accent" style="font-weight:400" label="修改" @click="getCurrentAuditMan(props.row)" />
            <q-popup-proxy v-if="isShowEdit">
              <q-banner>
                <div class="billDialog">
                  <div v-for="(item,index) in AuditList" class="col row" style="margin-top:20px;">
                    <div class="col-5" style="align-items:center;">
                      <q-select v-model="item.AuditEmId" :options="EmployeeList" filled disable
                        option-label="EmployeeName" option-value="Id" ref="EmployeeName" class="col-6" emit-value
                        map-options>
                      </q-select>
                    </div>
                    <span style="margin:20px;">-</span>
                    <div class="col-5">
                      <q-select v-model="item.NewAuditEmId" :options="EmployeeList" filled clearable use-input
                        label="审核人员" option-label="EmployeeName" option-value="Id" ref="EmployeeName" class="col-6"
                        emit-value map-options @filter="filterFn">
                        <template v-slot:no-option>
                          <q-item>
                            <q-item-section class="text-grey">
                              未找到相关数据
                            </q-item-section>
                          </q-item>
                        </template>
                      </q-select>
                    </div>
                  </div>
                </div>
              </q-banner>
              <q-card-actions align="right" class="bg-white">
                <q-btn label="取消" flat color="grey-10" @click="isShowEdit=false" style="font-weight:400 !important" />
                <q-btn label="确认" color="accent q-px-md" style="font-weight:400 !important" @click="saveBill" />
              </q-card-actions>
            </q-popup-proxy>

            <q-btn flat size="xs" icon="iconfont icon-View" color="accent" style="font-weight:400" label="查看"
              @click="showBillForm(props.row,1)" />
          </q-td>
        </template>
      </q-table>
      <backbill-form v-if="isShowBackBillForm" :seting-obj="billObj" :showType="showType" @close="closeBillForm"
        @success="refreshPage">
      </backbill-form>
      <changebill-form v-if="isShowChangeBillForm" :seting-obj="billObj" :showType="showType" @close="closeBillForm"
        @success="refreshPage">
      </changebill-form>
      <ordertrans-form v-if="isShowTransForm" :seting-obj="billObj" :showType="showType" @close="closeBillForm"
        @success="refreshPage">
      </ordertrans-form>
      <stopbill-form v-if="isShowStopBillForm" :seting-obj="billObj" :showType="showType" @close="closeBillForm"
        @success="refreshPage">
      </stopbill-form>
      <!-- 订单临时上课邀请-查看 -->
      <temporaryClass-form v-if="isShowTemporaryClass" :seting-obj="billObj" :showType="showType" @close="closeBillForm"
        @success="refreshPage">
      </temporaryClass-form>
      <!-- 显示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,
    queryCurrentAuditMan,
    saveAuditMan
  } from '../../api/teacher/index'
  import {
    queryEmployee
  } from '../../api/users/user'; //获取员工


  import backbillForm from '../../components/sale/backbill-form';
  import changebillForm from '../../components/sale/changebill-form';
  import ordertransForm from '../../components/sale/ordertrans-form'
  import stopbillForm from '../../components/sale/stopbill-form';
  import temporaryClassForm from '../../components/sale/temporaryClassbill-form';
  import vipcoursebillForm from "../../components/sale/vipcoursebill-form.vue";
  import assessmentbillForm from "../../components/sale/assessmentbill-form.vue";
  export default {
    meta: {
      title: "教务单据查询"
    },
    components: {
      backbillForm,
      changebillForm,
      ordertransForm,
      stopbillForm,
      temporaryClassForm,
      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: 'AuditObj',
            label: '当前审核',
            field: 'AuditObj',
            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: '0',
          ReceiptType: '' //单据类型
        },
        pageCount: 0,
        isShowBackBillForm: false, //是否显示退课单据
        isShowChangeBillForm: false, //是否显示调课单据
        billObj: {}, //单据信息
        showType: 1, //1-查看，2-审核
        OrderTypeList: [],
        isShowEdit: false,
        AuditList: [], //角色数组
        EmployeeList: [],
        AllemployeeList: [],
        IsEditEduReceipAudit: false, //是否有修改审核人权限
        isShowTransForm: false,
        isShowStopBillForm: false, //是否显示停课订单详情
        isShowTemporaryClass: false, //是否显示临时上课邀请订单详情
        isShowVipCourseForm: false, //是否显示Vip课程申请详情
        isShowAssessmentForm: false, //是否显示教师考核详情
      }
    },
    created() {
      var localStorageData = window.localStorage["loginUserInfo"];
      let ActionMenuList = JSON.parse(localStorageData).data.ActionMenuList
      if (ActionMenuList && ActionMenuList.length > 0) {
        ActionMenuList.forEach(x => {
          if (x.FunctionCode == 'Edit_EduReceipAudit') {
            this.IsEditEduReceipAudit = true;
          }
        })
      }
    },
    mounted() {
      if (this.$route.query.Id) {
        this.msg.Id = this.$route.query.Id;
      }
      this.currentUrl = this.$route.path;
      this.getEducationType();
      this.getStuBackBill();
      this.getEmployee();
    },
    methods: {
      //跳转到财务单据
      goFinaceUrl(path, rowData) {
        this.$router.push({
          path: '/financial/financalDocument/' + path,
          query: {
            "id": rowData.FinanceId,
            blank: 'y',
            tab: '单据详情'
          }
        })
      },
      //生成财务单据
      createBillForm(item) {
        this.billObj = item;
      },
      //关闭表单
      closeBillForm() {
        this.isShowBackBillForm = false;
        this.isShowChangeBillForm = false;
        this.isShowTransForm = false;
        this.isShowStopBillForm = false;
        this.isShowTemporaryClass = 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.isShowBackBillForm = true;
        }
        //转班
        else if (item.ReceiptType == 5 || item.ReceiptType == 6) {
          this.isShowTransForm = true;
        }
        //停课
        else if (item.ReceiptType == 3) {
          this.isShowStopBillForm = true;
        }
        //临时上课邀请
        else if (item.ReceiptType == 4) {
          this.isShowTemporaryClass = true;
        }
        //Vip课程申请
        else if (item.ReceiptType == 11) {
          this.isShowVipCourseForm = true;
        }
        //教师考核申请
        else if (item.ReceiptType == 12) {
          this.isShowAssessmentForm = true;
        }
        this.showType = type;
        this.billObj = item;
        this.isShowEdit = false;
      },
      //重新查询
      resetSearch() {
        this.msg.pageIndex = 1;
        this.getStuBackBill();
      },
      //翻页
      changePage(val) {
        this.msg.pageIndex = val;
        this.getStuBackBill();
      },
      //获取退课单据分页列表
      getStuBackBill() {
        this.loading = true;
        this.data = [];
        this.pageCount = 0;

        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.isShowBackBillForm = false;
        this.isShowChangeBillForm = false;
        this.isShowVipCourseForm = false;
        this.isShowAssessmentForm = false;
        this.billObj = {};
        this.getStuBackBill();
      },
      //获取下拉数据
      getEducationType() {
        GetEducationReceiptType().then(res => {
          if (res.Code == 1) {
            this.OrderTypeList = res.Data;
          }
        }).catch(() => {})
      },
      //获取审核人
      getCurrentAuditMan(obj) {
        this.isShowEdit = true;
        let msg = {
          Id: obj.Id
        }
        queryCurrentAuditMan(msg).then(res => {
          if (res.Code == 1) {
            this.AuditList = res.Data;
          }
        }).catch(() => {})
      },
      //获取员工
      getEmployee() {
        var qMsg = {
          Dept_Id: 0
        }
        queryEmployee(qMsg).then(res => {
          if (res.Code == 1) {
            this.EmployeeList = res.Data;
            this.AllemployeeList = res.Data;
          }
        }).catch(() => {})
      },
      //筛选员工
      filterFn(val, update) {
        update(() => {
          if (val === '') {
            this.EmployeeList = JSON.parse(JSON.stringify(this.AllemployeeList))
          } else {
            const needle = val.toLowerCase();
            this.EmployeeList = this.AllemployeeList.filter(v => v.EmployeeName.toLowerCase().indexOf(needle) > -1);
          }
        })
      },

      //保存
      saveBill() {
        saveAuditMan({
          Info: this.AuditList
        }).then(res => {
          if (res.Code == 1) {
            this.isShow = false;
            this.$q.notify({
              icon: 'iconfont icon-chenggong',
              color: 'accent',
              timeout: 2000,
              message: '数据保存成功！',
              position: 'top'
            })
            this.getStuBackBill();
          }
        }).catch(() => {})
      }
    },
    watch: {
      tabCheck: function (val) {
        this.resetSearch();
      }
    }
  }
</script>
<style lang="sass">
  @import url('~assets/css/table.sass')
</style>