<template>
    <div class="a5">
        <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 class="print-fee-value">交班模式:{{ feeInfo.mode}} </div>
                    <div class="print-fee-value">班次:{{ feeInfo.classes }} </div>
                </div>
                <div class="print-fee-item-wrapper row">
                    <div class="print-fee-value">操作员:{{ nickname() }} </div>
                    <div class="print-fee-value">打印人:{{ nickname() }} </div>
                </div>
            </div>

            <!--收款-->
<!--            <div class="table">-->
<!--                <div class="row border-top border-bottom border-left border-right font-weight font-size-18">-->
<!--                    收款-->
<!--                </div>-->
<!--                <div class="wrapper-td" :key="index" v-for="(item, index) in data_payment">-->
<!--                    <div class="row border-bottom border-left border-right font-weight">-->
<!--                        {{ item.payName }}-->
<!--                    </div>-->
<!--                    <div class="row">-->
<!--                        <div class="row border-bottom border-left border-right ">-->
<!--                            <div class="flex-1 border-right">-->
<!--                                项目名称-->
<!--                            </div>-->
<!--                            <div class="flex-1 border-right">-->
<!--                                付款方式-->
<!--                            </div>-->
<!--                            <div class="flex-1 border-right">-->
<!--                                单据号-->
<!--                            </div>-->
<!--                            <div class="flex-1 border-right">-->
<!--                                姓名-->
<!--                            </div>-->
<!--                            <div class="flex-1 border-right">-->
<!--                                房间号-->
<!--                            </div>-->
<!--                            <div class="flex-1 border-right">-->
<!--                                金额-->
<!--                            </div>-->
<!--                            <div class="flex-1 border-right">-->
<!--                                发生时间-->
<!--                            </div>-->
<!--                            <div class="flex-1 border-right">-->
<!--                                营业日-->
<!--                            </div>-->
<!--                            <div class="flex-1">-->
<!--                                备注-->
<!--                            </div>-->
<!--                        </div>-->
<!--                    </div>-->
<!--                    <div class="row" :key="index1" v-for="(itemChild, index1) in item.children">-->
<!--                        <div class="row border-bottom border-left border-right ">-->
<!--                            <div class="flex-1 border-right">-->
<!--                                {{ itemChild.projectName }}-->
<!--                            </div>-->
<!--                            <div class="flex-1 border-right">-->
<!--                                {{ itemChild.payName }}-->
<!--                            </div>-->
<!--                            <div class="flex-1 border-right">-->
<!--                                {{ itemChild.receiptNo }}-->
<!--                            </div>-->
<!--                            <div class="flex-1 border-right">-->
<!--                                {{ itemChild.customerName }}-->
<!--                            </div>-->
<!--                            <div class="flex-1 border-right">-->
<!--                                {{ itemChild.roomNo }}-->
<!--                            </div>-->
<!--                            <div class="flex-1 border-right">-->
<!--                                {{ itemChild.money }}-->
<!--                            </div>-->
<!--                            <div class="flex-1 border-right">-->
<!--                                {{ itemChild.occurTime }}-->
<!--                            </div>-->
<!--                            <div class="flex-1 border-right">-->
<!--                                {{ itemChild.businessDay }}-->
<!--                            </div>-->
<!--                            <div class="flex-1">-->
<!--                                {{ itemChild.remarks }}-->
<!--                            </div>-->
<!--                        </div>-->
<!--                    </div>-->
<!--                    <div class="row border-bottom border-left border-right font-weight font-size-18">-->
<!--                        收款合计：{{ item.amount }}-->
<!--                    </div>-->
<!--                </div>-->
<!--            </div>-->
<!--            <div style="height: 5px"></div>-->
            <!--收款-->
            <div style="border: 3px solid #333333;width: 99.9%;" >
                <div class="font-weight border-bottom font-size-18">
                    收款
                </div>
                <div :key="index" v-for="(item, index) in data_payment">
                    <table style="width: 100%;table-layout: fixed">
                        <tr class="border-bottom font-weight item-row">
                            {{ item.payName }}
                        </tr>
                        <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="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 item.children">
                            <td class="border-right">{{item1.projectName}}</td>
                            <td class="border-right">{{item1.payName}}</td>
                            <td class="border-right">{{item1.receiptNo}}</td>
                            <td class="border-right">{{item1.customerName}}</td>
                            <td class="border-right">{{item1.roomName}}</td>
                            <td class="border-right">{{item1.money}}</td>
                            <td class="border-right">{{item1.occurTime}}</td>
                            <td class="border-right">{{item1.businessDay}}</td>
                            <td class="">{{item1.remarks}}</td>
                        </tr>
                        <tr v-if="data_payment.length -1 == index" class=" font-weight font-size-16 item-row">
                            {{ item.payName }}合计：{{ item.amount }}
                        </tr>
                        <tr v-else  class="border-bottom font-weight font-size-16 item-row" >
                            {{ item.payName }}合计：{{ item.amount }}
                        </tr>
                    </table>
                </div>
                <div class="font-weight border-top font-size-18">
                    收款合计：{{data_payment_amount}}
                </div>
            </div>

            <!--退款-->
            <div style="height: 8px"></div>
            <div style="border: 3px solid #333333;width: 99.9%;" >
                <div class="font-weight border-bottom font-size-18">
                    退款
                </div>
                <div :key="index" v-for="(item, index) in data_refund">
                    <table style="width: 100%;table-layout: fixed">
                        <tr class="border-bottom font-weight item-row">
                            {{ item.payName }}
                        </tr>
                        <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="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 item.children">
                            <td class="border-right">{{item1.projectName}}</td>
                            <td class="border-right">{{item1.payName}}</td>
                            <td class="border-right">{{item1.receiptNo}}</td>
                            <td class="border-right">{{item1.customerName}}</td>
                            <td class="border-right">{{item1.roomName}}</td>
                            <td class="border-right">{{item1.money}}</td>
                            <td class="border-right">{{item1.occurTime}}</td>
                            <td class="border-right">{{item1.businessDay}}</td>
                            <td class="">{{item1.remarks}}</td>
                        </tr>
                        <tr v-if="data_payment.length -1 == index" class=" font-weight font-size-16 item-row">
                            {{ item.payName }}合计：{{ item.amount }}
                        </tr>
                        <tr v-else  class="border-bottom font-weight font-size-16 item-row" >
                            {{ item.payName }}合计：{{ item.amount }}
                        </tr>
                    </table>
                </div>
                <div class="font-weight border-top font-size-18">
                    退款合计：{{data_refund_amount}}
                </div>
            </div>

            <!--收支明细-->
            <div style="height: 8px"></div>
            <div style="border-top: 3px solid #333333;border-left: 3px solid #333333;width: 99.9%;" >
                <div class="font-weight border-right border-bottom font-size-18">
                    收支明细
                </div>
                <table style="width: 100%;table-layout: fixed;border-collapse: collapse;" class="border-bottom">
                    <tr>
                        <th class="border-right" v-for="item in data_detail">{{item.name}}:{{item.money}}</th>
                    </tr>
                </table>
<!--                <div class="row">-->
<!--                    <div class="flex-1 border-left" :key="index" v-for="(item, index) in data_detail">-->
<!--                        <span class="border-left">-->
<!--                            {{item.name}}:{{item.money}}-->
<!--                        </span>-->
<!--                    </div>-->
<!--                </div>-->
            </div>

            <!--营业额-->
            <div style="height: 8px"></div>
            <div style="border: 3px solid #333333;width: 99.9%;" >
                <div class="font-weight border-bottom font-size-18">
                    营业额
                </div>
                <div :key="index" v-for="(item, index) in data_turnover">
                    <table style="width: 100%;table-layout: fixed">
                        <tr class="border-bottom font-weight item-row">
                            {{ item.payName }}
                        </tr>
                        <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="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 item.children">
                            <td class="border-right">{{item1.projectName}}</td>
                            <td class="border-right">{{item1.payName}}</td>
                            <td class="border-right">{{item1.receiptNo}}</td>
                            <td class="border-right">{{item1.customerName}}</td>
                            <td class="border-right">{{item1.roomName}}</td>
                            <td class="border-right">{{item1.money}}</td>
                            <td class="border-right">{{item1.occurTime}}</td>
                            <td class="border-right">{{item1.businessDay}}</td>
                            <td class="">{{item1.remarks}}</td>
                        </tr>
                        <tr v-if="data_payment.length -1 == index" class=" font-weight font-size-16 item-row">
                            {{ item.payName }}合计：{{ item.amount }}
                        </tr>
                        <tr v-else  class="border-bottom font-weight font-size-16 item-row" >
                            {{ item.payName }}合计：{{ item.amount }}
                        </tr>
                    </table>
                </div>
                <div class="font-weight border-top font-size-18">
                    费用合计：{{data_turnover_amount}}
                </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: '交班明细表'
            },
            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 [
                        {
                            payName:'支付宝',
                            amount:509,
                            children:[
                                // {
                                //     projectName:'项目名称',
                                //     payName:'付款方式',
                                //     receiptNo:'单据号',
                                //     customerName:'姓名',
                                //     roomNo:'房间号',
                                //     money:'金额',
                                //     occurTime:'发生时间',
                                //     businessDay:'营业日',
                                //     remarks:'备注',
                                // },
                                {
                                    projectName:'押金',
                                    payName:'支付宝',
                                    receiptNo:'S20230518195733',
                                    customerName:'张先生',
                                    roomNo:'8707',
                                    money:188,
                                    occurTime:'2023-05-18 11:25:36',
                                    businessDay:'2023-05-18',
                                    remarks:'押金',
                                },
                            ]
                        },
                    ];
                }
            },
            data_payment_amount:{
                type:Number ,
                default() {
                    return 1500
                }
            },
            //退款
            data_refund:{
                type:Array ,
                default() {
                    return [
                        {
                            payName:'支付宝',
                            amount:509,
                            children:[
                                // {
                                //     projectName:'项目名称',
                                //     payName:'付款方式',
                                //     receiptNo:'单据号',
                                //     customerName:'姓名',
                                //     roomNo:'房间号',
                                //     money:'金额',
                                //     occurTime:'发生时间',
                                //     businessDay:'营业日',
                                //     remarks:'备注',
                                // },
                                {
                                    projectName:'押金',
                                    payName:'支付宝',
                                    receiptNo:'S20230518195733',
                                    customerName:'张先生',
                                    roomNo:'8707',
                                    money:188,
                                    occurTime:'2023-05-18 11:25:36',
                                    businessDay:'2023-05-18',
                                    remarks:'押金',
                                },
                            ]
                        },
                    ];
                }
            },
            data_refund_amount:{
                type:Number ,
                default() {
                    return 1500
                }
            },
            //收支明细
            data_detail:{
                type:Array ,
                default() {
                    return [
                        {
                            name:'支付宝',
                            money:55
                        },
                        {
                            name:'微信',
                            money:33
                        },
                        {
                            name:'现金',
                            money:99
                        },
                    ];
                }
            },
            //营业额
            data_turnover:{
                type:Array ,
                default() {
                    return [
                        {
                            payName:'房费',
                            amount:509,
                            children:[
                                // {
                                //     projectName:'项目名称',
                                //     payName:'付款方式',
                                //     receiptNo:'单据号',
                                //     customerName:'姓名',
                                //     roomNo:'房间号',
                                //     money:'金额',
                                //     occurTime:'发生时间',
                                //     businessDay:'营业日',
                                //     remarks:'备注',
                                // },
                                {
                                    projectName:'押金',
                                    payName:'支付宝',
                                    receiptNo:'S20230518195733',
                                    customerName:'张先生',
                                    roomNo:'8707',
                                    money:188,
                                    occurTime:'2023-05-18 11:25:36',
                                    businessDay:'2023-05-18',
                                    remarks:'押金',
                                },
                            ]
                        },
                    ];
                }
            },
            data_turnover_amount:{
                type:Number ,
                default() {
                    return 0
                }
            },
        },
        data() {
            let storeInfo = JSON.parse(localStorage.getItem("storeInfo"))
            return {
                storeInfo,
                printDate: new Date().format('yyyy/MM/dd hh:mm:ss'),
                tableHeader:["序号","书名","价格","数量"],
                dat:[
                    {bookName:"围城",price:"75",quantity:"0"},
                    {bookName:"骆驼祥子",price:"55",quantity:"0"},
                    {bookName:"百年孤独",price:"69",quantity:"0"},
                    {bookName:"梦里花落知多少",price:"39",quantity:"0"}

                ],
            }
        },
        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 #333333;
    }
    .border-left{
        border-left: 3px solid #333333;
    }
    .border-right{
        border-right: 3px solid #333333;
    }

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