<template>
    <div>
        <div class="rule-item-main m-t-2 p-2 rounded border border-solid transition-all relative">
            <template v-for="(componentSchema, index) in requiredRuleSchemas" :key="index">
                <div v-if="componentSchema.show ? componentSchema.show() : true" class="flex m-t-2 first:m-0">
                    <div class="epic-attr-label">
                        {{ componentSchema.label }}
                    </div>
                    <div class="flex-1">
                        <ENode
                            v-model="requiredRule[componentSchema.model]"
                            :componentSchema="{ ...componentSchema, noFormItem: true }"
                            @change="handleUpdate"
                        />
                    </div>
                </div>
            </template>
        </div>
        <ERuleItem
            v-for="(item, index) in rules"
            :key="index"
            v-model:rule="rules[index]"
            @delete="handleDelete(index)"
            @change="handleUpdate"
        />
        <Button class="m-t-2" @click="handleAdd"> 添加规则 </Button>
    </div>
</template>
<script lang="ts" setup>
import { pluginManager, deepClone } from "@/components/EpicDesigner/utils";
import { ref, watch, PropType } from "vue";
import { FormItemRule } from "./types";
import ERuleItem from "./ERuleItem.vue";
import ENode from "../../components/node/index";
import { triggerOptions, typeOptions } from "./data";
const Button = pluginManager.getComponent("button");
const props = defineProps({
    ruleType: {
        type: String,
        default: "string"
    },
    modelValue: {
        type: Array as PropType<FormItemRule[] | undefined>,
        default: undefined
    }
});

const requiredRule = ref<FormItemRule>({
    required: false,
    message: "必填项",
    type: props.ruleType,
    trigger: ["change"]
});

const requiredRuleSchemas = [
    {
        type: "switch",
        label: "必填项",
        model: "required"
    },
    {
        type: "select",
        label: "校验时机",
        model: "trigger",
        show() {
            return Boolean(requiredRule.value.required);
        },
        componentProps: {
            options: triggerOptions,
            placeholder: "校验时机",
            multiple: true,
            mode: "multiple"
        }
    },
    {
        type: "select",
        label: "类型",
        model: "type",
        show() {
            return Boolean(requiredRule.value.required);
        },
        componentProps: { options: typeOptions, placeholder: "类型" }
    },
    {
        type: "input",
        label: "校验信息",
        model: "message",
        show() {
            return Boolean(requiredRule.value.required);
        },
        componentProps: { placeholder: "校验信息" }
    }
];

const rules = ref<FormItemRule[]>([]);
const emit = defineEmits(["update:modelValue"]);

watch(
    () => props.modelValue,
    e => {
        if (e) {
            if (!e) return;
            rules.value = [];
            e.forEach(item => {
                // 必填项单独存储
                if (typeof item.required !== "undefined") {
                    requiredRule.value = item;
                } else {
                    rules.value.push(item);
                }
            });
        }
    },
    {
        immediate: true
    }
);

/**
 * 新增检验规则
 */
function handleAdd() {
    rules.value.push({
        message: "",
        type: props.ruleType,
        trigger: ["change"]
    });
    handleUpdate();
}

/**
 * 更新校验规则
 */
function handleUpdate() {
    // 存在必填项时,合并其他规则
    if (requiredRule.value.required) {
        emit("update:modelValue", deepClone([...rules.value, requiredRule.value]));
        return;
    }

    // 存在其他规则
    if (rules.value.length) {
        emit("update:modelValue", deepClone(rules.value));
        return;
    }

    // 没有任何校验规则
    emit("update:modelValue", undefined);
}

/**
 * 通过下标删除校验规则项
 * @param index
 */
function handleDelete(index: number) {
    rules.value.splice(index, 1);
    handleUpdate();
}
</script>
