<template>
    <div class="distributor-lists">
        <el-card class="!border-none" shadow="never">
            <el-form ref="formRef" class="mb-[-16px]" :model="queryParams" :inline="true" @submit.native.prevent>
                <el-form-item label="名称" prop="groupName">
                    <el-input class="w-[280px]" v-model="queryParams.name" clearable />
                </el-form-item>
                <el-form-item label="状态">
                    <el-select v-model="queryParams.status" placeholder="请选择" class="ls-input">
                        <el-option label="全部" value></el-option>
                        <el-option label="启用" value="1"></el-option>
                        <el-option label="禁用" value="0"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="getLists">查询</el-button>
                    <el-button @click="resetParams">重置</el-button>
                </el-form-item>
            </el-form>
        </el-card>
        <el-card class="!border-none mt-4" shadow="never">
            <div class="flex">
                <el-button type="primary" @click="$router.push('activity/form')">新增</el-button>
                <el-button type="danger" @click="handleDelete('')" :disabled="isDisabled">批量删除</el-button>
            </div>
            <div class="mt-3">
                <el-table
                    ref="tableRef"
                    class="mt-4"
                    size="large"
                    v-loading="loading"
                    :data="pager.lists"
                    row-key="id"
                    @selection-change="handleSelectionChange"
                >
                    <el-table-column type="selection" width="55" :reserve-selection="true" />
                    <el-table-column label="名称" prop="name" />
                    <el-table-column label="封面图" prop="surfacePlot">
                        <template #default="scope">
                            <el-image
                                style="width: 60px; height: 60px"
                                :src="scope.row.surfacePlot"
                                :preview-src-list="[scope.row.surfacePlot]"
                                :hide-on-click-modal="true"
                                :preview-teleported="true"
                                :fit="'contain'"
                            />
                        </template>
                    </el-table-column>
                    <el-table-column prop="status" label="状态" min-width="80">
                        <template #default="{ row }">
                            <el-switch v-model="row.status" :active-value="1" :inactive-value="0" @change="changeStatus(row)" />
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" width="300" fixed="right">
                        <template #default="{ row }">
                            <div class="flex">
                                <router-link
                                    class="mr-4"
                                    :to="{
                                        path: 'activity/form',
                                        query: {
                                            id: row.id
                                        }
                                    }"
                                >
                                    <el-link type="primary" :underline="false">编辑</el-link>
                                </router-link>
                                <el-button type="danger" link @click="handleDelete(row.id)">删除</el-button>
                            </div>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <div class="flex justify-end mt-4">
                <pagination v-model="pager" @change="getLists" />
            </div>
        </el-card>
    </div>
</template>

<script lang="ts" setup>
import { reactive, ref } from 'vue'
import type { ElTable, FormInstance } from 'element-plus'
import Pagination from '@/components/pagination/index.vue'
import { usePaging } from '@/hooks/usePaging'
import { useRequest } from '@/hooks/useFetchData'
import { apiActivityLists, apiActivityDel, apiActivityEdit } from '@/api/service/activity'
import type { DistributorGroup } from '@/api/distributor/group'
import feedback from '@/utils/feedback'

const router = useRouter()

const tableRef = ref<InstanceType<typeof ElTable>>()
const loading = ref(false)
const selectedIds = ref<number[]>([])
const queryParams = reactive({
    status: '',
    name: ''
})

const { pager, getLists, resetPage, resetParams } = usePaging({
    fetchFun: apiActivityLists,
    params: queryParams
})

getLists()

const isDisabled = computed(() => !selectedIds.value.length)

/**多选操作 */
const handleSelectionChange = (val: DistributorGroup[]) => {
    selectedIds.value = val.map(item => item.id) as number[]
}
/**删除 */
const handleDelete = async (id: number): Promise<void> => {
    await feedback.confirm('确认删除？请谨慎操作。')
    const ids = id ? [id] : selectedIds.value
    await apiActivityDel({ ids })
    feedback.msgSuccess('操作成功')
    getLists()
    tableRef.value?.clearSelection()
}
const changeStatus = async (item: any): Promise<void> => {
    await apiActivityEdit(item)
    feedback.msgSuccess('操作成功')
}
</script>
