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

        <!-- 复制删除 -->
        <div class="handle" :class="[type, { subform: item.type === 'subform' }]">
            <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: 'FormType',
    components: {
        FormCell: () => import('./formType/FormCell'),
        FormInput: () => import('./formType/FormInput'),
        FormDateRange: () => import('./formType/FormDateRange'),
        FormAddress: () => import('./formType/FormAddress'),
        FormSubform: () => import('./formType/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 {
    padding: 0 15px;
    min-height: 41px;
    background-color: #fff;
    border-top: 1px solid #E4E7ED;
    position: relative;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    .label {
        min-width: 1px;
        min-height: 40px;
    }
    .required {
        color: #f56c6c;
        position: absolute;
        left: 6px;
    }
    .right {
        width: 160px;
        display: flex;
        color: #999;
        text-align: right;
        &.value {
            color: inherit;
        }
        .text {
            flex-grow: 1;
            overflow: hidden;
            white-space: nowrap;
        }
        .arrow {
            margin-left: 5px;
            line-height: inherit;
        }
    }
}
.handle {
    display: none;
    position: absolute;
    top: 0;
    left: 100%;
    height: 100%;
    cursor: pointer;
    background-color: #fff;
    box-shadow: 0 0 4px @textBuleColor;
    z-index: -1;
    &.subform {
        height: 40px;
    }
    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>
