<!--
 * @Author: Fly
 * @Date: 2025-12-15 17:54:13
 * @LastEditTime: 2025-12-26 10:02:23
 * @Description: 
-->
<template>
    <Drawer :title="DrawerTitle" :visible.sync="DrawerVisible" :showFooter="true" :wrapperClosable="true"
        :size="$drawerWidth(800)">
        <div class="statistics-item">
            <div class="form-headline">支付信息</div>
            <el-date-picker v-model="TimePick" value-format="yyyy-MM-dd" format="yyyy-MM-dd" align="right"
                type="daterange" placeholder="选择日期" :picker-options="pickerOptions" @change="handleDateChange" />
            <div class="num-content" v-loading="PayStatisticsLoading">
                <template v-for="item in NumStatistics">
                    <div class="num-item">
                        <p class="num-value">
                            <span>{{ item.tag }}</span>
                            <span>{{ item.format(payVo) || 0 }}</span>
                        </p>
                        <p class="num-label">{{ item.label }}</p>
                    </div>
                </template>
            </div>
        </div>

        <div class="statistics-item" v-loading="ChainBusinessDayLoading">
            <div class="form-headline">今日订单对比</div>
            <div class="num-contrast">
                <div class="contrast-item">
                    <p class="contrast-title">在线订单</p>
                    <div class="contrast-value">
                        <p class="value-label">订单</p>
                        <p class="value-number">
                            <span>{{ ChainBusinessDayVo.todayOnlineOrderNum || 0 }}</span>
                            <span :class="ChainBusinessDayVo.onlineOrderOnDay > 0 ? 'green' : 'red'">{{ ChainBusinessDayVo.onlineOrderOnDay > 0 ? '+' : '' }}{{ ChainBusinessDayVo.onlineOrderOnDay || 0 }}%</span>
                        </p>
                    </div>
                    <div class="contrast-value">
                        <p class="value-label">交易</p>
                        <p class="value-number">
                            ￥{{ ChainBusinessDayVo.todayOnlineOrderAmount || 0 }}
                        </p>
                    </div>
                </div>
                <div class="contrast-item">
                    <p class="contrast-title">线上商城</p>
                    <div class="contrast-value">
                        <p class="value-label">订单</p>
                        <p class="value-number">
                            <span>{{ ChainBusinessDayVo.todayShopOrderNum || 0 }}</span>
                            <span :class=" ChainBusinessDayVo.shopOrderOnDay > 0 ? 'green' : 'red'">{{ ChainBusinessDayVo.shopOrderOnDay > 0 ? '+' : '' }}{{ ChainBusinessDayVo.shopOrderOnDay || 0 }}%</span>
                        </p>
                    </div>
                    <div class="contrast-value">
                        <p class="value-label">交易</p>
                        <p class="value-number">
                            ￥{{ ChainBusinessDayVo.todayShopOrderAmount || 0 }}
                        </p>
                    </div>
                </div>
            </div>
        </div>

        <div class="statistics-item" v-loading="SevenDayLoading">
            <div class="form-headline">近七日交易趋势</div>
            <LineChart :echarts-value="SevenDayTradeTrend" />
        </div>

        <div class="statistics-item" v-loading="SevenDayLoading">
            <div class="form-headline">近七日订单趋势</div>
            <LineChart :echarts-value="SevenDayOrderTrend" />
        </div>

        <template v-slot:footer>
            <el-button :size="ELsize" @click.stop="DrawerVisible = false">取消</el-button>
        </template>
    </Drawer>
</template>

<script>
import { getChainBusinessSevenDayApi, getChainBusinessStatisticsApi, getChainBusinessDayApi } from "@/api/chainStore";
import LineChart from "@/views/chainStore/components/LineChart.vue";
export default {
    name: '',
    components: { LineChart },
    data() {
        return {
            DrawerTitle: '连锁店经营数据',
            DrawerVisible: false,
            TimePick: undefined,
            pickerOptions: {
                disabledDate(time) {
                    return time.getTime() > Date.now();
                },
                shortcuts: [{
                    text: '今天',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        picker.$emit('pick', [start, end]);
                    }
                }]
            },
            NumStatistics: [
                {
                    tag: '￥',
                    label: '交易额',
                    format: (row) => {
                        try {
                            const { actualReceivePayment } = row || {};
                            return actualReceivePayment
                        } catch (error) {
                            return 0;
                        }
                    }
                },
                {
                    label: '订单数',
                    format: (row) => {
                        try {
                            const { onlineOrderNum, shopOrderNum } = row || {};
                            return this.$addCalculate(onlineOrderNum || 0, shopOrderNum || 0)
                        } catch (error) {
                            return 0;
                        }
                    }
                },
                {
                    label: '退款订单',
                    format: (row) => {
                        try {
                            const { shopRefundOrderNum, onlineRefundOrderNum } = row || {};
                            return this.$addCalculate(shopRefundOrderNum || 0, onlineRefundOrderNum || 0)
                        } catch (error) {
                            return 0;
                        }
                    }
                },
                {
                    tag: '￥',
                    label: '退款金额',
                    format: (row) => {
                        try {
                            const { onlineRefundOrderAmount, shopRefundOrderAmount } = row || {};
                            return this.$addCalculate(onlineRefundOrderAmount || 0, shopRefundOrderAmount || 0)
                        } catch (error) {
                            return 0;
                        }
                    }
                },
                {
                    label: '积分消费',
                    format: (row) => {
                        try {
                            const { userUsePoint } = row || {};
                            return userUsePoint
                        } catch (error) {
                            return 0;
                        }
                    }
                },
                {
                    label: '积分订单',
                    format: (row) => {
                        try {
                            const { pointVerifiedOrderNum } = row || {};
                            return pointVerifiedOrderNum
                        } catch (error) {
                            return 0;
                        }
                    }
                }
            ],


            businessId: undefined, // 连锁商家ID
            // 支付信息
            payVo: {},
            PayStatisticsLoading: false,
            // 今日订单对比
            ChainBusinessDayVo: {},
            ChainBusinessDayLoading: false,
            // 近七日交易趋势
            SevenDayTradeTrend: {
                LegendData: ['总交易额', '预估结算', '让利金额'],
                XAxisData: [],
                SeriesData: [{
                    name: '总交易额',
                    color: '#409eff',
                    type: 'line',
                    data: []
                }, {
                    name: '预估结算',
                    color: '#68BBC4',
                    type: 'line',
                    data: []
                }, {
                    name: '让利金额',
                    color: '#58A55C ',
                    type: 'line',
                    data: []
                }]
            },
            // 近七日订单趋势
            SevenDayOrderTrend: {
                LegendData: ['在线买单', '线上商城订单'],
                XAxisData: [],
                SeriesData: [{
                    name: '在线买单',
                    color: '#409eff',
                    type: 'line',
                    data: []
                }, {
                    name: '线上商城订单',
                    color: '#68BBC4',
                    type: 'line',
                    data: []
                }]
            },
            SevenDayLoading: false,

        };
    },
    created() {
        // setTimeout(() => {
        //     this.openHandle({ businessId: 22, businessName: "总部国际专卖店" })
        // }, 100);
    },

    methods: {
        initData() {
            this.SevenDayTradeTrend.SeriesData.forEach(item => {
                item.data = [];
            });
            this.SevenDayTradeTrend.XAxisData = [];
            this.SevenDayOrderTrend.XAxisData = [];
            this.SevenDayOrderTrend.SeriesData.forEach(item => {
                item.data = [];
            })
        },
        openHandle(row) {
            this.initData();
            this.DrawerVisible = true;
            const startAndEnd = this.parseTime(new Date(), '{y}-{m}-{d}');
            this.TimePick = [startAndEnd, startAndEnd];
            const { businessId = undefined, businessName = undefined } = row || {};
            this.DrawerTitle = `${businessName || '连锁店'}数据统计`;
            this.businessId = businessId;
            this.getPayStatistics(businessId);
            this.getChainBusinessDay(businessId);
            this.getSevenDayContrast(businessId);
        },
        // 
        /**
         * 查看连锁商家日账单统计信息
         * 支付信息
         * @param businessId 
         */
        handleDateChange() {
            console.log('this.handleDateChange = ', this.TimePick);
            this.getPayStatistics(this.businessId);
        },
        async getPayStatistics(businessId) {
            this.PayStatisticsLoading = true;
            try {
                const Parmas = {
                    startTime: this.TimePick[0],
                    endTime: this.TimePick[1],
                    businessId
                }
                const { data } = await getChainBusinessStatisticsApi(Parmas);
                this.payVo = data || {};
            } catch (error) {
                this.payVo = {};
            } finally {
                this.PayStatisticsLoading = false;
            }
        },

        /**
         * 查看连锁商家日账单今日和昨日统计信息
         * 今日订单对比
         * @param businessId 
         */
        async getChainBusinessDay(businessId) {
            this.ChainBusinessDayLoading = true;
            try {
                const { data } = await getChainBusinessDayApi({ businessId });
                this.ChainBusinessDayVo = data || {};
            } catch (error) {
                this.ChainBusinessDayVo = {};
            } finally {
                this.ChainBusinessDayLoading = false;
            }
        },


        getSevenDayTime(dayNum) {
            const DefaultTimeData = [];
            const Today = new Date().getTime();
            const oneDay = 24 * 60 * 60 * 1000;
            for (let i = 0; i < dayNum; i++) {
                const t = this.parseTime(Today - (oneDay * i), '{y}-{m}-{d}');;
                DefaultTimeData.unshift(t)
            };
            return DefaultTimeData;
        },
        getSevenDayTradeTrendVal(item) {
            try {
                const { dayValue = '', actualReceivePayment = 0, todaySettlement = 0, businessShouldSubsidy = 0 } = item || {};
                this.SevenDayTradeTrend.XAxisData.push(dayValue);
                this.SevenDayTradeTrend.SeriesData[0].data.push(actualReceivePayment);
                this.SevenDayTradeTrend.SeriesData[1].data.push(todaySettlement);
                this.SevenDayTradeTrend.SeriesData[2].data.push(businessShouldSubsidy);
            } catch (error) {
                console.log('error = ', error);
            }
        },

        SevenDayOrderTrendVal(item) {
            try {
                const { dayValue = '', onlineOrderNum = 0, shopOrderNum = 0 } = item || {};
                this.SevenDayOrderTrend.XAxisData.push(dayValue);
                this.SevenDayOrderTrend.SeriesData[0].data.push(onlineOrderNum);
                this.SevenDayOrderTrend.SeriesData[1].data.push(shopOrderNum);
            } catch (error) {
                console.log('error = ', error);
            }
        },


        /**
         * 连锁获取日账单近N日统计信息
         * 今日订单对比
         * @param businessId 
         */
        async getSevenDayContrast(businessId) {
            this.SevenDayLoading = true;
            const dayNum = 7;
            const XTime = this.getSevenDayTime(dayNum);
            try {
                const { data } = await getChainBusinessSevenDayApi({ businessId, dayNum })
                // 处理数据 - 填补缺失日期数据，按照日期排列顺序
                const MapData = XTime.map(el => {
                    const item = data.find(r => r.dayValue === el)
                    if (item) {
                        return item
                    } else {
                        return {
                            dayValue: el
                        };
                    }
                });
                // 数据赋值
                MapData.forEach(item => {
                    this.getSevenDayTradeTrendVal(item);
                    this.SevenDayOrderTrendVal(item);
                });

            } catch (error) {

            } finally {
                this.SevenDayLoading = false;
            }
        }


    },
};
</script>
<style lang="scss" scoped>
.statistics-item {
    border: 1px solid #ccc;
    border-radius: 10px;
    padding: 20px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);

    &+.statistics-item {
        margin-top: 20px;
    }
}

.num-content {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;

    .num-item {
        flex: 0 0 33%;
        // margin-bottom: 20px;
        padding: 20px;
        display: flex;
        justify-content: center;
        flex-direction: column;
        align-items: center;

        .num-value {
            font-size: 18px;
            font-weight: bold;
            color: #333;
        }

        .num-label {
            font-size: 16px;
            font-weight: normal;
            color: #666;
        }

        p {
            margin: 0;
            padding: 0;
        }
    }
}

.num-contrast {
    width: 100%;
    display: flex;
    justify-content: space-between;

    .contrast-item {
        flex: 0 0 48%;
        display: flex;
        flex-direction: column;

        // justify-content: center;
        // align-items: center;
        p {
            padding: 0;
            margin: 0;
        }

        .contrast-title {
            width: 100%;
            font-size: 16px;
            font-weight: normal;
            color: #666;
            text-align: center;
            padding-bottom: 20px;
        }

        .contrast-value {
            width: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            // font-size: 24px;
            // font-weight: bold;
            // color: #333;
            // text-align: center;
            padding-bottom: 10px;
            font-size: 16px;
            font-weight: normal;
            color: #333;
            $p_: 20px;

            .value-label {
                width: 50%;
                text-align: right;
                padding-right: $p_;
            }

            .value-number {
                padding-left: $p_;
                flex: 1 0;

                span+span {
                    margin-left: 10px;
                }
            }
        }
    }
}
.green{
    color: green;
}
.red{
    color: red;
}
</style>
