<template>
	<div class="_fc-required">
		<ElSwitch v-model="required"></ElSwitch>
		<ElInput v-if="required" v-model="requiredMsg" :placeholder="t('validate.requiredPlaceholder')"></ElInput>
	</div>
</template>

<script>
import is from '@form-create/utils/lib/type'
import { defineComponent } from 'vue'

export default defineComponent({
	name: 'Required',
	inject: ['designer'],
	props: {
		modelValue: {}
	},
	data() {
		const flag = is.String(this.modelValue)
		const t = this.designer.setupState.t
		return {
			t,
			required: this.modelValue === undefined ? false : flag ? true : !!this.modelValue,
			requiredMsg: flag ? this.modelValue : ''
		}
	},
	watch: {
		required() {
			this.update()
		},
		requiredMsg() {
			this.update()
		},
		modelValue(n) {
			const flag = is.String(n)
			this.required = n === undefined ? false : flag ? true : !!n
			this.requiredMsg = flag ? n : ''
		}
	},
	methods: {
		update() {
			let val
			if (this.required === false) {
				val = false
			} else {
				val = this.requiredMsg || true
			}
			this.$emit('update:modelValue', val)
		}
	}
})
</script>

<style>
._fc-required {
	display: flex;
	align-items: center;
}

._fc-required .el-input {
	margin-left: 15px;
}

._fc-required .el-switch {
	height: 28px;
}
</style>
