<script setup lang="ts">
  import { Input, Link, Message } from '@arco-design/web-vue';
  import { onMounted, ref } from 'vue';
  import FilterSearch from '@/components/filter/search.vue';
  import FilterSearchItem from '@/components/filter/search-item.vue';
  import FilterTable from '@/components/filter/table.vue';
  import FilterTableColumn from '@/components/filter/table-column.vue';
  import PhoneTableColumn from '@/components/filter/phone-table-column.vue';
  import EnumTableColumn from '@/components/filter/enum-table-column.vue';
  import useLoading from '@/hooks/loading';
  import { AnyObject } from '@/types/global';
  import useUserApi from '@/http/user';
  import { useManagerApi } from '@/http/project';
  import { User } from '@/utils/model';

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

  // eslint-disable-next-line @typescript-eslint/no-unused-vars
  const emits = defineEmits<{ (e: 'on-add', value: User): void }>();

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

  const filter = ref({ nick_name: '', real_name: '', phone_like: '', email_like: '', status: [0, 1], scope: [0, 2] });
  const tableRef = ref();

  const onQuery = async (params?: AnyObject) => {
    setLoading(true);
    return get({ excludeManageProject: props.projectKey, ...filter.value, ...params }).finally(() => setLoading(false));
  };

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

  const onReset = () => {
    filter.value = { nick_name: '', real_name: '', phone_like: '', email_like: '', status: [0, 1], scope: [0, 2] };
    onSearch();
  };
  const onCheck = (record: User) => {
    setLoading(true);
    useManagerApi.create({ project_id: props.projectKey, user_id: record.id }).then(() => {
      Message.success(`添加管理员：${record.nick_name}`);
      tableRef.value.onFetch();
    });
  };

  onMounted(() => onReset());
</script>

<template>
  <FilterSearch :model="filter" :loading="loading" @search="onSearch" @reset="onReset">
    <FilterSearchItem label="用户艺名">
      <Input v-model="filter.nick_name" allow-clear placeholder="请输入" />
    </FilterSearchItem>
    <FilterSearchItem label="用户真名">
      <Input v-model="filter.real_name" allow-clear placeholder="请输入" />
    </FilterSearchItem>
    <FilterSearchItem label="用户邮箱">
      <Input v-model="filter.email_like" allow-clear placeholder="请输入" />
    </FilterSearchItem>
    <FilterSearchItem label="手机号码">
      <Input v-model="filter.phone_like" allow-clear placeholder="请输入" />
    </FilterSearchItem>
  </FilterSearch>
  <FilterTable ref="tableRef" :loading="loading" :on-query="onQuery" size="small" style="height: 360px" :scroll="{ y: 360 }">
    <FilterTableColumn title="用户艺名" data-index="nick_name" :width="200" :ellipsis="true" />
    <FilterTableColumn title="用户真名" data-index="real_name" :width="160" :ellipsis="true" />
    <FilterTableColumn title="用户邮箱" data-index="email" :width="160" :ellipsis="true" />
    <PhoneTableColumn title="手机号码" data-index="phone" area-index="area_code" :width="160" :ellipsis="true" />
    <EnumTableColumn title="状态" data-index="status" :option="statusOption" :dark-value="0" :width="100" />
    <FilterTableColumn title="操作" :width="80">
      <template #default="{ record }: { record: User }">
        <Link class="link-hover" :hoverable="false" @click="onCheck(record)">添加</Link>
      </template>
    </FilterTableColumn>
  </FilterTable>
</template>

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