<script setup lang="ts">
  import useLoading from '@/hooks/loading';
  import useNotificationApi from '@/http/notification';
  import { onMounted, ref } from 'vue';
  import UserTableColumn from '@/components/filter/user-table-column.vue';
  import useUserApi from '@/http/user';
  import EnumTableColumn from '@/components/filter/enum-table-column.vue';
  // eslint-disable-next-line @typescript-eslint/no-unused-vars
  import { User } from '@/utils/model';
  import { Input, Select } from '@arco-design/web-vue';
  import FilterSearch from '@/components/filter/search.vue';
  import FilterSearchItem from '@/components/filter/search-item.vue';
  import { Option } from '@/types/global';
  import useTagApi from '@/http/Tag';

  const props = defineProps<{ notifyKey: number }>();

  const { user } = useNotificationApi;
  const { sexOption, officialStatusOption } = useUserApi;

  const statusOption = [
    { value: 0, label: '待处理' },
    { value: 1, label: '处理中' },
    { value: 2, label: '已发送' },
    { value: 3, label: '已撤销' },
    { value: -1, label: '发送失败' },
  ];

  const readStatusOption = [
    { value: 0, label: '未查看' },
    { value: 1, label: '已查看' },
  ];

  const { loading, setLoading } = useLoading(false);

  const tableRef = ref();
  const filter = ref({ nick_name: '', authIds: [], status: '', read_status: '', setWith: ['authTags:id,name'] });
  const authTagOptions = ref<Option[]>([]);

  const onQuery = async (params: object) => {
    setLoading(true);

    return user(props.notifyKey, { ...filter.value, ...params }).finally(() => setLoading(false));
  };

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

  const onReset = () => {
    filter.value = { nick_name: '', authIds: [], status: '', read_status: '', setWith: ['authTags:id,name'] };
    onSearch();
  };

  onMounted(() => {
    tableRef.value?.onPageChange();
    useTagApi.getOption({ type: 4 }).then((data) => (authTagOptions.value = data));
  });
</script>

<template>
  <FilterSearch :loading="loading" :model="filter" :split="3" @search="onSearch" @reset="onReset">
    <FilterSearchItem label="用户艺名">
      <Input v-model="filter.nick_name" placeholder="请输入" />
    </FilterSearchItem>
    <FilterSearchItem label="认证能力">
      <Select
        v-model="filter.authIds"
        placeholder="请选择"
        :options="authTagOptions"
        :max-tag-count="2"
        multiple
        allow-clear
        allow-search
      />
    </FilterSearchItem>
    <FilterSearchItem label="发送状态">
      <Select v-model="filter.status" placeholder="请选择" :options="statusOption" allow-clear />
    </FilterSearchItem>
    <FilterSearchItem label="用户行为">
      <Select v-model="filter.read_status" placeholder="请选择" :options="readStatusOption" allow-clear />
    </FilterSearchItem>
  </FilterSearch>
  <FilterTable ref="tableRef" :loading="loading" :on-query="onQuery">
    <UserTableColumn title="用户艺名" data-index="id" :width="260" show-avatar />
    <EnumTableColumn title="性别" data-index="sex" :option="sexOption" :dark-value="0" :width="80" />
    <FilterTableColumn title="认证能力" :width="280">
      <template #default="{ record }: { record: User }">
        <span v-if="record.auth_tags?.length">{{ record.auth_tags?.map((item) => item.name).join('｜') }}</span>
        <span v-else style="color: rgba(44, 44, 44, 0.5)">无</span>
      </template>
    </FilterTableColumn>
    <EnumTableColumn title="关注服务号" data-index="official_status" :option="officialStatusOption" :dark-value="0" :width="160" />
    <EnumTableColumn title="发送状态" data-index="status" :option="statusOption" :width="100" />
    <FilterTableColumn title="接收时间" data-index="send_at" :width="160" />
    <FilterTableColumn title="用户行为" data-index="read_at" :width="120">
      <template #default="{ record }: { record: { read_at?: string } }">
        <span v-if="record.read_at">已查看</span>
        <span v-else style="color: rgba(44, 44, 44, 0.5)">未查看</span>
      </template>
    </FilterTableColumn>
  </FilterTable>
</template>

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