<template>
    <el-form
        :model="_ruleForm"
        :rules="_rules"
        :label-width="labelWidth ? labelWidth : '140px'"
        ref="ruleFormRef"
        :validate-on-rule-change="false"
    >
        <template v-for="item in formData" :key="item.prop">
            <!--  :limit="1" -->
            <el-form-item :label="item.label" :prop="item.prop" style="margin-bottom: 20px">
                <template v-if="item.type === 'input'">
                    <el-input
                        style="width: 440px"
                        :placeholder="item.placeholder"
                        v-model="_ruleForm[`${item.prop}`]"
                        clearable
                        :disabled="item.disabled"
                        @blur="handleInputBlur"
                    />
                </template>
                <template v-if="item.type === 'inputSelect'">
                    <el-input
                        :placeholder="item.placeholder"
                        v-model="_ruleForm[`${item.prop}`]"
                        clearable
                        :disabled="item.disabled"
                        @blur="handleInputBlur"
                    >
                        <template #append>
                            <el-select v-model="_ruleForm[`${item.prop1}`]" :placeholder="item.placeholder1" style="width: 115px">
                                <el-option
                                    :label="option.label"
                                    :value="option.value"
                                    v-for="option in item.options"
                                    :key="option.value"
                                />
                            </el-select>
                        </template>
                    </el-input>
                </template>
                <template v-if="item.type === 'inputButton'">
                    <el-input
                        :placeholder="item.placeholder"
                        v-model="_ruleForm[`${item.prop}`]"
                        clearable
                        :disabled="item.disabled"
                    >
                        <template #append>
                            <el-button @click="handleInputButtonClick">选择</el-button>
                        </template>
                    </el-input>
                </template>
                <template v-if="item.type === 'inputNumber'">
                    <el-input-number
                        :min="1"
                        :max="9999"
                        :controls="true"
                        v-model="_ruleForm[`${item.prop}`]"
                        :disabled="item.disabled"
                        :placeholder="item.placeholder"
                        :maxlength="item.maxLength"
                        step-strictly
                        :step="1"
                        controls-position="right"
                    ></el-input-number>
                </template>

                <template v-if="item.type === 'textarea'">
                    <el-input
                        type="textarea"
                        :placeholder="item.placeholder"
                        v-model="_ruleForm[`${item.prop}`]"
                        :autosize="{ minRows: 10, maxRows: 20 }"
                        :disabled="item.disabled"
                        style="width: 440px"
                    />
                </template>
                <template v-if="item.type === 'date'">
                    <el-date-picker
                        v-model="_ruleForm[`${item.prop}`]"
                        type="date"
                        :placeholder="item.placeholder"
                        clearable
                        :disabled="item.disabled"
                    />
                </template>
                <template v-if="item.type === 'datetime'">
                    <el-date-picker
                        v-model="_ruleForm[`${item.prop}`]"
                        type="datetime"
                        :placeholder="item.placeholder"
                        clearable
                        :disabled="item.disabled"
                        format="YYYY-MM-DD HH:mm:ss"
                        date-format="MMM DD, YYYY"
                        time-format="HH:mm"
                    />
                </template>
                <template v-if="item.type === 'radio'">
                    <el-radio-group v-model="_ruleForm[`${item.prop}`]" @change="handleRadioGroup(_ruleForm[`${item.prop}`])">
                        <el-radio
                            :value="option.value"
                            :label="option.value"
                            v-for="(option, optionIndex) in item.options"
                            :key="optionIndex"
                            >{{ option.label }}</el-radio
                        >
                    </el-radio-group>
                </template>
                <!-- <template v-if="item.type === 'radio1'">
                    <el-radio-group v-model="_ruleForm[`${item.prop}`]">
                        <el-radio
                            :value="option.value"
                            :label="option.value"
                            v-for="(option, optionIndex) in item.options"
                            :key="optionIndex"
                            >{{ option.label }}</el-radio
                        >
                    </el-radio-group>
                </template> -->
                <template v-if="item.type === 'upImg'">
                    <UploadImg v-model:image-url="_ruleForm[`${item.prop}`]">
                        <template #tip>
                            <div class="el-upload__tip">{{ item.prompt }}</div>
                        </template>
                    </UploadImg>
                </template>
                <template v-if="item.type === 'table'">
                    <slot />
                </template>

                <template v-if="item.type === 'video'">
                    <UploadVideo width="440px" v-model:video-url="_ruleForm[`${item.prop}`]"> </UploadVideo>
                </template>
                <template v-if="item.type === 'select'">
                    <el-select
                        style="width: 240px"
                        v-model="_ruleForm[`${item.prop}`]"
                        :placeholder="item.placeholder"
                        clearable
                        @change="handleSelectChange(_ruleForm[`${item.prop}`], item.prop)"
                    >
                        <el-option
                            :label="option.label"
                            :value="option.value"
                            v-for="option in item.options"
                            :key="option.value"
                        />
                    </el-select>
                </template>
                <template v-if="item.type === 'treeSelect'">
                    <el-tree-select
                        clearable
                        v-model="_ruleForm[`${item.prop}`]"
                        :data="item.options"
                        :placeholder="item.placeholder"
                        :render-after-expand="false"
                        show-checkbox
                        check-strictly
                        @change="handleSelectChange(_ruleForm[`${item.prop}`], item.prop)"
                    />
                </template>
                <template v-if="item.type === 'treeSelects'">
                    <el-tree-select
                        v-model="_ruleForm[`${item.prop}`]"
                        :data="item.options"
                        multiple
                        :render-after-expand="false"
                        show-checkbox
                        check-strictly
                        check-on-click-node
                        style="width: 240px"
                    />
                </template>
                <template v-if="item.type === 'treeSelectInput'">
                    <slot />
                </template>
                <template v-if="item.type === 'WangEditor'">
                    <WangEditor v-model:value="_ruleForm[`${item.prop}`]" />
                </template>
            </el-form-item>
        </template>
    </el-form>
</template>

<script setup lang="ts">
import type { FormInstance, FormRules } from "element-plus";
import UploadVideo from "@/components/Upload/UploadVideo.vue";
import UploadImg from "@/components/Upload/UploadImg.vue";
interface IProps {
    ruleForm: { [key: string]: any };
    formData: any[];
    rules?: FormRules;
    handleInputButton?: () => void;
    isIndeterminate?: boolean;
    labelWidth?: any;
    handleInputBlurEmits?: () => void;
    handleSelectChangeEmits?: () => void;
    handleRadioGroupEmits?: () => void;
    handleTreesSelectChangeEmits?: () => void;
}
const emits = defineEmits<{
    (e: "handleInputButton", result?: Record<string, any>): void;
    (e: "handleInputBlurEmits", result?: Record<string, any>): void;
    (e: "handleSelectChangeEmits", result?: Record<string, any>): void;
    (e: "handleRadioGroupEmits", result?: any): void;
    (e: "handleTreesSelectChangeEmits", result?: any): void;
}>();

const ruleFormRef = ref<FormInstance>();
const props = defineProps<IProps>();
//本地化处理,props是单向的,通过本地化就可以改变父组件传过来的值了
const _ruleForm = computed(() => props.ruleForm);
// 接收 rules 并设置为响应式,必须要为响应式的,否则失效
const _rules = computed(() => props.rules);
//inputButton
const handleInputButtonClick = () => {
    emits("handleInputButton", {});
};
const handleInputBlur = () => {
    emits("handleInputBlurEmits");
};
const handleSelectChange = (params: any, prop: any) => {
    emits("handleSelectChangeEmits", { id: params, prop });
};
// const handleTreesSelectChange = (params: any) => {
//     emits("handleTreesSelectChangeEmits", params);
// };
const handleRadioGroup = (value: any) => {
    emits("handleRadioGroupEmits", value);
};
// 暴露给父组件的参数和方法(外部需要什么，都可以从这里暴露出去)
defineExpose({
    ruleForm: _ruleForm,
    ruleFormRef: ruleFormRef
});
</script>

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