<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';

  export default defineComponent({
    name: 'ConfigDrawer',
    components: { BasicDrawer, BasicTable, Description, PageWrapper },
    emits: ['success', 'register'],
    setup() {
      let tableData = ref([]);
      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'
              ? '其他'
              : '';
          },
        },
      ];

      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>