<template>
  <div>
    <BasicDrawer
      v-bind="$attrs"
      @register="registerDrawer"
      :showFooter="false"
      :title="descInfo?.title"
      destroyOnClose
      width="70%"
    >
      <div v-html="descInfo?.content"></div>
      <Description @register="registerDesc" class="mt-4" />
      <BasicTable @register="registerTable" class="mt-4">
        <template #readStatus="{ record }">
          <Tag :color="record.readStatus === '0' ? 'orange' : 'green'">
            {{ record.readStatus === '0' ? '未读' : '已读' }}
          </Tag>
        </template>
      </BasicTable>
    </BasicDrawer>
  </div>
</template>
<script lang="ts">
  import { defineComponent, ref } from 'vue';
  import { BasicDrawer, useDrawerInner } from '/@/components/Drawer';
  import { Description, DescItem, useDescription } from '/@/components/Description/index';
  import {
    getNotifyDetailPage,
    noticeByIdGetInfo,
  } from '/@/api/stationnotification/stationnotifyApi';
  import { useTable, BasicTable } from '/@/components/Table';
  import { detailColumns } from './config.d';
  import { Tag } from 'ant-design-vue';
  const schema: DescItem[] = [
    {
      field: 'senderName',
      label: '发送者',
    },
    {
      field: 'type',
      label: '类型',
      render: (_, { type }) => {
        return type === 'NOTICE'
          ? '公告'
          : type === 'MEETING'
          ? '会议'
          : type === 'OTHER'
          ? '其他'
          : '';
      },
    },
    {
      field: 'senderDate',
      label: '发送时间',
    },
  ];
  export default defineComponent({
    name: 'ConfigDrawer',
    components: { BasicDrawer, Description, BasicTable, Tag },
    emits: ['success', 'register'],
    setup() {
      let descInfo = ref();
      let noticeId;
      const [registerDrawer] = useDrawerInner(async (data) => {
        let getDescInfo = await noticeByIdGetInfo(data.record.id);
        noticeId = data.record.id;
        descInfo.value = getDescInfo;
        reload();
      });
      const [registerTable, { reload }] = useTable({
        api: getNotifyDetailPage,
        columns: detailColumns,
        bordered: true,
        showTableSetting: true,
        showIndexColumn: false,
        immediate: false,
        beforeFetch: getNoticeId,
      });
      function getNoticeId(data) {
        Reflect.set(data, 'noticeId', noticeId);
      }

      const [registerDesc] = useDescription({
        bordered: true,
        data: descInfo,
        schema,
      });
      return {
        descInfo,
        registerDesc,
        registerTable,
        registerDrawer,
      };
    },
  });
</script>