<script setup lang="ts">
import useLoading from '@/hooks/loading';
import FilterSearchItem from '@/components/filter/search-item.vue';
import { Card, Input, Link, Message, Modal, Select } from '@arco-design/web-vue';
import FilterSearch from '@/components/filter/search.vue';
import { h, onMounted, ref } from 'vue';
import FilterTable from '@/components/filter/table.vue';
import { AnyObject } from '@/types/global';
import useProjectApi from '@/api/project';
import EnumTableColumn from '@/components/filter/enum-table-column.vue';
import PhoneTableColumn from '@/components/filter/phone-table-column.vue';
import FilterTableColumn from '@/components/filter/table-column.vue';
import OutFormContent from '@/views/project-show/components/out-form-content.vue';

import { User } from '@/types/user';
import useUserApi from '@/api/user';
import UserTableColumn from '@/components/filter/user-table-column.vue';

const props = defineProps<{ projectKey: number; hasPermission?: boolean; queryHook?: () => void }>();

const { loading, setLoading } = useLoading(false);
const { outManageUsers, destroyOutManageUsers } = useProjectApi;

const { sexOption, statusOption, officialStatusOption } = useUserApi;

const filter = ref({});
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 outManageUsers(props.projectKey, { ...filter.value, ...params, setSort: 'id' }).finally(() => setLoading(false));
};

onMounted(() => onReset());

const onView = (row: User) => {
  Modal.open({
    title: '管理歌曲',
    titleAlign: 'center',
    content: () => h(OutFormContent, { user: row, projectKey: props.projectKey, hasPermission: props.hasPermission }),
    footer: false,
    closable: true,
    width: '860px',
    onClose: () => tableRef.value?.onFetch(),
  });
};

const onDelete = (record: User) => {
  Modal.open({
    title: '删除操作',
    content: `取消用户：${record?.nick_name} 在此厂牌下的外部管理员身份`,
    onBeforeOk: (done) =>
      destroyOutManageUsers(props.projectKey, { user_id: record.id })
        .then(() => {
          Message.success('删除成功');
          tableRef.value?.onFetch();
          done(true);
        })
        .catch(() => done(false)),
  });
};
</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">
      <user-table-column title="用户艺名" data-index="id" :width="200" show-avatar />
      <EnumTableColumn title="性别" data-index="sex" :option="sexOption" :dark-value="0" :width="70" />
      <FilterTableColumn title="用户邮箱" data-index="email" :width="200" />
      <PhoneTableColumn title="手机号码" data-index="phone" area-index="area_code" :width="160" />
      <FilterTableColumn title="管理歌曲" :width="100">
        <template #default="{ record }: { record: User & { activities_count: number[] } }">
          <Link class="link-hover" :hoverable="false" @click="onView(record)">{{ record.activities_count }}首</Link>
        </template>
      </FilterTableColumn>
      <EnumTableColumn title="关注服务号" data-index="official_status" :option="officialStatusOption" :dark-value="0" :width="120" />
      <EnumTableColumn title="状态" data-index="status" :option="statusOption" :dark-value="0" :width="80" />
      <FilterTableColumn v-if="hasPermission" title="操作" :width="100">
        <template #default="{ record }">
          <Link class="link-hover" :hoverable="false" @click="onDelete(record)">删除</Link>
        </template>
      </FilterTableColumn>
    </FilterTable>
  </Card>
</template>

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