<template>
    <ele-modal
        :width="width"
        v-model="visible"
        :title="title"
        position="center"
        :body-style="{ padding: '0 20px 20px' }"
    >
        <!-- Search -->
        <div class="p-0 flex justify-between items-start">
            <el-form :inline="true" :model="searchForm" label-width="0px">
                <el-form-item>
                    <el-input
                        v-model="searchForm.showName"
                        placeholder="请输入名称"
                        clearable
                    />
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="handleSearch"
                        >查询</el-button
                    >
                    <el-button @click="handleReset">重置</el-button>
                </el-form-item>
            </el-form>
        </div>

        <!-- Table -->
        <common-table
            ref="tableRef"
            :columns="columns"
            :page-config="pageConfig"
            :bodyStyle="{ padding: '0' }"
            @selection-change="handleSelectionChange"
            :toolbar="false"
        >
            <template #imgUrl="{ row }">
                <el-image
                    :src="row.imgUrl"
                    class="w-10 h-10 object-cover"
                    :preview-src-list="[row.imgUrl]"
                    preview-teleported
                    fit="cover"
                >
                    <template #error>
                        <div
                            class="w-10 h-10 bg-gray-100 flex items-center justify-center text-gray-400"
                        >
                            <el-icon>
                                <Picture />
                            </el-icon>
                        </div>
                    </template>
                </el-image>
            </template>
            <template #showStatus="{ row }">
                <span
                    :class="
                        row.showStatus === 1
                            ? 'text-green-500'
                            : 'text-gray-500'
                    "
                >
                    {{ row.showStatus === 1 ? '已上架' : '已下架' }}
                </span>
            </template>
        </common-table>

        <template #footer>
            <div class="flex justify-end items-center">
                <el-button @click="handleCancel">取消</el-button>
                <el-button type="primary" @click="handleConfirm"
                    >确定</el-button
                >
            </div>
        </template>
    </ele-modal>
</template>

<script setup>
    import { ref, reactive, watch, nextTick } from 'vue';
    import { Picture } from '@element-plus/icons-vue';
    import CommonTable from '@/components/CommonPage/CommonTable.vue';

    const props = defineProps({
        title: { type: String, default: '选择书单' },
        width: { type: String, default: '900px' },
        cateType: { type: Number, default: 2 }, // 2: Booklist, 1: Topic
        defaultSelected: { type: Array, default: () => [] }
    });

    const emit = defineEmits(['update:modelValue', 'confirm']);

    const visible = defineModel({ type: Boolean });
    const tableRef = ref(null);
    const searchForm = reactive({
        showName: ''
    });

    const currentSelections = ref([]);

    // Columns Configuration
    const columns = [
        {
            type: 'selection',
            width: 55,
            align: 'center',
            reserveSelection: true
        },
        {
            label: '封面',
            slot: 'imgUrl',
            prop: 'imgUrl',
            width: 80,
            align: 'center'
        },
        {
            prop: 'showName',
            label: '名称',
            minWidth: 200,
            showOverflowTooltip: true
        },
        {
            label: '状态',
            prop: 'showStatus',
            slot: 'showStatus',
            align: 'center',
            width: 100
        },
        { prop: 'createTime', label: '创建时间', width: 180, align: 'center' }
    ];

    const pageConfig = reactive({
        pageUrl: '/book/showIndex/list',
        rowKey: 'id',
        tool: false,
        params: {
            cateType: props.cateType
        }
    });

    const handleSearch = () => {
        tableRef.value?.reload({ ...searchForm });
    };

    const handleReset = () => {
        searchForm.showName = '';
        handleSearch();
    };

    const handleSelectionChange = (rows) => {
        currentSelections.value = rows;
    };

    const handleCancel = () => {
        visible.value = false;
    };

    const handleConfirm = () => {
        const selections =
            tableRef.value?.getSelections() || currentSelections.value;
        emit('confirm', selections);
        visible.value = false;
    };

    watch(visible, (val) => {
        if (val) {
            nextTick(() => {
                handleSearch();
                // Note: CommonTable might need setSelectedRows to be exposed or implemented
                if (props.defaultSelected && props.defaultSelected.length > 0) {
                    if (tableRef.value?.setSelectedRows) {
                        tableRef.value.setSelectedRows(props.defaultSelected);
                    }
                }
            });
        }
    });
</script>
