<template>
    <a-input-group compact>
        <a-input style="width: 30%" v-model="code" v-bind="$attrs" />
        <a-input style="width: 70%" v-model="phone" v-bind="$attrs" />
    </a-input-group>
</template>

<script>
export default {
    model: {
        prop: 'value',
        event: 'change',
    },
    watch: {
        value(val) {
            const arr = val?.split('-') || [];
            this.code = arr[0] || '';
            this.phone = arr[1] || '';
        },
        code(val) {
            this.$emit('change', `${this.code}-${this.phone}`);
        },
        phone(val) {
            this.$emit('change', `${this.code}-${this.phone}`);
        },
    },
    props: {
        value: String,
    },
    data() {
        return {
            code: '',
            phone: '',
        };
    },
    async mounted() {
        const arr = this.value?.split('-') || [];
        this.code = arr[0] || '';
        this.phone = arr[1] || '';
    },
    methods: {},
};
</script>
