<script setup lang="ts">
  import {
    Tabs,
    TabPane,
    Row,
    Col,
    Avatar,
    Form,
    FormItem,
    Divider,
    ImagePreviewGroup,
    Space,
    Image,
    RadioGroup,
    Textarea,
    Table,
    TableColumn,
  } from '@arco-design/web-vue';
  import AudioPlayer from '@/components/audio-player/index.vue';
  import { useCertifyApi } from '@/http/user';
  import { Option } from '@/types/global';
  import { ref } from 'vue';
  import { Router } from 'vue-router';
  import { FormInstance } from '@arco-design/web-vue/es/form';
  import { UserCertify } from '@/utils/model';

  const { statusOption } = useCertifyApi;

  const props = defineProps<{
    activeKey: string;
    router: Router;
    row: UserCertify;
    platformOption: Option[];
    certifyOption: Option[];
    disabled?: boolean;
    submit?: (value: { status: number; reason: string }) => Promise<UserCertify>;
    close?: () => void;
  }>();

  const auditStatus = [
    { value: 1, label: '通过' },
    { value: 2, label: '拒绝' },
  ];

  const formRef = ref<FormInstance>();
  const formValue = ref({ status: props.row.status || 0, reason: props.row.reason || '' });

  const onSubmit = async () => {
    return (await formRef.value?.validate()) ? Promise.reject() : props.submit?.(formValue.value);
  };

  // const router = useRouter();

  const goUserDetailPage = (userId: any) => {
    props.close?.();
    const r = props.router;
    if (props.row.user?.identity === 1) {
      return r.push({ name: 'user-singer-show', params: { id: userId } });
    }
    if ([2, 3].includes(Number(props.row.user?.identity))) {
      return r.push({ name: 'user-business-show', params: { id: userId } });
    }
    return r.push({ name: 'user-register-show', params: { id: userId } });
  };

  defineExpose({ onSubmit });
</script>

<template>
  <Tabs :default-active-key="activeKey || 'audit'" type="rounded" size="small">
    <TabPane key="audit" title="认证申请">
      <Row align="center">
        <Col flex="80px" style="margin-right: 20px; cursor: pointer">
          <Avatar :size="80" :image-url="row.user?.avatar || ''" @click="goUserDetailPage(row.user?.id)" />
        </Col>
        <Col flex="auto">
          <Form v-if="row.user" :model="row.user" auto-label-width>
            <FormItem hide-label row-class="mb-0" @click="goUserDetailPage(row.user?.id)">
              <div style="font-weight: bold; font-size: 18px; cursor: pointer"> {{ row.user.nick_name || '' }}</div>
              <span style="font-size: 12px; margin-left: 10px; cursor: pointer">{{ row.user.real_name }}</span>
            </FormItem>
            <FormItem label="当前身份" show-colon row-class="mb-0">
              <Space>
                <template #split>
                  <Divider direction="vertical" />
                </template>
                <span v-if="row.user.identity === 0">未认证</span>
                <span v-if="[1, 3].includes(row.user.identity)">音乐人</span>
                <span v-if="[2, 3].includes(row.user.identity)">经纪人</span>
              </Space>
            </FormItem>
            <FormItem label="当前能力" show-colon row-class="mb-0">
              {{ row.user.auth_tags?.map((item) => item.name).join('｜') }}
            </FormItem>
          </Form>
        </Col>
      </Row>

      <Divider orientation="left">注册来源</Divider>

      <Row align="center" style="margin-top: 14px">
        <Col v-if="row.user?.register_type == 2">
          <span class="span">注册来源(用户推荐)：</span>
          <span style="color: rgb(18, 92, 254, 1); cursor: pointer" @click="goUserDetailPage(row.user?.inviter.id)">{{
            row.user?.inviter.nick_name
          }}</span>
        </Col>
        <Col v-else-if="row.user?.register_type == 1">
          <span class="span">注册来源(自行注册)：</span>
          <span class="span">{{ row.user?.register_remark }}</span>
        </Col>
        <Col v-else>
          <span class="span">注册来源：无</span>
        </Col>
      </Row>

      <Divider orientation="left">认证信息</Divider>
      <Form ref="formRef" :model="formValue" :disabled="disabled || false" auto-label-width>
        <FormItem label="平台用户名" show-colon>{{ row.nick_name }}</FormItem>
        <FormItem label="所属平台" show-colon>
          {{
            platformOption
              .filter((item) => row.platform.includes(String(item.value)))
              ?.map((item) => item.label)
              ?.join('｜')
          }}
        </FormItem>
        <FormItem label="代表作" show-colon>{{ row.works }}</FormItem>
        <FormItem label="相关截图" show-colon>
          <ImagePreviewGroup infinite>
            <Space>
              <Image v-for="item in row.img" :key="item" :width="60" :height="60" :src="item" />
            </Space>
          </ImagePreviewGroup>
        </FormItem>
        <FormItem label="认证能力" show-colon>
          {{
            certifyOption
              .filter((item) => row.tags.includes(Number(item.value)))
              ?.map((item) => item.label)
              ?.join('｜')
          }}
        </FormItem>
        <FormItem label="附带音频" show-colon>
          <Space direction="vertical" fill style="width: 100%">
            <Row v-if="row.audio_info?.local" align="center">
              <Col flex="auto">
                <AudioPlayer :url="row.audio_info.local" />
              </Col>
              <Col flex="100px">
                <div style="line-height: 30px; height: 36px; margin-left: 10px">本地音频</div>
              </Col>
            </Row>
            <Row v-if="row.audio_info?.online" align="center">
              <Col flex="auto">
                <AudioPlayer :url="row.audio_info.online" />
              </Col>
              <Col flex="100px">
                <div style="line-height: 30px; height: 36px; margin-left: 10px">在线演唱</div>
              </Col>
            </Row>
          </Space>
        </FormItem>
        <FormItem
          label="审核结果"
          field="status"
          show-colon
          :rules="[{ type: 'number', required: true, min: 1, message: '请选择审核结果' }]"
        >
          <RadioGroup v-model="formValue.status" :options="auditStatus" />
        </FormItem>
        <FormItem
          v-show="formValue.status === 2"
          field="reason"
          :hide-asterisk="true"
          :rules="formValue.status === 2 ? [{ required: true, minLength: 1, message: '请输入拒绝理由' }] : []"
        >
          <Textarea v-model="formValue.reason" show-word-limit :max-length="100" :auto-size="{ minRows: 3, maxRows: 3 }" />
        </FormItem>
      </Form>
    </TabPane>
    <TabPane key="record" :title="`审核记录(${row.records.length})`">
      <Table :data="row.records" :bordered="false" :table-layout-fixed="true" :pagination="false" :scroll="{ y: 800 }">
        <template #columns>
          <TableColumn data-index="id" title="序号" :width="60">
            <template #cell="{ rowIndex }">
              {{ row.records.length - rowIndex }}
            </template>
          </TableColumn>
          <TableColumn title="操作人" data-index="operator_id">
            <template #cell="{ record }">
              <template v-if="record.operator">{{ `${record.operator.nick_name}(${record.operator.real_name})` }}</template>
            </template>
          </TableColumn>
          <TableColumn title="操作时间" data-index="updated_at" />
          <TableColumn title="操作结果" data-index="status">
            <template #cell="{ record }">{{ statusOption.find((item) => item.value === record.status)?.label }}</template>
          </TableColumn>
          <TableColumn title="说明" data-index="reason" />
        </template>
      </Table>
    </TabPane>
  </Tabs>
</template>

<style scoped lang="less">
  .arco-form-item {
    margin-bottom: 10px;
  }

  .span {
    color: rgb(78, 89, 105, 1);
    font-size: 14px;
  }
</style>