<template>
    <div class="zr-form-group" :class="inputWidth === 'long' ? 'long' : inputWidth === 'small' ? 'small' : inputWidth === 'mini' ? 'mini' : 'normal'">
        <div class="zr-form-title" :style="{ 'background-color': titleBackground }" v-if="showTitle">
            <div class="zr-form-title-icon"></div>
            <div class="zr-form-title-h1">{{ title }}</div>
        </div>
        <slot></slot>
    </div>
</template>
 
<script>
export default {
    props: {
        title: {
            type: String,
            default: ''
        },
        titleBackground: {
            type: String,
            default: '#e9eefc'
        },
        showTitle: {
            type: Boolean,
            default: true
        },
        inputWidth: {
            type: String,
            default: 'normal'
        }
    },
    data() {
        return {

        }
    },
    methods: {},
};
</script>
 
<style lang="less" scoped>
.zr-form-group {
    .zr-form-title {
        display: flex;
        height: 42px;
        align-items: center;
        margin-bottom: 24px;

        .zr-form-title-icon {
            display: inline-block;
            width: 4px;
            height: 16px;
            background-color: var(--primary-color);
            border-radius: 2px;
            margin-left: 20px;
        }

        .zr-form-title-h1 {
            font-size: 16px;
            margin-left: 8px;
        }
    }

    /deep/ .item-block {
        margin-bottom: 10px;
    }

    /deep/ .item-block:last-child {
        margin-bottom: 0;
    }
}




.normal {

    /deep/ .el-form-item__content>.el-input,
    /deep/ .el-form-item__content>.el-textarea {
        width: 300px;
    }

    /deep/ .el-form-item__content>.el-input-number {
        width: 200px !important;
    }

    /deep/ .el-cascader .el-input .el-input__inner {
        width: 300px !important;
    }

    /deep/ .el-select .el-input .el-input__inner {
        width: 300px;
    }
}

.small {

    /deep/ .el-form-item__content>.el-input,
    /deep/ .el-form-item__content>.el-textarea {
        width: 200px;
    }

    /deep/ .el-form-item__content>.el-input-number {
        width: 200px !important;
    }

    /deep/ .el-cascader .el-input .el-input__inner {
        width: 200px !important;
    }

    /deep/ .el-select .el-input .el-input__inner {
        width: 200px;
    }
}

.mini {

    /deep/ .el-form-item__content>.el-input,
    /deep/ .el-form-item__content>.el-textarea {
        width: 160px;
    }

    /deep/ .el-form-item__content>.el-input-number {
        width: 160px !important;
    }

    /deep/ .el-cascader .el-input .el-input__inner {
        width: 160px !important;
    }

    /deep/ .el-select .el-input .el-input__inner {
        width: 160px;
    }
}

.long {

    /deep/ .el-form-item__content>.el-input,
    /deep/ .el-form-item__content>.el-textarea {
        width: 500px;
    }

    /deep/ .el-form-item__content>.el-input-number {
        width: 300px !important;
    }

}

/deep/ .el-form-item__content {
    font-size: 14px;
    color: #606266;
}


/deep/ .el-form-item__content>.el-input-number,
/deep/ .el-form-item__content>.el-input {
    margin-right: 10px;
}

/deep/ .el-form-item__content>.el-textarea {
    font-size: 14px;
    font-family: '微软雅黑';
}

/deep/ .el-form-item__label {
    color: #333;
}

/deep/ .el-checkbox__inner {
    width: 18px;
    height: 18px;
}

/deep/ .el-checkbox__inner:after {
    left: 6px;
    top: 3px;
}

/deep/ .el-textarea__inner {
    font-family: 'Microsoft YaHei';
}</style>