<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" />发送者:{{ dataSource?.sysNotice?.senderName }}</span
          >
          <span class="mr-6"
            ><SolutionOutlined class="mr-2" />通知类型:{{
              dataSource?.sysNotice?.type === 'NOTICE'
                ? '公告'
                : dataSource?.sysNotice?.type === 'MEETING'
                ? '会议'
                : dataSource?.sysNotice?.type === 'OTHER'
                ? '其他'
                : ''
            }}</span
          >
          <span class="mr-6"
            ><FieldTimeOutlined class="mr-2" />发送时间{{ dataSource?.sysNotice.senderDate }}</span
          >
        </div>
        <!--eslint-disable-next-line vue/no-v-html-->
        <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';
  export default defineComponent({
    name: 'MyNoticeDrawer',
    components: { BasicModal, PageWrapper, UserOutlined, SolutionOutlined, FieldTimeOutlined },
    emits: ['success', 'register'],
    setup(_, { emit }) {
      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 {
        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>