<script setup lang="ts">
  import useLoading from '@/hooks/loading';
  import { computed, onActivated, ref } from 'vue';
  import useNotificationApi from '@/http/notification';
  import { AnyObject } from '@/types/global';
  import EnumTableColumn from '@/components/filter/enum-table-column.vue';
  import UserTableColumn from '@/components/filter/user-table-column.vue';
  import { useRoute, useRouter } from 'vue-router';
  import NumberTableColumn from '@/components/filter/number-table-column.vue';
  import { createModalVNode } from '@/utils/createVNode';
  import { Notification } from '@/utils/model';
  import { promiseToBoolean } from '@/utils';
  import SpaceTableColumn from '@/components/filter/space-table-column.vue';
  import usePermission from '@/hooks/permission';

  const { loading, setLoading } = useLoading(false);
  const { typeOption, statusOption, get, send, cancel, rollback } = useNotificationApi;

  const filter = ref({ title: '', userNickName: '', type: '', status: '', createBetween: [], setWith: ['user:id,nick_name'] });
  const tableRef = ref();
  const router = useRouter();
  const onQuery = async (params: AnyObject) => {
    setLoading(true);
    return get({ ...filter.value, ...params, sortBy: 'created_at', sortType: 'desc' }).finally(() => setLoading(false));
  };

  const onSearch = () => tableRef.value?.onPageChange(1);

  const onReset = () => {
    filter.value = { title: '', userNickName: '', type: '', status: '', createBetween: [], setWith: ['user:id,nick_name'] };
    onSearch();
  };

  const onShow = (record: Notification) => router.push({ name: 'operation-notification-show', params: { id: record.id } });

  const onCreate = () => router.push({ name: 'operation-notification-create' });

  const onUpdate = (record: Notification) => router.push({ name: 'operation-notification-update', params: { id: record.id } });

  const onSend = (record: Notification) =>
    createModalVNode(`确认立即发送通知《${record.title}》`, {
      title: '更新操作',
      onBeforeOk: () => promiseToBoolean(send(record.id)),
      onOk: () => tableRef.value?.onFetch(),
    });

  const onCancel = (record: Notification) =>
    createModalVNode(`确认取消发送通知《${record.title}》`, {
      title: '取消操作',
      onBeforeOk: () => promiseToBoolean(cancel(record.id)),
      onOk: () => tableRef.value?.onFetch(),
    });

  onActivated(() => (useRoute().meta.reload ? onReset() : tableRef.value?.onFetch()));

  const onRollback = (record: Notification) =>
    createModalVNode(`确认撤回发送通知《${record.title}》`, {
      title: '撤回操作',
      onBeforeOk: () => promiseToBoolean(rollback(record.id)),
      onOk: () => tableRef.value?.onFetch(),
    });

  const hasOperationPermission = computed(() => {
    return usePermission().checkPermission(['operation-notification-show', 'operation-notification-edit', 'operation-notification-send']);
  });
</script>

<template>
  <page-view has-bread has-card>
    <filter-search :loading="loading" :model="filter" @search="onSearch" @reset="onReset">
      <filter-search-item label="通知标题">
        <a-input v-model="filter.title" placeholder="请输入" allow-clear />
      </filter-search-item>
      <filter-search-item label="创建人">
        <a-input v-model="filter.userNickName" placeholder="请输入" allow-clear />
      </filter-search-item>
      <filter-search-item label="类型">
        <a-select v-model="filter.type" :options="typeOption" placeholder="请选择" allow-clear />
      </filter-search-item>
      <filter-search-item field="createBetween" label="创建时间">
        <a-range-picker v-model="filter.createBetween" show-time :time-picker-props="{ defaultValue: ['00:00:00', '23:59:59'] }" />
      </filter-search-item>
      <filter-search-item label="状态">
        <a-select v-model="filter.status" :options="statusOption" placeholder="请选择" allow-clear />
      </filter-search-item>
    </filter-search>
    <filter-table ref="tableRef" :loading="loading" :on-query="onQuery">
      <template #tool>
        <icon-button v-permission="['operation-notification-create']" type="primary" icon="plus" label="新增" @click="onCreate" />
      </template>
      <filter-table-column title="通知标题" data-index="title" :width="260" />
      <enum-table-column title="类型" data-index="type" :option="typeOption" :width="100" />
      <number-table-column title="接收人数" data-index="items_count" :width="120" />
      <number-table-column title="查看人数" data-index="read_count" :width="120" />
      <user-table-column title="创建人" data-index="user_id" user="user" :width="140" />
      <filter-table-column title="创建时间" data-index="created_at" :width="160" />
      <filter-table-column title="发送时间" data-index="publish_at" :width="160" />
      <enum-table-column title="状态" data-index="status" :option="statusOption" :width="100" />
      <space-table-column v-if="hasOperationPermission" title="操作" :width="120">
        <template #default="{ record }: { record: Notification }">
          <a-link
            v-if="[-1, 0, 1, 2, 3].includes(record.status)"
            v-permission="['operation-notification-show']"
            :hoverable="false"
            class="link-hover"
            @click="onShow(record)"
          >
            查看
          </a-link>
          <a-link
            v-if="[-2, 3].includes(record.status)"
            v-permission="['operation-notification-edit']"
            :hoverable="false"
            class="link-hover"
            @click="onUpdate(record)"
          >
            修改
          </a-link>
          <a-link
            v-if="record.status === 2"
            v-permission="['operation-notification-send']"
            :hoverable="false"
            class="link-hover"
            @click="onRollback(record)"
          >
            撤回
          </a-link>
          <a-link
            v-if="[-1, 0].includes(record.status)"
            v-permission="['operation-notification-send']"
            :hoverable="false"
            class="link-hover"
            @click="onSend(record)"
          >
            {{ record.status === -1 ? '重试' : '发送' }}
          </a-link>
          <a-link
            v-if="record.status === 0"
            v-permission="['operation-notification-send']"
            :hoverable="false"
            class="link-hover"
            @click="onCancel(record)"
          >
            取消
          </a-link>
        </template>
      </space-table-column>
    </filter-table>
  </page-view>
</template>

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