<template>
    <div v-loading="loading" element-loading-text="拼命加载中......请稍等">
        <el-row :gutter="20">
            <el-col :span="8">
                <H2>发票概览</H2>
            </el-col>
            <el-col :span="16" style="text-align:right;">
                <el-button
                    type="primary"
                    icon="el-icon-refresh"
                    @click="handleRefresh"
                    >刷 新
                </el-button>
            </el-col>
        </el-row>

        <br />
        <el-tabs v-model="activeTab">
            <el-tab-pane label="未税金额" name="first">
                <h3>本季度</h3>
                <br />
                <el-row :gutter="20">
                    <el-col :span="8">
                        <p>累计成功开票未税金额（元）</p>
                        <br />
                        <p class="text-money">{{ quarterTotal }}</p>
                    </el-col>
                    <el-col :span="8">
                        <p>专票开票未税金额（元）</p>
                        <br />
                        <p class="text-money">{{ quarterZhuanpiaoTotal }}</p>
                    </el-col>
                    <el-col :span="8">
                        <p>普票开票未税金额（元）</p>
                        <br />
                        <p class="text-money">{{ quarterPupiaoTotal }}</p>
                    </el-col>
                </el-row>
                <el-divider></el-divider>
                <h3>本月度</h3>
                <br />
                <el-row :gutter="10">
                    <el-col :span="8">
                        <p>累计成功开票未税金额（元）</p>
                        <br />
                        <p class="text-money">{{ monthTotal }}</p>
                    </el-col>
                    <el-col :span="8">
                        <p>专票开票未税金额（元）</p>
                        <br />
                        <p class="text-money">{{ monthZhuanpiaoTotal }}</p>
                    </el-col>
                    <el-col :span="8">
                        <p>普票开票未税金额（元）</p>
                        <br />
                        <p class="text-money">{{ monthPupiaoTotal }}</p>
                    </el-col>
                </el-row>
                <br />
            </el-tab-pane>
            <el-tab-pane label="累计税额" name="second">
                <h3>本季度</h3>
                <br />
                <el-row :gutter="20">
                    <el-col :span="8">
                        <p>累计开票税额（元）</p>
                        <br />
                        <p class="text-money">{{ quarterTotalTaxes }}</p>
                    </el-col>
                    <el-col :span="8">
                        <p>专票开票税额（元）</p>
                        <br />
                        <p class="text-money">
                            {{ quarterZhuanpiaoTotalTaxes }}
                        </p>
                    </el-col>
                    <el-col :span="8">
                        <p>普开票税额（元）</p>
                        <br />
                        <p class="text-money">{{ quarterPupiaoTotalTaxes }}</p>
                    </el-col>
                </el-row>
                <el-divider></el-divider>
                <h3>本月度</h3>
                <br />
                <el-row :gutter="20">
                    <el-col :span="8">
                        <p>累计开票税额（元）</p>
                        <br />
                        <p class="text-money">{{ monthTotalTaxes }}</p>
                    </el-col>
                    <el-col :span="8">
                        <p>专票开票税额（元）</p>
                        <br />
                        <p class="text-money">{{ monthZhuanpiaoTotalTaxes }}</p>
                    </el-col>
                    <el-col :span="8">
                        <p>普票开票税额（元）</p>
                        <br />
                        <p class="text-money">{{ monthPupiaoTotalTaxes }}</p>
                    </el-col>
                </el-row>
                <br />
            </el-tab-pane>
        </el-tabs>
    </div>
</template>

<script>
import INVOICE_OTHER from "@/api/invoice-other";

export default {
    name: "InvoiceOverview",
    data() {
        return {
            loading: false,
            activeTab: "first",

            quarterTotal: "-", // 季度开票金额统计
            quarterPupiaoTotal: "-", // 季度普票开票金额统计
            quarterZhuanpiaoTotal: "-", // 季度专票开票金额统计
            monthTotal: "-", // 月度开票统计
            monthPupiaoTotal: "-", // 月度普票开票统计
            monthZhuanpiaoTotal: "-", // 月度专票金额统计

            quarterTotalTaxes: "-", // 季度开票税额统计
            quarterPupiaoTotalTaxes: "-", // 季度普票开票税额统计
            quarterZhuanpiaoTotalTaxes: "-", // 季度专票开票税额统计
            monthTotalTaxes: "-", // 月度开票税额统计
            monthPupiaoTotalTaxes: "-", // 月度普票开票税额统计
            monthZhuanpiaoTotalTaxes: "-", // 月度专票税额统计
        };
    },
    methods: {
        handleRefresh() {
            this.callGetStatToInvoice();
        },
        callGetStatToInvoice() {
            const _this = this;
            _this.loading = true;
            INVOICE_OTHER.getStatToInvoice()
                .then((val) => {
                    _this.loading = false;
                    _this.quarterTotal = val.data.quarterTotal;
                    _this.quarterPupiaoTotal = val.data.quarterPupiaoTotal;
                    _this.quarterZhuanpiaoTotal =
                        val.data.quarterZhuanpiaoTotal;
                    _this.monthTotal = val.data.monthTotal;
                    _this.monthPupiaoTotal = val.data.monthPupiaoTotal;
                    _this.monthZhuanpiaoTotal = val.data.monthZhuanpiaoTotal;

                    _this.quarterTotalTaxes = val.data.quarterTotalTaxes;
                    _this.quarterPupiaoTotalTaxes =
                        val.data.quarterPupiaoTotalTaxes;
                    _this.quarterZhuanpiaoTotalTaxes =
                        val.data.quarterZhuanpiaoTotalTaxes;
                    _this.monthTotalTaxes = val.data.monthTotalTaxes;
                    _this.monthPupiaoTotalTaxes =
                        val.data.monthPupiaoTotalTaxes;
                    _this.monthZhuanpiaoTotalTaxes =
                        val.data.monthZhuanpiaoTotalTaxes;
                })
                .catch((err) => {
                    _this.loading = false;
                    _this.$message.error(err);
                });
        },
    },
    created() {
        this.callGetStatToInvoice();
    },
};
</script>

<style scoped>
.text-money {
    color: #004080;
    font-size: 2.4rem;
    font-weight: bold;
}
</style>