<template>
  <div>
    <BasicTable @register="registerTable">
      <template #toolbar>
        <a-button type="primary" @click="handleCreate"> 新增链接 </a-button>
      </template>
    </BasicTable>

    <LinksDrawer @register="registerModal" @success="handleSuccess" />
  </div>
</template>

<script lang="ts">
  import { BasicTable, useTable } from '/@/components/Table'
  import { reactive, toRefs } from 'vue'
  import { getFriendinks } from '/@/api/sys/user'
  import { columns, searchFormSchema } from './links.data'
  import { useModal } from '/@/components/Modal'
  import LinksDrawer from './LinksDrawer.vue'
  import { message } from 'ant-design-vue'
  export default {
    components: {
      BasicTable,
      LinksDrawer,
    },
    setup() {
      const state = reactive({})
      const [registerModal, { openModal }] = useModal()
      const [registerTable, { reload }] = useTable({
        title: '账号列表',
        api: async (e) => {
          const { data, meta } = await getFriendinks({ ...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 handleCreate = () => {
        openModal(true, {
          id: false,
        })
      }

      return {
        registerTable,
        registerModal,
        handleSuccess,
        ...toRefs(state),
        handleCreate,
      }
    },
  }
</script>

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