<!--表单组件index-->

<template>
    <div class="t2" v-if="items.length">
        <div
            id="formSys_formBox"
            class="formSys_formBox"
            :key="index"
            v-for="(item, index) in items"
        >
            <single_line
                v-if="getFormType(item) == 'single_line'"
                :item="item"
                :key_value="index"
                :maxLength="item.maxLength"
            ></single_line>
            <multi_line
                v-if="getFormType(item) == 'multi_line'"
                :item="item"
                :key_value="index"
            ></multi_line>
            <phone_line
                v-if="getFormType(item) == 'phone_line'"
                :item="item"
                :key_value="index"
            ></phone_line>
            <select_line
                v-if="getFormType(item) == 'select_line'"
                :item="item"
                :key_value="index"
            ></select_line>
        </div>
    </div>
</template>

<script>
import single_line from './input/singleLine.vue'; // 单行文字
import phone_line from './input/phoneLine.vue'; // 手机输入（包含验证码）
import multi_line from './textarea/multiLine.vue'; // 多行
import select_line from './select/selectLine.vue'; // 下拉选择

export default {
    props: ['items', 'set_submit_state', 'set_formdata'],
    data() {
        return {
        };
    },
    components: {
        single_line,
        multi_line,
        phone_line,
        select_line
    },
    methods: {
        // 计算表单类型
        getFormType: item => {
            let formType = null;
            switch (item.type) {
                case 1: // 手机单行
                    formType = 'phone_line';
                    break;
                case 2: // 普通单行
                    formType = 'single_line';
                    break;
                case 3: // 普通多行
                    formType = 'multi_line';
                    break;
                case 4: // 选择
                    formType = 'select_line';
                    break;
                default:
                    break;
            }
            return formType;
        },
        // 验证成功减一/失败加一
        setIdfNum(state) {
            
        },
    }
};
</script>

<style lang="scss">
/*表单box*/
.form-item {
    position: relative;
}
/*表单名*/
.form-label {
    display: block;
    text-align: left;
    margin: 0.32rem 0 0.16rem;
    font-size: 0.28rem;
    color: #333333;
}
/*表单提示*/
.form-tip {
    margin-top: 0.1rem;
}
/*必填*/
.required-color {
    color: #ff8533;
}
/*验证提示*/
.vtf-tip {
    position: absolute;
    right: 0.12rem;
    top: 1.12rem;
    color: #e64340;
    background-color: #fff;
    padding-left: 0.12rem;
}

button:disabled {
    opacity: 0.5;
}
input {
    -webkit-appearance: none; /*去除阴影*/
}
</style>
