<script setup lang="ts" name="user-certify">
  import { ref, onActivated, h } from 'vue';
  import useLoading from '@/hooks/loading';
  import { useCertifyApi } from '@/http/user';
  import { AnyObject, Option } from '@/types/global';
  import { useRoute, useRouter } from 'vue-router';
  import EnumTableColumn from '@/components/filter/enum-table-column.vue';
  import useConfigApi from '@/http/config';
  import useTagApi from '@/http/Tag';
  import { createModalVNode } from '@/utils/createVNode';
  import { UserCertify } from '@/utils/model';
  import { TableData } from '@arco-design/web-vue';
  import UserTableColumn from '@/components/filter/user-table-column.vue';
  import ModalContent from './components/modal-content.vue';
  import { useAuthorizedStore } from '@/store';
  import { promiseToBoolean } from '@/utils';
  import usePermission from '@/hooks/permission';

  const { sexOption, statusOption, get, update } = useCertifyApi;

  const tableRef = ref();
  const filter = ref<AnyObject>({});
  const { loading, setLoading } = useLoading(false);

  const platformOption = ref<Option[]>([]);
  const certifyOption = ref<Option[]>([]);

  const router = useRouter();

  const onQuery = async (params?: AnyObject) => {
    setLoading(true);
    return get({ ...filter.value, ...params, sortBy: 'id', sortType: 'desc' }).finally(() => setLoading(false));
  };

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

  const formatPlatform = (platform: string[]) => platformOption.value.filter((item) => platform.includes(String(item.value)));

  const formatTag = (tag: number[]) => certifyOption.value.filter((item) => tag.includes(Number(item.value)));

  const onReset = () => {
    filter.value = { nick_name: '', sex: '', status: 0, createBetween: [] };
    onSearch();
  };

  const onView = (record: UserCertify) =>
    createModalVNode(
      () =>
        h(ModalContent, {
          activeKey: 'record',
          row: record,
          disabled: true,
          router,
          platformOption: platformOption.value,
          certifyOption: certifyOption.value,
        }),
      {
        title: '认证审核',
        titleAlign: 'center',
        modalClass: 'retry',
        escToClose: true,
        maskClosable: true,
        hideCancel: true,
      }
    );

  const onAudit = (record: UserCertify) => {
    const auditRef = ref<InstanceType<typeof ModalContent>>();
    const modal = createModalVNode(
      () =>
        h(ModalContent, {
          activeKey: 'audit',
          ref: auditRef,
          row: record,
          router,
          platformOption: platformOption.value,
          certifyOption: certifyOption.value,
          submit: (data: any) => update(record.id, data),
          close: () => modal.close(),
        }),
      {
        title: '认证审核',
        titleAlign: 'center',
        modalClass: 'retry',
        onBeforeOk: () => promiseToBoolean(auditRef.value?.onSubmit()),
        onOk: () => {
          tableRef.value?.onFetch();
          useAuthorizedStore().syncAuditUser();
        },
      }
    );
  };

  const onRowClick = (record: TableData) => {
    if (record.user?.identity === 1) {
      return router.push({ name: 'user-singer-show', params: { id: record.user_id } });
    }
    if ([2, 3].includes(Number(record.user?.identity))) {
      return router.push({ name: 'user-business-show', params: { id: record.user_id } });
    }
    return router.push({ name: 'user-register-show', params: { id: record.user_id } });
  };

  onActivated(() => {
    if (useRoute().meta.reload) {
      onReset();
      useConfigApi.getOption({ parentKey: 'music_platform' }).then((data) => (platformOption.value = data));
      useTagApi.getOption({ type: 4 }).then((data) => (certifyOption.value = data));
      useAuthorizedStore().syncAuditUser();
    }
  });
</script>

<template>
  <page-view has-card has-bread>
    <filter-search :model="filter" :loading="loading" @search="onSearch" @reset="onReset">
      <filter-search-item field="nick_name" label="用户艺名">
        <a-input v-model="filter.nick_name" allow-clear placeholder="请输入" />
      </filter-search-item>
      <filter-search-item field="sex" label="性别">
        <a-select v-model="filter.sex" allow-clear placeholder="请选择" :options="sexOption" />
      </filter-search-item>
      <filter-search-item field="createBetween" label="提交时间">
        <a-range-picker
          v-model="filter.createBetween"
          :time-picker-props="{ defaultValue: ['00:00:00', '23:59:59'] }"
          :day-start-of-week="1"
          value-format="YYYY-MM-DD HH:mm:ss"
          format="YYYY-MM-DD"
        />
      </filter-search-item>
      <filter-search-item field="status" label="状态">
        <a-select v-model="filter.status" allow-clear placeholder="请选择" :options="statusOption" />
      </filter-search-item>
    </filter-search>
    <filter-table ref="tableRef" :loading="loading" :on-query="onQuery" @row-click="onRowClick">
      <user-table-column title="用户艺名" data-index="user_id" user="user" show-avatar :width="240" />
      <enum-table-column title="性别" data-index="user.sex" :option="sexOption" :dark-value="0" :width="70" />
      <filter-table-column title="平台用户名称" data-index="nick_name" :width="120" />
      <a-table-column title="	所属平台" data-index="platform" :ellipsis="true">
        <template #cell="{ record }">
          <a-tag v-for="item in formatPlatform(record.platform)" :key="item.value" style="margin-right: 4px">
            {{ item.label }}
          </a-tag>
        </template>
      </a-table-column>
      <filter-table-column title="代表作名称/链接" data-index="works" :width="160" />
      <a-table-column title="认证能力" data-index="tags" :width="200" :ellipsis="true">
        <template #cell="{ record }">
          <a-tag v-for="item in formatTag(record.tags)" :key="item.value" style="margin-right: 4px">
            {{ item.label }}
          </a-tag>
        </template>
      </a-table-column>
      <filter-table-column title="最后提交审核时间" data-index="created_at" :width="170" />
      <enum-table-column title="最后审核状态" data-index="status" :option="statusOption" :width="120" />
      <a-table-column
        v-if="usePermission().checkPermission(['user-certify-audit', 'user-certify-show'])"
        title="操作"
        data-index="operation"
        :width="100"
      >
        <template #cell="{ record }">
          <a-link
            v-if="record.status === 0"
            v-permission="['user-certify-audit']"
            class="link-hover"
            :hoverable="false"
            @click.stop="onAudit(record)"
          >
            审核
          </a-link>
          <a-link v-else v-permission="['user-certify-show']" class="link-hover" :hoverable="false" @click.stop="onView(record)"
            >查看详情
          </a-link>
        </template>
      </a-table-column>
    </filter-table>
  </page-view>
</template>

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