<template>
  <div>
    <BasicTable @register="registerTable">
      <template #bodyCell="{ column, record }">
        <template v-if="column.key === 'action'">
          <div class="flex items-center justify-center">
            <TableAction
              :actions="[
                {
                  label: '标记',
                  popConfirm: {
                    title: '是否确认标记',
                    placement: 'topRight',
                    confirm: handleMark.bind(null, record),
                  },
                  ifShow: record.status == 0,
                },
              ]"
            />
          </div>
        </template>
      </template>
    </BasicTable>
  </div>
</template>

<script lang="ts">
  import { BasicTable, useTable, TableAction } from '/@/components/Table'
  import { getWarningLogs, markWarningLogs } from '/@/api/sys/user'
  import { columns, searchFormSchema } from './warning.data'
  import { message } from 'ant-design-vue'
  export default {
    components: {
      BasicTable,
      TableAction,
    },
    setup() {
      const [registerTable, { reload }] = useTable({
        title: '账号列表',
        api: async (e) => {
          const { data, meta } = await getWarningLogs({ ...e })
          return {
            items: data,
            total: meta?.total,
          }
        },
        rowKey: 'id',
        columns,
        formConfig: {
          labelWidth: 80,
          schemas: searchFormSchema,
        },
        useSearchForm: true,
        showTableSetting: true,
        bordered: true,
        showIndexColumn: true,
      })

      const handleSuccess = () => {
        message.success('操作成功')
        reload()
      }
      const handleMark = async (record: Recordable) => {
        await markWarningLogs(record.id)
        message.success('删除成功')
        reload()
      }

      return {
        handleMark,
        registerTable,
        handleSuccess,
      }
    },
  }
</script>

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