<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">
                    <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 class="common-text" v-if="showFormat">
                    <el-text>所属类型：</el-text>
                    <el-text>{{ row.bookTagName || '-' }}</el-text>
                </div>
                <div class="common-text" v-if="showFormat">
                    <el-text>回收状态：</el-text>
                    <dict-data
                        code="recycle_status"
                        :model-value="row.recycleStatus"
                        type="text"
                    />
                </div>
            </div>
            <div class="flex flex-col" style="flex: 1.5">
                <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>
                    <el-text
                        v-if="row.sugDiscountStr"
                        style="color: #f56c6c; margin-left: 10px"
                        >{{ row.sugDiscountStr }}</el-text
                    >
                </div>
                <div class="common-text" v-if="row.discountChangeLog">
                    <el-text style="color: #3ab54b"
                        >{{ row.discountChangeLog.userName }}：</el-text
                    >
                    <el-text style="color: #3ab54b">{{
                        row.discountChangeLog.changeTime
                    }}</el-text>
                </div>
                <div class="common-text">
                    <el-text>回收价格：</el-text>
                    <el-text>¥ {{ row.recyclePrice }}</el-text>
                </div>

                <div class="common-text">
                    <el-text>销售价格：</el-text>
                    <el-text>¥ {{ row.productPrice || 0 }}</el-text>
                    <el-icon
                        :size="14"
                        color="#f56c6c"
                        @click="handleEditProductPrice"
                        style="margin-left: 6px; position: relative; top: 1px"
                    >
                        <EditPen />
                    </el-icon>
                </div>

                <div class="common-text" v-if="row.productPriceChangeLog">
                    <el-text style="color: #3ab54b"
                        >{{ row.productPriceChangeLog.userName }}：</el-text
                    >
                    <el-text style="color: #3ab54b">{{
                        row.productPriceChangeLog.changeTime
                    }}</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>
    <ModifyProductPrice
        ref="productPriceDialogRef"
        @refresh="$emit('refresh')"
    />
</template>

<script setup>
    import { dayjs } from 'element-plus';
    import { computed, ref } from 'vue';
    import { EditPen } from '@element-plus/icons-vue';
    import ModifyProductPrice from './modify-product-price.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', 'refresh']);

    const productPriceDialogRef = ref(null);
    const booksEditRef = ref(null);

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

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

    const handleEditProductPrice = () => {
        productPriceDialogRef.value?.handleOpen(props.row);
    };

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

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