<template>
    <div :class="sizeTypeClass">
        <div class="content">
            <div class="print-title">{{ storeInfo.name }}登记单</div>
            <div v-if="sizeTypeClass == 'a5'">
                <div class="print-fee-info">
                    <div class="print-fee-item-wrapper row">
                        <div class="print-fee-value">单号:{{ feeInfo.no }} 登记人:{{ nickname() }} </div>
                        <div class="print-fee-value" style="text-align: right">打印时间:{{ printDate }} 打印人:{{ nickname() }}</div>
                    </div>
                </div>

                <div class="print-feesinfo" style="text-align: center;">
<!--                    <div class="border-bottom row">-->
<!--                        <div class="flex-3 border-right">{{ feeInfo.roomName }}</div>-->
<!--                        <div class="flex-3 border-right">&#45;&#45;</div>-->
<!--                        <div class="flex-1 border-right">&#45;&#45;</div>-->
<!--                        <div class="flex-5">客人来源:{{ feeInfo.source }}</div>-->
<!--                    </div>-->

                    <table style="width: 100%;table-layout: fixed">
                        <tr  class="border-bottom" v-for="(item,index) in dataSource">
                            <td class="border-right">{{item.roomName}}</td>
                            <td class="border-right">{{item.a}}</td>
                            <td class="border-right">{{item.b}}</td>
                            <td class="">{{item.source}}</td>
                        </tr>
                    </table>

                    <div class="border-bottom row">
                        <div class="flex-3 border-right">入住时间 <br/> {{ feeInfo.arrivalTime }}</div>
                        <div class="flex-4 border-right">预离时间 <br/> {{ feeInfo.dueOutTime }}</div>
                        <div class="flex-5">客人类型:{{ feeInfo.type }}</div>
                    </div>
                    <div class="border-bottom row">
                        <div v-if="defModel.isShowBreakfast == 0" class="flex-3 border-right">早餐 {{ feeInfo.zc }}</div>
                        <div class="flex-3 border-right">押金 {{ feeInfo.deposit }}</div>
                        <div class="flex-6">--</div>
                    </div>

                    <table style="width: 100%;table-layout: fixed">
                        <tr class="border-bottom">
                            <th class="border-right">房号</th>
                            <th class="border-right">姓名</th>
                            <th :class="defModel.isShowPhone == 0 || defModel.isShowIdcard == 0 ? 'border-right' : ''">性别</th>
                            <th v-if="defModel.isShowPhone == 0"  :class="defModel.isShowIdcard == 0 ? 'border-right' : ''">电话</th>
                            <th v-if="defModel.isShowIdcard == 0" class="">证件</th>
                        </tr>
                        <tr  class="border-bottom" v-for="(item,index1) in dataSource">
                            <td class="border-right">{{item.roomNo}}</td>
                            <td class="border-right">{{item.name}}</td>
                            <td :class="defModel.isShowPhone == 0 || defModel.isShowIdcard == 0 ? 'border-right' : ''">{{item.sex}}</td>
                            <td v-if="defModel.isShowPhone == 0" :class="defModel.isShowIdcard == 0 ? 'border-right' : ''">{{item.phone}}</td>
                            <td v-if="defModel.isShowIdcard == 0" class="">{{item.idcard}}</td>
                        </tr>
                    </table>

<!--                    <div class="border-bottom row">-->
<!--                        <div class="flex-1 border-right">房号</div>-->
<!--                        <div class="flex-1 border-right">姓名</div>-->
<!--                        <div class="flex-3 border-right">性别</div>-->
<!--                        <div class="flex-1 border-right">电话</div>-->
<!--                        <div class="flex-3">证件</div>-->
<!--                    </div>-->
<!--                    <div class="border-bottom row" style="padding-bottom: 5px" v-for="(item,index) in dataSource">-->
<!--                        <div class="flex-1 border-right">{{ item.roomNo }}</div>-->
<!--                        <div class="flex-1 border-right">{{ item.name }}</div>-->
<!--                        <div class="flex-3 border-right">{{ item.sex }}</div>-->
<!--                        <div class="flex-1 border-right">{{ item.phone }}</div>-->
<!--                        <div class="flex-3">{{ item.idcard }}</div>-->
<!--                    </div>-->

                    <div class="" style="text-align: center;">
                        <div class="print-fee-value">备注:{{ feeInfo.remarks }}</div>
                    </div>
                </div>
            </div>
            <div v-else>
                <div v-if="sizeTypeClass == '80mm'">
                    <div class="row">
                        <div class="flex-1">
                            <div class="print-fee-title">单号:</div>
                            <div class="print-fee-value">{{ feeInfo.no }}</div>
                        </div>
                        <div class="flex-1">
                            <div class="print-fee-title">登记人:</div>
                            <div class="print-fee-value">{{ nickname() }}</div>
                        </div>
                        <div class="flex-1">
                            <div class="print-fee-title">打印时间:</div>
                            <div class="print-fee-value">{{ printDate }}</div>
                        </div>
                        <div class="flex-1">
                            <div class="print-fee-title">打印人:</div>
                            <div class="print-fee-value">{{ nickname() }}</div>
                        </div>
                    </div>
                </div>
                <div v-else>
                    <div class="print-fee-item-wrapper row">
                        <div class="flex-1">
                            <div class="print-fee-title">单号:</div>
                            <div class="print-fee-value">{{ feeInfo.no }}</div>
                        </div>
                        <div class="flex-1">
                            <div class="print-fee-title">打印时间:</div>
                            <div class="print-fee-value">{{ printDate }}</div>
                        </div>
                    </div>
                    <div class="print-fee-item-wrapper row">
                        <div class="flex-1">
                            <div class="print-fee-title">登记人:</div>
                            <div class="print-fee-value">{{ nickname() }}</div>
                        </div>
                        <div class="flex-1">
                            <div class="print-fee-title">打印人:</div>
                            <div class="print-fee-value">{{ nickname() }}</div>
                        </div>
                    </div>
                </div>

                <div class="print-feesinfo" style="text-align: left;">
<!--                    <div class="border-bottom row">-->
<!--                        <div class="flex-2 border-right">{{ feeInfo.roomName }}</div>-->
<!--                        <div class="flex-4">&#45;&#45;</div>-->
<!--                    </div>-->

                    <table style="width: 100%;table-layout: fixed">
                        <tr  class="border-bottom" v-for="(item,index) in dataSource">
                            <td class="border-right">{{item.roomName}}</td>
                            <td class="">{{item.a}}</td>
                        </tr>
                    </table>

                    <div class="border-bottom row">
                        <div class="flex-2 border-right">入住时间 <br/> {{ feeInfo.arrivalTime }}</div>
                        <div class="flex-4">预离时间 <br/> {{ feeInfo.dueOutTime }}</div>
                    </div>
                    <div class="border-bottom row">
                        <div v-if="defModel.isShowBreakfast == 0" class="flex-2 border-right">早餐 {{ feeInfo.zc }}</div>
                        <div class="flex-4">押金 {{ feeInfo.deposit }}</div>
                    </div>
                    <div class="border-bottom row">
                        <div class="flex-1">客人来源 {{ feeInfo.source }}</div>
                    </div>
                    <div class="border-bottom row">
                        <div class="flex-1">客人类型 {{ feeInfo.type }}</div>
                    </div>
<!--                    <div class="border-bottom row">-->
<!--                        <div class="flex-1 border-right">房号</div>-->
<!--                        <div class="flex-1 border-right">姓名</div>-->
<!--                        <div class="flex-2 border-right">性别</div>-->
<!--                        <div class="flex-2">证件</div>-->
<!--                    </div>-->
<!--                    <div class="border-bottom row" style="padding-bottom: 5px" v-for="(item,index) in dataSource">-->
<!--                        <div class="flex-1 border-right">{{ item.roomNo }}</div>-->
<!--                        <div class="flex-1 border-right">{{ item.name }}</div>-->
<!--                        <div class="flex-2 border-right">{{ item.sex }}</div>-->
<!--                        <div class="flex-2">{{ item.idcard }}</div>-->
<!--                    </div>-->
                    <table style="width: 100%;table-layout: fixed">
                        <tr class="border-bottom">
                            <th class="border-right">房号</th>
                            <th class="border-right">姓名</th>
                            <th :class="defModel.isShowIdcard == 0 ? 'border-right' : ''">性别</th>
                            <th v-if="defModel.isShowIdcard == 0" class="">证件</th>
                        </tr>
                        <tr  class="border-bottom" v-for="(item,index1) in dataSource">
                            <td class="border-right">{{item.roomNo}}</td>
                            <td class="border-right">{{item.name}}</td>
                            <td :class="defModel.isShowIdcard == 0 ? 'border-right' : ''" >{{item.sex}}</td>
                            <td v-if="defModel.isShowIdcard == 0" class="">{{item.idcard}}</td>
                        </tr>
                    </table>
                    <div>
                        <div class="print-fee-value">备注:{{ feeInfo.remarks }}</div>
                    </div>
                </div>

            </div>

            <div style="height: 15px">

            </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">{{ 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 class="print-fee-item-wrapper" style="font-weight: 600;font-size: 18px;">
                <div>确认签字:</div>
                <div class="print-fee-value value-underline"></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: "NO202305172255",
                        roomName:'大床房',
                        arrivalTime: '2023-05-15 15:30',
                        dueOutTime: '2023-05-16 15:30',
                        zc:1,
                        deposit:"微信：100",
                        source:"饿了么",
                        type:'协议单位 青涩和',
                        remarks:'sdsfsfs',
                    }
                }
            },
            defContent: {
                type: String,
                default: ""
            },
            defModel:{
                type:Object,
                default(){
                    return {
                        isShowIdcard:0,
                        isShowBreakfast:0,
                        isShowAddress:0,
                        isShowPhone:0
                    }
                }
            },
            dataSource:{
                type:Array,
                default() {
                    return [
                        {
                            roomName:'星空房',
                            source:'美团',
                            a:'--',
                            b:'--',
                            roomNo:'8212',
                            name:'吴先生',
                            sex:'男',
                            idcard:'身份证 4****7',
                            phone:'1****4',
                        },
                        {
                            roomName:'星空房',
                            source:'美团',
                            a:'--',
                            b:'--',
                            roomNo:'8212',
                            name:'吴先生',
                            sex:'男',
                            idcard:'身份证 4****7',
                            phone:'1****4',
                        }
                    ];
                }
            },
        },
        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-bottom{
        border-bottom: 1px solid #555555 !important;
    }
    .border-left{
        border-left: 1px solid #333333 !important;
    }
    .border-right{
        border-right: 1px solid #333333 !important;
    }
    .content{
        width: 94%;
        margin: auto;
    }
    .print-feesinfo{
        border: 1px solid #1d1a1a;
        text-align: right;
    }
    .row{
        width: 100%;
        display: flex;
        flex-direction: row;
    }
    .flex-1{
        flex: 1;
    }
    .flex-2{
        flex: 2;
    }
    .flex-3{
        flex: 3;
    }
    .flex-4{
        flex: 4;
    }
    .flex-5{
        flex: 5;
    }
    .flex-6{
        flex: 6;
    }

    .mm58 {
        width: 58mm;
        border: 1px solid #00000055;

        .print-title {
            text-align: center;
            font-size: 16px;
            font-weight: 600;
        }
        .row{
            width: 100%;
            display: flex;
            flex-direction: row;
            word-break: break-all;
        }
        .flex-1{
            flex: 1;
            display: flex;
            flex-direction: row;
        }
    }

    .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;
            }

            .row .print-fee-title {
                width: 30%;
            }

        }

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

        .row{
            width: 100%;
            display: flex;
            flex-direction: row;
            word-break: break-all;
        }
        .flex-1{
            flex: 1;
            display: flex;
            flex-direction: row;
        }
    }

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

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


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

            .row{
                width: 100%;
            }

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

            .row .print-fee-title {
                width: 10%;
            }

        }

        .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%;
            }
            .row{
                width: 100%;
            }
        }


    }

    .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;
            padding-right: 5px;
        }

        .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>
