<template>
    <!-- 表单控件内容 -->
    <div>
        <!-- 控件内容 -->
        <component :is="'form-' + getType()" :item="item">
            <slot></slot>
        </component>

        <!-- 复制删除 -->
        <div class="handle" :class="type">
            <i
                class="copy el-icon-copy-document"
                title="复制"
                @click.stop="$emit('copy', item, index, subIndex)"
                v-if="!item.stick"
            ></i>
            <i
                class="delete el-icon-delete"
                title="删除"
                @click.stop="$emit('del', item, index, subIndex)"
                v-if="!item.fixed"
            ></i>
        </div>
    </div>
</template>

<script>
export default {
    name: 'QuestionType',
    components: {
        FormCell: () => import('./questionType/FormCell'),
        FormInput: () => import('./questionType/FormInput'),
        FormDateRange: () => import('./questionType/FormDateRange'),
        FormAddress: () => import('./questionType/FormAddress'),
        FormSubform: () => import('./questionType/FormSubform')
    },
    props: {
        item: { type: Object, default: () => ({}) },
        index: { type: Number, default: -1 },
        subIndex: { type: Number, default: -1 },
        type: { type: String, default: '' }
    },
    data () {
        return {
            customReg: /input|dateRange|address|subform/
        }
    },
    methods: {
        getType () {
            return this.customReg.test(this.item.type) ? this.item.type : 'cell'
        }
    }
}
</script>

<style lang="less" scoped>
@import "~styles/varibles.less";
/deep/ .cell {
    position: relative;
    & + .cell {
        margin-top: 10px;
    }
    .label {
        margin-bottom: 5px;
        .title {
            font-weight: bold;
            font-size: 16px;
        }
        .required {
            color: #f56c6c;
            position: absolute;
            left: -10px;
        }
    }
}
.handle {
    display: none;
    height: 40px;
    position: absolute;
    top: 0;
    right: 0;
    cursor: pointer;
    background-color: #fff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
    i {
        width: 40px;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        &:not(:first-child) {
            border-left: 1px solid #E4E7ED;
        }
        &.copy:hover {
            color: @textBuleColor;
        }
        &.delete:hover {
            color: #F56C6C;
        }
    }
}
</style>
