<template>
    <div :class="sizeTypeClass">
        <div class="content">
            <div class="print-title">{{ storeInfo.name }}交班列表</div>

            <div class="print-fee-info">
                <div class="print-fee-item-wrapper row">
                    <div class="print-fee-value">当班:{{ feeInfo.startTime }}~{{ feeInfo.endTime }} </div>
                </div>
                <div class="print-fee-item-wrapper row">
                    <div class="print-fee-value">当班人:{{ feeInfo.onDuty}} </div>
                </div>
                <div class="print-fee-item-wrapper row">
                    <div class="print-fee-value">接班人:{{ feeInfo.succession }} </div>
                </div>
                <div class="print-fee-item-wrapper row">
                    <div class="print-fee-value">班次:{{ feeInfo.classes }} </div>
                </div>
                <div class="print-fee-item-wrapper row">
                    <div class="print-fee-value">打印时间:{{ printDate }} </div>
                </div>
                <div class="print-fee-item-wrapper row">
                    <div class="print-fee-value">打印人:{{ nickname() }} </div>
                </div>
            </div>

            <!--收款-->
            <div style="border-top: 3px solid #333333;border-left: 3px solid #333333;border-right: 3px solid #333333;width: 99.9%;" >
                <div class="font-weight border-bottom font-size-16">
                    【收款】
                </div>
                <table style="width: 100%;table-layout: fixed">
                    <tr class="border-bottom">
                        <th class="border-right">付款方式</th>
                        <th class="border-right">上班转交</th>
                        <th class="border-right">本班实收</th>
                        <th class="border-right">本班合计在手金额</th>
                        <th class="border-right">上缴金额</th>
                        <th class="">转下一班金额</th>
                    </tr>
                    <tr class="border-bottom" v-for="(item1,index1) in data_payment">
                        <td class="border-right">{{item1.fkfs}}</td>
                        <td class="border-right">{{item1.shzj}}</td>
                        <td class="border-right">{{item1.bbss}}</td>
                        <td class="border-right">{{item1.bbhjzsje}}</td>
                        <td class="border-right">{{item1.sjje}}</td>
                        <td class="">{{item1.zxybje}}</td>
                    </tr>
                </table>
            </div>

            <!--押金-->
            <div style="height: 8px"></div>
            <div style="border-top: 3px solid #333333;border-left: 3px solid #333333;border-right: 3px solid #333333;width: 99.9%;" >
                <div class="font-weight border-bottom font-size-16">
                    【押金】
                </div>
                <table style="width: 100%;table-layout: fixed">
                    <tr class="border-bottom">
                        <th class="border-right">付款方式</th>
                        <th class="border-right">上班转交</th>
                        <th class="border-right">本班实收</th>
                        <th class="border-right">本班合计在手金额</th>
                        <th class="border-right">上缴金额</th>
                        <th class="">转下一班金额</th>
                    </tr>
                    <tr class="border-bottom" v-for="(item1,index1) in data_deposit">
                        <td class="border-right">{{item1.fkfs}}</td>
                        <td class="border-right">{{item1.shzj}}</td>
                        <td class="border-right">{{item1.bbss}}</td>
                        <td class="border-right">{{item1.bbhjzsje}}</td>
                        <td class="border-right">{{item1.sjje}}</td>
                        <td class="">{{item1.zxybje}}</td>
                    </tr>
                </table>
            </div>

            <!--营业额-->
            <div style="height: 8px"></div>
            <div style="border-top: 3px solid #333333;border-left: 3px solid #333333;border-right: 3px solid #333333;width: 99.9%;" >
                <div class="font-weight border-bottom font-size-16">
                    【营业额】
                </div>
                <table style="width: 100%;table-layout: fixed">
                    <tr class="border-bottom">
                        <th class="border-right">消费方式</th>
                        <th class="">金额</th>
                    </tr>
                    <tr class="border-bottom" v-for="(item1,index1) in data_turnover">
                        <td class="border-right">{{item1.xffs}}</td>
                        <td class="">{{item1.je}}</td>
                    </tr>
                </table>
            </div>

            <!--收退款-->
            <div style="height: 8px"></div>
            <div style="border-top: 3px solid #333333;border-left: 3px solid #333333;border-right: 3px solid #333333;width: 99.9%;" >
                <div class="font-weight border-bottom font-size-16">
                    【收退款】
                </div>
                <table style="width: 100%;table-layout: fixed">
                    <tr class="border-bottom">
                        <th class="border-right">收款方式</th>
                        <th class="">金额</th>
                    </tr>
                    <tr class="border-bottom" v-for="(item1,index1) in data_refund">
                        <td class="border-right">{{item1.skfs}}</td>
                        <td class="">{{item1.je}}</td>
                    </tr>
                </table>
            </div>

            <!--交班情况-->
            <div style="height: 8px"></div>
            <div style="border-top: 3px solid #333333;border-left: 3px solid #333333;border-right: 3px solid #333333;width: 99.9%;" >
                <div class="font-weight border-bottom font-size-16">
                    【交班情况】
                </div>
                <table style="width: 100%;table-layout: fixed">
                    <tr class="border-bottom">
                        <th class="border-right">统计</th>
                        <th class="">数量</th>
                    </tr>
                    <tr class="border-bottom" v-for="(item1,index1) in data_handover">
                        <td class="border-right">{{item1.tj}}</td>
                        <td class="">{{item1.sl}}</td>
                    </tr>
                </table>
            </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 {
                        startTime: '2023-05-15 15:30',
                        endTime: '2023-05-16 15:30',
                        mode:'权责发生制',
                        classes:'早班',
                    }
                }
            },
            //收款
            data_payment:{
                type:Array ,
                default() {
                    return [
                        {
                            key: '1',
                            fkfs: '微信',
                            shzj: '2',
                            bbss: '3',
                            bbhjzsje: '3',
                            sjje: '3',
                            zxybje: '3',
                        },
                        // {
                        //     key: '2',
                        //     fkfs: '支付宝',
                        //     shzj: '20',
                        //     bbss: '3',
                        //     bbhjzsje: '13',
                        //     sjje: '53',
                        //     zxybje: '3',
                        // },
                        // {
                        //     key: '3',
                        //     fkfs: '支付宝',
                        //     shzj: '20',
                        //     bbss: '3',
                        //     bbhjzsje: '13',
                        //     sjje: '53',
                        //     zxybje: '3',
                        // },
                        // {
                        //     key: '4',
                        //     fkfs: '支付宝',
                        //     shzj: '20',
                        //     bbss: '3',
                        //     bbhjzsje: '13',
                        //     sjje: '53',
                        //     zxybje: '3',
                        // }
                    ];
                }
            },
            columns_payment:{
                type:Array ,
                default() {
                    return [
                        {
                            title:'【收款】',
                            align: 'left',
                            children:[
                                {
                                    title: '付款方式',
                                    dataIndex: 'fkfs',
                                },
                                {
                                    title: '上班转交',
                                    dataIndex: 'shzj',
                                },
                                {
                                    title: '本班实收',
                                    dataIndex: 'bbss',
                                },
                                {
                                    title: '本班合计在手金额',
                                    dataIndex: 'bbhjzsje',
                                },
                                {
                                    title: '上缴金额',
                                    dataIndex: 'sjje',
                                },
                                {
                                    title: '转下一班金额',
                                    dataIndex: 'zxybje',
                                },
                            ]
                        }
                    ]
                }
            },
            //押金
            data_deposit:{
                type:Array ,
                default() {
                    return [
                        {
                            key: '1',
                            fkfs: '微信',
                            shzj: '2',
                            bbss: '3',
                            bbhjzsje: '3',
                            sjje: '3',
                            zxybje: '3',
                        },
                        // {
                        //     key: '2',
                        //     fkfs: '支付宝',
                        //     shzj: '20',
                        //     bbss: '3',
                        //     bbhjzsje: '13',
                        //     sjje: '53',
                        //     zxybje: '3',
                        // },
                        // {
                        //     key: '3',
                        //     fkfs: '支付宝',
                        //     shzj: '20',
                        //     bbss: '3',
                        //     bbhjzsje: '13',
                        //     sjje: '53',
                        //     zxybje: '3',
                        // },
                        // {
                        //     key: '4',
                        //     fkfs: '支付宝',
                        //     shzj: '20',
                        //     bbss: '3',
                        //     bbhjzsje: '13',
                        //     sjje: '53',
                        //     zxybje: '3',
                        // }
                    ];
                }
            },
            columns_deposit:{
                type:Array ,
                default() {
                    return [
                        {
                            title:'【押金】',
                            align: 'left',
                            children:[
                                {
                                    title: '付款方式',
                                    dataIndex: 'fkfs',
                                },
                                {
                                    title: '上班转交',
                                    dataIndex: 'shzj',
                                },
                                {
                                    title: '本班实收',
                                    dataIndex: 'bbss',
                                },
                                {
                                    title: '本班合计在手金额',
                                    dataIndex: 'bbhjzsje',
                                },
                                {
                                    title: '上缴金额',
                                    dataIndex: 'sjje',
                                },
                                {
                                    title: '转下一班金额',
                                    dataIndex: 'zxybje',
                                },
                            ]
                        }
                    ]
                }
            },
            //营业额
            data_turnover:{
                type:Array ,
                default() {
                    return [
                        {
                            key: '1',
                            xffs: '微信',
                            je: '2',
                        },
                        // {
                        //     key: '2',
                        //     xffs: '支付宝',
                        //     je: '20',
                        // },
                        // {
                        //     key: '3',
                        //     xffs: '支付宝',
                        //     je: '20',
                        // },
                        // {
                        //     key: '4',
                        //     xffs: '支付宝',
                        //     je: '20',
                        // }
                    ];
                }
            },
            columns_turnover:{
                type:Array ,
                default() {
                    return [
                        {
                            title:'【营业额】',
                            align: 'left',
                            children:[
                                {
                                    title: '消费方式',
                                    dataIndex: 'xffs',
                                },
                                {
                                    title: '金额',
                                    dataIndex: 'je',
                                }
                            ]
                        }
                    ]
                }
            },
            //收退款
            data_refund:{
                type:Array ,
                default() {
                    return [
                        {
                            key: '1',
                            skfs: '微信',
                            je: '2',
                        },
                        // {
                        //     key: '2',
                        //     skfs: '支付宝',
                        //     je: '20',
                        // },
                        // {
                        //     key: '3',
                        //     skfs: '支付宝',
                        //     je: '20',
                        // },
                        // {
                        //     key: '4',
                        //     skfs: '支付宝',
                        //     je: '20',
                        // }
                    ];
                }
            },
            columns_refund:{
                type:Array ,
                default() {
                    return [
                        {
                            title:'【收退款】',
                            align: 'left',
                            children:[
                                {
                                    title: '收款方式',
                                    dataIndex: 'skfs',
                                },
                                {
                                    title: '金额',
                                    dataIndex: 'je',
                                }
                            ]
                        }
                    ]
                }
            },
            //交班情况
            data_handover:{
                type:Array ,
                default() {
                    return [
                        {
                            key: '1',
                            tj: '开放数量',
                            sl: '2',
                        },
                        // {
                        //     key: '2',
                        //     tj: '结账退房数量',
                        //     sl: '20',
                        // },
                        // {
                        //     key: '3',
                        //     tj: '免费房数量',
                        //     sl: '20',
                        // },
                        // {
                        //     key: '4',
                        //     tj: '会员注册数量',
                        //     sl: '20',
                        // }
                    ];
                }
            },
            columns_handover:{
                type:Array ,
                default() {
                    return [
                        {
                            title:'【交班情况】',
                            align: 'left',
                            children:[
                                {
                                    title: '统计',
                                    dataIndex: 'tj',
                                },
                                {
                                    title: '数量',
                                    dataIndex: 'sl',
                                }
                            ]
                        }
                    ]
                }
            },
        },
        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">
    .row{
        width: 100%;
        display: flex;
        flex-direction: row;
    }
    .item-row{
        width: 100%;
        white-space: nowrap;
    }
    .flex-1{
        flex: 1;
        width:0px;
    }
    .font-weight{
        font-weight: 600;
    }
    .font-size-16{
        font-size: 16px;
    }
    .font-size-18{
        font-size: 18px;
    }
    .border-top{
        border-top: 3px solid #333333;
    }
    .border-bottom{
        border-bottom: 3px solid #555555;
    }
    .border-left{
        border-left: 3px solid #333333;
    }
    .border-right{
        border-right: 3px solid #333333;
    }

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