<script setup lang="ts">
  import { Link, Message, TableData } from '@arco-design/web-vue';
  import { computed, onMounted, ref } from 'vue';
  import FilterTable from '@/components/filter/table.vue';
  import FilterTableColumn from '@/components/filter/table-column.vue';
  import EnumTableColumn from '@/components/filter/enum-table-column.vue';
  import SpaceTableColumn from '@/components/filter/space-table-column.vue';

  import useLoading from '@/hooks/loading';
  import { AnyObject } from '@/types/global';
  import useUserApi from '@/http/user';
  import useActivityApi, { useManagerApi } from '@/http/activity';
  // eslint-disable-next-line @typescript-eslint/no-unused-vars
  import { User, UserManageActivity } from '@/utils/model';
  import { createFormVNode, createModalVNode, createSelectionFormItemVNode } from '@/utils/createVNode';
  import usePermission from '@/hooks/permission';
  import { promiseToBoolean } from '@/utils';

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

  const { loading, setLoading } = useLoading(false);
  const { permissionOption } = useManagerApi;
  const { statusOption } = useActivityApi;

  const tableRef = ref();

  const onQuery = async (params: AnyObject) => {
    setLoading(true);
    return useUserApi.manageSongs(props.user.id, { project_id: props.projectKey, ...params }).finally(() => setLoading(false));
  };

  onMounted(() => tableRef.value?.onPageChange(1));

  const label = computed(() => `${props.user.nick_name} 管理歌曲共：${tableRef.value?.getCount()} 首`);

  const formatPermission = (permission: any[]) =>
    permission
      .map((item) => `[${permissionOption.find((option) => option.value === item)?.label}]` || '')
      .filter((item) => item.length !== 0)
      .join('');

  const onUpdate = (record: TableData) => {
    const formValue = ref<string[]>(record?.permission || ['view']);
    return createModalVNode(
      () =>
        createFormVNode(
          { layout: 'vertical', model: {} },
          createSelectionFormItemVNode(
            formValue,
            permissionOption,
            { label: '设置用户权限', rowClass: 'mb-0' },
            {
              'multiple': true,
              'onUpdate:modelValue': (val?: string[]) => {
                if (!val?.includes('view')) {
                  val?.unshift('view');
                }
                formValue.value = val || [];
              },
            }
          )
        ),
      {
        title: '修改',
        titleAlign: 'center',
        onBeforeOk: () => promiseToBoolean(useManagerApi.update(record.id, { permission: formValue.value })),
        onOk: () => {
          Message.success('更新成功');
          tableRef.value?.onFetch();
        },
      }
    );
  };

  const onDelete = (record: TableData) => {
    createModalVNode(`确认取消用户：${props.user?.nick_name} 的外部管理员身份`, {
      title: '删除操作',
      onBeforeOk: () => promiseToBoolean(useManagerApi.destroy(record.id)),
      onOk: () => {
        Message.success('删除成功');
        tableRef.value?.onFetch();
      },
    });
  };
</script>

<template>
  <div style="margin-bottom: 10px">{{ label }}</div>
  <FilterTable ref="tableRef" :loading="loading" :on-query="onQuery">
    <FilterTableColumn title="厂牌名称" data-index="project.name" :width="120" />
    <FilterTableColumn title="歌曲名称" data-index="activity_name" :width="160" />
    <FilterTableColumn title="权限" data-index="permission" :width="240">
      <template #default="{ record }: { record: UserManageActivity }">{{ formatPermission(record.permission) }}</template>
    </FilterTableColumn>
    <EnumTableColumn title="状态" data-index="activity_status" :width="100" :option="statusOption" />
    <SpaceTableColumn
      v-if="usePermission().checkPermission(['audition-project-show-out-manage-edit', 'audition-project-show-out-manage-delete'])"
      title="操作"
      :width="120"
    >
      <template #default="{ record }">
        <Link v-permission="['audition-project-show-out-manage-edit']" class="link-hover" :hoverable="false" @click="onUpdate(record)">
          修改
        </Link>
        <Link v-permission="['audition-project-show-out-manage-delete']" class="link-hover" :hoverable="false" @click="onDelete(record)">
          取消管理
        </Link>
      </template>
    </SpaceTableColumn>
  </FilterTable>
</template>

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