import { customComponent } from "@/use/designComponent";
import { computed, ref } from "vue";
import "./input.scss";

export default customComponent({

    name: "ms-input",
    props: {
        status: {type: String, default: "primary"}
    },

    // 表示组件入口
    setup(props) {

        const modelValue = ref("");
        const inputRef = ref(null as null | HTMLInputElement);

        // 计算样式
        const classes = computed(() => [
            'ms-input',
            `ms-input-status-${props.status}`
        ]);

        // 表示方法
        const methods = {
            focus: (flag: boolean) => {
                inputRef.value?.focus();
                if (flag) {
                    modelValue.value = "";
                }
            },
            clear: () => {
                modelValue.value = "";
            }
        }

        return {
            refer: {
                modelValue,
                methods
            },
            render: () => (
                <div class = {classes.value}>
                    <input type="text" class = "ms-input-inner" v-model = {modelValue.value} ref = {inputRef}/>
                    <button onClick = {methods.clear}>clear</button>
                    <button onClick = {() => methods.focus(true)}>focus</button>
                </div>
            )
        }
    }
});