<template>
    <!--左边栏: 字段拖拽组件-->
    <div class="dic-sidebar">
        <div class="dic-field-box" v-for="(field, index) in fields" :key="index">
            <div class="dic-field-title">
                <h2>
                    {{ field.info.label }}
                    <i
                        class="mc-icon mc-icon-help"
                        :title="field.info.title"
                        :detail="field.info.detail"
                        :desc="field.info.desc"
                    ></i>
                </h2>
            </div>

            <div v-if="field.form" id="businessFields" class="dic-field-list">
                <div class="dic-field-group">
                    <div class="dic-field-one" v-for="(label, index) in field.labels" :key="index">
                        {{ label.name }}
                    </div>
                </div>
            </div>
            <div v-else id="systemFields" class="dic-field-list">
                <div class="dic-field-group">
                    <div
                        v-for="(label, index) in field.labels"
                        :key="index"
                        class="dic-field-one"
                        :x-prop="label.xProp"
                        :x-label="label.xLabel"
                        :x-type="label.xType"
                    >
                        {{ label.xLabel }}
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import sidebar from '../../../../../config/renderSet/actions/sidebar';

export default {
    name: 'dic-side-bar',
    data: () => ({ ...sidebar }),
    components: {},
};
</script>

<style lang="scss">
.dic-sidebar {
    .dic-field-list {
        .dic-field-group {
            width: 100%;
            display: flex;
            flex-direction: row;
            flex-wrap: nowrap;

            .dic-field-one-fixestr,
            .dic-field-one {
                width: 50%;
                max-width: 110px;
                padding: 0px 8px;
                height: 40px;
                line-height: 40px;
                text-align: center;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;

                &:last-child {
                    border-right: none;
                }
            }

            .dic-field-one-fixestr {
                border-right: 1px solid #ebeefa;
                border-bottom: 1px solid #ebeefa;
                height: 32px;
                line-height: 32px;
                color: #666a76;
            }

            .dic-field-one {
                border-right: 1px dashed #efefef;
                border-bottom: 1px dashed #efefef;
                color: #3296fa;
                font-size: 13px;
                &:hover {
                    cursor: move;
                    background: #edeff5;

                    .ui-draggable-dragging {
                        border: 1px dotted blue;
                        background: rgba(235, 241, 246, 1);
                    }
                }
            }
        }
    }
}
</style>

<style lang="scss" scoped>
@import './_dicSidebar.scss';
</style>
