<template>
    <!-- 单行输入框 -->
    <div>
        <basic-edit></basic-edit>
        <div>
            <div class="title">默认值：</div>
            <el-input v-model="formItem.value"></el-input>
        </div>
        <type-edit
            title="文本验证"
            :list="typeList"
            v-model="formItem.inputType"
            :disabled="formItem.verify.numberFixed"
            @change="change"
        ></type-edit>

        <div class="title">校验：</div>

        <el-checkbox v-model="formItem.verify.required" :disabled="formItem.verify.requiredFixed">必填</el-checkbox>

        <!-- 限定字数范围 -->
        <verify-range :verify="formItem.verify" v-if="lengthShow"></verify-range>

        <el-checkbox v-model="formItem.verify.unique" v-if="uniqueShow">不允许重复值</el-checkbox>

        <!-- 短信验证功能待规划 -->
        <!-- <el-checkbox v-model="formItem.verify.sms" v-if="smsShow">短信验证</el-checkbox> -->

        <el-checkbox v-model="formItem.verify.int" v-if="numberShow">仅允许填写整数</el-checkbox>

        <!-- 限定数值范围 -->
        <verify-range attr="range" :verify="formItem.verify" v-if="numberShow"></verify-range>
    </div>
</template>

<script>
export default {
    name: 'FormInput',
    components: {
        BasicEdit: () => import('@/common/formDesign/components/formEdit/components/BasicEdit'),
        TypeEdit: () => import('@/common/formDesign/components/formEdit/components/TypeEdit'),
        VerifyRange: () => import('@/common/formDesign/components/formEdit/components/components/VerifyRange')
    },
    data () {
        return {
            formItem: this.$store.state.form.formItem,
            // 文本验证列表
            typeList: [
                { name: '不验证', value: 'no' },
                { name: '手机号码', value: 'tel' },
                { name: '邮箱', value: 'email' },
                { name: '身份证号码', value: 'idcard' },
                { name: '数字', value: 'number' }
            ],
            // 公共验证
            required: {
                required: false
            },
            // 类型验证
            typeVerify: {
                no: {
                    length: false,
                    lengthMin: '',
                    lengthMax: ''
                },
                tel: {
                    unique: false,
                    sms: false
                },
                email: {
                    unique: false
                },
                idcard: {
                    unique: false
                },
                number: {
                    int: false,
                    range: false,
                    rangeMax: '',
                    rangeMin: ''
                }
            }
        }
    },
    computed: {
        lengthShow: vm => /no/.test(vm.formItem.inputType),
        uniqueShow: vm => /tel|email|idcard/.test(vm.formItem.inputType),
        smsShow: vm => /tel/.test(vm.formItem.inputType),
        numberShow: vm => /number/.test(vm.formItem.inputType)
    },
    // 输入时的校验
    created () {
        !this.formItem.verify ? this.init() : this.verifyTips()
    },
    methods: {
        // 初始化
        init () {
            this.$set(this.formItem, 'inputType', 'no')
            this.$set(this.formItem, 'verify', { ...this.required, ...this.typeVerify.no })
            this.$set(this.formItem, 'lengthMinError', false)
            this.$set(this.formItem, 'lengthMaxError', false)
            this.$set(this.formItem, 'rangeMinError', false)
            this.$set(this.formItem, 'rangeMaxError', false)
        },
        // 切换类型
        change (type) {
            this.formItem.verify = { ...this.required, ...this.typeVerify[type] }
            this.setError('length', false)
            this.setError('range', false)
        },
        // 初始化时提示文字的定位有误，需要重新刷新
        verifyTips () {
            if (this.formItem.lengthMinError) {
                this.setError('length', false)
                this.$nextTick(() => this.setError('length', true))
            }
            if (this.formItem.rangeMinError) {
                this.setError('range', false)
                this.$nextTick(() => this.setError('range', true))
            }
        },
        // 设置校验最大最小值错误
        setError (key, value) {
            this.formItem[key + 'MinError'] = value
            this.formItem[key + 'MaxError'] = value
        }
    }
}
</script>

<style lang="less" scoped>
.el-checkbox {
    display: block;
    margin-top: 10px;
}
</style>
