<script setup lang="ts">
  import { computed, onMounted, ref } from 'vue';
  import PageView from '@/components/page-view/index.vue';
  import FilterSearch from '@/components/filter/search.vue';
  import FilterSearchItem from '@/components/filter/search-item.vue';
  import FilterTable from '@/components/filter/table.vue';
  import { Input, Select, TableColumn, Link, Message, TableData } from '@arco-design/web-vue';
  import { AnyObject } from '@/types/global';
  import useLoading from '@/hooks/loading';
  import useActivityApi, { useManagerApi } from '@/http/activity';
  import useUserApi from '@/http/user';
  import EnumTableColumn from '@/components/filter/enum-table-column.vue';
  import NumberTableColumn from '@/components/filter/number-table-column.vue';
  import SpaceTableColumn from '@/components/filter/space-table-column.vue';

  import { createFormVNode, createModalVNode, createSelectionFormItemVNode } from '@/utils/createVNode';
  import { useRoute } from 'vue-router';
  import { isArray } from '@/utils/is';
  import usePermission from '@/hooks/permission';

  const { loading, setLoading } = useLoading(false);
  const filter = ref({ projectName: '', songName: '', permission: '', activityStatus: '' });
  const tableRef = ref();
  const total = ref(0);

  const props = defineProps<{ userKey: number }>();
  const { statusOption } = useActivityApi;
  const { permissionOption, update, destroy } = useManagerApi;

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

  const onQuery = async (params?: AnyObject) => {
    setLoading(true);
    useUserApi
      .manageSongs(props.userKey, { sortBy: 'activity_publish_at', sortType: 'desc' })
      .then(({ meta }) => (total.value = meta.total));

    return useUserApi
      .manageSongs(props.userKey, { ...filter.value, ...params, sortBy: 'activity_publish_at', sortType: 'desc' })
      .finally(() => setLoading(false));
  };

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

  const onReset = () => {
    filter.value = { projectName: '', songName: '', permission: '', activityStatus: '' };
    onSearch();
  };

  onMounted(() => onReset());

  defineExpose({ total });

  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: (done: any) =>
          update(record.id, { permission: formValue.value })
            .then(() => {
              Message.success('更新成功');
              tableRef.value?.onFetch();
              done(true);
            })
            .catch(() => done(false)),
      }
    );
  };

  const onDelete = (record: TableData) => {
    createModalVNode(`确认移除此用户在歌曲《${record.activity_name}》的外部管理员身份？`, {
      title: '删除操作',
      onBeforeOk: (done: any) =>
        destroy(record.id)
          .then(() => {
            Message.success('删除成功');
            tableRef.value?.onFetch();
            done(true);
          })
          .catch(() => done(false)),
    });
  };

  const routeName = useRoute().name as string;
  const checkPermission = (permission: string | string[]): boolean => {
    permission = isArray(permission) ? permission.map((item) => `${routeName}-${item}`) : `${routeName}-${permission}`;
    return usePermission().checkPermission(permission);
  };
  const hasPermission = computed(() => checkPermission(['manage-activity-edit', 'manage-activity-delete']));
</script>

<template>
  <PageView>
    <FilterSearch :loading="loading" :model="filter" @search="onSearch" @reset="onReset">
      <FilterSearchItem label="厂牌名称" filed="projectName">
        <Input v-model="filter.projectName" allow-clear placeholder="请输入" />
      </FilterSearchItem>
      <FilterSearchItem label="歌曲名称" filed="projectName">
        <Input v-model="filter.songName" allow-clear placeholder="请输入" />
      </FilterSearchItem>
      <FilterSearchItem label="状态" filed="projectName">
        <Select v-model="filter.activityStatus" :options="statusOption" allow-clear placeholder="请选择" />
      </FilterSearchItem>
      <FilterSearchItem label="外部权限" filed="projectName">
        <Select v-model="filter.permission" :options="permissionOption" allow-clear placeholder="请选择" />
      </FilterSearchItem>
    </FilterSearch>
    <FilterTable ref="tableRef" :loading="loading" :on-query="onQuery">
      <TableColumn title="厂牌名称" data-index="project.name" :width="160" :ellipsis="true" :tooltip="true" />
      <TableColumn title="歌曲名称" data-index="activity_name" :width="160" :ellipsis="true" :tooltip="true" />
      <NumberTableColumn title="试听人数" data-index="view_count" :width="100" :dark-value="0" />
      <NumberTableColumn title="收藏人数" data-index="like_count" :width="100" :dark-value="0" />
      <NumberTableColumn title="提交人数" data-index="submit_work_count" :width="100" :dark-value="0" />
      <TableColumn title="上架时间" data-index="activity_publish_at" :width="170" />
      <TableColumn title="外部权限" data-index="permission" :width="200" :ellipsis="true" :tooltip="true">
        <template #cell="{ record }"> {{ formatPermission(record.permission) }}</template>
      </TableColumn>
      <EnumTableColumn title="状态" data-index="activity_status" :option="statusOption" :width="120" />
      <SpaceTableColumn v-if="hasPermission" :width="120" data-index="operations" title="操作" :tooltip="false" :ellipsis="false">
        <template #default="{ record }">
          <Link v-if="checkPermission('manage-activity-edit')" :hoverable="false" @click="onUpdate(record)">修改</Link>
          <Link v-if="checkPermission('manage-activity-delete')" :hoverable="false" @click="onDelete(record)">取消管理</Link>
        </template>
      </SpaceTableColumn>
    </FilterTable>
  </PageView>
</template>

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