<template>
    <div :class="sizeTypeClass">
        <div class="print-title">{{ storeInfo.name }}退款单</div>
<!--        <div class="print-no">NO.{{ feeInfo.no }}</div>-->
        <div v-if="sizeTypeClass == 'a5'">
            <div class="print-fee-info">
                <div class="print-fee-item-wrapper small-item">
                    <div class="print-fee-title">姓名:</div>
                    <div class="print-fee-value value-underline">{{ feeInfo.name }}</div>
                </div>
                <div class="print-fee-item-wrapper">
                    <div class="print-fee-title">单号:</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">房号:</div>
                    <div class="print-fee-value">{{ feeInfo.roomName }}</div>
                </div>
                <div class="print-fee-item-wrapper">
                    <div class="print-fee-title">证件:</div>
                    <div class="print-fee-value">{{ feeInfo.certNo }}</div>
                </div>
                <div class="print-fee-item-wrapper small-item">
                    <div class="print-fee-title">号码:</div>
                    <div class="print-fee-value">{{ feeInfo.phone }}</div>
                </div>
                <div class="print-fee-item-wrapper">
                    <div class="print-fee-title">性别:</div>
                    <div class="print-fee-value">{{ feeInfo.sex }}</div>
                </div>
                <div class="print-fee-item-wrapper small-item">
                    <div class="print-fee-title">金额:</div>
                    <div class="print-fee-value">{{ feeInfo.money }}</div>

                </div>
                <div class="print-fee-item-wrapper">
                    <div class="print-fee-title">退款方式:</div>
                    <div class="print-fee-value">{{ feeInfo.payType }}</div>
                </div>
                <div class="print-fee-item-wrapper small-item">
                    <div class="print-fee-title">房型:</div>
                    <div class="print-fee-value">{{ feeInfo.layout }}</div>
                </div>
                <div class="print-fee-item-wrapper">
                    <div class="print-fee-title">来时:</div>
                    <div class="print-fee-value">{{ feeInfo.arrivalTime }}</div>
                </div>
                <div class="print-fee-item-wrapper small-item">
                    <div class="print-fee-title">离时:</div>
                    <div class="print-fee-value">{{ feeInfo.dueOutTime }}</div>
                </div>
                <div class="print-fee-item-wrapper">
                    <div class="print-fee-title">地址:</div>
                    <div class="print-fee-value">{{ feeInfo.address }}</div>
                </div>
                <div class="print-fee-item-wrapper small-item">
                    <div class="print-fee-title">收银:</div>
                    <div class="print-fee-value">{{ nickname() }}</div>
                </div>
                <div class="print-fee-item-wrapper">
                    <div class="print-fee-title">协议:</div>
                    <div class="print-fee-value">{{ feeInfo.contractInfo ? feeInfo.contractInfo.name : '无' }}</div>
                </div>
            </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">科目</div>
                    <div class="fee-cell">标价</div>
                    <div class="fee-cell">折扣价</div>
                </div>
            </div>

            <div class="info-split"></div>
            <div class="info-split-dashed"></div>
            <div class="info-split"></div>

            <pre style="white-space: pre-wrap;" class="print-def-content">{{ defContent }}</pre>
            <div class="print-fee-item-wrapper">
                <div class="print-fee-title">贵宾签字:</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">{{ feeInfo.manualNo }}</div>
                </div>
                <div class="print-fee-item-wrapper">
                    <div class="print-fee-title">付款时间:</div>
                    <div class="print-fee-value">{{ feeInfo.payTime }}</div>
                </div>
                <div class="print-fee-item-wrapper">
                    <div class="print-fee-title">打印时间:</div>
                    <div class="print-fee-value">{{ printDate }}</div>
                </div>
                <div class="print-fee-item-wrapper">
                    <div class="print-fee-title">联系电话:</div>
                    <div class="print-fee-value">{{ 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>
        </div>
        <div v-else>
            <div class="print-fee-info">
                <div class="print-fee-item-wrapper small-item">
                    <div class="print-fee-title">姓名:</div>
                    <div class="print-fee-value value-underline">{{ feeInfo.name }}</div>
                </div>
                <div class="print-fee-item-wrapper">
                    <div class="print-fee-title">单号:</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">房号:</div>
                    <div class="print-fee-value">{{ feeInfo.roomName }}</div>
                </div>
                <div class="print-fee-item-wrapper">
                    <div class="print-fee-title">来时:</div>
                    <div class="print-fee-value">{{ feeInfo.arrivalTime }}</div>
                </div>
                <div class="print-fee-item-wrapper small-item">
                    <div class="print-fee-title">证件:</div>
                    <div class="print-fee-value">{{ feeInfo.certNo }}</div>
                </div>
                <div class="print-fee-item-wrapper">
                    <div class="print-fee-title">离时:</div>
                    <div class="print-fee-value">{{ feeInfo.dueOutTime }}</div>
                </div>
                <div class="print-fee-item-wrapper small-item">
                    <div class="print-fee-title">号码:</div>
                    <div class="print-fee-value">{{ feeInfo.phone }}</div>
                </div>
                <div class="print-fee-item-wrapper">
                    <div class="print-fee-title">地址:</div>
                    <div class="print-fee-value">{{ feeInfo.address }}</div>
                </div>
                <div class="print-fee-item-wrapper small-item">
                    <div class="print-fee-title">退款方式:</div>
                    <div class="print-fee-value">{{ feeInfo.payType }}</div>
                </div>
                <div class="print-fee-item-wrapper">
                    <div class="print-fee-title">金额:</div>
                    <div class="print-fee-value">{{ feeInfo.money }}</div>
                </div>
<!--                <div class="print-fee-item-wrapper small-item">-->
<!--                    <div class="print-fee-title">入住天数:</div>-->
<!--                    <div class="print-fee-value">{{ feeInfo.dayCount }}</div>-->
<!--                </div>-->
                <div class="print-fee-item-wrapper small-item">
                    <div class="print-fee-title">入住类型:</div>
                    <div class="print-fee-value">{{ feeInfo.livingType }}</div>
                </div>
                <div class="print-fee-item-wrapper">
                    <div class="print-fee-title">收银:</div>
                    <div class="print-fee-value">{{ nickname() }}</div>
                </div>
                <div class="print-fee-item-wrapper small-item">
                    <div class="print-fee-title">会员:</div>
                    <div class="print-fee-value">{{ (feeInfo.isVip) }}</div>
                </div>
                <div class="print-fee-item-wrapper">
                    <div class="print-fee-title">协议:</div>
                    <div class="print-fee-value">{{ feeInfo.contractInfo ? feeInfo.contractInfo.name : '无' }}</div>
                </div>
            </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">标价</div>
                    <div class="fee-cell">折扣价</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">{{item.layoutName}}</div>
                <div class="fee-cell">{{item.price}}</div>
                <div class="fee-cell">{{item.discount}}</div>
            </div>
            <div class="info-split"></div>

            <pre style="white-space: pre-wrap;" class="print-def-content">{{ defContent }}</pre>

            <div class="a5-partail">
                <div class="print-fee-item-wrapper">
                    <div class="print-fee-title">付款时间:</div>
                    <div class="print-fee-value">{{ feeInfo.payTime }}</div>
                </div>
                <div class="print-fee-item-wrapper">
                    <div class="print-fee-title">打印时间:</div>
                    <div class="print-fee-value">{{ printDate }}</div>
                </div>
                <div class="print-fee-item-wrapper">
                    <div class="print-fee-title">联系电话:</div>
                    <div class="print-fee-value">{{ 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>
                <div class="print-fee-item-wrapper">
                    <div class="print-fee-title">贵宾签字:</div>
                    <div class="print-fee-value value-underline"></div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import { mapActions, mapGetters, mapState } from 'vuex'
    import { httpAction, getAction } from '@/api/manage'
    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',
                        payTime:'2023-05-16 15:30',
                        isVip: "非会员",
                        contractInfo: null,
                        payType: '微信',
                        money: 192,
                        livingType: '全天房',
                        fees: [],
                        phone:'暂无',
                        address:'暂无',
                        sex:'女',
                        layout:'大床房',
                        manualNo:'S2023xxxx'
                    }
                }
            },
            defContent: {
                type: String,
                default: ""
            },
            dataSource:{
                type:Array,
                default() {
                    return [
                        {
                            roomNo:'8212',
                            layoutName:'星空房',
                            discount:'98',
                            price:'88',
                        },
                        {
                            roomNo:'8212',
                            layoutName:'星空房',
                            discount:'98',
                            price:'88',
                        }
                    ];
                }
            },
        },
        data() {
            let storeInfo = JSON.parse(localStorage.getItem("storeInfo"))
            return {
                storeInfo,
                printDate: new Date().format('yyyy/MM/dd hh:mm:ss')
            }
        },
        created() {
        },
        methods: {
            ...mapGetters(["nickname", "avatar", "userInfo"]),
        }
    }
</script>
<style lang="less" id="olstyle1">
    .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: 60%;
            }

            .small-item {
                width: 40%;

                .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: 13px;

        .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: 13px;
            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>
