<template>
    <ele-page class="order-detail">
        <ele-card class="order-status" header="订单状态">
            <orderStatus
                :status="detail.status"
                :logVoList="detail.logVoList"
            />
        </ele-card>
        <ele-card
            class="order-base"
            header="订单基本信息"
            :body-style="{ paddingTop: '15px' }"
        >
            <orderBaseInfo :detail="detail" />
        </ele-card>
        <ele-card
            class="order-book-list"
            header="图书清单"
            :body-style="{ paddingTop: '15px' }"
        >
            <ele-data-table
                :data="detail.detailVoList"
                :columns="columns"
                rowKey="id"
            >
                <template #bookName="{ row }">
                    <div class="book-name">
                        <img
                            :src="row.cover"
                            style="width: 70px; height: 70px"
                            alt=""
                        />
                        <div
                            style="
                                display: flex;
                                flex-direction: column;
                                margin-left: 10px;
                            "
                        >
                            <div style="color: #1677ff">{{ row.bookName }}</div>
                            <div style="color: #666">{{ row.isbn }}</div>
                        </div>
                    </div>
                </template>
            </ele-data-table>
        </ele-card>

        <ele-card class="order-service" header="订单服务">
            <div>
                <el-tag size="large" style="margin-right: 20px"
                    >免费退回</el-tag
                >
                <el-tag size="large" style="margin-right: 20px">{{
                    verifyPeriodTag
                }}</el-tag>
                <el-tag size="large" style="margin-right: 20px"
                    >卖亏必赔</el-tag
                >
                <el-tag size="large">极速打款</el-tag>
            </div>
        </ele-card>

        <ele-card class="order-note" header="审核计价说明">
            <div
                >品相良好：按原始回收折扣计价；品相一般：按原始回收折扣*0.7计价；品相极差：不收。</div
            >
        </ele-card>
        <ele-card class="order-freight" header="物流动态">
            <orderFreightStatus :records="detail.trackingVoList" />
        </ele-card>
    </ele-page>
</template>

<script setup>
    import orderStatus from '@/views/recycleOrder/needReturned/components/order-status.vue';
    import orderBaseInfo from '@/views/recycleOrder/needReturned/components/order-base-info.vue';
    import orderFreightStatus from '@/views/recycleOrder/needReturned/components/order-freight-status.vue';

    const emit = defineEmits(['refresh']);
    const props = defineProps({
        detail: {
            type: Object,
            default: () => ({})
        }
    });

    const verifyPeriodTag = computed(() => {
        const days = props.detail.verifyPeriodDays;
        if (days == 7) return '7天验';
        if (days == 15) return '15天验';
        return '72小时验';
    });

    const columns = reactive([
        {
            type: 'index',
            label: '序号',
            width: 80
        },
        {
            label: '图书名称',
            prop: 'bookName',
            slot: 'bookName'
        },
        {
            label: '数量',
            prop: 'refundNum',
            width: 100,
            formatter: (row) => {
                return 'x' + row.refundNum;
            }
        },
        {
            label: '审核信息',
            prop: 'commentCom',
            formatter: (row) => {
                return row.commentCom && row.commentCom.length > 0
                    ? row.commentCom.join(';')
                    : '-';
            }
        }
    ]);

    // 其余审核良好
    const bookListRef = ref(null);
    function handleOtherAuditGood() {
        bookListRef.value?.handleOtherAuditGood();
    }
    defineExpose({
        handleOtherAuditGood
    });
</script>
<style lang="scss" scoped>
    .book-name {
        display: flex;
        align-items: start;
    }
</style>
