<template>
  <div>
    <BasicModal
      v-bind="$attrs"
      @register="registerModal"
      :showFooter="false"
      :title="dataSource?.sysNotice?.title"
      width="50%"
      centered
      :showCancelBtn="false"
      :showOkBtn="false"
      @cancel="handleClose"
    >
      <PageWrapper dense contentFullHeight contentBackground>
        <div class="detail-notice-info">
          <span class="mr-6">
            <UserOutlined class="mr-2" />
            {{ t('system.notify.dispatcherText') }}:{{ dataSource?.sysNotice?.senderName }}
          </span>
          <span class="mr-6">
            <SolutionOutlined class="mr-2" />
            {{ t('system.notify.notifyTypeText') }}:
            {{ t(`enum.notifyType.${dataSource?.sysNotice?.type}`) }}
          </span>
          <span class="mr-6">
            <FieldTimeOutlined class="mr-2" />
            {{ t('system.notify.sendTimeText') }}:{{ dataSource?.sysNotice.senderDate }}
          </span>
        </div>
        <p v-html="dataSource?.sysNotice?.content"></p>
      </PageWrapper>
    </BasicModal>
  </div>
</template>
<script lang="ts">
  import { defineComponent, ref, unref } from 'vue';
  import { BasicModal, useModalInner } from '/@/components/Modal';
  import { UserOutlined, SolutionOutlined, FieldTimeOutlined } from '@ant-design/icons-vue';
  import { PageWrapper } from '/@/components/Page';
  import { notifyMyGetDetailApi } from '/@/api/stationnotification/stationnotifyApi';
  import { useI18n } from '/@/hooks/web/useI18n';
  export default defineComponent({
    name: 'MyNoticeDrawer',
    components: { BasicModal, PageWrapper, UserOutlined, SolutionOutlined, FieldTimeOutlined },
    emits: ['success', 'register'],
    setup(_, { emit }) {
      const { t } = useI18n();
      const dataSource = ref();
      const [registerModal] = useModalInner(async (data) => {
        dataSource.value = data.record;
      });
      const handleClose = async () => {
        // 如果已读,就不刷新表格了
        if (unref(dataSource).readStatus === '1') return;
        await notifyMyGetDetailApi(unref(dataSource).id);
        emit('success');
      };
      return {
        t,
        registerModal,
        handleClose,
        dataSource,
      };
    },
  });
</script>

<style lang="less" scoped>
  .detail-notice-info {
    color: #999;
    border-top: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    padding-top: 5px;
    padding-bottom: 5px;
    margin-bottom: 16px;
  }
</style>