<script setup lang="ts">
  import { h, onMounted, ref } from 'vue';
  import { Card, Input, Select, Link, Message, TableData } from '@arco-design/web-vue';
  import useLoading from '@/hooks/loading';
  import { createModalVNode } from '@/utils/createVNode';
  import { AnyObject } from '@/types/global';
  import useProjectApi, { useManagerApi } from '@/http/project';
  import UserTableColumn from '@/components/filter/user-table-column.vue';
  import useUserApi from '@/http/user';
  import EnumTableColumn from '@/components/filter/enum-table-column.vue';
  import PhoneTableColumn from '@/components/filter/phone-table-column.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 FormContent from '@/views/audition/project-show/components/form-content.vue';
  import usePermission from '@/hooks/permission';

  const props = defineProps<{ projectKey: number; queryHook?: () => void }>();
  const emits = defineEmits<{ (e: 'delete', id: number): void }>();

  const { loading, setLoading } = useLoading(false);
  const { sexOption, statusOption, officialStatusOption } = useUserApi;
  const { manageUsers } = useProjectApi;

  const filter = ref({ nick_name: '', sex: '', phone_like: '', email_like: '', status: '' });
  const tableRef = ref();

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

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

  const onQuery = async (params: AnyObject) => {
    setLoading(true);
    props.queryHook?.();
    return manageUsers(props.projectKey, { ...filter.value, ...params, sortBy: 'id', sortType: 'asc' }).finally(() => setLoading(false));
  };

  onMounted(() => onReset());

  const onCreate = () => {
    const formRef = ref();

    createModalVNode(() => h(FormContent, { ref: formRef, projectKey: props.projectKey }), {
      title: '新增管理员',
      titleAlign: 'center',
      width: '1000px',
      closable: true,
      footer: false,
      onBeforeClose: () => tableRef.value?.onFetch(),
    });
  };

  const onDelete = (row: TableData) => {
    setLoading(true);
    useManagerApi.destroy(row.pivot_id).then(() => {
      Message.success(`移除管理员：${row.nick_name}`);
      tableRef.value.onFetch();
      emits('delete', row.id);
    });
  };
</script>

<template>
  <Card :bordered="false">
    <FilterSearch :model="filter" :loading="loading" @search="onSearch" @reset="onReset">
      <FilterSearchItem label="用户艺名">
        <Input v-model="filter.nick_name" allow-clear placeholder="请输入" />
      </FilterSearchItem>
      <FilterSearchItem label="性别">
        <Select v-model="filter.sex" allow-clear placeholder="请选择" :options="sexOption" />
      </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>
      <FilterSearchItem label="状态">
        <Select v-model="filter.status" allow-clear placeholder="请选择" :options="statusOption" />
      </FilterSearchItem>
    </FilterSearch>
    <FilterTable ref="tableRef" :loading="loading" :on-query="onQuery">
      <template #tool>
        <IconButton v-permission="['audition-project-show-manage-create']" icon="plus" label="新增" type="primary" @click="onCreate" />
      </template>
      <UserTableColumn title="用户艺名" data-index="id" show-href show-avatar :width="260" />
      <EnumTableColumn title="性别" data-index="sex" :option="sexOption" :dark-value="0" :width="100" />
      <FilterTableColumn title="用户邮箱" data-index="email" :width="200" />
      <PhoneTableColumn title="手机号码" data-index="phone" area-index="area_code" :width="200" />
      <EnumTableColumn title="关注服务号" data-index="official_status" :option="officialStatusOption" :dark-value="0" :width="120" />
      <EnumTableColumn title="状态" data-index="status" :option="statusOption" :dark-value="0" :width="100" />
      <FilterTableColumn v-if="usePermission().checkPermission('audition-project-show-manage-delete')" title="操作" :width="100">
        <template #default="{ record }">
          <Link v-permission="['audition-project-show-manage-delete']" class="link-hover" :hoverable="false" @click="onDelete(record)">
            删除
          </Link>
        </template>
      </FilterTableColumn>
    </FilterTable>
  </Card>
</template>

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