<template>
    <div class="card content-box">
        <el-form :model="_ruleForm" :rules="_rules" label-width="140px" ref="ruleFormRef">
            <template v-for="item in formData" :key="item.prop">
                <el-form-item :label="item.label" :prop="item.prop" :limit="1">
                    <template v-if="item.type === 'uploadImgs'">
                        <UploadImgs
                            v-model:file-list="_ruleForm[`${item.prop}`]"
                            height="140px"
                            width="140px"
                            border-radius="50%"
                        >
                            <template #empty>
                                <el-icon><Picture /></el-icon>
                                <span>请上传图片</span>
                            </template>
                            <template #tip> 图片大小不能超过 5M </template>
                        </UploadImgs>
                    </template>

                    <template v-if="item.type === 'input'">
                        <el-input :placeholder="item.placeholder" v-model.trim="_ruleForm[`${item.prop}`]" />
                    </template>
                    <template v-if="item.type === 'select'">
                        <el-select
                            v-model="_ruleForm[`${item.prop}`]"
                            :placeholder="item.placeholder"
                            clearable
                            style="width: 224px"
                        >
                            <el-option
                                :label="option.label"
                                :value="option.value"
                                v-for="option in item.options"
                                :key="option.value"
                            />
                        </el-select>
                    </template>
                </el-form-item>
            </template>

            <el-form-item style="margin-top: 20px">
                <el-button type="primary" @click="submitForm(ruleFormRef)"> 提交 </el-button>
                <el-button @click="resetForm(ruleFormRef)">重置 </el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script setup lang="ts">
import type { FormInstance, FormRules } from "element-plus";
import { ElMessage } from "element-plus";
// import UploadImgs from "@/components/Upload/Imgs.vue";
interface IProps {
    ruleForm: { [key: string]: any };
    formData: any[];
    rules: FormRules;
    submitForm: () => void;
    resetForm: () => void;
}
const ruleFormRef = ref<FormInstance>();
const props = defineProps<IProps>();
//将传递过来的值设置为响应式,这样就可以做一些输入的控制,props是单向的
const _ruleForm = computed(() => props.ruleForm);
// 接收 rules 并设置为响应式,必须要为响应式的,否则失效
const _rules = ref(props.rules);
//点击按钮验证,如果验证过来,可以将值传递到父组件
const submitForm = async (formEl: FormInstance | undefined) => {
    if (!formEl) return;
    await formEl.validate((valid, fields) => {
        if (valid) {
            ElMessage.success("提交的数据为 : " + JSON.stringify(_ruleForm.value));
        } else {
            console.log("error submit!", fields);
        }
    });
};

const resetForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return;
    formEl.resetFields();
};
</script>

<style scoped lang="scss">
// @import "./index.scss";
</style>
