<template>
    <div class="refund-item">
        <!-- Header -->
        <div class="refund-header">
            <el-checkbox v-model="item.checked" style="margin-right: 12px" />
            <el-tag type="success" size="small" class="mr-2" effect="plain">
                {{ getRefundTypeText(item.refundType) }}
            </el-tag>
            <span class="mr-4 text-black-600"
                >退款编号: {{ item.refundOrderId }}</span
            >
            <span class="mr-4 text-black-600"
                >原订单编号: {{ item.originOrderId }}</span
            >
            <span class="mr-4 text-black-600"
                >申请时间: {{ item.createTime }}</span
            >
            <span class="mr-4 text-black-600" v-if="item.cancelStatus == 2">
                <el-tag type="info" size="small">已撤销</el-tag>
            </span>
        </div>

        <!-- Body -->
        <div class="refund-body">
            <!-- Product Info (Flex 3) -->
            <div class="col-product-wrapper">
                <div
                    v-for="(product, idx) in item.detailList"
                    :key="idx"
                    class="product-row"
                >
                    <div class="product-info">
                        <el-image
                            :src="product.cover"
                            class="product-img"
                            fit="cover"
                        />
                        <div class="product-detail">
                            <div class="product-title">{{
                                product.bookName
                            }}</div>
                            <div class="product-isbn">
                                ISBN:
                                <span class="link">{{ product.isbn }}</span>
                                <el-icon
                                    class="cursor-pointer ml-1"
                                    @click="handleCopy(product.isbn)"
                                >
                                    <CopyDocument />
                                </el-icon>
                            </div>
                            <div class="product-price">
                                <span class="mr-2"
                                    >退回数量:
                                    {{ product.refundNum || product.num }}</span
                                >
                                <span>单价: ¥ {{ product.price }}</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Refund Amount (Flex 1) -->
            <div class="col-merged col-amount">
                <div class="amount">申请: ¥ {{ item.refundMoney }}</div>
                <div
                    class="final-amount text-green-500"
                    v-if="item.refundMoneyFinal"
                    >实退: ¥ {{ item.refundMoneyFinal }}
                </div>
                <div class="money-status text-xs text-gray-400 mt-1">
                    {{ getMoneyStatusText(item.moneyStatus) }}
                </div>
            </div>

            <!-- Buyer (Flex 1) -->
            <div class="col-merged col-buyer">
                <div class="buyer-info">
                    <el-avatar :size="30" :src="item.avatar" />
                    <div class="buyer-name">{{ item.userNick }}</div>
                    <div class="buyer-id text-xs text-gray-400"
                        >ID: {{ item.userId }}</div
                    >
                </div>
            </div>

            <!-- Reason (Flex 1) -->
            <div class="col-merged col-reason">
                <div class="font-bold">{{ item.refundReason }}</div>
                <div class="text-xs text-gray-500 mt-1"
                    >货物状态: {{ getShopStatusText(item.shopStatus) }}</div
                >
            </div>

            <!-- Logistics (Flex 1.5) -->
            <div
                class="col-merged col-logistics flex flex-col justify-center items-center w-full"
            >
                <div
                    class="logistics-row flex justify-center items-center mb-2 w-full"
                >
                    <span class="text-gray-600"
                        >商家发货：{{
                            item.shopStatus == 2 ? '已收货' : '未发货'
                        }}</span
                    >
                </div>
                <div
                    class="logistics-row flex justify-center items-center w-full"
                    v-if="String(item.refundType) === '1'"
                >
                    <span class="text-gray-600"
                        >买家退货：{{ getBuyerLogisticsStatus(item) }}</span
                    >
                </div>
            </div>

            <!-- Status (Flex 1) -->
            <div class="col-merged col-status">
                <div
                    class="font-bold mb-1"
                    :class="{
                        'text-red-500': ['5', '6', '10', '11'].includes(
                            item.status
                        )
                    }"
                >
                    <dict-data
                        code="shop_refund_status"
                        v-model="item.status"
                        type="text"
                    />

                    <el-button
                        class="ml-2"
                        type="primary"
                        size="small"
                        @click="$emit('confirm-refund', item)"
                        v-if="item.status == 9 && item.moneyStatus == 1"
                        >同意退款</el-button
                    >
                </div>
                <el-button
                    link
                    type="primary"
                    size="small"
                    @click="$emit('view-detail', item)"
                    >[查看详情]</el-button
                >
            </div>

            <!-- Action (Flex 1) -->
            <div class="col-merged col-action">
                <div
                    class="action-btn text-green-500"
                    @click="$emit('push-sms', item)"
                    >[短信记录]</div
                >
                <div
                    class="action-btn text-orange-500"
                    @click="$emit('send-packet', item)"
                    >[发红包]</div
                >
            </div>
        </div>
    </div>
</template>

<script setup>
    import { CopyDocument } from '@element-plus/icons-vue';
    import { EleMessage } from 'ele-admin-plus/es';
    import { useClipboard } from '@vueuse/core';

    const props = defineProps({
        item: {
            type: Object,
            required: true
        }
    });

    defineEmits([
        'push-sms',
        'send-packet',
        'view-detail',
        'view-logistics',
        'confirm-refund'
    ]);

    const { copy } = useClipboard();

    const handleCopy = async (text) => {
        try {
            await copy(text);
            EleMessage.success('复制成功');
        } catch (e) {
            EleMessage.error('复制失败');
        }
    };

    const getRefundTypeText = (type) => {
        const map = {
            0: '极速退款',
            1: '退货退款',
            2: '仅退款',
            3: '缺货退款'
        };
        return map[type] || type;
    };

    const getShopStatusText = (status) => {
        const map = {
            1: '未收到货',
            2: '已收到货'
        };
        return map[status] || '-';
    };

    const getBuyerLogisticsStatus = (item) => {
        const status = String(item.status);
        if (status === '7') return '运输中';
        if (['8', '9', '10'].includes(status) || item.finishTime)
            return '已收货';
        return '未发货';
    };

    const getMoneyStatusText = (status) => {
        const map = {
            1: '未退还',
            2: '已退还',
            3: '已到账'
        };
        return map[status] || '未退还';
    };
</script>

<style lang="scss" scoped>
    .refund-item {
        border: 1px solid #ebeef5;
        margin-bottom: 15px;
        background: #fff;

        .refund-header {
            background-color: #f5f7fa;
            padding: 8px 15px;
            font-size: 13px;
            display: flex;
            align-items: center;
            border-bottom: 1px solid #ebeef5;
        }

        .refund-body {
            display: flex;
            align-items: stretch;

            .col-product-wrapper {
                flex: 3;
                display: flex;
                flex-direction: column;
                border-right: 1px solid #ebeef5;

                .product-row {
                    display: flex;
                    padding: 15px;
                    border-bottom: 1px solid #ebeef5;

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

                    .product-info {
                        display: flex;
                        width: 100%;

                        .product-img {
                            width: 80px;
                            height: 80px;
                            margin-right: 15px;
                            border-radius: 4px;
                            border: 1px solid #eee;
                        }

                        .product-detail {
                            font-size: 13px;
                            flex: 1;

                            .product-title {
                                font-weight: 500;
                                margin-bottom: 5px;
                                color: #333;
                            }

                            .product-isbn {
                                color: #666;
                                margin-bottom: 3px;
                                font-size: 12px;

                                .link {
                                    color: #409eff;
                                }
                            }

                            .product-price {
                                margin-top: 5px;
                                color: #333;
                            }
                        }
                    }
                }
            }

            .col-merged {
                border-right: 1px solid #ebeef5;
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                padding: 10px;
                text-align: center;
                font-size: 13px;

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

                &.col-amount {
                    flex: 1;
                }

                &.col-buyer {
                    flex: 1;
                }

                &.col-reason {
                    flex: 1;
                }

                &.col-logistics {
                    flex: 1.5;
                    align-items: flex-start;
                    padding-left: 15px;

                    .logistics-row {
                        display: flex;
                        align-items: center;
                        margin-bottom: 4px;
                        color: #666;
                    }
                }

                &.col-status {
                    flex: 1;
                }

                &.col-action {
                    flex: 1;
                }
            }
        }

        .action-btn {
            cursor: pointer;
            margin-bottom: 5px;
            font-size: 13px;

            &:hover {
                opacity: 0.8;
            }
        }
    }
</style>
