<template>
  <BasicDrawer
    v-bind="$attrs"
    @register="registerDrawer"
    :showFooter="false"
    :title="getTitle"
    width="800px"
  >
    <PageWrapper title="我的通知详情">
      <Description @register="register1" class="mt-4" />
    </PageWrapper>
    <BasicTable :columns="columns" :dataSource="tableData">
      <span></span>
    </BasicTable>
  </BasicDrawer>
</template>
<script lang="ts">
  import { defineComponent, ref, computed, unref } from 'vue';
  import { BasicDrawer, useDrawerInner } from '/@/components/Drawer';
  import { BasicTable } from '/@/components/Table';
  import { Description, DescItem, useDescription } from '/@/components/Description/index';
  import { PageWrapper } from '/@/components/Page';

  const schema: DescItem[] = [
    {
      field: 'title',
      label: '标题',
    },
    {
      field: 'content',
      label: '内容',
    },
    {
      field: 'senderName',
      label: '发送者',
    },
    {
      field: 'senderDate',
      label: '发送时间',
    },
    {
      field: 'type',
      label: '类型',
      render: (_, data) => {
        return data.type === 'MEETING'
          ? '公告'
          : data.type === 'MEETING1'
          ? '会议'
          : data.type === 'MEETING2'
          ? '其他'
          : '';
      },
    },
  ];

  export default defineComponent({
    name: 'ConfigDrawer',
    components: { BasicDrawer, BasicTable, Description, PageWrapper },
    emits: ['success', 'register'],
    setup() {
      let tableData: [] = ref([]);
      const columns: BasicColumn[] = [
        {
          title: '接收者',
          dataIndex: 'senderName',
        },
        {
          title: '阅读状态',
          dataIndex: 'status',
        },
        {
          title: '阅读时间',
          dataIndex: 'createTime',
        },
      ];
      const isUpdate = ref(true);
      const [registerDrawer, { setDrawerProps }] = useDrawerInner(async (data) => {
        setDrawerProps({ confirmLoading: false });
        isUpdate.value = !!data?.isUpdate;
        tableData.value.push(data.record);
      });
      const getTitle = computed(() => (!unref(isUpdate) ? '查看通知' : '查看通知'));
      const [register1] = useDescription({
        title: '详情',
        bordered: false,
        data: tableData,
        schema: schema,
      });
      return {
        register1,
        tableData,
        getTitle,
        columns,
        registerDrawer,
      };
    },
  });
</script>