<template>
    <div class="default-main ba-table-box">
        <el-alert class="ba-table-alert" v-if="baTable.table.remark" :title="baTable.table.remark" type="info" show-icon />

        <!-- 表格顶部菜单 -->
        <TableHeader
            :buttons="['refresh', 'add', 'edit', 'delete', 'comSearch', 'quickSearch', 'columnDisplay']"
            :quick-search-placeholder="t('Quick search placeholder', { fields: t('auth.admin.username') + '/' + t('auth.admin.nickname') })"
        />

        <!-- 表格 -->
        <Table />

        <!-- 表单 -->
        <PopupForm />
    </div>
</template>

<script setup lang="ts">
import { provide } from 'vue'
import baTableClass from '/@/utils/baTable'
import PopupForm from './popupForm.vue'
import Table from '/@/components/table/index.vue'
import TableHeader from '/@/components/table/header/index.vue'
import { defaultOptButtons } from '/@/components/table'
import { baTableApi } from '/@/api/common'
import { resetTotp } from '/@/api/backend/auth/admin'
import { useAdminInfo } from '/@/stores/adminInfo'
import { useSiteConfig } from '/@/stores/siteConfig'
import { useI18n } from 'vue-i18n'

defineOptions({
    name: 'auth/admin',
})

const { t } = useI18n()
const adminInfo = useAdminInfo()
const siteConfig = useSiteConfig()

/** 超管或拥有 resetTotp 权限，且不能操作自己 */
const canManageTotp = (row: TableRow) => {
    if (!siteConfig.totpEnable) {
        return false
    }
    if (row.id == adminInfo.id) {
        return false
    }
    return adminInfo.super
}

const isTotpBound = (row: TableRow) => {
    return row.totp_bound === true || row.totp_bound === 1 || row.totp_bound === '1'
}

const optButtons: OptButton[] = [
    {
        render: 'confirmButton',
        name: 'resetTotp',
        title: 'auth.admin.Reset authenticator',
        text: '',
        type: 'warning',
        icon: 'fa fa-refresh',
        class: 'table-row-reset-totp',
        popconfirm: {
            confirmButtonText: t('Confirm'),
            cancelButtonText: t('Cancel'),
            confirmButtonType: 'warning',
            title: t('auth.admin.Reset authenticator confirm'),
        },
        disabledTip: false,
        display: (row: TableRow) => canManageTotp(row) && isTotpBound(row),
        click: (row: TableRow) => {
            resetTotp(row.id).then(() => {
                baTable.onTableHeaderAction('refresh', {})
            })
        },
    },
    {
        render: 'tipButton',
        name: 'bindTip',
        title: 'auth.admin.Pending bind tip',
        text: '',
        type: 'info',
        icon: 'fa fa-shield',
        class: 'table-row-bind-tip',
        disabledTip: false,
        display: (row: TableRow) => canManageTotp(row) && !isTotpBound(row),
        disabled: () => true,
    },
    ...defaultOptButtons(['edit', 'delete']).map((btn) => {
        if (btn.name === 'delete') {
            return {
                ...btn,
                display: (row: TableRow) => row.id != adminInfo.id,
            }
        }
        return btn
    }),
]

const baTable = new baTableClass(
    new baTableApi('/admin/auth.Admin/'),
    {
        column: [
            { type: 'selection', align: 'center', operator: false },
            { label: t('Id'), prop: 'id', align: 'center', operator: '=', operatorPlaceholder: t('Id'), width: 70 },
            { label: t('auth.admin.username'), prop: 'username', align: 'center', operator: 'LIKE', operatorPlaceholder: t('Fuzzy query') },
            { label: t('auth.admin.nickname'), prop: 'nickname', align: 'center', operator: 'LIKE', operatorPlaceholder: t('Fuzzy query') },
            { label: t('auth.admin.group'), prop: 'group_name_arr', align: 'center', minWidth: 120, operator: false, render: 'tags' },
            { label: t('auth.admin.avatar'), prop: 'avatar', align: 'center', render: 'image', operator: false },
            { label: t('auth.admin.email'), prop: 'email', align: 'center', operator: 'LIKE', operatorPlaceholder: t('Fuzzy query') },
            { label: t('auth.admin.mobile'), prop: 'mobile', align: 'center', operator: 'LIKE', operatorPlaceholder: t('Fuzzy query') },
            {
                label: t('auth.admin.Google Authenticator'),
                prop: 'totp_bound',
                align: 'center',
                render: 'tag',
                custom: { true: 'success', false: 'info' },
                replaceValue: { true: t('auth.admin.Bound'), false: t('auth.admin.Not bound') },
                operator: false,
                width: 120,
                show: siteConfig.totpEnable,
            },
            {
                label: t('auth.admin.Last login'),
                prop: 'last_login_time',
                align: 'center',
                render: 'datetime',
                sortable: 'custom',
                operator: 'RANGE',
                width: 160,
            },
            { label: t('Create time'), prop: 'create_time', align: 'center', render: 'datetime', sortable: 'custom', operator: 'RANGE', width: 160 },
            {
                label: t('State'),
                prop: 'status',
                align: 'center',
                render: 'tag',
                custom: { disable: 'danger', enable: 'success' },
                replaceValue: { disable: t('Disable'), enable: t('Enable') },
            },
            {
                label: t('Operate'),
                align: 'center',
                width: '170',
                render: 'buttons',
                buttons: optButtons,
                operator: false,
            },
        ],
        dblClickNotEditColumn: [undefined, 'status'],
    },
    {
        defaultItems: {
            status: 'enable',
        },
    }
)

provide('baTable', baTable)

baTable.mount()
baTable.getData()
</script>

<style scoped lang="scss"></style>
