<style>
  .courserefund_Div {
    color: #000;
    width: 193px;
    text-align: center;
    padding: 10px;
    position: absolute;
    left: 0px;
    top: 0px;
    z-index: -1;
  }

  .courserefund_Div>div {
    margin-bottom: 10px;
    font-size: 13px;
  }

</style>
<template>
  <div class="page-content">
    <div class="courserefund_Div" id="proToCol" v-if="!loading">
      <img :src="imgUrl" alt="" style="width:150px;" />
      <div>尊敬的客户</div>
      <div>您的退款协议《{{ProtocolNum}}》</div>
      <div>请长按识别二维码,查阅并签字</div>
    </div>
    <q-table :pagination="pageMsg" :loading="loading" no-data-label="暂无相关数据" flat class="sticky-column-table sticky-right-column-table"
      separator="none" title="退课协议" :data="dataList" :columns="columns" row-key="name">
      <template v-slot:top="props">
        <div class="col-2 q-table__title">退课协议</div>
        <q-space />
        <div class="page-option"></div>
      </template>
      <template v-slot:body-cell-CreateByName="props">
        <q-td :props="props">
          <q-avatar rounded size="sm" v-if="props.row.CreateByPhoto">
            <img :src="props.row.CreateByPhoto" />
          </q-avatar>
          <q-avatar rounded size="sm" color="teal-10" text-color="white" v-if="!props.row.CreateByPhoto">
            {{ props.value.substring(0, 1) }}</q-avatar>
          {{ props.row.CreateByName }}
        </q-td>
      </template>
      <template v-slot:body-cell-StudentName="props">
        <q-td auto-width :props="props">
          <span v-if="props.row.Sign" style="color: #67c23a">【已签字】</span>
          <span v-else style="color: #e95252">【未签字】</span>
          {{ props.row.StudentName }}
        </q-td>
      </template>
      <template v-slot:body-cell-ReceiptId="props">
        <q-td auto-width :props="props">
          <span style="color: blue;text-decoration:underline;cursor:pointer;"
            @click="showBackBill(props.row)">{{props.row.ReceiptId}}</span>
        </q-td>
      </template>
      <template v-slot:body-cell-AuditStatus="props">
        <q-td auto-width :props="props">
          <span v-if="props.row.AuditStatus == 1||props.row.AuditStatus == 0" style="color: #409eff">审核中</span>
          <span v-if="props.row.AuditStatus == 2" style="color: #67c23a">{{props.row.AuditStatusStr}}</span>
          <span v-if="props.row.AuditStatus == 3" style="color: #f56c6c">驳回</span>
        </q-td>
      </template>
      <template v-slot:body-cell-IsCompanySeal="props">
        <q-td auto-width :props="props">
          <span v-if="props.row.IsCompanySeal == 0" style="color: #e95252">未盖章</span>
          <span v-if="props.row.IsCompanySeal == 1" style="color: #67c23a">已盖章</span>
        </q-td>
      </template>
      <template v-slot:bottom>
      </template>
      <template v-slot:body-cell-optioned="props">
        <q-td :props="props" style="width:100px;">
          <div>
            <el-tooltip v-if="AuthorityObj.isShowCopyLink" content="复制链接发送给客人签字" placement="top" effect="light">
              <q-btn flat v-if=" props.row.AuditStatus == 2 &&props.row.IsSure==0" size="xs"
                icon="iconfont icon-qianming" color="accent" style="font-weight: 400" @click="CopyUrl(props.row)"
                label="获取合同链接" />
            </el-tooltip>
            <q-btn flat
              v-if="AuthorityObj.isShowSure&& props.row.AuditStatus == 2 &&props.row.PartyASign!=null && props.row.PartyASign!='' &&props.row.IsSure == 0"
              size="xs" icon="iconfont icon-View" color="accent" @click="SureProtocol(props.row)"
              style="font-weight: 400" label="确认退课协议" />
            <q-btn flat size="xs" icon="iconfont icon-View" color="accent" @click="goContract(props.row.Id)"
              style="font-weight: 400" label="查看" />
          </div>
        </q-td>
      </template>
    </q-table>
    <backbill-form v-if="isShowBillForm" :seting-obj="billObj" :showType="showType" @close="refreshPage"
      @success="refreshPage">
    </backbill-form>
  </div>
</template>
<script>
  import {
    Loading
  } from 'quasar'
  import backbillForm from "../../components/sale/backbill-form";
  import {
    SetBackClassProtocolSure,
    CreateWeChatCode
  } from "../../api/sale/contract";
  import {
    GetEducationReceiptPage,
  } from "../../api/teacher/index";
  import html2canvas from "html2canvas";

  export default {
    props: {
      dataList: {
        type: Array,
        default: null
      },
      loading: {
        type: Boolean,
        default: null
      },
      //权限数据
      authObj: {
        type: Object,
      },
    },
    components: {
      backbillForm,
    },
    data() {
      return {
        columns: [{
            name: "ProtocolNum",
            label: "协议编号",
            align: "left",
            field: "ProtocolNum",
          },
          {
            name: "PartyAName",
            label: "学生名称",
            field: "PartyAName",
            align: "left",
          },
          {
            name: "OldCourseName",
            label: "课程名称",
            align: "left",
            field: "OldCourseName",
          },
          {
            name: "CreateByName",
            label: "创建人",
            align: "left",
            field: "CreateByName",
          },
          {
            name: "CreateTimeStr",
            label: "创建时间",
            align: "left",
            field: "CreateTimeStr",
          },
          {
            name: "ReceiptId",
            label: "关联退课申请单",
            align: "left",
            field: "ReceiptId",
          },
          {
            name: "AuditStatus",
            label: "审核状态",
            align: "left",
            field: "AuditStatus"
          },
          {
            name: "IsCompanySeal",
            label: "是否盖章",
            align: "left",
            field: "Status",
          },
          {
            name: "optioned",
            label: "操作",
            field: "RoomId",
          },
        ],
        //权限显示对象
        AuthorityObj: {
          isShowCopyLink: false, //是否显示复制链接
          isShowSure: false, //是否显示确认按钮
        },
        isShowBillForm: false, //是否显示退课详情
        showType: 1, //1-查看，2-审核
        pageMsg: {
          rowsPerPage: 12,
        },
        billObj: {},
        imgUrl: '',
        getBlob: '',
        ProtocolNum: ''
      }
    },
    created() {
      this.initAuth();
    },
    mounted() {},
    methods: {
      //显示退课详情
      showBackBill(item) {
        var qMsg = {
          pageIndex: 1,
          pageSize: 12,
          rowsPerPage: 12,
          Id: item.ReceiptId,
        }
        GetEducationReceiptPage(qMsg).then(res => {
          if (res.Code == 1) {
            this.billObj = res.Data.PageData[0];
            this.isShowBillForm = true;
          }
        })
      },
      //刷新页面
      refreshPage() {
        this.isShowBillForm = false;
        this.billObj = {};
        this.$emit("success");
      },
      //初始化权限信息
      initAuth() {
        if (this.authObj) {
          if (this.authObj.isShowCopyLink != null && this.authObj.isShowCopyLink) {
            this.AuthorityObj.isShowCopyLink = this.authObj.isShowCopyLink;
          }
          if (this.authObj.isShowSure != null && this.authObj.isShowSure) {
            this.AuthorityObj.isShowSure = this.authObj.isShowSure;
          }
        }
      },
      //跳转至详情
      goContract(Id) {
        this.OpenNewUrl('/courseRefund', {
          Id: Id
        })
      },
      //确认退课协议
      SureProtocol(item) {
        let that = this
        this.$q.dialog({
          title: "提示信息",
          message: "你正在进行确认退课协议，是否确认执行",
          persistent: true,
          cancel: {
            label: "取消",
            flat: true
          },
          ok: {
            label: "确认",
            flat: true,
            focus: true
          }
        }).onOk(() => {
          var postMsg = {
            Id: item.Id,
            IsSure: 1
          };
          SetBackClassProtocolSure(postMsg).then(res => {
            if (res.Code == 1) {
              this.$q.notify({
                icon: "iconfont icon-chenggong",
                color: "accent",
                timeout: 2000,
                message: "退课协议确认成功!",
                position: "top",
              });
              this.$emit("success");
            }
          });
        })
      },
      //复制生成二维码
      CopyUrl(item) {
        var tipLoadding = Loading;
        tipLoadding.show({
          message: '正在生成图片,请稍后...'
        })
        var domain = "https://edu.kookaku.com/#/courseRefundH5?Id=" + item.Id;
        let msg = {
          url: domain,
          width: 430
        }
        CreateWeChatCode(msg).then((res) => {
          if (res.Code == 1) {
            let address = process.env.API;
            let aOne = address.split('/api')[0];
            this.imgUrl = aOne + res.Data;
            this.ProtocolNum = item.ProtocolNum;
            this.getBlob = this.getAnyFileBlob(this.imgUrl);
            setTimeout(() => {
              let canvasID = document.getElementById("proToCol");
              let a = document.createElement("a");
              html2canvas(canvasID, {
                useCORS: true, //【重要】开启跨域配置
                allowTaint: true, //允许跨域图片
                backgroundColor: "#FFFFFF",
                scale: 1.3,
                taintTest: false //是否在渲染前测试图片
              }).then(canvas => {
                let dom = document.body.appendChild(canvas);
                dom.style.display = "none";
                a.style.display = "none";
                document.body.removeChild(dom);
                let blob = this.dataURLToBlob(dom.toDataURL("image/png"));
                a.setAttribute("href", URL.createObjectURL(blob));
                var name = this.ProtocolNum;
                a.setAttribute("download", name);
                document.body.appendChild(a);
                a.click();
                URL.revokeObjectURL(blob);
                document.body.removeChild(a);
              });
            }, 1000);
            tipLoadding.hide();
          }
          else{
            tipLoadding.hide();
          }
        });
      },
      dataURLToBlob(dataurl) {
        let arr = dataurl.split(",");
        let mime = arr[0].match(/:(.*?);/)[1];
        let bstr = atob(arr[1]);
        let n = bstr.length;
        let u8arr = new Uint8Array(n);
        while (n--) {
          u8arr[n] = bstr.charCodeAt(n);
        }
        return new Blob([u8arr], {
          type: mime
        });
      },
    }
  }

</script>
