<template>
  <form-create
    v-model="formData"
    v-model:api="fapi"
    :rule="rule"
    :field="field"
    :option="option"
    @submit="onSubmit"
  ></form-create>
</template>

<script lang="ts" setup>
import {onMounted,ref,watch} from "vue";
import formCreate from "@form-create/element-ui";
import { moduleById } from '@/api/application/module'



const moduleInfo:any = ref({})
const props:any = defineProps({
  moduleInfo: {
    type: Object,
    default: ''
  }
})
watch(() => props.moduleInfo, val => { // 初始化数据
  moduleInfo.value = val
  getInit()
})

const field = ref([{
                label: '商品表',
                children: [
                    {
                        label: '商品ID',
                        item: 'input',
                        field: 'goods_id',
                        update: {
                            disabled: true
                        }
                    },
                    {
                        label: '商品名称',
                        field: 'goods_name',
                        item: 'input',
                    },
                    {
                        label: '商品分类',
                        field: 'goods_cate',
                        rule: {
                            "type": "select",
                            "field": "Fyvqm1ef5b5ud9c",
                            "title": "选择器",
                            "info": "",
                            "effect": {
                                "fetch": ""
                            },
                            "$required": false,
                            "options": [
                                {
                                    "label": "电子产品",
                                    "value": "电子产品"
                                },
                                {
                                    "label": "日用百货",
                                    "value": "日用百货"
                                },
                                {
                                    "label": "时尚女装",
                                    "value": "时尚女装"
                                },
                                {
                                    "label": "潮牌男装",
                                    "value": "潮牌男装"
                                }
                            ],
                            "_fc_id": "id_Flmkm1ef5b5udac",
                            "name": "ref_Fzvkm1ef5b5udbc",
                            "display": true,
                            "hidden": false,
                            "_fc_drag_tag": "select"
                        }
                    },
                    {
                        label: '商品上架时间',
                        field: 'goods_update_time',
                        rule: [
                            {
                                "type": "datePicker",
                                "field": "Fip1m14iqwv9ccc",
                                "title": "日期",
                                "info": "",
                                "$required": false,
                                "props": {
                                    "type": "datetime"
                                },
                                "_fc_id": "id_Fg4gm14iqwv9cdc",
                                "name": "ref_Fba2m14iqwv9cec",
                                "display": true,
                                "hidden": false,
                                "_fc_drag_tag": "datePicker"
                            }
                        ]
                    },
                ]
            }, {
                label: '用户表',
                children: [
                    {
                        label: '用户ID',
                        field: 'user_id',
                        item: 'input',
                        update: {
                            disabled: true
                        }
                    },
                    {
                        label: '手机号',
                        field: 'phone',
                        rule: {
                            "type": "input",
                            "field": "Fif4m1efbeddguc",
                            "title": "手机号",
                            "info": "",
                            "$required": false,
                            "_fc_id": "id_F3a9m1efbedegvc",
                            "name": "ref_Festm1efbedegwc",
                            "display": true,
                            "hidden": false,
                            "_fc_drag_tag": "input",
                            "validate": [
                                {
                                    "transform": "[[FORM-CREATE-PREFIX-function anonymous(val\n) {\nthis.type = Array.isArray(val) ? 'array' : (typeof val); return val;\n}-FORM-CREATE-SUFFIX]]",
                                    "mode": "pattern",
                                    "trigger": "blur",
                                    "pattern": "^(?:(?:\\+|00)86)?1[3-9]\\d{9}$",
                                    "message": "请输入正确的手机号"
                                }
                            ]
                        },
                    },
                    {
                        label: '用户名称',
                        field: 'username',
                        item: 'input',
                    },
                    {
                        label: '用户备注',
                        field: 'user_mark',
                        item: 'textarea',
                    },
                    {
                        label: '用户头像',
                        field: 'avatar',
                        rule: {
                            "type": "upload",
                            "field": "F0gfm1ef9o5mffc",
                            "title": "用户头像",
                            "info": "",
                            "$required": false,
                            "props": {
                                "action": "/",
                                "onSuccess": "[[FORM-CREATE-PREFIX-function anonymous(res,file\n) {\nfile.url = res.data.url;\n}-FORM-CREATE-SUFFIX]]"
                            },
                            "_fc_id": "id_Fsokm1ef9o5mfgc",
                            "name": "ref_Fv5hm1ef9o5mfhc",
                            "display": true,
                            "hidden": false,
                            "_fc_drag_tag": "upload"
                        }
                    },
                ]
            }]) 


const  option :any = ref({});
const  rule :any = ref([]);
const fapi = ref(null);
const formData = ref({});

const onSubmit =  (formData:any) => {
  //todo 提交表单
console.log(formData);
}
function getInit(){
  if(moduleInfo.value.id == null){
    return
  }
  moduleById(props.moduleInfo.id ).then(res => {
    if(res.code ==0){
      if(res.data.data.canvas_style_data != null && res.data.data.canvas_style_data != ""){
        option.value =  formCreate.parseJson(res.data.data.component_data)
        rule.value =  formCreate.parseJson(res.data.data.canvas_style_data)
      }
    }
  })
}
onMounted(() => {
  moduleInfo.value = props.moduleInfo
  getInit()
});
</script>