<template>
    <div class="recycle-order-number flex flex-col items-start">
        <div class="common-text">
            <el-text>书名：</el-text>
            <el-text
                type="primary"
                class="cursor-pointer"
                @click="handleEdit"
                >{{ row.bookName }}</el-text
            >
        </div>

        <div class="flex w-full">
            <div class="flex flex-col" style="flex: 2">
                <div class="common-text">
                    <el-text>作 者：</el-text>
                    <el-text>{{ row.author || '-' }} </el-text>
                </div>
                <div class="common-text">
                    <el-text>ISBN：</el-text>
                    <el-text>{{ row.isbn }}</el-text>
                </div>
                <div class="common-text" v-if="showFormat">
                    <el-text>分类：</el-text>
                    <el-text>{{ row.cateName || '-' }}</el-text>
                </div>
                <div class="common-text">
                    <el-text>出版社：</el-text>
                    <el-text>{{ row.publish || '-' }}</el-text>
                </div>
                <div class="common-text">
                    <el-text>出版时间：</el-text>
                    <el-text>{{ publishDate }} </el-text>
                </div>
            </div>
            <div class="flex flex-col" style="flex: 1.8">
                <div class="common-text">
                    <el-text>定价：</el-text>
                    <el-text>￥ {{ row.price }}</el-text>
                </div>
                <div class="common-text" v-if="!showFormat">
                    <el-text>开本尺寸：</el-text>
                    <el-text>{{ row.bookFormat }}</el-text>
                </div>
                <div class="common-text" v-else>
                    <el-text>回收折扣：</el-text>
                    <el-text>{{ row.recycleDiscount }}折</el-text>
                </div>
                <div class="common-text">
                    <el-text>回收状态：</el-text>
                    <el-text v-if="row.bookStatus == 3">黑名单</el-text>
                    <el-text v-else-if="row.recycleStatus == 1"
                        >正在回收</el-text
                    >
                    <el-text v-else-if="row.recycleStatus == 2"
                        >收满暂停回收</el-text
                    >
                    <el-text v-else-if="row.recycleStatus == 3"
                        >手动暂停回收</el-text
                    >
                    <el-text v-else>-</el-text>
                    <!-- 1 正在回收 2 收满暂停回收 3 手动暂停回收 -->
                    <!-- <el-text>{{
                        row.recycleStatus == 1
                            ? '正在回收'
                            : row.recycleStatus == 2
                              ? '收满暂停回收'
                              : row.recycleStatus == 3
                                ? '手动暂停回收'
                                : '-'
                    }}</el-text> -->
                </div>
                <div class="common-text" v-if="showTag">
                    <el-text>所属类型：</el-text>
                    <el-text>{{ row.bookTagName }}</el-text>
                </div>
                <div class="common-text">
                    <el-text
                        >(已回收数量：{{ row.recycleNum || 0 }} 当前库存：{{
                            row.stockNum || 0
                        }})</el-text
                    >
                </div>
            </div>
        </div>

        <booksEdit ref="booksEditRef" @success="reload" />
    </div>
</template>

<script setup>
    import { dayjs } from 'element-plus';
    import { computed, ref } from 'vue';
    import booksEdit from '@/views/data/books/components/books-edit.vue';

    const props = defineProps({
        row: {
            type: Object,
            default: () => {}
        },
        showFormat: {
            type: Boolean,
            default: true
        },
        showTag: {
            type: Boolean,
            default: true
        }
    });

    const emit = defineEmits(['edit']);

    const publishDate = computed(() => {
        return props.row.pubDate
            ? dayjs(props.row.pubDate).format('YYYY-MM-DD')
            : '-';
    });

    const booksEditRef = ref(null);
    const handleEdit = () => {
        let params = {
            id: props.row.bookId || props.row.id
        };
        booksEditRef.value?.handleOpen(params);
        // emit('edit', props.row);
    };

    const reload = () => {
        emit('refresh');
    };
</script>

<style scoped>
    .cursor-pointer {
        cursor: pointer;
    }
</style>
