<template>
    <div class="_fd-tf-col" :style="colStyle">
        <div class="_fd-tf-title">
            <span v-if="required" class="_fd-tf-required">*</span>{{ label || '' }}
        </div>
        <div class="_fd-tf-con">
            <slot></slot>
        </div>
    </div>
</template>

<script>
import is from '@form-create/utils/lib/type';
import {defineComponent} from 'vue';

export default defineComponent({
    name: 'TableFormColumnView',
    props: {
        label: String,
        width: [Number, String],
        color: String,
        required: Boolean,
    },
    computed: {
        colStyle() {
            const w = this.width;
            const style = {width: is.Number(w) ? `${w}px` : ((!w || w === 'auto') ? '180px' : w)};
            if (this.color) {
                style.color = this.color;
            }
            return style;
        }
    },
    data() {
        return {};
    }
});
</script>

<style>

._fd-tf-col ._fd-tf-con .el-form-item {
    margin-bottom: 1px !important;
}

._fd-tf-col {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    width: 180px;
    flex-shrink: 0;
}

._fd-tf-con .el-form-item__label {
    display: none !important;
}

._fd-tf-con {
    display: flex;
    flex: 1;
    width: 100%;
}

._fd-tf-con .el-form-item__content {
    display: flex;
    margin-left: 0px !important;
    width: 100% !important;
}


._fd-tf-title {
    display: flex;
    height: 40px;
    width: 100% !important;
    border-bottom: 1px solid #ebeef5;
    align-items: center;
    margin-bottom: 0px;
    padding-left: 5px;
}

._fd-tf-required {
    color: #f56c6c;
    margin-right: 4px;
}

._fd-tf-con ._fc-l-item {
    display: flex;
    width: 100%;
    margin-top: 4px;
    flex-shrink: 0;
}

._fd-tf-con ._fc-l-item > * {
    display: none !important;
}

._fd-tf-con .el-input-number, ._fd-tf-con .el-select, ._fd-tf-con .el-slider, ._fd-tf-con .el-cascader, ._fd-tf-con .el-date-editor {
    width: 100%;
}

</style>
