<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.groupName" clearable />
                </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">
                <GroupForm @refresh="getLists" type="add" title="新增组别" id="" />
                <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="groupName" />
                    <el-table-column label="备注" prop="remark"></el-table-column>
                    <el-table-column label="操作" width="300" fixed="right">
                        <template #default="{ row }">
                            <div class="flex">
                                <GroupForm @refresh="getLists" type="edit" title="编辑" :id="row.id" />
                                <el-button v-perms="['system:distributorGroup:del']" type="danger" link @click="handleDelete(row)">删除</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 { apiDistributorGroupDel, apiDistributorGroupLists } from '@/api/distributor/group'
import type { DistributorGroup } from '@/api/distributor/group'
import { toast, parseEmpty } from '@/utils/util'
import feedback from '@/utils/feedback'
import GroupForm from './components/group_form.vue'

const router = useRouter()

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

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

getLists()

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

/**多选操作 */
const handleSelectionChange = (val: DistributorGroup[]) => {
    selectedIds.value = val.map(item => item.id) as number[]
}
/**删除 */
const handleDelete = (row?: DistributorGroup) => {
    row && tableRef.value?.toggleRowSelection(row, true)
    feedback
        .confirm('确定要删除？')
        .then(() => {
            console.log('333')

            const { runFn } = useRequest({
                apiFn: apiDistributorGroupDel,
                onSuccess: res => {
                    feedback.msgSuccess('删除成功')
                    getLists()
                    tableRef.value?.clearSelection()
                }
            })
            runFn({ ids: !row ? selectedIds.value : [row?.id] })
        })
        .catch(() => {
            toast('取消删除', 'warning')
        })
}
</script>
