<template>
    <div :class="sizeTypeClass">
        <div class="print-title">{{ storeInfo.name }}收款单</div>
        <div class="print-no">NO.{{ feeInfo.no }}</div>
        <div class="print-fee-info">
            <div class="print-fee-item-wrapper small-item">
                <div class="print-fee-title">姓名<span v-if="sizeTypeClass == 'a5'">/Name</span>:</div>
                <div class="print-fee-value value-underline">{{ feeInfo.name }}</div>
            </div>
            <div class="print-fee-item-wrapper">
                <div class="print-fee-title">单号<span v-if="sizeTypeClass == 'a5'">/No</span>:</div>
                <div class="print-fee-value value-underline">{{ feeInfo.no }}</div>
            </div>
            <div class="print-fee-item-wrapper small-item">
                <div class="print-fee-title">房号<span v-if="sizeTypeClass == 'a5'">/RoomNo</span>:</div>
                <div class="print-fee-value">{{ feeInfo.roomName }}</div>
            </div>
            <div class="print-fee-item-wrapper">
                <div class="print-fee-title">证件<span v-if="sizeTypeClass == 'a5'">/CertNo</span>:</div>
                <div class="print-fee-value">{{ feeInfo.certNo }}</div>
            </div>
            <div class="print-fee-item-wrapper small-item">
                <div class="print-fee-title">来时<span v-if="sizeTypeClass == 'a5'">/CheckIn</span>:</div>
                <div class="print-fee-value">{{ feeInfo.arrivalTime }}</div>
            </div>
            <div class="print-fee-item-wrapper">
                <div class="print-fee-title">天数<span v-if="sizeTypeClass == 'a5'">/Days</span>:</div>
                <div class="print-fee-value">{{ feeInfo.dayCount }}</div>
            </div>
            <div class="print-fee-item-wrapper small-item">
                <div class="print-fee-title">离时<span v-if="sizeTypeClass == 'a5'">/CheckOut</span>:</div>
                <div class="print-fee-value">{{ feeInfo.dueOutTime }}</div>
            </div>
            <div class="print-fee-item-wrapper">
                <div class="print-fee-title">会员<span v-if="sizeTypeClass == 'a5'">/Member</span>:</div>
                <div class="print-fee-value">{{ (feeInfo.isVip) }}</div>
            </div>
            <div class="print-fee-item-wrapper small-item">
                <div class="print-fee-title">协议<span v-if="sizeTypeClass == 'a5'">/Company</span>:</div>
                <div class="print-fee-value">{{ feeInfo.contractInfo ? feeInfo.contractInfo.name : '无' }}</div>
            </div>
            <div class="print-fee-item-wrapper">
                <div class="print-fee-title">付款方式<span v-if="sizeTypeClass == 'a5'"></span>:</div>
                <div class="print-fee-value">{{ feeInfo.payType }}</div>
            </div>
            <div class="print-fee-item-wrapper small-item">
                <div class="print-fee-title">金额<span v-if="sizeTypeClass == 'a5'">/Money</span>:</div>
                <div class="print-fee-value">{{ feeInfo.money }}</div>
            </div>
            <div class="print-fee-item-wrapper">
                <div class="print-fee-title">入住类型<span v-if="sizeTypeClass == 'a5'">/Pay Type</span>:</div>
                <div class="print-fee-value">{{ feeInfo.livingType }}</div>
            </div>
        </div>

        <div class="print-fees">
            <div class="print-fees-header fee-row">
                <div class="fee-cell flex-2">房间号<span v-if="sizeTypeClass == 'a5'">/RoomNo</span></div>
                <div class="fee-cell">科目<span v-if="sizeTypeClass == 'a5'">/Project</span></div>
                <div class="fee-cell">收款<span v-if="sizeTypeClass == 'a5'">/Pay Amount</span></div>
                <div class="fee-cell">费用<span v-if="sizeTypeClass == 'a5'">/Cost</span></div>
                <div class="fee-cell flex-3">支付方式<span v-if="sizeTypeClass == 'a5'">/Pay Type</span></div>
            </div>
        </div>

        <div class="info-split"></div>
        <div class="info-split-dashed"></div>
        <div class="print-fees-header fee-row" style="padding-bottom: 5px" v-for="(item,index) in dataSource">
            <div class="fee-cell flex-2">{{item.roomNo}}</div>
            <div class="fee-cell flex-2">{{item.projectName}}</div>
            <div class="fee-cell">{{item.payAmount}}</div>
            <div class="fee-cell">{{item.cost}}</div>
            <div class="fee-cell">{{item.payTypeName}}</div>
        </div>
        <div class="info-split"></div>

        <div class="print-fees">
            <div class="print-fees-header fee-row">
                <div class="fee-cell flex-2"></div>
                <div class="fee-cell">合计:</div>
                <div class="fee-cell">{{totalAmount}}</div>
                <div class="fee-cell">{{totalCost}}</div>
                <div class="fee-cell flex-3"></div>
            </div>
        </div>

        <pre style="white-space: pre-wrap;" class="print-def-content">{{ defContent }}</pre>
        <div class="print-fee-item-wrapper">
            <div>贵宾签字<span v-if="sizeTypeClass == 'a5'">/Guest Signture</span>:</div>
            <div class="print-fee-value value-underline"></div>
        </div>
        <div class="a5-partail">
            <div class="print-fee-item-wrapper">
                <div class="print-fee-title">操作员:</div>
                <div class="print-fee-value value-underline">{{ nickname() }}</div>
            </div>
            <div class="print-fee-item-wrapper">
                <div class="print-fee-title">酒店电话:</div>
                <div class="print-fee-value value-underline">{{ storeInfo.linkTel }}</div>
            </div>
            <div class="print-fee-item-wrapper">
                <div class="print-fee-title">酒店地址:</div>
                <div class="print-fee-value">{{ storeInfo.address }}</div>
            </div>
            <div class="print-fee-item-wrapper">
                <div class="print-fee-title">打印时间:</div>
                <div class="print-fee-value">{{ printDate }}</div>
            </div>

        </div>
        <div class="qr-code-wrapper">
            <div class="code-content"></div>
<!--            <img class="j-editable-image" style="height: 120px;" id="image" src="https://img.xjishu.com/img/zl/2018/6/30/1241359458913.gif"/>-->
            <div style="margin-bottom: 10px;font-size: smaller;">扫码自助开票</div>
        </div>
    </div>
</template>
<script>
import { mapActions, mapGetters, mapState } from 'vuex'
export default {
    props: {
        title: {
            type: String,
            default: '结账单'
        },
        sizeTypeClass: {
            type: String,
            default: "mm58"
        },
        feeInfo: {
            type: Object,
            default() {
                return {
                    no: "未结账",
                    name: '',
                    roomName: '',
                    certNo:'430703199611052451',
                    arrivalTime: '2023-05-15 15:30',
                    dayCount: 0,
                    dueOutTime: '2023-05-16 15:30',
                    isVip: "非会员",
                    contractInfo: null,
                    payType: '微信',
                    money: 192,
                    livingType: '全天房',
                    fees: []
                }
            }
        },
        defContent: {
            type: String,
            default: ""
        },
        dataSource:{
            type:Array,
            default() {
                return [
                    {
                        roomNo:'8212',
                        projectName:'科目一',
                        payAmount:'88',
                        cost:'98',
                        payTypeName:'微信',
                    },
                    {
                        roomNo:'8212',
                        projectName:'科目一',
                        payAmount:'88',
                        cost:'98',
                        payTypeName:'微信',
                    }
                ];
            }
        },
        totalAmount: {
            type: Number,
            default() {
                return 188
            }
        },
        totalCost: {
            type: Number,
            default() {
                return 218
            }
        }
    },
    data() {
        let storeInfo = JSON.parse(localStorage.getItem("storeInfo"))
        return {
            storeInfo,
            printDate: new Date().format('yyyy/MM/dd hh:mm:ss')
        }
    },
    methods: {
        ...mapGetters(["nickname", "avatar", "userInfo"]),
    }
}
</script>
<style lang="less">
.mm58 {
    width: 58mm;
    border: 1px solid #00000055;

    .print-title {
        text-align: center;
        font-size: 16px;
        font-weight: 600;
    }
}

.mm80 {
    width: 80mm;
    border: 1px solid #00000055;
    padding-left: 3mm;

    .print-fee-info {
        display: flex;
        flex-wrap: wrap;

        .print-fee-item-wrapper {
            width: 65%;
        }

        .small-item {
            width: 35%;

            .print-fee-value {
                margin-right: 3mm;
            }
        }

        .print-fee-title {
            width: fit-content;
            text-align: right;
        }

    }

    .print-title {
        text-align: center;
        font-size: 16px;
        font-weight: 600;
    }
}

.a5 {
    width: 210mm;
    border: 1px solid #00000055;
    padding: 3mm;

    .print-fee-info {
        display: flex;
        flex-wrap: wrap;


        .print-fee-item-wrapper {
            width: 30%;
        }

        .print-fee-title {
            width: 40%;
            text-align: right;
        }

    }

    .print-no{
        text-align: center;
    }
    .print-title {
        text-align: center;
        font-size: 16px;
        font-weight: 600;
    }
    .a5-partail{
        display: flex;
        flex-wrap: wrap;
        .print-fee-item-wrapper {
            margin: 3mm 0;
            width: 45%;
        }
    }
}

.print-no {
    text-align: left;
    font-weight: 600;
}

.print-fee-item-wrapper {
    display: flex;
    width: 100%;
    padding: 4px 0;
    font-size: small;

    .print-fee-title {
        width: 65px;
        text-align: right;
    }

    .print-fee-value {
        flex: 1;
    }

    .value-underline {
        border-bottom: 1px solid #00000088;
    }
}

.print-fees {
    margin-bottom: 5px;
}

.fee-row {
    display: flex;
    margin-left: 2px;

    .fee-cell {
        color: black;
        flex: 1;
        margin: 0 3px;
        font-size: smaller;
        text-align: left;
    }

    .flex-2 {
        flex: 1.5;
    }

    .flex-3 {
        flex: 2;
    }
}

.info-split-dashed {
    margin: 8px 0;
    border: 1px dashed #000000;


}

.info-split {
    border: 1px solid #000000;
    width: 100%;
    margin: 8px 0;
}

.qr-code-wrapper {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

}

.code-content {
    width: 150px;
    height: 150px;
    background-image: url('data:image/jpeg;base64,[encoded data, 25532 characters]');
}
</style>
