<template>
  <view class="d-flex flex-column bg-base p-3">
    <u-loading-page :loading="loading" /> 
    <SimpleDynamicFormUni
      ref="formRef"
      :formDefine="formDefine"
      :formProps="{
        labelPosition: 'top',
        labelWidth: '175',
      }"
      :formModelInit="formModelInit"
    />
    <u-button type="primary" @click="submit">提交</u-button>
    <u-safe-bottom />
  </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 type { FormDefine, FormExport } from '@/common/components/form';
import type { DynamicSelectProps } from '@/common/components/form/components/DynamicSelect.vue';
import SimpleDynamicFormUni from '@/common/components/form/SimpleDynamicFormUni.vue';

const loading = ref(false);

const formRef = ref<FormExport>();
const formDefine : FormDefine = {
  items: [
    {
      name: '',
      children: {
        type: 'group',
        props: {
          class: 'form-block',
        },
        propNestType: 'nest', 
        items: [
          { 
            label: '栏目', 
            name: 'mainBodyColumnId',
            type: 'dynamic-select', 
            params: {
              loadData: async () => {
                /* (await ContributeApi.getCanClaimVallageList())
                  .map((p) => ({
                    value: p.id,
                    text: p.villageName,
                  })) */
               return []
              },
            } as DynamicSelectProps,
            rules: [{
              required: true,
              errorMessage: '请选择投稿栏目',
            }],
            onChange: (_, value, model) => {
              //model.
            }
          },
          { 
            label: '文章标题', 
            name: 'title', 
            type: 'text', 
            defaultValue: '',
            params: {
              placeholder: '请输入文章标题',
            },
            rules:  [{
              required: true,
              errorMessage: '请输入文章标题',
            }] 
          },
          { 
            label: '内容类型', 
            name: 'type', 
            type: 'select', 
            params: {
              disabled: true,
              localdata: [
                { value: 1, text: "文章" },
                { value: 2, text: "音频" },
                { value: 3, text: "视频" },
                { value: 4, text: "相册" },
              ],
              clear: false,
            },
            defaultValue: 1,
            rules: [{
              required: true,
              errorMessage: '请选择类型',
            }]
          },
        ]
      }
    },
    {
      name: '',
      children: {
        type: 'group',
        props: {
          class: 'form-block',
        },
        propNestType: 'nest', 
        items: [
          {
            label: '内容',
            name: 'intro',
            type: 'richtext',
            defaultValue: '',
            params: {
              placeholder: '请输入内容',
              saveTempKey: 'contribute',
            },
            rules: [{
              required: true,
              errorMessage: '请输入内容',
            }]
          }
        ]
      }
    },
  ]
}

function formModelInit() {
  return new ContributeItem();
}

async function submit() {
  if (!formRef.value)
    return;
  try {
    const data = await formRef.value.submitForm<ContributeItem>();
    if (!data)
      return;
    loading.value = true;
    await ContributeApi.contribute(data);
    uni.showModal({
      title: '提交成功',
      content: '感谢您的投稿，我们将尽快审核并通知您结果。',
    });
  } catch (e) {
    showError(e);
  } finally {
    loading.value = false;
  }
}

onMounted(() => {

})

</script>

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