<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.username" placeholder="请输入账号名称" clearable></el-input>
                </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>
            <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 #username="{ row }">
                    <el-space>
                        <span>{{ row.username }}</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>
            <div class="flex justify-end mt-[10px]">
                <pagination v-model="pager" @change="fetchAccountList" layout="total, prev, pager, next, jumper" class="mb-[10px]" />
            </div>
        </el-space>
    </ProDialog>
</template>

<script setup lang="ts">
import { subAccountEdit, subAccountList } from '@/api/account_center/sub_account'
import ProDialog, { type IParams } from '@/components/ProDialog/index.vue'
import { groupLeaderEnum } from '@/enums'
import feedback from '@/utils/feedback'

const emit = defineEmits(['refreshList'])

const proDialogRef = ref<InstanceType<typeof ProDialog>>()
const searchForm = ref({
    username: ''
})
const pager = ref({
    page: 1,
    size: 10,
    count: 0
})
const loading = ref(false)
const proTableRef = ref()
const tableData = ref<any[]>([])
const columns = reactive([
    { prop: 'radio', label: '单选', width: 70 },
    { prop: 'username', label: '账号名称' },
    { prop: 'mobile', label: '联系电话' },
    { prop: 'organizationName', label: '所属组织' },
    { prop: 'postName', label: '岗位' },
    { prop: 'status', label: '账号状态' }
])
const radio = ref()
const organizationId = ref()
const selectedAccount = ref()
const isGroupLeader = computed(() => (groupLeader: number) => groupLeader == groupLeaderEnum.YES)

const fetchAccountList = async () => {
    loading.value = true
    try {
        const params = {
            organizationId: organizationId.value,
            ...searchForm.value
        }
        const result = await subAccountList(params)
        tableData.value = result
        // 如果已设置组长，则需要默认回显
        if (tableData.value.length > 0) {
            radio.value = tableData.value.find(item => item.groupLeader == groupLeaderEnum.YES)?.id
        }
    } catch (error) {}
    loading.value = false
}
const handleSearch = () => {
    fetchAccountList()
}
const handleReset = () => {
    searchForm.value.username = ''
    fetchAccountList()
}
const openDialog = (params: IParams) => {
    const { id } = params.data
    organizationId.value = id
    fetchAccountList()
    proDialogRef.value?.openDialog(params)
}
const handleCancel = (callback: () => void) => {
    callback()
}
const handleConfirm = async (callback: () => void) => {
    const { id, groupLeader } = selectedAccount.value
    try {
        const params = {
            id,
            groupLeader: isGroupLeader.value(groupLeader) ? groupLeaderEnum.NO : groupLeaderEnum.YES
        }
        await subAccountEdit(params)
        feedback.msgSuccess('设置成功')
        callback()
        emit('refreshList')
    } catch (error) {}
}

watch(
    () => radio.value,
    newVal => {
        if (newVal) {
            selectedAccount.value = tableData.value.find(item => item.id == newVal)
        }
    }
)
defineExpose({
    openDialog
})
</script>
<style scoped></style>
