<template>
    <div class="store-consume-performance-statistics-container">
        <!-- 搜索卡片 -->
        <el-card class="search-card">
            <div slot="header" class="clearfix">
                <span><i class="el-icon-s-shop"></i> 门店耗卡业绩统计</span>
            </div>
            <div class="search-form">
                <el-form :inline="true" :model="searchForm" class="demo-form-inline">
                    <el-form-item label="统计月份">
                        <el-date-picker v-model="searchForm.statisticsMonth" type="month" placeholder="选择月份"
                            format="yyyy年MM月" value-format="yyyyMM" :clearable="false" @change="handleSearch">
                        </el-date-picker>
                    </el-form-item>
                    <el-form-item label="门店名称">
                        <el-input v-model="searchForm.storeName" placeholder="请输入门店名称" clearable
                            @keyup.enter.native="handleSearch">
                        </el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="handleSearch" :loading="loading">
                            <i class="el-icon-search"></i> 查询
                        </el-button>
                        <el-button @click="handleReset">
                            <i class="el-icon-refresh"></i> 重置
                        </el-button>
                    </el-form-item>
                </el-form>
            </div>
        </el-card>

        <!-- 表格卡片 -->
        <el-card class="table-card">
            <div slot="header" class="clearfix">
                <span><i class="el-icon-s-grid"></i> 门店耗卡业绩列表</span>
            </div>
            <div class="table-container">
                <el-table :data="tableData" v-loading="loading" element-loading-text="加载中..." :height="tableHeight"
                    border stripe style="width: 100%">
                    <el-table-column prop="StoreName" label="门店名称" width="200" fixed="left"></el-table-column>
                    <el-table-column prop="TotalPerformance" label="总业绩" width="120" align="right">
                        <template slot-scope="scope">
                            {{ formatMoney(scope.row.TotalPerformance) }}
                        </template>
                    </el-table-column>
                    <el-table-column prop="ConsumePerformance" label="耗卡业绩" width="120" align="right">
                        <template slot-scope="scope">
                            {{ formatMoney(scope.row.ConsumePerformance) }}
                        </template>
                    </el-table-column>
                    <el-table-column prop="OrderCount" label="订单数量" width="100" align="right"></el-table-column>
                    <el-table-column prop="IsNewStore" label="是否新店" width="100" align="center">
                        <template slot-scope="scope">
                            <el-tag :type="scope.row.IsNewStore ? 'success' : 'info'">
                                {{ scope.row.IsNewStore ? '是' : '否' }}
                            </el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column prop="CreateTime" label="创建时间" width="150" align="center">
                        <template slot-scope="scope">
                            {{ formatDateTime(scope.row.CreateTime) }}
                        </template>
                    </el-table-column>
                </el-table>

                <!-- 分页 -->
                <div class="pagination-container">
                    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                        :current-page="pagination.pageIndex" :page-sizes="[10, 20, 50, 100]"
                        :page-size="pagination.pageSize" :total="pagination.total"
                        layout="total, sizes, prev, pager, next, jumper">
                    </el-pagination>
                </div>
            </div>
        </el-card>
    </div>
</template>

<script>
import { getStoreConsumePerformanceStatisticsList } from '@/api/extend/statistics'

export default {
    name: 'StoreConsumePerformanceStatistics',
    data() {
        return {
            loading: false,
            tableData: [],
            tableHeight: 400,
            searchForm: {
                statisticsMonth: this.getCurrentMonth(),
                storeName: ''
            },
            pagination: {
                pageIndex: 1,
                pageSize: 50,
                total: 0
            }
        }
    },
    mounted() {
        this.calculateTableHeight()
        this.handleSearch()
        window.addEventListener('resize', this.calculateTableHeight)
    },
    beforeDestroy() {
        window.removeEventListener('resize', this.calculateTableHeight)
    },
    methods: {
        getCurrentMonth() {
            const now = new Date()
            const year = now.getFullYear()
            const month = String(now.getMonth() + 1).padStart(2, '0')
            return `${year}${month}`
        },
        calculateTableHeight() {
            this.$nextTick(() => {
                const container = this.$el
                if (!container) return

                const containerHeight = container.clientHeight
                const searchCard = container.querySelector('.search-card')
                const tableCard = container.querySelector('.table-card')

                let searchCardHeight = 0
                if (searchCard) {
                    searchCardHeight = searchCard.offsetHeight + 20
                }

                const tableCardAvailableHeight = containerHeight - searchCardHeight - 100
                const tableCardHeight = Math.max(250, tableCardAvailableHeight)

                if (tableCard) {
                    tableCard.style.height = tableCardHeight + 'px'
                }

                const tableContainer = container.querySelector('.table-container')
                if (tableContainer) {
                    const cardHeaderHeight = 50
                    const cardPadding = 30
                    const tableContainerHeight = tableCardHeight - cardHeaderHeight - cardPadding
                    tableContainer.style.height = tableContainerHeight + 'px'

                    const paginationHeight = 50
                    const paginationMargin = 10
                    this.tableHeight = Math.max(100, tableContainerHeight - paginationHeight - paginationMargin)
                }
            })
        },
        async handleSearch() {
            this.loading = true
            try {
                const params = {
                    pageIndex: this.pagination.pageIndex,
                    pageSize: this.pagination.pageSize,
                    statisticsMonth: this.searchForm.statisticsMonth,
                    storeName: this.searchForm.storeName
                }

                const response = await getStoreConsumePerformanceStatisticsList(params)
                this.tableData = response.data.list || []
                this.pagination.total = response.data.pagination.total || 0
            } catch (error) {
                this.$message.error('查询失败: ' + error.message)
            } finally {
                this.loading = false
            }
        },
        handleReset() {
            this.searchForm = {
                statisticsMonth: this.getCurrentMonth(),
                storeName: ''
            }
            this.pagination.pageIndex = 1
            this.handleSearch()
        },
        handleSizeChange(val) {
            this.pagination.pageSize = val
            this.pagination.pageIndex = 1
            this.handleSearch()
        },
        handleCurrentChange(val) {
            this.pagination.pageIndex = val
            this.handleSearch()
        },
        formatMoney(value) {
            if (value === null || value === undefined) return '0.00'
            return Number(value).toLocaleString('zh-CN', {
                minimumFractionDigits: 2,
                maximumFractionDigits: 2
            })
        },
        formatDateTime(value) {
            if (!value) return '-'
            return new Date(value).toLocaleString('zh-CN')
        }
    }
}
</script>

<style lang="scss" scoped>
.store-consume-performance-statistics-container {
    height: calc(100vh - 60px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 20px;
    background-color: #f0f2f5;

    .search-card {
        flex-shrink: 0;
        margin-bottom: 20px;
        border-radius: 8px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);

        .search-form {
            .el-form-item {
                margin-bottom: 10px;
            }
        }
    }

    .table-card {
        flex: 1;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        min-height: 0;
        border-radius: 8px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);

        .table-container {
            height: 100%;
            display: flex;
            flex-direction: column;
            overflow: hidden;
            position: relative;

            .el-table {
                flex: 1;
                min-height: 0;
                overflow: auto;
            }

            .pagination-container {
                margin-top: 10px;
                padding: 5px 0;
                height: 50px;
                display: flex;
                align-items: center;
                justify-content: flex-end;
                flex-shrink: 0;
            }
        }
    }
}
</style>
