<template>
    <el-form ref="controlFormRef" :model="controlData" label-width="110px">
        <el-form-item label="唯一标识" prop="fieldId" :rules="rules.fieldUnique">
            <el-input v-model="controlData.fieldId" :size="size" :disabled="isUpdate">
                <el-popover slot="append" placement="right" title="你可能想应用以下配置" width="300"
                            trigger="click" v-if="connectArr.length > 0">
                    <el-button slot="reference">点击试试</el-button>
                    <el-select v-model="connectData" clearable @change="connectChange">
                        <el-option v-for="item in connectArr" :key="item.fieldId"
                                   :value="item.fieldId" :label="item.connectShowName">
                        </el-option>
                    </el-select>
                </el-popover>
            </el-input>
        </el-form-item>
        <el-form-item label="控件占栏"  prop="fieldInclue" :rules="plValidate('number')">
            <!--<el-input-number v-model="controlData.fieldInclue" @change="changeLine" :min="1" :max="24" style="width: 100%" ></el-input-number>-->
            <el-radio-group v-model="controlData.fieldInclue" size="mini" @change="clickdDefFieldInclue()">
                <el-radio-button label="6" ></el-radio-button>
                <el-radio-button label="12"></el-radio-button>
                <el-radio-button label="24"></el-radio-button>
            </el-radio-group>
            <el-button v-model="otherFieldInclue" :type="otherFieldInclue ? 'primary':''"
                       @click="otherFieldInclue = true" size="mini" style="margin-left: 3px;">自定义</el-button>
            <el-input v-model="controlData.fieldInclue" v-if="otherFieldInclue" style="margin-top: 5px" placeholder="请输入占栏"></el-input>

            <el-tooltip effect="light" content="24分栏，输入12则占表格一半宽度" placement="top">
                <i class="el-icon-info" style="position:absolute;top: 8px;right:0px;
                                                                font-size: 16px;cursor: pointer;color: #5cb6ff;"></i>
            </el-tooltip>
        </el-form-item>
        <div>
            111
        </div>
    </el-form>
</template>

<script>
    import configParentComp from "../configParentComp";
    export default {
        name: "testConfig",
        extends:configParentComp,
    }
</script>

<style scoped>

</style>