<!--
 * @Author: micky 1254597151@qq.com
 * @Date: 2023-11-24 16:51:05
 * @LastEditors: micky 1254597151@qq.com
 * @LastEditTime: 2023-12-20 20:21:38
 * @FilePath: \housekeeping-admin\src\components\link\activity-center.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
    <div>
        <div class="flex items-center">
            <span>名称搜索</span>
            <div class="ml-4">
                <el-input v-model="formData.name">
                    <template #append>
                        <el-button :icon="Search" @click="resetPage" />
                    </template>
                </el-input>
            </div>
        </div>
        <div class="mt-4">
            <el-scrollbar height="380px" class="mt-[20px]">
                <el-table :data="pager.lists" style="width: 100%" @row-click="rowClick">
                    <el-table-column min-width="40">
                        <template #default="{ row }">
                            <el-radio :label="row.id" :model-value="tableSelect">&nbsp;</el-radio>
                        </template>
                    </el-table-column>
                    <el-table-column prop="name" label="名称" min-width="100" />
                    <el-table-column label="封面图" min-width="200">
                        <template #default="{ row }">
                            <div>
                                <el-image :src="row.surfacePlot" class="w-[40px] h-[40px]" />
                            </div>
                        </template>
                    </el-table-column>
                </el-table>
            </el-scrollbar>
        </div>
        <div class="flex justify-end">
            <pagination v-model="pager" @change="getLists" layout="total, prev, pager, next, jumper" />
        </div>
    </div>
</template>

<script lang="ts" setup>
import { Search } from '@element-plus/icons-vue'
import { apiActivityLists } from '@/api/service/activity'
import { usePaging } from '@/hooks/usePaging'
import type { PropType } from 'vue'
import { LinkTypeEnum, type Link } from '.'

defineProps({
    modelValue: {
        type: Object as PropType<Link>,
        default: () => ({})
    }
})
const emit = defineEmits<{
    (event: 'update:modelValue', value: Link): void
}>()

const formData = ref({
    name: '' // 活动名称
})

const tableSelect = ref()
const rowClick = (row: any) => {
    tableSelect.value = row.id
    emit('update:modelValue', {
        path: `/pages/activate/index?id=${row.id}`,
        query: {
            id: row.id,
            name: row.name
        },
        type: LinkTypeEnum.ACTIVITY_CENTER
    })
}

//分页组件
const { pager, getLists, resetPage, resetParams } = usePaging({
    fetchFun: apiActivityLists,
    params: formData.value
})

getLists()
</script>

<style></style>
