<template>
  <div>
    <BasicDrawer
      v-bind="$attrs"
      @register="registerDrawer"
      :showFooter="false"
      title="通知详情"
      width="70%"
      @close="handleClose"
    >
      <div v-html="DescInfo?.content"></div>
      <Description @register="registerDesc" />
    </BasicDrawer>
  </div>
</template>
<script lang="ts">
  import { defineComponent, ref } from 'vue';
  import { BasicDrawer, useDrawerInner } from '/@/components/Drawer';
  import { Description, useDescription } from '/@/components/Description/index';
  import { DescDetailSchema } from './config.d';
  import {
    noticeByIdGetInfo,
    notifyMyGetrReadApi,
    notifyMyGetDetailApi,
  } from '/@/api/stationnotification/stationnotifyApi';
  export default defineComponent({
    name: 'MyNoticeDrawer',
    components: { BasicDrawer, Description },
    emits: ['success', 'register'],
    setup(_, { emit }) {
      const dataSource = ref();
      let DescInfo = ref();
      const [registerDrawer] = useDrawerInner(async (data) => {
        dataSource.value = data.record;
        const id = data.record.noticeId;
        let getDescInfo = await noticeByIdGetInfo(id);
        DescInfo.value = getDescInfo;
      });
      const [registerDesc] = useDescription({
        bordered: false,
        schema: DescDetailSchema,
        data: dataSource,
      });
      const handleClose = async () => {
        console.log(dataSource.value);
        await notifyMyGetDetailApi(dataSource.value.id);
        emit('success');
      };
      return {
        DescInfo,
        registerDesc,
        registerDrawer,
        handleClose,
      };
    },
  });
</script>