<template>
  <!-- 传习所基础表单-->
  <Form 
    ref="formRef"
    :formModel="formModel"
    :formOptions="formOptions"
    :load="loadData"
    :model="SeminarInfo"
  />
</template>

<script setup lang="ts">
import { ref, type Ref } from 'vue';
import Form from './form.vue';
import InheritorContent, { SeminarInfo } from '@/api/collect/InheritorContent';
import CommonContent from '@/api/CommonContent';
import type { IDynamicFormOptions } from '@/components/dynamic';
import { useLoadQuerys } from '@/components/composeabe/LoadQuerys';
import { useAuthStore } from '@/store/auth';

const authStore = useAuthStore();

const formModel = ref(new SeminarInfo()) as Ref<SeminarInfo>;
const formOptions = ref<IDynamicFormOptions>({
  formItems: [
    {
      type: 'flat-group', label: '传习所/保护单位信息', name: 'seminarInfo',
      childrenColProps: { span: 24 },
      children: [
        { 
          label: '传习所名称', name: 'title', type: 'text',
          additionalProps: { placeholder: '请输入标题' },
        },
        { 
          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: 'level', type: 'select-id',
          additionalProps: {
            placeholder: '请选择传习所级别',
            loadData: async () => (await CommonContent.getCategoryList(2)).map(p => ({ text: p.title, value: p.id, raw: p }))
          },
        },{ 
          label: '图片', name: 'image', type: 'uploader',
          additionalProps: {
            placeholder: '请上传图片',
            name: 'file',
            accept: 'image/*',
            // beforeUpload: useBeforeUploadImageChecker(),
            // upload: useAliOssUploadCo('seminar/images')
          },
        },
        { label: '传习所介绍', name: 'content', type: 'richtext', additionalProps: { placeholder: '请输入内容' } },
        
        { label: '传习所地址', name: 'address', type: 'address-sercher', 
          additionalProps: { placeholder: '请输入地址' },
          /* 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' 

        },
        { label: '联系人', name: 'contact', type: 'text', additionalProps: { placeholder: '请输入联系人' } },
        { label: '联系电话', name: 'mobile', type: 'text', additionalProps: { placeholder: '请输入联系电话' } },
        { 
          label: '传习所/保护单位类型', name: 'ichSiteType', type: 'select',
          additionalProps: {
            placeholder: '请选择非遗单位类型',
            columns: [[
              { text: '传习所', value: 1 },
              { text: '保护单位', value: 2 }
            ]],
          },
        },
        { 
          label: '是否对游客开放', name: 'visit', type: 'select',
          additionalProps: {
            placeholder: '请选择是否对游客开放',
            columns: [[
              { text: '否', value: 0 },
              { text: '是', value: 1 }
            ]],
          },
        },
        { 
          label: '审核人员', name: 'text1', type: 'static-text', 
          additionalProps: {
            text: '黄念旭，李向群，卢志明',
            style: { color: '#999', }
          }
        },
        { 
          label: '审核状态', name: 'text2', type: 'static-text', 
          additionalProps: {
            text: '暂未审核',
            style: { color: '#999', }
          }
        },
        { 
          label: '填报人', name: 'text3', type: 'static-text', 
          additionalProps: {
            text: authStore.userInfo?.nickname,
          }
        },
      ]
    },
  ],
  formRules: {
    'expandInfo.protectLevel': [{ required: true, message: '请选择保护级别' }],
    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: '请输入批次' }]
  }
});

const { querys } = useLoadQuerys({
  ichId: 0,
})

async function loadData(id: number|undefined) {
  formModel.value = id === undefined || id > 0 ? await InheritorContent.getSeminarInfo(id) : new SeminarInfo();
  if (id === -1)
    formModel.value.associationId = querys.value.ichId ?? 0;
}

</script>