<script setup lang="ts" name="user-singer">
  import { onActivated, ref } from 'vue';
  import { AnyObject } from '@/types/global';
  import useLoading from '@/hooks/loading';
  import PhoneTableColumn from '@/components/filter/phone-table-column.vue';
  import EnumTableColumn from '@/components/filter/enum-table-column.vue';
  import { TableData } from '@arco-design/web-vue';
  import { useRoute, useRouter } from 'vue-router';
  import { useSingerApi } from '@/http/user';
  import UserTableColumn from '@/components/filter/user-table-column.vue';

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

  const { sexOption, scopeOption, statusOption, officialStatusOption, get, getExport } = useSingerApi;

  const onQuery = async (params?: AnyObject) => {
    setLoading(true);
    return get({ ...filter.value, ...params }).finally(() => setLoading(false));
  };
  const onExport = () => getExport('音乐人', filter.value);

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

  const onSort = (column: string, type: string) => {
    if (type) {
      filter.value.sortBy = column;
      filter.value.sortType = type;
    } else {
      filter.value.sortBy = 'id';
      filter.value.sortType = 'desc';
    }
    tableRef.value?.onFetch();
  };

  const onReset = () => {
    filter.value = {
      nick_name: '',
      sex: '',
      email_like: '',
      phone_like: '',
      businessName: '',
      scope: '',
      official_status: '',
      status: '',
      sortBy: 'id',
      sortType: 'desc',
    };
    tableRef.value?.resetSort();
    onSearch();
  };

  const router = useRouter();

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

  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="businessName" label="队长">
        <a-input v-model="filter.businessName" allow-clear placeholder="请输入" />
      </filter-search-item>
      <filter-search-item field="scope" label="权限">
        <a-select v-model="filter.scope" allow-clear placeholder="请选择" :options="scopeOption" />
      </filter-search-item>
      <filter-search-item field="official_status" label="关注服务号">
        <a-select v-model="filter.official_status" allow-clear placeholder="请选择" :options="officialStatusOption" />
      </filter-search-item>
      <filter-search-item field="status" label="状态">
        <a-select v-model="filter.status" allow-clear placeholder="请选择" :options="statusOption" />
      </filter-search-item>
      <template #button>
        <export-button v-permission="['user-singer-export']" :on-download="onExport" />
      </template>
    </filter-search>
    <filter-table ref="tableRef" hover-type="pointer" :loading="loading" :on-query="onQuery" @row-click="onRowClick" @row-sort="onSort">
      <user-table-column title="用户艺名" data-index="id" show-avatar :width="240" />
      <enum-table-column title="性别" data-index="sex" :option="sexOption" :dark-value="0" :width="70" />
      <filter-table-column title="用户邮箱" data-index="email" :width="170" />
      <phone-table-column title="手机号码" data-index="phone" area-index="area_code" :width="160" />
      <filter-table-column title="认证通过时间" data-index="audit_at" :width="170" has-sort />
      <a-table-column :width="160" title="队长" data-index="business_id">
        <template #cell="{ record }">
          <user-link v-if="record.business" :user="record.business" />
          <span v-else style="color: rgba(44, 44, 44, 0.5)">无</span>
        </template>
      </a-table-column>
      <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>