<template>
    <Dialog v-model="visible" bg-color="#fff" width="520">
        <div class="bg-fff round-12 hidden">
            <div class="dialog-header h-64 px-26 flex-items-center">
                <span class="w-4 h-18 round-10 bg-main mr-10"></span>
                <span class="fs-16 font-bold color-000">数据汇总</span>
            </div>

            <div class="px-26 pt-18 pb-24">
                <div class="summary-table round-8 hidden">
                    <div class="summary-row">
                        <div class="summary-label px-18 py-12 font-bold">下单数量</div>
                        <div class="px-18 py-12 font-bold">{{ stats.orders }}</div>
                    </div>
                    <div class="summary-row">
                        <div class="summary-label px-18 py-12 font-bold">出片数量</div>
                        <div class="px-18 py-12 font-bold">{{ stats.published }}</div>
                    </div>
                </div>

                <div class="mt-18 mb-8 font-bold color-000">状态汇总</div>
                <div class="summary-table round-8 hidden">
                    <div v-for="item in statusRows" :key="item.label" class="status-row">
                        <div class="summary-label px-18 py-10 font-bold">{{ item.label }}</div>
                        <div class="px-18 py-10 text-center">{{ item.rate }}</div>
                        <div class="summary-label px-18 py-10 text-center font-bold">数量</div>
                        <div class="px-18 py-10 text-center font-bold">{{ item.count }}</div>
                    </div>
                </div>

                <div class="flex justify-end mt-28">
                    <el-button type="primary" class="w-64" @click="visible = false">确定</el-button>
                </div>
            </div>
        </div>
    </Dialog>
</template>

<script setup lang="ts">
import { computed } from 'vue';
import Dialog from '@/components/Dialog/index.vue';

const visible = defineModel<boolean>('visible', { required: true });
const props = defineProps<{
    row?: {
        orders?: number;
        published?: number;
        reached?: number;
        pending?: number;
    };
}>();

const stats = computed(() => ({
    orders: props.row?.orders ?? 0,
    published: props.row?.published ?? 0,
    reached: props.row?.reached ?? 0,
    pending: props.row?.pending ?? 0,
}));
const statusRows = computed(() => {
    const total = stats.value.reached + stats.value.pending;
    const rate = (value: number) => (total ? `${Math.round((value / total) * 100)}%` : '0%');

    return [
        { label: '已上机', rate: rate(stats.value.reached), count: stats.value.reached },
        { label: '待审核', rate: rate(stats.value.pending), count: stats.value.pending },
    ];
});
</script>

<style scoped lang="scss">
.dialog-header {
    border-bottom: 1px solid #edf0f5;
}

.summary-table {
    border: 1px solid #dfe7f2;
}

.summary-row {
    display: grid;
    grid-template-columns: 1fr 1.6fr;
    border-bottom: 1px solid #edf0f5;

    &:last-child {
        border-bottom: none;
    }
}

.status-row {
    display: grid;
    grid-template-columns: 1fr 1fr .5fr .5fr;
    border-bottom: 1px solid #edf0f5;

    &:last-child {
        border-bottom: none;
    }
}

.summary-label {
    background: #f8fbff;
    color: #48607f;
}
</style>
