<template>
    <div class="order-product-list">
        <ele-card header="商品详情">
            <div>
                <el-table :data="detail.detailList" border style="width: 100%">
                    <!-- Image -->
                    <el-table-column label="图片" width="90" align="center">
                        <template #default="{ row }">
                            <el-image
                                :src="row.cover"
                                style="width: 60px; height: 60px"
                                fit="cover"
                                :preview-src-list="[row.cover]"
                                preview-teleported
                            />
                        </template>
                    </el-table-column>

                    <!-- Product Info -->
                    <el-table-column label="商品信息" min-width="250">
                        <template #default="{ row }">
                            <div class="product-info">
                                <div class="title">{{ row.bookName }}</div>
                                <div class="meta">ISBN: {{ row.isbn }}</div>
                                <div class="tags">
                                    <span class="discount-tag"
                                        >回收折扣:
                                        {{ row.recycleDiscount || 1 }}折</span
                                    >
                                    <span class="status-tag"
                                        >(回收状态:
                                        {{
                                            getRecycleStatusText(
                                                row.recycleStatus
                                            )
                                        }})</span
                                    >
                                </div>
                            </div>
                        </template>
                    </el-table-column>

                    <!-- Specs -->
                    <el-table-column label="规格" width="100" align="center">
                        <template #default="{ row }">
                            <span
                                >({{
                                    getConditionText(row.conditionType)
                                }})</span
                            >
                        </template>
                    </el-table-column>

                    <!-- Status -->
                    <el-table-column label="状态" width="120" align="center">
                        <template #default="{ row }">
                            <span :class="getStatusColor(row.status)">{{
                                getDetailStatusText(row.status)
                            }}</span>
                        </template>
                    </el-table-column>

                    <!-- Quantity -->
                    <el-table-column label="数量" width="80" align="center">
                        <template #default="{ row }">
                            <span>x{{ row.num }}</span>
                        </template>
                    </el-table-column>

                    <!-- Unit Price -->
                    <el-table-column label="单价" width="100" align="center">
                        <template #default="{ row }">
                            <span>¥ {{ row.price }}</span>
                        </template>
                    </el-table-column>

                    <!-- Discount -->
                    <el-table-column label="优惠" width="120" align="center">
                        <template #default="{ row }">
                            <div v-if="row.discountMoney > 0">
                                <div style="color: red"
                                    >- ¥{{ row.discountMoney }}</div
                                >
                            </div>
                            <div v-else>¥ 0</div>
                        </template>
                    </el-table-column>

                    <!-- Actual Payment -->
                    <el-table-column label="实收款" width="100" align="center">
                        <template #default="{ row }">
                            <span>¥ {{ row.payMoney }}</span>
                        </template>
                    </el-table-column>

                    <!-- Weight -->
                    <el-table-column label="重量" width="80" align="center">
                        <template #default="{ row }">
                            <span>0kg</span>
                        </template>
                    </el-table-column>
                </el-table>

                <!-- Summary Footer -->
                <div class="summary-footer">
                    <template
                        v-if="
                            detail.discountList &&
                            detail.discountList.length > 0
                        "
                    >
                        <div
                            class="summary-row"
                            v-for="(item, index) in detail.discountList"
                            :key="index"
                        >
                            <span>{{ item.discountActivityMsg || '-' }}:</span>
                            <span class="amount red"
                                >- ¥{{ item.discountMoney }}</span
                            >
                        </div>
                    </template>
                    <div class="summary-row" v-if="detail.reduceMoney > 0">
                        <span>分享降价:</span>
                        <span class="amount red"
                            >- ¥{{ detail.reduceMoney }}</span
                        >
                    </div>
                    <div class="summary-row">
                        <span>运费:</span>
                        <span class="amount">¥ {{ detail.expressMoney }}</span>
                    </div>
                    <div class="summary-row total">
                        <span>实收款:</span>
                        <span class="amount red large"
                            >¥ {{ detail.payMoney }}</span
                        >
                    </div>
                </div>
            </div>
        </ele-card>
    </div>
</template>

<script setup>
    const props = defineProps({
        detail: {
            type: Object,
            required: true,
            default: () => ({
                detailList: []
            })
        }
    });

    const getDetailStatusText = (status) => {
        const map = {
            1: '正常',
            2: '部分退款',
            3: '全部退款'
        };
        return map[status] || '';
    };

    const getConditionText = (type) => {
        const map = {
            1: '良好',
            2: '中等',
            3: '次品',
            4: '全新'
        };
        return map[type] || '良好';
    };

    const getRecycleStatusText = (status) => {
        const map = {
            1: '正在回收',
            2: '暂停回收',
            3: '未加入回收书单',
            4: '黑名单',
            5: '手动暂停'
        };
        return map[status] || '-';
    };

    const getStatusColor = (status) => {
        if (status === '2' || status === '3') return 'text-red';
        return '';
    };
</script>

<style scoped>
    .product-info {
        display: flex;
        flex-direction: column;
        gap: 4px;
    }

    .title {
        font-weight: 500;
        color: #303133;
    }

    .meta {
        font-size: 12px;
        color: #909399;
    }

    .tags {
        display: flex;
        gap: 8px;
        font-size: 12px;
    }

    .discount-tag {
        color: #e6a23c;
        background-color: #fdf6ec;
        padding: 2px 4px;
        border-radius: 4px;
    }

    .status-tag {
        color: #67c23a;
        background-color: #f0f9eb;
        padding: 2px 4px;
        border-radius: 4px;
    }

    .text-red {
        color: #f56c6c;
    }

    .summary-footer {
        margin-top: 20px;
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        gap: 8px;
        padding-right: 20px;
    }

    .summary-row {
        display: flex;
        align-items: center;
        gap: 12px;
        font-size: 14px;
        color: #606266;
    }

    .amount {
        font-weight: 500;
        color: #303133;
        min-width: 80px;
        text-align: right;
    }

    .amount.red {
        color: #f56c6c;
    }

    .amount.large {
        font-size: 18px;
        font-weight: bold;
    }

    .total {
        margin-top: 8px;
        padding-top: 12px;
        border-top: 1px solid #ebeef5;
    }
</style>
