<template>
    <div class="print_content">
        <div :class="sizeTypeClass" v-if="sizeTypeClass == 'a5'">
            <div class="content">
                <div class="top">
                    <div class="hotel_info">
                        <div class="logo">
                            <j-image-upload class="avatar-uploader" text="上传" v-model="defModel.hotelLogo" ></j-image-upload>
                        </div>
                        <div class="title">
                            {{ storeInfo.name }}团队入住单
                        </div>
                    </div>
                </div>
                <div class="middle">
                    <div class="base_info">
                        <div class="print-fee-info">
                            <div class="print-fee-item-wrapper">
                                主单编号：{{ feeInfo.orderNo }}
                            </div>
                            <div class="print-fee-item-wrapper" v-if="defModel.isShowBreakfast == 0">
                                早餐数：{{ feeInfo.breakfastNum }} 份
                            </div>
                            <div class="print-fee-item-wrapper">
                                入住时间：{{ feeInfo.checkInTime }}
                            </div>
                        </div>
                    </div>
                    <div class="list_info">
                        <table class="table" border="1" cellspacing="0">
                            <tr>
                                <td>主客姓名</td>
                                <td>{{ feeInfo.customerName }} （{{ feeInfo.customerSex }}）</td>
                                <td>进店时间</td>
                                <td>{{ feeInfo.arrivalTime }}</td>
                                <td>预离时间</td>
                                <td>{{ feeInfo.dueOutTime }}</td>
                            </tr>
                            <tr>
                                <td>单位名称</td>
                                <td>{{ feeInfo.unitName }}</td>
                                <td>联系电话</td>
                                <td>{{ feeInfo.customerPhone }}</td>
                                <td>宾客类型</td>
                                <td>{{ feeInfo.customerType }}</td>
                            </tr>
                            <tr class="list-item border-bottom">
                                <td>房号</td>
                                <td>房型</td>
                                <td>姓名</td>
                                <td>天数</td>
                                <td>单价</td>
                                <td>小计</td>
                            </tr>
                            <tr class="list-item border-bottom" v-for="(item,index1) in dataSource">
                                <td >{{item.roomNo}}</td>
                                <td >{{item.layoutName}}</td>
                                <td >{{item.customerName}}</td>
                                <td >{{item.stayDuration}}</td>
                                <td >{{item.unitPrice}}</td>
                                <td >{{item.roomPrice}}</td>
                            </tr>

                            <tr>
                                <td>房间数量小计</td>
                                <td colspan="2">{{feeInfo.roomNumber}}</td>
                                <td>房费累计金额</td>
                                <td colspan="2">{{feeInfo.amount}}</td>
                            </tr>
                            <tr>
                                <td>押金收费小计</td>
                                <td>{{ feeInfo.deposit }}</td>
                                <td>房费收款小计</td>
                                <td>{{ feeInfo.roomPrice }}</td>
                                <td>总合计</td>
                                <td>{{ feeInfo.totalPaid }}</td>
                            </tr>
                            <tr>
                                <td class="left-title">温馨提示</td>
                                <td colspan="5">
                                    <div class="tips">
                                        <div class="left">
                                            <span class="remarks">{{ defContent }}</span>
                                        </div>
                                        <div class="right" v-if="defModel.isShowQrCode == 0">
                                            <div class="qr-code-wrapper">
                                                <div class="code-content"></div>
                                                <div class="qr-tips">订房\服务请扫码</div>
                                            </div>
                                        </div>
                                    </div>
                                </td>
                            </tr>
                        </table>
                    </div>
                    <div class="other_info">

                    </div>
                </div>
                <div class="bottom">
                    <div class="print-fee-info">
                        <div class="print-fee-item-wrapper">
                            宾客签字：
                        </div>
                        <div class="print-fee-item-wrapper">
                            营销人员：{{ feeInfo.marketName }}
                        </div>
                        <div class="print-fee-item-wrapper">
                            经办人：{{ nickname() }}
                        </div>
                    </div>
                    <div class="print-fee-info">
                        <div class="print-fee-item-wrapper">
                            地址：{{ storeInfo.address }}
                        </div>
                        <div class="print-fee-item-wrapper">
                            客房电话：{{ storeInfo.linkTel }}
                        </div>
                        <div class="print-fee-item-wrapper">
                            餐厅电话：{{ storeInfo.linkTel }}
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div :class="sizeTypeClass" v-else>
            <div class="content">
                <div class="top">
                    <div class="hotel_info">
                        <div class="logo">
                            <j-image-upload class="avatar-uploader" text="上传" v-model="defModel.hotelLogo" ></j-image-upload>
                        </div>
                        <div class="title">
                            <div class="name">
                                {{ storeInfo.name }}
                            </div>
                            <div class="note">
                                团队入住登记单
                            </div>
                        </div>
                    </div>
                </div>
                <div class="middle">
                    <div class="base_info">
                        <div class="print-fee-info">
                            <div class="print-fee-item-wrapper">
                                主单号：{{ feeInfo.orderNo }}
                            </div>
                        </div>
                        <div class="print-fee-info">
                            <div class="print-fee-item-wrapper">
                                主客姓名：{{ feeInfo.customerName }}
                            </div>
                        </div>
                        <div class="print-fee-info">
                            <div class="print-fee-item-wrapper">
                                进店时间：{{ feeInfo.arrivalTime }}
                            </div>
                        </div>
                        <div class="print-fee-info">
                            <div class="print-fee-item-wrapper">
                                预离时间：{{ feeInfo.dueOutTime }}
                            </div>
                        </div>
                        <div class="print-fee-info">
                            <div class="print-fee-item-wrapper">
                                预住时长：{{ feeInfo.stayDuration }}
                            </div>
                        </div>
                        <div class="print-fee-info">
                            <div class="print-fee-item-wrapper">
                                联系电话：{{ feeInfo.customerPhone }}
                            </div>
                        </div>
                        <div class="print-fee-info">
                            <div class="print-fee-item-wrapper">
                                单位名称：{{ feeInfo.unitName }}
                            </div>
                        </div>
                        <div class="print-fee-info">
                            <div class="print-fee-item-wrapper">
                                房间数量：{{ feeInfo.roomNumber }} 间
                            </div>
                        </div>
                    </div>

                    <div class="list_info">
                        <div class="info-split"></div>
                        <div class="info-split-dashed"></div>
                        <table class="table">
                            <tr class="border-bottom">
                                <th >房号</th>
                                <th >姓名</th>
                                <th >天数</th>
                                <th >单价</th>
                                <th >房费</th>
                            </tr>
                            <tr class="border-bottom" v-for="(item,index1) in dataSource">
                                <td >{{item.roomNo}}</td>
                                <td >{{item.customerName}}</td>
                                <td >{{item.stayDuration}}</td>
                                <td >{{item.unitPrice}}</td>
                                <td >{{item.roomPrice}}</td>
                            </tr>
                            <tr>
                                <td>合计：</td>
                                <td colspan="4" class="text-align-right">{{ feeInfo.amount }} 元</td>
                            </tr>
                        </table>
                        <div class="info-split"></div>
                    </div>

                    <div class="print-fee-info">
                        <div class="print-fee-item-wrapper">
                            <pre class="remarks">{{ defContent }}</pre>
                        </div>
                    </div>

                    <div class="other_info">
                        <div class="print-fee-info">
                            <div class="print-fee-item-wrapper">
                                押金小计：{{ feeInfo.deposit }}
                            </div>
                        </div>
                        <div class="print-fee-info">
                            <div class="print-fee-item-wrapper">
                                房费小计：{{ feeInfo.roomPrice }}
                            </div>
                        </div>
                        <div class="print-fee-info">
                            <div class="print-fee-item-wrapper">
                                合计实收：{{ feeInfo.totalPaid }} 元
                            </div>
                        </div>
                        <div class="print-fee-info">
                            <div class="print-fee-item-wrapper">
                                宾客类型：{{ feeInfo.customerType }}
                            </div>
                        </div>
                        <div class="print-fee-info">
                            <div class="print-fee-item-wrapper">
                                宾客来源：{{ feeInfo.source }}
                            </div>
                        </div>
                        <div class="print-fee-info">
                            <div class="print-fee-item-wrapper">
                                营销人员：{{ feeInfo.marketName }}
                            </div>
                        </div>
                        <div class="print-fee-info">
                            <div class="print-fee-item-wrapper">
                                操作员：{{ nickname() }}
                            </div>
                        </div>
                        <div class="print-fee-info">
                            <div class="print-fee-item-wrapper">
                                记账时间：{{ printDate }}
                            </div>
                        </div>
                        <div class="print-fee-info">
                            <div class="print-fee-item-wrapper">
                                订房热线：{{ storeInfo.linkTel }}
                            </div>
                        </div>
                        <div class="print-fee-info">
                            <div class="print-fee-item-wrapper">
                                地址：{{ storeInfo.address }}
                            </div>
                        </div>
                    </div>
                </div>
                <div class="bottom">
                    <div class="qr-code-wrapper" v-if="defModel.isShowQrCode == 0">
                        <div class="code-content"></div>
                        <div class="qr-tips">订房\服务请扫码</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import { mapActions, mapGetters, mapState } from 'vuex'
    import { httpAction, getAction } from '@/api/manage'

    export default {
        name: 'teamCheckInPrint',
        props: {
            title: {
                type: String,
                default: '登记单'
            },
            sizeTypeClass: {
                type: String,
                default: "mm58"
            },
            feeInfo: {
                type: Object,
                default() {
                    return {
                        orderNo: "NO202305172255",
                        customerName:"彭张迪",
                        customerSex:"男",
                        customerPhone:"17485748574",
                        unitName:"中铁集团",
                        roomNumber:"5",
                        // customerCard:"431222198902125566",
                        // customerAddress:"湖南省长沙市岳麓区岳麓大道134号恒大伟业601",
                        arrivalTime: '2023-05-15 15:30',
                        checkInTime: '2023-05-15 16:30',
                        dueOutTime: '2023-05-16 16:30',
                        stayDuration:"1天",
                        // checkInType:"全天房",
                        // customerIsVip:0,//0-不是；1-是vip
                        // memberCardNo:"VIP001",
                        // memberLevel:"5",
                        // memberCardBalance:"280元",
                        // memberCardIntegral:"1400积分",
                        // layoutName:"单人间",
                        customerType:"团队",
                        source:"美团",
                        deposit:"现金支付:100.00元",
                        roomPrice:"微信支付:100.00元",
                        totalPaid:'200',
                        marketName:"张三",
                        breakfastNum:8,
                        roomNo:'8212',
                        amount:"1920.00"
                    }
                }
            },
            defContent: {
                type: String,
                default: ""
            },
            defModel:{
                type:Object,
                default(){
                    return {
                    }
                }
            },
            dataSource:{
                type:Array,
                default() {
                    return [
                        {
                            roomNo:'8212',
                            roomName:'星空房',
                            layoutName:"单人间",
                            customerName:"张三",
                            stayDuration:"3",
                            roomPrice:'384.00',
                            unitPrice:"150.00",
                            breakfastNum:3,
                        },
                        {
                            roomNo:'8212',
                            roomName:'星空房',
                            layoutName:"单人间",
                            customerName:"张三",
                            stayDuration:"3",
                            roomPrice:'384.00',
                            unitPrice:"150.00",
                            breakfastNum:3,
                        },
                    ];
                }
            },
        },
        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">
    .border-top{
        border-top: 1px solid #333333 !important;
    }

    .border-left{
        border-left: 1px solid #333333 !important;
    }
    .border-right{
        border-right: 1px solid #333333 !important;
    }
    .remarks{
        white-space: pre-wrap;
        font-weight: 400;
    }
    .text-align-right{
        text-align: right;
    }

    .print_content .mm58 {
        width: 58mm;
        border: 1px solid #00000055;
        font-size: 12px;
        padding-top: 15px;
        padding-left: 0 !important;

        .content{
            width: 96%;
            margin: auto;
        }

        .border-bottom{
            border-bottom: 1px dashed #555555 !important;
        }

        .top, .middle, .bottom{
            width: 96%;
            margin: auto;
        }

        .hotel_info{
            width: 100%;
            text-align: center;

            .logo{
                margin: auto;
                display: flex;
                justify-content: center;
                text-align: left;
            }

            .title{
                /*display: flex;*/
                /*flex-direction: row;*/
                /*word-break: break-all;*/

                .name{
                    font-size: 16px;
                    font-weight: 800;
                }
                .note{
                    font-size: 12px;
                    font-weight: 600;
                }
            }
        }

        .print-fee-info {
            display: flex;

            .print-fee-item-wrapper {
                flex: 1;
                font-size: 12px;
                font-weight: 600;
                flex-wrap: wrap;
                padding: 1px 0;
            }
        }

        .table{
            width: 100%;table-layout: fixed
        }
        .bottom{
            margin: 10px 0;
        }

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

        }
        .code-content {
            width: 100px;
            height: 100px;
            background-image: url('data:image/jpeg;base64,[encoded data, 25532 characters]');
        }
        .qr-tips{
            margin-top: 10px;
            font-size: 14px;
            font-weight: 600;
        }
    }
    .print_content .mm80 {
        width: 80mm;
        border: 1px solid #00000055;
        font-size: 14px;
        padding-top: 15px;
        padding-left: 0 !important;

        .content{
            width: 96%;
            margin: auto;
        }

        .border-bottom{
            border-bottom: 1px dashed #555555 !important;
        }

        .top, .middle, .bottom{
            width: 100%;
            margin: auto;
        }

        .hotel_info{
            width: 100%;
            text-align: center;

            .logo{
                margin: auto;
                display: flex;
                justify-content: center;
                text-align: left;
            }

            .title{
                /*display: flex;*/
                /*flex-direction: row;*/
                /*word-break: break-all;*/

                .name{
                    font-size: 18px;
                    font-weight: 800;
                }
                .note{
                    font-size: 14px;
                    font-weight: 600;
                }
            }
        }

        .print-fee-info {
            display: flex;

            .print-fee-item-wrapper {
                flex: 1;
                font-size: 14px;
                font-weight: 600;
                flex-wrap: wrap;
                padding: 1px 0;
            }
        }

        .table{
            width: 100%;table-layout: fixed
        }
        .bottom{
            margin: 10px 0;
        }
        .qr-code-wrapper {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;

        }
        .code-content {
            width: 120px;
            height: 120px;
            background-image: url('data:image/jpeg;base64,[encoded data, 25532 characters]');
        }
        .qr-tips{
            margin-top: 10px;
            font-size: 16px;
            font-weight: 600;
        }
    }
    .print_content .a5 {
        width: 210mm;
        border: 1px solid #00000055;
        font-size: 14px;
        padding-top: 15px;

        .content{
            width: 98%;
            margin: auto;
        }

        .border-bottom{
            border-bottom: 1px solid #555555 !important;
        }

        .top{
            display: flex;

            .hotel_info{
                margin: auto;
                display: flex;
                flex-direction: row;
                align-items: center;
                justify-content: center;

                .ant-upload-list-picture-card-container {
                    width: 84px;
                    height: 84px;
                    margin: 0;
                }
                .ant-upload-list-picture-card .ant-upload-list-item {
                    width: 80px;
                    height: 80px;
                    margin: 0;
                }
                .logo{
                    margin: auto;
                    display: flex;
                    justify-content: center;
                    text-align: left;
                }

                .title{
                    flex: 3;
                    font-size: 26px;
                    font-weight: 800;
                }
            }
        }


        .print-fee-info {
            display: flex;

            .print-fee-item-wrapper {
                flex: 1;
                font-size: 14px;
                font-weight: 600;
                flex-wrap: wrap;
                padding: 1px 0;
            }
        }
        .list_info{
            margin: 6px 0;
        }

        .table{
            width: 100%;
        }

        .table .left-title{
            min-width: 80px;
        }

        .table td{
            font-size: 14px;
            padding: 5px 8px;
            font-weight: 600;
            text-align: center;
        }
        .list-item td{
            border: none;
        }
        .text-align-left{
            text-align: left;
        }
        .font-size-13{
            font-size: 13px !important;
        }
        .tips{
            width: 100%;
            display: flex;
            flex-direction: row;

            .left{
                flex: 4;
                text-align: left;
                padding-right: 8px;
            }
            .right{
                flex: 1;
            }
            .qr-code-wrapper {
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;

            }
            .code-content {
                width: 120px;
                height: 120px;
                background-image: url('data:image/jpeg;base64,[encoded data, 25532 characters]');
            }
            .qr-tips{
                margin-top: 10px;
                font-size: 16px !important;
                font-weight: 600;
            }
        }
    }
</style>
