<script setup lang="ts">
  import { onActivated, ref } from 'vue';
  import useLoading from '@/hooks/loading';
  import { useRegisterApi } from '@/http/user';
  import { AnyObject } from '@/types/global';

  import EnumTableColumn from '@/components/filter/enum-table-column.vue';
  import PhoneTableColumn from '@/components/filter/phone-table-column.vue';
  import { TableData } from '@arco-design/web-vue';
  import { useRoute, useRouter } from 'vue-router';
  import UserTableColumn from '@/components/filter/user-table-column.vue';

  const router = useRouter();

  const tableRef = ref();
  const filter = ref<AnyObject>({});
  const { loading, setLoading } = useLoading(false);

  const { officialStatusOption, statusOption, scopeOption, sexOption, get, getExport } = useRegisterApi;
  const onQuery = async (params?: AnyObject) => {
    setLoading(true);
    return get({ ...filter.value, ...params, sortBy: 'id', sortType: 'desc' }).finally(() => setLoading(false));
  };

  const onExport = () => getExport('注册未认证', { ...filter.value, sortBy: 'id', sortType: 'desc' });

  const onRowClick = (record: TableData) => router.push({ name: 'user-register-show', params: { id: record.id } });

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

  const onReset = () => {
    filter.value = { nick_name: '', email_like: '', phone_like: '', official_status: '', status: '' };
    onSearch();
  };

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

<template>
  <page-view has-card has-bread>
    <filter-search :model="filter" :loading="loading" @search="onSearch" @reset="onReset">
      <filter-search-item field="nick_name" label="用户艺名">
        <a-input v-model="filter.nick_name" allow-clear placeholder="请输入" />
      </filter-search-item>
      <filter-search-item field="sex" label="性别">
        <a-select v-model="filter.sex" allow-clear placeholder="请选择" :options="sexOption" />
      </filter-search-item>
      <filter-search-item field="email_like" label="用户邮箱">
        <a-input v-model="filter.email_like" allow-clear placeholder="请输入" />
      </filter-search-item>
      <filter-search-item field="phone_like" label="手机号码">
        <a-input v-model="filter.phone_like" allow-clear placeholder="请输入" />
      </filter-search-item>
      <filter-search-item field="name" label="关注服务号">
        <a-select v-model="filter.official_status" :options="officialStatusOption" placeholder="请选择" allow-clear />
      </filter-search-item>
      <filter-search-item field="name" label="状态">
        <a-select v-model="filter.status" :options="statusOption" placeholder="请选择" allow-clear />
      </filter-search-item>
      <filter-search-item field="scope" label="权限">
        <a-select v-model="filter.scope" allow-clear placeholder="请选择" :options="scopeOption" />
      </filter-search-item>
      <template #button>
        <export-button v-permission="['user-register-export']" :on-download="onExport" />
      </template>
    </filter-search>
    <filter-table ref="tableRef" :loading="loading" :on-query="onQuery" hover-type="pointer" @row-click="onRowClick">
      <user-table-column title="用户艺名" data-index="id" show-avatar :width="240" />
      <enum-table-column title="性别" data-index="sex" :option="sexOption" :dark-value="0" :width="80" />
      <filter-table-column title="用户邮箱" data-index="email" :width="200" />
      <phone-table-column title="手机号码" data-index="phone" area-index="area_code" :width="160" />
      <filter-table-column title="注册时间" data-index="created_at" :width="170" />
      <enum-table-column title="权限" data-index="scope" :option="scopeOption" :dark-value="0" :width="120" />
      <enum-table-column title="关注服务号" data-index="official_status" :option="officialStatusOption" :dark-value="0" :width="120" />
      <enum-table-column title="状态" data-index="status" :option="statusOption" :width="80" />
    </filter-table>
  </page-view>
</template>

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