<template>
  <view class="d-flex flex-column bg-base p-3">
    <LoadingPage v-if="loading" /> 
    <DynamicForm
      ref="formRef"
      :model="formModel"
      :options="formDefine"
    />
    <Button type="primary" @click="submit">提交</Button>
    <XBarSpace />
  </view>
</template>

<script setup lang="ts">
import ContributeApi, { ContributeItem } from '@/api/user/ContributeApi';
import { showError } from '@/common/composeabe/ErrorDisplay';
import { onMounted, ref } from 'vue';
import LoadingPage from '@/components/display/loading/LoadingPage.vue';
import Button from '@/components/basic/Button.vue';
import XBarSpace from '@/components/layout/space/XBarSpace.vue';
import DynamicForm from '@/components/dynamic/DynamicForm.vue';
import type { IDynamicFormOptions, IDynamicFormRef } from '@/components/dynamic';
import type { FormProps } from '@/components/form/Form.vue';
import type { PickerIdFieldProps } from '@/components/dynamic/wrappers/PickerIdField';
import type { UploaderFieldProps } from '@/components/form/UploaderField.vue';
import { useImageSimpleUploadCo } from '@/common/components/upload/ImageUploadCo';
import CommonContent from '@/api/CommonContent';

const loading = ref(false);

const formRef = ref<IDynamicFormRef>();
const formModel = ref(new ContributeItem());
const formDefine : IDynamicFormOptions = {
  formAdditionaProps: {
    labelFlex: 3,
    inputFlex: 7
  } as FormProps,
  formItems: [
    {
      name: 'a',
      type: 'flat-group',
      children: [
        { 
          label: '栏目', 
          name: 'mainBodyColumnId',
          type: 'select-id', 
          additionalProps: {
            loadData: async () => {
              return (await CommonContent.getContributeColumnList())
                .map((p) => ({
                  value: p.id,
                  text: p.name,
                }));
            },
          },
          rules: [{
            required: true,
            message: '请选择投稿栏目',
          }],
        },
        { 
          label: '文章标题', 
          name: 'title', 
          type: 'text', 
          defaultValue: '',
          additionalProps: {
            placeholder: '请输入文章标题',
          },
          rules:  [{
            required: true,
            message: '请输入文章标题',
          }] 
        },
        { 
          label: '内容类型', 
          name: 'type', 
          type: 'select-id', 
          additionalProps: {
            disabled: true,
            loadData: async () => {
              return [
                { value: 1, text: "文章" },
                { value: 2, text: "音频" },
                { value: 3, text: "视频" },
                { value: 4, text: "相册" },
              ]
            } ,
          } as PickerIdFieldProps,
          defaultValue: 1,
          rules: [{
            required: true,
            message: '请选择类型',
          }]
        },
      ]
    },
    {
      name: 'b',
      type: 'flat-group',
      children: [
        {
          label: `缩略图`,
          name: 'image',
          type: 'uploader',
          defaultValue: '',
          additionalProps: {
            upload: useImageSimpleUploadCo(),
            maxFileSize: 1024 * 1024 * 20,
            single: true,
          } as UploaderFieldProps,
          rules: [],
          formProps: {
            extraMessage: '建议分辨率：1920*1080以上',
          },
        },
        {
          label: '内容',
          name: 'intro',
          type: 'richtext',
          defaultValue: '',
          additionalProps: {
            placeholder: '请输入内容',
            saveTempKey: 'contribute',
          },
          rules: [{
            required: true,
            message: '请输入内容',
          }]
        },
        {
          label: '来源(可选)',
          name: 'source',
          type: 'text',
          defaultValue: '',
          additionalProps: {
            placeholder: '如果是转载文章可以输入来源',
          },
        },
        {
          label: `组图`,
          name: 'images',
          type: 'uploader',
          defaultValue: '',
          show: { callback: (_, formModel) => formModel.type == 4 },
          additionalProps: {
            upload: useImageSimpleUploadCo(),
            maxFileSize: 1024 * 1024 * 100,
            maxUploadCount: 20,
          } as UploaderFieldProps,
          formProps: {
            extraMessage: '建议分辨率：1920*1080以上',
          },
          rules: []
        },
        {
          label: `音频`,
          name: 'audio',
          type: 'uploader',
          defaultValue: '',
          show: { callback: (_, formModel) => formModel.type == 2 },
          additionalProps: {
            upload: useImageSimpleUploadCo(),
            maxFileSize: 1024 * 1024 * 100,
            single: true,
            chooseType: 'video',
          } as UploaderFieldProps,
          rules: []
        },
        {
          label: `视频`,
          name: 'video',
          type: 'uploader',
          defaultValue: '',
          show: { callback: (_, formModel) => formModel.type == 3 },
          additionalProps: {
            upload: useImageSimpleUploadCo(),
            maxFileSize: 1024 * 1024 * 100,
            single: true,
            chooseType: 'video',
          } as UploaderFieldProps,
          formProps: {
            extraMessage: '建议使用MP4格式1080P分辨率',
          },
          rules: []
        },
      ]
    },
    {
      name: 'c',
      type: 'flat-group',
      label: '额外信息(可选)',
      formProps: {
        showLabel: false,
      },
      additionalProps: {
        collapsible: true,
        collapsed: true,
      },
      childrenColProps: { span: 24 },
      children: [
        {
          label: '',
          name: 'extra',
          type: 'static-text',
          defaultValue: '',
          additionalProps: {
            text: '额外信息用于采集系统内部处理，可以不填写',
          },
        },
        {
          label: `关键字`,
          name: 'keywords',
          type: 'text-tag',
          defaultValue: '',
          rules: [],
          additionalProps: {
            placeholder: '可以输入关键字',
            tagJoinType: ';',
          },
          formProps: {
            extraMessage: '用于系统优化关键字搜索',
          },
        },
      ],
    }
  ]
}

async function submit() {
  if (!formRef.value)
    return;
  try {
    await formRef.value.validate();
  } catch {
    uni.showToast({
      title: '有必填项未填写，请检查',
      icon: 'none',
    });
    return;
  }
  try { 
    loading.value = true;
    await ContributeApi.contribute(formModel.value as ContributeItem);
    uni.showModal({
      title: '提交成功',
      content: '感谢您的投稿，我们将尽快审核并通知您结果。',
    });
  } catch (e) {
    showError(e);
  } finally {
    loading.value = false;
  }
}

onMounted(() => {

})

</script>

<style lang="scss">
</style>
