<script setup lang="tsx">
import { reactive, unref } from 'vue'
import { getUserGroup, addUserGroup, delUserGroup, putUserGroup } from '@/api/user'
import { useTable } from '@/hooks/web/useTable'
import { useI18n } from '@/hooks/web/useI18n'
import { Table, TableColumn } from '@/components/Table'
import { ElMessage, ElMessageBox, ElDivider } from 'element-plus'
import { ContentWrap } from '@/components/ContentWrap'
import { BaseButton } from '@/components/Button'
const { t } = useI18n()

const { tableRegister, tableState, tableMethods } = useTable({
  fetchDataApi: async () => {
    const res = await getUserGroup({
      page: unref(currentPage) || 1,
      limit: unref(pageSize) || 10
    })
    return {
      list: res.data.list || [],
      total: res.data.count || 0
    }
  }
})
const { dataList, loading, pageSize, currentPage, total } = tableState
const { getList } = tableMethods

const tableColumns = reactive<TableColumn[]>([
  {
    field: 'id',
    label: 'ID',
    width: 80
  },
  {
    field: 'group_name',
    label: '组名称',
    minWidth: 100
  },
  {
    field: 'action',
    label: t('userDemo.action'),
    width: 110,
    fixed: 'right',
    align: 'center',
    headerAlign: 'center',
    slots: {
      default: (data: any) => {
        const row = data.row
        return (
          <>
            <BaseButton link size="small" type="primary" onClick={() => save(row)}>
              {t('exampleDemo.edit')}
            </BaseButton>
            <ElDivider direction="vertical" />
            <BaseButton link size="small" type="danger" onClick={() => delAction(row)}>
              {t('exampleDemo.del')}
            </BaseButton>
          </>
        )
      }
    }
  }
])

const AddAction = () => {
  ElMessageBox.prompt('请输入新增用户组名称', '新增用户组', {
    confirmButtonText: '确定',
    cancelButtonText: '取消'
  }).then(async ({ value }) => {
    const res = await addUserGroup(value)
    if (res.status == 200) {
      ElMessage.success('添加成功')
      getList()
    }
  })
}

const delAction = async (row: any) => {
  ElMessageBox.confirm('删除后无法恢复，是否删除用户组?', {
    confirmButtonText: '删除',
    cancelButtonText: '取消',
    type: 'warning'
  })
    .then(async () => {
      const res = await delUserGroup(row.id)
      if (res.status == 200) {
        ElMessage({
          showClose: true,
          message: '删除成功',
          type: 'success'
        })
        getList()
      }
    })
    .catch(() => {})
}

const save = (item) => {
  ElMessageBox.prompt('请输入修改用户组名称', '修改用户组', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    inputValue: item.group_name
  })
    .then(async ({ value }) => {
      const res = await putUserGroup({
        group_name: value,
        id: item.id
      })
      if (res.status == 200) {
        ElMessage({
          showClose: true,
          message: '修改成功',
          type: 'success'
        })
        getList()
      }
    })
    .catch(() => {})
}
</script>

<template>
  <div>
    <ContentWrap>
      <div class="mb-10px">
        <BaseButton type="primary" @click="AddAction">{{ t('exampleDemo.add') }}</BaseButton>
      </div>
      <Table
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        :pagination="{
          total
        }"
        :columns="tableColumns"
        default-expand-all
        node-key="id"
        :data="dataList"
        :loading="loading"
        @register="tableRegister"
      />
    </ContentWrap>
  </div>
</template>
