<style>
    @import url('../css/TicketingModule.css');

    .sanjiao-box {
        position: relative;
    }

    .sanjiao-box .Receipt_table td {
        padding: 0 10px;
    }

    .hover_text span {
        cursor: pointer;
        text-decoration: underline;
    }

    .mySJbox {
        width: 100%;
    }

    .mySJbox ._btn {
        font-size: 12px;
        color: #333333;
        cursor: pointer;
        margin-left: 10px;
    }

    .mySJbox .sjbox_l_t {
        font-size: 13px;
        display: flex;
        align-items: center;
    }

    .mySJbox .sjbox_l_t_x {
        border-bottom: 1px solid #666;
        flex: 1;
        margin-left: 10px;
    }
</style>
<template>
    <div class="mySJbox" v-if="!loading">
        <div>
            <div style="font-size: 14px;  color: #000;padding: 8px 15px;display: flex; justify-content: space-between;">
                <span style="border-left: 3px solid #e95252;padding-left: 10px;">财务收据 <span v-if="data && data.State" :style="{'font-size': '12px','color':data.State==1?'#409EFF':'#F56C6C'}">({{data.State==1?'已认领':'未认领'}})</span> </span>
                <div style="display: flex;align-items: center;" v-if="data && data.State  ">
                    <span class="_btn" @click="Printreceipt" v-if="isoneself">打印</span>
                    <span class="_btn" @click='addreceipt' v-if="data.State==2&& isoneself">修改</span>
                    <span class="_btn" @click='setdelete' v-if="data.State==2 && isoneself">删除</span>
                    <span class="_btn" @click='getshare' v-if="data.State==2 && isoneself">分享</span>
                </div>
            </div>
            <div v-if="data && data.Id>0" style="padding: 10px;">
                <!-- <div style="display: flex;align-items: center; justify-content: space-between;" v-if="isoneself">
                    <div> </div>
                    <div>认领码： <span class="sjbianhao">{{data.ClaimCode}}</span> </div>
                </div> -->
                <div style="display: flex;align-items: center; justify-content: space-between;">
                    <div>开票日期：<span>{{data.CreateTime}}</span> </div>
                    <div style="display: flex;align-items: center;">
                        <div style="margin-right: 25px;"v-if="isoneself">认领码： <span class="sjbianhao">{{data.ClaimCode}}</span> </div>
                        <div>
                            编号： <span class="sjbianhao">{{data.ReceiptNo}}</span> 
                        </div>
                       
                    </div>
                </div>
                <div style="border: 1px solid #ddd;padding: 20px;margin-top: 10px;">
                    <div class="sjbox_l_t">
                        <span>交款人</span>
                        <span class="sjbox_l_t_x">{{data.Remitter}}</span>
                    </div>
                    <div class="sjbox_l_t" style="margin-top: 20px;">
                        <div style="display: flex;align-items: center;flex:1">
                            <span>人民币(大写)</span>
                            <span class="sjbox_l_t_x"
                                v-if="data.Money">{{$commonUtils.changeMoneyToChinese(data.Money)}}</span>
                        </div>
                        <div style="display: flex;align-items: center;margin-left: 10px;">
                            <span>￥：</span>
                            <span class="sjbox_l_t_x" style="width: 200px"
                                v-if="data.Money">{{$commonUtils.addCommas(Math.round(data.Money * 100) / 100)}}</span>
                        </div>
                    </div>
                    <div class="sjbox_l_t" style="margin-top: 20px;">
                        <span>收款事由</span>
                        <span class="sjbox_l_t_x">{{data.Remark}}</span>

                    </div>
                </div>
            </div>
            <div v-else>
                <div style="width: 100%;text-align: center;line-height: 35px;">暂无收据</div>
                <div style="width: 100%;display: flex;align-items: center;justify-content: center;height: 40px;"
                    v-if="isoneself">
                    <q-btn color="accent" size="sm" class="q-mr-md" icon="add" label="新增" @click="addreceipt()"></q-btn>
                </div>
            </div>

        </div>

        <!-- 收据的新增和修改 -->
        <el-dialog custom-class='w600' title="收据的新增/修改" :visible.sync="receiptdialog" center>
            <template>
                <el-form label-width="120px" :model="addMsg" :rules="rules" ref="addMsg">

                    <el-form-item label="收据金额">
                        <el-input v-model="addMsg.Money" disabled></el-input>
                    </el-form-item>

                    <el-form-item label="交款人" prop="Remitter">
                        <el-input v-model="addMsg.Remitter" placeholder="请输入交款人"></el-input>
                    </el-form-item>
                    <el-form-item label="收款事由" prop="Remark">
                        <el-input v-model="addMsg.Remark" type="textarea" rows='3' style="border: 1px solid #dcdfe6;"></el-input>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <button class="hollowFixedBtn" @click="receiptdialog=false">取消</button>
                    <button class="normalBtn" type="primary" @click="setreceipt('addMsg')">确定</button>
                </div>
            </template>
        </el-dialog>
        <!-- 收据的分享暂时 -->
        <el-dialog custom-class='w300' title="分享图" :visible.sync="sharedialog" center>
            <template>
                <div id="proToCol"
                    style="display: flex;flex-direction: column;align-items: center; padding: 15px;">
                    <img :src="imgurl" alt="" style="width:100%;" ref='imgcode' crossOrigin = "anonymous"/>
                    <div style="margin-top: 25px;width: 100%; display: flex; flex-direction: column; align-items: center;">
                        <div>成都市锦江区甲鹤外语培训学校</div>
                        <div>发送给您了一个财务收据</div>
                        <div>请长按识别二维码查收</div>
                    </div>
                </div>
                <div style="width: 100%;text-align: center;">认领码：{{data && data.ClaimCode?data.ClaimCode:''}}</div>
                <div slot="footer" class="dialog-footer">
                    <button class="hollowFixedBtn" @click="sharedialog=false">关闭</button>
                    <button class="normalBtn" type="primary" @click="download()">下载</button>
                </div>
            </template>
        </el-dialog>
        <a style="display:none" ref='down'></a>


    </div>
</template>

<script>
    import {
        Loading
    } from 'quasar'
    import html2canvas from "html2canvas";

    import {
        getReceiptInfoForFinanceId,
        setReceiptInfo,
        delReceiptInfo,
        createWeChatCodeForReceipt
    } from '../../../api/finance/index'

    export default {
        props: ["FrID", "GetDetail"],
        data() {
            return {
                loading: false,
                data: null,
                addMsg: {
                    Id: 0,
                    FinanceId: '',//财务单据ID
                    ReceiptNo: '',//收据编码
                    Remitter: '',//交款人
                    Money: '',//金额
                    Remark: '',//事由
                    State: '',//	状态 1已认领 2未认领
                    ClaimCode: '',//认领码
                },//收据的保存对象
                receiptdialog: false,//新增收据的弹窗
                rules: {
                    Remitter: [
                        { required: true, message: '请输入交款人', trigger: 'blur' },
                    ],
                    Remark: [
                        { required: true, message: '请输入事由', trigger: 'blur' },
                    ],

                },
                Employeelist: [],//人员下拉
                EmployeeId: 0,
                isoneself: false,//是否是本人操作
                sharedialog: false,
                Money: 0,
                Fee: 0,
                imgurl: '',//分享的二维码
            }
        }, watch: {

        }, created() {
            this.addMsg.FinanceId = this.FrID
            this.addMsg.Remitter = this.GetDetail.RemitterName
            this.Money = (this.GetDetail.Money).toString().replace(/,/g, "")//处理替换所有的逗号
            this.Fee = (this.GetDetail.Fee).toString().replace(/,/g, "")
            this.addMsg.Money = Number(this.Money) + Number(this.Fee)
            let userInfo = this.getLocalStorage()
            this.EmployeeId = userInfo.Id;
            if (this.EmployeeId == this.GetDetail.CreateBy) {
                this.isoneself = true
            }

        }, mounted() {
            this.getDetails();
        },
        methods: {

            getDetails() {
                this.loading = true;
                this.data = null
                getReceiptInfoForFinanceId({ FinanceId: this.FrID }).then(res => {
                    if (res.Code == 1) {
                        if (res.Data.Id != null && res.Data.Id > 0) {
                            this.data = res.Data
                           
                        }else{
                            if(this.isoneself==false){
                                this.$emit("gbError");
                            }
                        }
                      
                        this.loading = false;

                    }
                })
            },
            Printreceipt() {//打印收据

                let routeData = this.$router.resolve({
                    path: '/financial/financalDocument/PrintPage',
                    query: {
                        type: 3,
                        id: this.FrID,
                        isKehu: 0,
                        Merge: 0,
                        OrderSource: -1
                    }
                });
                window.open(routeData.href, "_blank");
            },
            addreceipt() {//新增
                if (this.data && this.data.Id > 0) {//判断是否是新增
                    this.addMsg = JSON.parse(JSON.stringify(this.data))
                }
                this.receiptdialog = true
            },
            setreceipt(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        setReceiptInfo(this.addMsg).then(res => {
                            if (res.Code == 1) {
                                this.Success(res.Message);
                                this.getDetails()
                                this.receiptdialog = false
                                this.addMsg.Remitter = this.GetDetail.RemitterName;//交款人
                                this.addMsg.Remark = '';//事由
                                this.addMsg.Money = Number(this.Money) + Number(this.Fee)
                                this.addMsg.FinanceId = this.FrID
                                this.addMsg.Id = 0


                            }
                        }).catch(() => {

                        })
                    } else {
                        return false;
                    }
                });
            },
            setdelete() {//删除
                let that = this;
                that.$confirm('是否删除?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    delReceiptInfo({ ReceiptId: that.data.Id }).then(res => {
                        if (res.Code == 1) {
                            that.Success(res.Message);
                            that.getDetails()
                            this.addMsg.Id = 0
                            this.addMsg.Remitter = this.GetDetail.RemitterName;//交款人
                            this.addMsg.Remark = '';//事由
                            this.addMsg.Money = Number(this.Money) + Number(this.Fee)
                            this.addMsg.FinanceId = this.FrID
                        }
                    }).catch(() => {

                    })
                }).catch(() => { });
            },
            getshare() {
                var tipLoadding = Loading;
                tipLoadding.show({
                    message: '正在生成二维码,请稍后...'
                })
                let msg = {
                    url: this.FrID,
                    width: 430
                }
                createWeChatCodeForReceipt(msg).then((res) => {
                    if (res.Code == 1) {
                        this.sharedialog = true
                        let address = process.env.API;
                        let aOne = address.split('/api')[0];
                        this.imgUrl = aOne + res.Data;
                        this.$nextTick(() => {
                            this.$refs.imgcode.src=this.imgUrl;                           
                        })
                        tipLoadding.hide();
                    } else {
                        tipLoadding.hide();
                    }
                });
            },
            blobToDataURL(blob, callback) {
                var a = new FileReader()
                a.onload = function (e) {
                    callback(e.target.result);
                }
                a.readAsDataURL(blob)
            },
            download() {//下载
                setTimeout(() => {
                    let canvasID = document.getElementById("proToCol");
                    let a = document.createElement("a");
                    html2canvas(canvasID, {
                        useCORS: true, //【重要】开启跨域配置
                        allowTaint: false, //允许污染
                        backgroundColor: "#FFFFFF",
                        scale: 1,
                        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 = '财务收据';
                        a.setAttribute("download", name);
                        document.body.appendChild(a);
                        a.click();
                        URL.revokeObjectURL(blob);
                        document.body.removeChild(a);
                    });
                }, 1000);
            },
            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>