<script setup lang="ts">
  import { ref, computed } 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 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';
  import { downloadFile } from '@/http/auth';

  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: '请填写歌词内容' }],
    'clip_lyric': [{ type: 'string', required: true, message: '请填写推荐歌词内容' }],
  } as Record<string, FieldRule[]>;

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

  const onFormatLyric = (key: string) => {
    formValue.value[key] = formValue.value[key].replace(/(\n[\s\t]*\r*\n)/g, '\n').replace(/^[\n\r\t]*|[\n\r\t]*$/g, '');
  };

  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" size="small">
    <FormItem label="音频文件" field="expand.guide_source.url" :show-colon="true">
      <InputUpload
        v-model="guideSourceUrl"
        :accept="activityAudioAccept"
        :limit="100"
        @success="onUpdateGuide"
        @choose-file="(file: any) => (guideFile = file)"
        @update:loading="(value: boolean) => (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: boolean) => (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: 6, maxRows: 6 }"
        placeholder="请粘贴带时间的lrc歌词文本至输入框"
        @blur="() => onFormatLyric('lyric')"
      />
      <!-- <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>