<script setup lang="ts" name="notification-show">
  import { useRouteQuery } from '@vueuse/router';
  import FormContent from '@/views/operation/notification/components/form-content.vue';
  import { onBeforeRouteLeave, useRoute } from 'vue-router';
  import useNotificationApi from '@/http/notification';
  import { onMounted, ref } from 'vue';
  import { pick } from 'lodash';
  import ItemTable from '@/views/operation/notification/components/item-table.vue';

  const { show } = useNotificationApi;
  const notifyKey = Number(useRoute().params?.id);

  const tabKey = useRouteQuery('tabKey', '1');
  const formValue = ref<any>({});

  onBeforeRouteLeave((to, from) => {
    if (from.meta.from === to.name) {
      to.meta.reload = false;
    }
  });

  onMounted(() => {
    show(notifyKey).then((res) => {
      Object.assign(formValue.value, {
        ...pick(res, [
          'title',
          'type',
          'cover',
          'content',
          'rich_content',
          'publish_type',
          'publish_to',
          'link_type',
          'link_id',
          'link_name',
          'is_alert',
        ]),
        publish_count: res.items_count || 0,
        publish_at: res.publish_type === 1 ? '' : res.publish_at,
      });
    });
  });
</script>

<template>
  <page-view has-bread has-card>
    <a-tabs v-model:active-key="tabKey" type="rounded" :animation="true" size="small" :justify="true">
      <a-tab-pane key="1" title="通知表单">
        <form-content :model-value="formValue" :hide-submit="true" :disabled="true" />
      </a-tab-pane>
      <a-tab-pane key="2" title="接收统计">
        <item-table :notify-key="notifyKey" />
      </a-tab-pane>
    </a-tabs>
  </page-view>
</template>

<style scoped lang="less"></style>