<template>
  <!-- 非遗表单 -->
  <Form 
    ref="formRef"
    :formModel="formModel"
    :formOptions="formOptions"
    :load="loadData"
    :model="IchInfo"
    pushExamine
  />
</template>

<script setup lang="ts">
import { ref, type Ref } from 'vue';
import Form from './form.vue';
import InheritorContent, { IchInfo } from '@/api/collect/InheritorContent';
import CommonContent from '@/api/CommonContent';
import type { IDynamicFormOptions } from '@/components/dynamic';

const formModel = ref(new IchInfo()) as Ref<IchInfo>;
const formOptions = ref<IDynamicFormOptions>({
  formItems: [
    {
      type: 'flat-group', label: '非遗基础档案', name: 'ichInfo',
      childrenColProps: { span: 24 },
      children: [
        { 
          label: '非遗项目名称', name: 'title', type: 'text',
          additionalProps: {
            placeholder: '请输入标题',
          },
        },
        { 
          label: '级别', name: 'level', type: 'select-id',
          additionalProps: {
            placeholder: '请选择级别',
            loadData: async () => (await CommonContent.getCategoryList(2)).map(p => ({ text: p.title, value: p.id, raw: p }))
          },  
        },
        { 
          label: '非遗分类', name: 'ichType', type: 'select-id',
          additionalProps: {
            placeholder: '请选择非遗类型',
            loadData: async () => (await CommonContent.getCategoryList(4)).map(p => ({ text: p.title, value: p.id, raw: p }))
          },
        },
        { 
          label: '批次', name: 'batch', type: 'select-id',
          additionalProps: {
            placeholder: '请选择批次',
            loadData: async () => (await CommonContent.getCategoryList(289)).map(p => ({ text: p.title, value: p.id, raw: p }))
          },
        },
        { label: '申报区域', name: 'regionText', type: 'text', additionalProps: { placeholder: '请输入申报地区' } },
        
        { label: '非遗项目简介', name: 'intro', type: 'richtext', additionalProps: { placeholder: '请输入简介' } },
        { 
          label: '传承谱系', name: 'pedigree', type: 'richtext', 
          additionalProps: { placeholder: '请输入传承谱系' },
          formProps: {
            extraMessage:  `请按传承脉络顺序填写：
1、传承人：姓名（附简短介绍，如技艺特长/代表成就）
2、传承代数：标注第几代（示例：第五代传人）
3、师从关系：明确师承对象（如：师从第四代传人XXX）
注：信息需真实可考，传承脉络清晰有序`
          },
        },
        //{ label: '非遗详细描述', name: 'description', type: 'richtext', additionalProps: { placeholder: '请输入项目描述' } },
        //{ label: '传承值', name: 'heritage', type: 'text', additionalProps: { placeholder: '请输入传承值' } },
        
        { 
          label: '保护单位地址', name: 'address', type: 'address-sercher', 
          additionalProps: { placeholder: '请输入地址' },
          /* TODO: additionalEvents: {
            choosedAddress: (address: AddressItem) => {
              ((formRef.value?.getFormRef() as IDynamicFormRef).getFormItemControlRef('lonlat') as any).moveTo([
                address.lng, address.lat
              ], 20)
            },
          } */
        },
        { 
          label: '地图坐标', name: 'lonlat', type: 'select-lonlat',
          formProps: {
            extraMessage: '输入模糊地址后可以点击搜索跳转到指定位置，如果地图位置不正确，可以手动拖拽调整位置',
          },
        },
        { label: '保护单位(多个保护单位请用逗号隔开)', name: 'unit', type: 'text', additionalProps: { placeholder: '请输入保护单位' } },
        { 
          label: '非遗项目相关图片', name: 'images', type: 'uploader',
          //hidden: { callback: (_, model) => (model as IchInfo).type !== 4 },
          formProps: {
            extraMessage: '建议分辨率：1920*1080以上',
          },
          additionalProps: {
            placeholder: '请上传图片',
            maxCount: 100,
            name: 'file',
            accept: 'image/*',
          },
        },
        { 
          label: '相关视频', name: 'video', type: 'uploader',
          //hidden: { callback: (_, model) => (model as IchInfo).type !== 3 },
          additionalProps: {
            placeholder: '请上传视频',
            accept: 'video/*',
            name: 'file',
          }
        },
        { 
          label: '其他附件', name: 'annex', type: 'uploader',
          //hidden: { callback: (_, model) => (model as IchInfo).type !== 3 },
          formProps: {
            extraMessage: '可以上传多个视频文件',
          },
          additionalProps: {
            placeholder: '请上传视频',
            name: 'file',
          },  
        },
      ]
    },
  ],
  formRules: {
    title: [{ required: true, message: '请输入标题' }],
    region: [{ required: true, message: '请选择地区' }],
    type: [{ required: true, message: '请选择类型' }],
    image: [{ required: true, message: '请上传图片' }],
    level: [{ required: true, message: '请选择级别' }],
    ichType: [{ required: true, message: '请选择非遗类型' }],
    batch: [{ required: true, message: '请输入批次' }],
  }
});

async function loadData(id: number|undefined) {
  formModel.value = await InheritorContent.getIchInfo(id);
}

</script>
