<template>
    <ProDialog ref="proDialogRef" @handle-cancel="handleCancel" @handle-confirm="handleConfirm">
        <el-space direction="vertical" alignment="normal">
            <el-form :model="searchForm" ref="userFormRef" :inline="true" label-width="auto" @submit.native.prevent>
                <el-form-item label="账号名称">
                    <el-input class="ls-input" v-model="searchForm.accountName" placeholder="请输入账号名称" clearable></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary">搜索</el-button>
                    <el-button>重置</el-button>
                </el-form-item>
            </el-form>
            <ProTable ref="proTableRef" :columns="columns" :tableData="tableData" :loading="loading" :maxHeight="530">
                <template #radio="{ row }">
                    <el-radio v-model="radio" :label="row.id">&nbsp;</el-radio>
                </template>
                <template #accountName="{ row }">
                    <el-space>
                        <span>{{ row.accountName }}</span>
                        <span
                            v-if="isGroupLeader(row.groupLeader)"
                            class="px-[6px] text-green border border-solid border-green rounded-[4px] text-center text-xs"
                        >
                            组长
                        </span>
                    </el-space>
                </template>
                <template #accountStatus="{ row }">
                    <el-switch v-model="row.accountStatus" disabled :active-value="1" :inactive-value="0" />
                </template>
            </ProTable>
            <!-- <pagination v-model="pager" @change="getLists" layout="total, prev, pager, next, jumper" class="mb-[10px]" /> -->
        </el-space>
    </ProDialog>
</template>

<script setup lang="ts">
import ProDialog, { type IParams } from '@/components/ProDialog/index.vue'
const proDialogRef = ref<InstanceType<typeof ProDialog>>()

const emit = defineEmits(['refreshList'])
const searchForm = ref({
    accountName: ''
})

const loading = ref(false)
const proTableRef = ref()
const tableData = ref<any[]>([])
const columns = reactive([
    { prop: 'radio', label: '单选', width: 70 },
    { prop: 'accountName', label: '账号名称' },
    { prop: 'mobile', label: '联系电话' },
    { prop: 'organization', label: '所属组织' },
    { prop: 'position', label: '岗位' },
    { prop: 'accountStatus', label: '账号状态' }
])
const radio = ref()
const isGroupLeader = computed(() => (groupLeader: number) => groupLeader == 1)

watch(
    () => proDialogRef.value?.dialogVisible,
    val => {
        if (val) {
            loading.value = true
            setTimeout(() => {
                tableData.value = [
                    {
                        id: 1,
                        accountName: '张三',
                        mobile: '18138952909',
                        organization: '广州团队-A组',
                        position: '电销老师',
                        accountStatus: 1,
                        groupLeader: 1
                    },
                    {
                        id: 2,
                        accountName: '李四',
                        mobile: '18138952909',
                        organization: '广州团队-A组',
                        position: '电销老师',
                        accountStatus: 1,
                        groupLeader: 0
                    }
                ]
                loading.value = false
                // 如果已设置组长，则需要默认回显
                if (tableData.value.length > 0) {
                    radio.value = tableData.value.find(item => item.groupLeader == 1)?.id
                }
            }, 500)
        }
    }
)
const openDialog = (params: IParams) => {
    proDialogRef.value?.openDialog(params)
}
const handleCancel = (callback: () => void) => {
    callback()
}
const handleConfirm = (callback: () => void) => {
    callback()
    emit('refreshList')
}
defineExpose({
    openDialog
})
</script>
<style scoped></style>
