<template>
  <vxe-modal
    v-model="showModal"
    title="案件明细"
    @hide="onHide"
    width="400px"
    show-footer
    esc-closable
  >
    <ProTable :config="config" :data="data">
    </ProTable>
    <template #footer>
    </template>
  </vxe-modal>
</template>

<script setup>
  import { computed } from 'vue';
  import { reactive, ref } from 'vue';

  const showModal = ref(false);
  const currentAccount = ref(undefined);
  const config = reactive({
    columns: [
      { field: 'name', title: '名称', search: { el: 'input' } },
      {
        field: 'code',
        title: '账号',
        search: { el: 'input', props: { clearable: true } },
      },
      {
        field: 'code',
        title: '账号',
        search: { el: 'input', props: { clearable: true } },
      },
      {
        field: 'role',
        title: '角色',
        search: { el: 'input', props: { clearable: true } },
      }
    ],
  });

  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' },
  ];
  const onHide = () => {
    currentAccount.value = null;
  };
  const openModal = (account) => {
    showModal.value = true;
    currentAccount.value = account;
    Object.assign(form, account);
  };

  defineExpose({
    openModal,
  });
</script>
<style lang="scss" scoped></style>
