<template>
    <div class="print-pay-fee-xiangyun-container">
        <div class="text-center">
            <div style="color:#000;font-size:36px">
                {{ printPayFeeInfo.communityName }} {{ printPayFeeInfo.apply == 'Y' ? $t('printPayFeeXiangyun.applyForm') : $t('printPayFeeXiangyun.receiptForm') }}
            </div>
        </div>
        <div style="color:#000;font-size:20px;text-align:right;margin-bottom:10px;">
            <span>{{ $t('printPayFeeXiangyun.receiptNum') }}：{{ printPayFeeInfo.receiptNum }}</span>
        </div>
        <el-row style="color:#000;font-size:20px;margin-bottom:10px;">
            <el-col :span="12" class="text-right">
                <span>{{ $t('printPayFeeXiangyun.owner') }}：{{ printPayFeeInfo.payObjName }}</span>
            </el-col>
            <el-col :span="12" style="text-align:right;">
                <span>{{ $t('printPayFeeXiangyun.payTime') }}：{{ printPayFeeInfo.feeTime }}</span>
            </el-col>
        </el-row>

        <table class="table vc-table-border" style="color:#000;font-size:20px">
            <thead>
                <tr>
                    <th scope="col" class="text-center" width="80px">
                        {{ $t('printPayFeeXiangyun.serialNumber') }}
                    </th>
                    <th scope="col" class="text-center">
                        {{ $t('printPayFeeXiangyun.feeItem') }}
                    </th>
                    <th scope="col" class="text-center">
                        {{ $t('printPayFeeXiangyun.houseCar') }}
                    </th>
                    <th scope="col" class="text-center">
                        {{ $t('printPayFeeXiangyun.feeRange') }}
                    </th>
                    <th scope="col" class="text-center">
                        {{ $t('printPayFeeXiangyun.cycle') }}
                    </th>
                    <th scope="col" class="text-center">
                        {{ $t('printPayFeeXiangyun.unitPriceFixed') }}
                    </th>
                    <th scope="col" class="text-center">
                        {{ $t('printPayFeeXiangyun.areaUsage') }}
                    </th>
                    <th scope="col" class="text-center">
                        {{ $t('printPayFeeXiangyun.paymentMethod') }}
                    </th>
                    <th scope="col" class="text-center">
                        {{ $t('printPayFeeXiangyun.amount') }}
                    </th>
                    <th scope="col" class="text-center">
                        {{ $t('printPayFeeXiangyun.discountAmount') }}
                    </th>
                    <th scope="col" class="text-center">
                        {{ $t('printPayFeeXiangyun.remark') }}
                    </th>
                </tr>
            </thead>
            <tbody class="vc-table-border" style="color:#000;font-size:20px">
                <tr v-for="(item, index) in printPayFeeInfo.fees" :key="index" class="vc-table-border">
                    <th scope="row" class="text-center">{{ index + 1 }}</th>
                    <td class="text-center">{{ item.feeName }}</td>
                    <td class="text-center">{{ item.objName }}</td>
                    <td class="text-center" v-if="item.preDegrees">
                        {{ dateFormat(item.startTime) }}{{ $t('printPayFeeXiangyun.to') }}{{ dateFormat(item.endTime) }}<br />
                        {{ item.preDegrees }} {{ $t('printPayFeeXiangyun.to') }} {{ item.curDegrees }}
                    </td>
                    <!-- 根据山东需求 如果为押金时 显示为无-->
                    <td class="text-center" v-else-if="item.feeTypeCd == '888800010006'">
                        {{ $t('printPayFeeXiangyun.none') }}
                    </td>
                    <td class="text-center" v-else>
                        {{ dateFormat(item.startTime) }}{{ $t('printPayFeeXiangyun.to') }}{{ dateFormat(item.endTime) }}
                    </td>
                    <td class="text-center">{{ item.cycle }}</td>
                    <td class="text-center">{{ item.squarePrice }}</td>
                    <td class="text-center">{{ item.area }}</td>
                    <td class="text-center">{{ item.primeRate }}</td>
                    <td class="text-center">{{ item.amount }}</td>
                    <td class="text-center">{{ item.discountPrice }}</td>
                    <td class="text-center" width="200px">{{ item.remark }}</td>
                </tr>
                <tr>
                    <td colspan="3" class="text-center">
                        {{ $t('printPayFeeXiangyun.capitalRMB') }}（元）
                    </td>
                    <td colspan="4" class="text-center">
                        {{ changeNumMoneyToChinese(printPayFeeInfo.amount) }}
                    </td>
                    <td colspan="4" class="text-center">{{ printPayFeeInfo.amount }}</td>
                </tr>
                <tr height="60px" v-if="printPayFeeInfo.content || printPayFeeInfo.qrImg">
                    <td colspan="7">
                        <div style="max-width: 600px;" v-html="printPayFeeInfo.content"></div>
                    </td>
                    <td colspan="4">
                        <img v-if="printPayFeeInfo.qrImg" :src="printPayFeeInfo.qrImg" width="100px" height="100px">
                    </td>
                </tr>
            </tbody>
        </table>

        <el-row style="color:#000;font-size:20px;margin-top:20px;">
            <el-col :span="20">
                <el-row>
                    <el-col :span="6">{{ $t('printPayFeeXiangyun.departmentHead') }}：</el-col>
                    <el-col :span="6">{{ $t('printPayFeeXiangyun.operator') }}：{{userInfo.name}}</el-col>
                    <el-col :span="6">{{ $t('printPayFeeXiangyun.financeReceipt') }}：</el-col>
                    <el-col :span="6">{{ $t('printPayFeeXiangyun.customerConfirm') }}：</el-col>
                </el-row>
            </el-col>
            <el-col :span="4" id="print-btn">
                <el-button type="primary" class="float-right" @click="handlePrint">
                    <i class="fa fa-check"></i>&nbsp;{{ $t('common.print') }}
                </el-button>
                <el-button type="warning" class="float-right" style="margin-right:20px;" @click="handleClose">
                    {{ $t('common.cancel') }}
                </el-button>
            </el-col>
        </el-row>
    </div>
</template>

<script>
import { getCommunityId, getCommunityName } from '@/api/community/communityApi'
import { queryFeeReceipt, queryFeeReceiptDetail, queryFeePrintSpec } from '@/api/fee/printPayFeeApi'
import { getUserId, getUserName } from '@/api/user/userApi'

import { dateFormat } from '@/utils/dateUtil'
import { changeNumMoneyToChinese } from '@/utils/moneyUtil'

export default {
    name: 'PrintPayFeeXiangyun',
    data() {
        return {
            printPayFeeInfo: {
                communityName: '',
                receiptId: '',
                receiptIds: '',
                detailIds: '',
                roomName: '',
                amount: 0.00,
                fees: [],
                feeTime: '',
                wechatName: '',
                content: '',
                qrImg: '',
                payObjName: '',
                feeReceipt: [],
                apply: 'N',
                receiptNum: '',
                merge: ''
            },
             userInfo: {},
            printFlag: '0',
            communityId: ''
        }
    },
    created() {
        this.communityId = getCommunityId()
        this.userInfo = {
      userId: getUserId(),
      name: getUserName()
    }
        this.initData()
    },
    methods: {
        initData() {
            this.printPayFeeInfo.receiptId = this.$route.query.receiptId
            this.printPayFeeInfo.receiptIds = this.$route.query.receiptIds
            this.printPayFeeInfo.detailIds = this.$route.query.detailIds
            this.printPayFeeInfo.apply = this.$route.query.apply || 'N'
            this.printPayFeeInfo.merge = this.$route.query.merge
            this.printPayFeeInfo.communityName = getCommunityName()

            this.loadReceipt()
            this.loadPrintSpec()
        },
        loadReceipt() {
            const params = {
                page: 1,
                row: 30,
                receiptId: this.printPayFeeInfo.receiptId,
                receiptIds: this.printPayFeeInfo.receiptIds,
                detailIds: this.printPayFeeInfo.detailIds,
                communityId: this.communityId
            }

            queryFeeReceipt(params).then(response => {
                const feeReceipt = response.data
                let amount = 0
                feeReceipt.forEach(item => {
                    amount += parseFloat(item.amount)
                })

                this.printPayFeeInfo.amount = amount.toFixed(2)
                this.printPayFeeInfo.roomName = feeReceipt[0].objName
                this.printPayFeeInfo.feeTime = feeReceipt[0].createTime
                this.printPayFeeInfo.payObjName = feeReceipt[0].payObjName
                this.printPayFeeInfo.feeReceipt = feeReceipt
                this.printPayFeeInfo.receiptNum = feeReceipt[0].receiptCode

                this.loadReceiptDetail()
            }).catch(error => {
                console.error('请求失败处理', error)
            })
        },
        loadReceiptDetail() {
            const params = {
                page: 1,
                row: 100,
                receiptId: this.printPayFeeInfo.receiptId,
                receiptIds: this.printPayFeeInfo.receiptIds,
                detailIds: this.printPayFeeInfo.detailIds,
                communityId: this.communityId,
                mergeFee: this.printPayFeeInfo.merge
            }

            queryFeeReceiptDetail(params).then(response => {
                const feeReceiptDetails = response.data
                this.printPayFeeInfo.receiptNum = this.printPayFeeInfo.receiptNum + "(" + feeReceiptDetails[0].payOrderId + ")"

                feeReceiptDetails.forEach(item => {
                    this.printPayFeeInfo.feeReceipt.forEach(im => {
                        if (item.receiptId == im.receiptId) {
                            item.objName = im.objName
                            item.feeTypeCd = im.feeTypeCd
                        }
                    })
                })
                this.printPayFeeInfo.fees = feeReceiptDetails
            }).catch(error => {
                console.error('请求失败处理', error)
            })
        },
        loadPrintSpec() {
            const params = {
                page: 1,
                row: 1,
                specCd: 2020,
                communityId: this.communityId
            }

            queryFeePrintSpec(params).then(response => {
                const data = response.data
                if (data.length > 0) {
                    this.printPayFeeInfo.content = data[0].content
                    this.printPayFeeInfo.qrImg = data[0].qrImg
                    if (data[0].printName) {
                        this.printPayFeeInfo.communityName = data[0].printName
                    }
                }
            }).catch(error => {
                console.error('请求失败处理', error)
            })
        },
        dateFormat(date) {
            if (!date) return ''
            return dateFormat(date)
        },
        changeNumMoneyToChinese,
        handlePrint() {
            this.printFlag = '1'
            console.log('printFlag:', this.printFlag)
            document.getElementById("print-btn").style.display = "none"
            window.print()
            window.opener = null
            window.close()
        },
        handleClose() {
            window.opener = null
            window.close()
        }
    }
}
</script>

<style scoped>
.print-pay-fee-xiangyun-container {
    padding: 20px;
}

.text-center {
    text-align: center;
}

.text-right {
    text-align: right;
}

.float-left {
    float: left;
}

.float-right {
    float: right;
}

.table {
    width: 100%;
    margin-bottom: 1rem;
    color: #212529;
    border-collapse: collapse;
}

.vc-table-border {
    border: 1px solid #000;
}

.vc-table-border th,
.vc-table-border td {
    border: 1px solid #000;
    padding: 8px;
}

@media print {
    #print-btn {
        display: none !important;
    }
}
</style>
