<script setup lang="ts">
import { ref, computed, createVNode } from 'vue';
import { FieldRule, FormInstance } from '@arco-design/web-vue/es/form';
import { useVModels } from '@vueuse/core';
import { Form, FormItem, Link, Textarea, TypographyText } from '@arco-design/web-vue';
import InputUpload from '@/components/input-upload/index.vue';
import { useSelectionStore } from '@/store';
import { get, set } from 'lodash';
import useAuthApi from '@/api/auth';
import axios from 'axios';
import AudioPreview from '@/views/audition/activity-apply/components/audio-preview.vue';
import AudioPlayer from '@/components/audio-player/index.vue';
import { createModalVNode } from '@/utils/createVNode';

const props = defineProps<{ loading?: boolean; modelValue?: any }>();
const emits = defineEmits(['update:modelValue', 'update:loading']);

const formRef = ref<FormInstance>();
const { loading, modelValue: formValue } = useVModels(props, emits);

const guideSourceUrl = computed({
  get: () => get(formValue.value, 'expand.guide_source.url', ''),
  set: (val) => set(formValue.value, 'expand.guide_source.url', val),
});

const karaokeSourceUrl = computed({
  get: () => get(formValue.value, 'expand.karaoke_source.url', ''),
  set: (val) => set(formValue.value, 'expand.karaoke_source.url', val),
});

const onUpdateGuide = (file: { name: string; url: string; size: number }) => {
  set(formValue.value, 'expand.guide_source', { name: file.name, url: file.url, size: file.size });
};

const onUpdateKaraoke = (file: { name: string; url: string; size: number }) => {
  set(formValue.value, 'expand.karaoke_source', { name: file.name, url: file.url, size: file.size });
};

const { activityAudioAccept } = useSelectionStore();

const formRule = {
  'expand.guide_source.url': [{ required: true, message: '请上传导唱文件' }],
  'expand.karaoke_source.url': [{ required: false, message: '请上传伴奏文件' }],
  'lyric': [{ type: 'string', required: true, message: '请填写歌词内容' }],
} as Record<string, FieldRule[]>;

const onDownload = (url: string, fileName: string) => useAuthApi.downloadFile(url, `${formValue.value.song_name}(${fileName})`);

const guideFile = ref<File | undefined>();

const getGuideFile = async () => {
  if (!guideFile.value) {
    guideFile.value = await axios
      .get(`${guideSourceUrl.value}`, { responseType: 'blob', timeout: 60000 })
      .then(({ data }) => Promise.resolve(data));
  }

  return guideFile.value;
};

const onAudioPreview = async () => {
  const src = await getGuideFile();
  createModalVNode(() => createVNode(AudioPreview, { src, lyric: formValue.value.lyric }), {
    title: '预览歌词-整首',
    footer: false,
    closable: true,
  });
};

defineExpose({
  onValid: (callback?: () => void) => formRef.value?.validate((errors) => !errors && callback?.()),
});
</script>

<template>
  <Form ref="formRef" :model="formValue" :rules="formRule" :auto-label-width="true">
    <FormItem label="音频文件" field="expand.guide_source.url" :show-colon="true">
      <InputUpload
        v-model="guideSourceUrl"
        :accept="activityAudioAccept"
        :limit="100"
        @success="onUpdateGuide"
        @choose-file="(file) => (guideFile = file)"
        @update:loading="(value) => (loading = value)"
      />
    </FormItem>
    <FormItem v-if="guideSourceUrl">
      <template #label>
        <Link icon @click="onDownload(guideSourceUrl, '音频文件')">下载音频</Link>
      </template>
      <AudioPlayer name="音频文件" :url="guideSourceUrl" />
    </FormItem>
    <FormItem label="伴奏文件" field="expand.karaoke_source.url" :show-colon="true">
      <InputUpload
        v-model="karaokeSourceUrl"
        :accept="activityAudioAccept"
        :limit="100"
        @success="onUpdateKaraoke"
        @update:loading="(value) => (loading = value)"
      />
    </FormItem>
    <FormItem v-if="karaokeSourceUrl">
      <template #label>
        <Link icon @click="onDownload(karaokeSourceUrl, '伴奏文件')">下载伴奏</Link>
      </template>
      <AudioPlayer name="伴奏文件" :url="karaokeSourceUrl" />
    </FormItem>
    <FormItem class="lyric" label="歌词文本" field="lyric" :show-colon="true">
      <Textarea
        v-model="formValue.lyric"
        :auto-size="{ minRows: 7, maxRows: 7 }"
        placeholder="请粘贴带时间的lrc歌词文本至输入框"
        @blur="() => (formValue.lyric = formValue.lyric?.replace(/(\n[\s\t]*\r*\n)/g, '\n').replace(/^[\n\r\t]*|[\n\r\t]*$/g, ''))"
      />
      <!-- <template #extra>
        <Link :hoverable="false" :disabled="!guideSourceUrl || !formValue.lyric" @click="onAudioPreview"> 预览歌词</Link>
      </template> -->
    </FormItem>
    <TypographyText type="danger" style="font-size: 13px">
      注意：demo上架后，存在于您的厂牌私库。需要在App应用内，您的厂牌主页下，进行1对1分享给对方试听
    </TypographyText>
  </Form>
</template>

<style scoped lang="less">
.lyric {
  :deep(.arco-form-item-extra) {
    width: 100%;
    text-align: right;
  }
}
</style>