<template>
  <div>
    <BasicDrawer
      v-bind="$attrs"
      @register="registerDrawer"
      :showFooter="false"
      :title="descInfo?.title"
      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' ? t('enum.readStatus.Unread') : t('enum.readStatus.Read')
            }}
          </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';
  import { Tag } from 'ant-design-vue';
  import { useI18n } from '/@/hooks/web/useI18n';
  const { t } = useI18n();
  const schema: DescItem[] = [
    {
      field: 'senderName',
      label: t('system.notify.dispatcherText'),
    },
    {
      field: 'type',
      label: t('system.notify.notifyTypeText'),
      render: (text) => {
        return text && t(`enum.notifyType.${text}`);
      },
    },
    {
      field: 'senderDate',
      label: t('system.notify.sendTimeText'),
    },
  ];
  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 {
        t,
        descInfo,
        registerDesc,
        registerTable,
        registerDrawer,
      };
    },
  });
</script>