<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
            v-if="verifyPeriodText"
            class="order-settlement"
            header="结算方式"
            :body-style="{ paddingTop: '15px' }"
        >
            <orderSettlement :detail="detail" />
        </ele-card>
        <ele-card
            class="order-book-list"
            header="图书清单"
            :body-style="{ paddingTop: '15px' }"
        >
            <template #extra v-if="detail.status < 8">
                <el-button type="danger" v-if="!isExpand" @click="handleExpand"
                    >展开列表>></el-button
                >
                <el-button type="danger" v-else @click="handleCollapse"
                    >折叠列表>></el-button
                >
            </template>

            <orderBookList
                :isExpand="detail.status >= 8 ? true : isExpand"
                :detail="detail"
                @refresh="emit('refresh')"
                ref="bookListRef"
                @close="emit('close')"
            />
        </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/detail/order-status.vue';
    import orderBaseInfo from '@/views/recycleOrder/detail/order-base-info.vue';
    import orderFreightStatus from '@/views/recycleOrder/detail/order-freight-status.vue';
    import orderBookList from '@/views/recycleOrder/detail/order-book-list.vue';
    import orderSettlement from '@/views/recycleOrder/detail/order-settlement.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 VERIFY_PERIOD_MAP = {
        7: '7天极速验货',
        15: '15天安心验货'
    };

    const verifyPeriodText = computed(() => {
        return VERIFY_PERIOD_MAP[props.detail.verifyPeriodDays] || '';
    });

    const isExpand = ref(false);
    const handleExpand = () => {
        isExpand.value = true;
    };
    const handleCollapse = () => {
        isExpand.value = false;
    };

    // 其余审核良好
    const bookListRef = ref(null);
    function handleOtherAuditGood() {
        bookListRef.value?.handleOtherAuditGood();
    }
    defineExpose({
        handleOtherAuditGood
    });
</script>
