<template>
  <div class="table-box">
    <ProTable :config="config" :data="data">
      <template #left_buttons>
        <el-button type="primary" plain :icon="Plus" @click="accountFormModalRef?.openModal()"
          >新增</el-button
        >
      </template>
    </ProTable>

    <AccountFormModal ref="accountFormModalRef" />
  </div>
</template>

<script setup lang="jsx" name="accountManage">
  import ProTable from '@/components/ProTable/index.vue';
  import AccountFormModal from './components/AccountFormModal.vue';
  import { Delete, Edit, Plus } from '@element-plus/icons-vue';
  import { reactive, ref } from 'vue';
  import { ElButton } from 'element-plus';

  const accountFormModalRef = ref();
  const config = reactive({
    columns: [
      { field: 'name', title: '名称', search: { el: 'input' } },
      {
        field: 'code',
        title: '账号',
        search: { el: 'input', props: { clearable: true } },
      },
      {
        field: 'role',
        title: '角色',
        search: { el: 'input', props: { clearable: true } },
      },
      {
        field: 'action',
        title: '操作',
        width: 200,
        slots: {
          default: ({ row }) => {
            return (
              <>
                <ElButton link type="primary" icon={Edit} onClick={() => editAccount(row)}>
                  编辑
                </ElButton>
                <ElButton link type="primary" icon={Delete} onClick={() => deleteAccount(row)}>
                  删除
                </ElButton>
              </>
            );
          },
        },
      },
    ],
  });

  const editAccount = (row) => {
    accountFormModalRef.value.openModal(JSON.parse(JSON.stringify(row)));
  };
  const deleteAccount = () => {};
  const data = [
    { name: 'admin', code: 'admin', role: 'superadmin' },
    { name: 'account1', code: 'account1', role: 'user' },
    { name: 'account2', code: 'account2', role: 'user' },
    { name: 'account3', code: 'account3', role: 'user' },
  ];
</script>
<style lang="scss" scoped>

</style>