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

  import UserTableColumn from '@/components/filter/user-table-column.vue';
  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 useUserApi, { useMemberApi } from '@/http/user';
  import { createModalVNode } from '@/utils/createVNode';
  import { isArray } from '@/utils/is';
  import usePermission from '@/hooks/permission';

  const router = useRouter();
  const props = defineProps<{ userKey: number }>();

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

  const { officialStatusOption, statusOption, scopeOption, sexOption } = useUserApi;

  const { get, destroy } = useMemberApi;

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

    get(props.userKey, { pageSize: 1 }).then(({ meta }) => (total.value = meta.total));

    return get(props.userKey, { ...filter.value, ...params, sortBy: 'id', sortType: 'desc' }).finally(() => setLoading(false));
  };

  const onRowClick = (record: TableData) => {
    const identity = record.member?.identity || 0;

    if (identity) {
      router.push({ name: 'user-register-show', params: { id: record.member_id } });
    }
    if ([2, 3].includes(identity)) {
      router.push({ name: 'user-business-show', params: { id: record.member_id } });
    }

    router.push({ name: 'user-register-show', params: { id: record.member_id } });
  };

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

  const onReset = () => {
    filter.value = {
      member_nick_name: '',
      member_email_like: '',
      member_phone_like: '',
      member_official_status: '',
      member_status: '',
    };
    onSearch();
  };

  const onDelete = (record: TableData) =>
    createModalVNode(`确认移除此用户？`, {
      title: '删除操作',
      onBeforeOk: (done: any) =>
        destroy(record.member_id)
          .then(() => {
            tableRef.value?.onFetch();
            done(true);
          })
          .catch(() => done(false)),
    });

  onMounted(() => onReset());

  defineExpose({ total });

  const routeName = useRoute().name as string;
  const checkPermission = (permission: string | string[]): boolean => {
    permission = isArray(permission) ? permission.map((item) => `${routeName}-${item}`) : `${routeName}-${permission}`;
    return usePermission().checkPermission(permission);
  };
</script>

<template>
  <a-card :bordered="false">
    <filter-search :model="filter" :loading="loading" @search="onSearch" @reset="onReset">
      <filter-search-item field="member_nick_name" label="用户艺名">
        <a-input v-model="filter.member_nick_name" allow-clear placeholder="请输入" />
      </filter-search-item>
      <filter-search-item field="member_email_like" label="用户邮箱">
        <a-input v-model="filter.member_email_like" allow-clear placeholder="请输入" />
      </filter-search-item>
      <filter-search-item field="member_phone_like" label="手机号码">
        <a-input v-model="filter.member_phone_like" allow-clear placeholder="请输入" />
      </filter-search-item>
      <filter-search-item field="member_official_status" label="关注服务号">
        <a-select v-model="filter.member_official_status" :options="officialStatusOption" placeholder="请输入" allow-clear />
      </filter-search-item>
      <filter-search-item field="member_status" label="状态">
        <a-select v-model="filter.member_status" :options="statusOption" placeholder="请输入" allow-clear />
      </filter-search-item>
    </filter-search>

    <filter-table ref="tableRef" :loading="loading" :on-query="onQuery" hover-type="pointer" @row-click="onRowClick">
      <user-table-column title="用户艺名" data-index="member_id" user="member" :width="260" show-avatar />
      <enum-table-column title="性别" data-index="member.sex" :option="sexOption" :dark-value="0" :width="70" />
      <filter-table-column title="用户邮箱" data-index="member.email" :width="170" />
      <phone-table-column title="手机号码" data-index="member.phone" area-index="member.area_code" :width="160" />
      <enum-table-column title="权限" data-index="member.scope" :option="scopeOption" :dark-value="0" :width="120" />
      <enum-table-column
        title="关注服务号"
        data-index="member.official_status"
        :option="officialStatusOption"
        :dark-value="0"
        :width="120"
      />
      <enum-table-column title="状态" data-index="member.status" :option="statusOption" :width="80" />
      <a-table-column v-if="checkPermission('member-delete')" title="操作" data-index="operation" :width="100">
        <template #cell="{ record }">
          <a-link v-if="checkPermission('member-delete')" @click.stop="onDelete(record)">删除</a-link>
        </template>
      </a-table-column>
    </filter-table>
  </a-card>
</template>

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