<template>
    <div class="modify-form">
        <el-form label-position="right" :class="class" :label-width="width ? width + 'px' : ''" :model="param"
            ref="modifyForm" :rules="rules">
            <template v-for="item in items">
                <el-form-item :label="item.name || t(item.i18n)" :prop="item.code"
                    v-if="!modify || (modify && !item.noModify)">
                    <NoobSelect v-if="item.dict || item.maxValue" v-model="param[item.code]" :dict="item.dict"
                        :max-value="item.maxValue" full
                        :placeholder="t('rule.pleaseSelect') + (item.name || t(item.i18n))" :disabled="item.disabled" />
                    <NoobDate v-else-if="item.date" v-model="param[item.code]" :formater="item.formater" full
                        :placeholder="t('rule.pleaseSelect') + (item.name || t(item.i18n))" :disabled="item.disabled" />
                    <slot v-else-if="item.slot" :name="item.code" />
                    <NoobInput v-else v-model="param[item.code]" full :type="item.type" :rows="item.rows"
                        :placeholder="t('rule.pleaseEnter') + (item.name || t(item.i18n))" :disabled="item.disabled" />
                </el-form-item>
            </template>
            <slot></slot>
            <el-form-item class="form-btns">
                <NoobButton type="primary" @click="formConfirm">{{ t(confirm) }}</NoobButton>
                <NoobButton type="info" @click="emit('cancel')">{{ t(cancel) }}</NoobButton>
            </el-form-item>
        </el-form>
    </div>
</template>

<script lang="ts" setup>
import { onMounted, ref, watch } from "vue";
import { FormInstance } from "element-plus";
import { useI18n } from 'vue3-i18n';
import { NoobSelect, NoobInput, NoobDate, NoobButton } from "noob-mengyxu";
const { t } = useI18n();

const prop = defineProps({
    width: {
        type: Number,
        default: 80,
    },
    param: {
        type: Object,
        default: {},
    },
    rules: {
        type: Object,
        default: {},
    },
    class: {
        type: String,
        default: '',
    },
    type: {
        type: String,
        default: null,
    },
    modify: {
        type: Boolean,
        default: false,
    },
    items: {
        type: Array<any>(),
        default: [],
    },
    confirm: {
        type: String,
        default: 'base.confirm'
    },
    cancel: {
        type: String,
        default: 'base.cancel'
    }
});
const emit = defineEmits(["confirm", "cancel"]);
const modifyForm = ref<FormInstance>();

const formConfirm = () => {
    if (!modifyForm.value) return;
    modifyForm.value?.validate((valid, fields) => {
        if (valid) {
            emit("confirm");
            modifyForm.value?.clearValidate();
        }
    });
};

const clearValidate = () => {
    modifyForm.value?.clearValidate();
}

watch(() => prop.param, () => {
    modifyForm.value?.clearValidate();
});

defineExpose({ clearValidate })

onMounted(() => {
});
</script>
<style lang="scss" scoped>
//@import url(); 引入公共css类
::v-deep .el-select {
    width: 100%;
}

::v-deep .el-date-editor {
    width: 100% !important;
}

::v-deep .el-autocomplete {
    width: 100%;
}
</style>