<template>
    <div>
        <!--main-->
        <el-dialog
                id="methodShapeAnchor"
                title="形状数据显示规则"
                :visible.sync="dialogVisible"
                append-to-body
                :close-on-press-escape=false
                :close-on-click-modal=false
                width="800px"
                :before-close="handleClose">
            <div style="border: 1px solid #F2F2F2;padding: 0px 10px 10px 10px;">
                <div style="height: 38px;line-height:38px;vertical-align:middle;border-bottom: 1px solid #e9e9e9;">
                    <span class="text-linker-color" style="cursor: pointer;position: relative;left: 15px;" @click="updateShapeConfig()"><i class="awsui-iconfont" style="font-size: 12px;">&#58915;</i>添加</span>
                </div>
                <div style="height: 350px;overflow-y: auto;">
                    <div v-if="data.length == 0" class="text-second-color" style="text-align: center;position: relative;top: 150px;">
                        <i class="iconfont icon-wushuju" style="font-size: 60px;"></i>
                        <p>无数据</p>
                    </div>
                    <div class="row-div" v-for="item in data">
                        <el-row style="height: 50px;line-height:50px;vertical-align:middle;border-bottom: 1px solid #e9e9e9;">
                            <el-col :span="8">
                                <div>
                                    <div style="position: absolute;">水平</div>
                                    <div v-if="item.attribute.horizontal == 'mostLeft'" class='loc loc-horizontal-icon' data-loc='mostLeft'><span class="loc-point" style='left: -5px;'></span></div>
                                    <div v-if="item.attribute.horizontal == 'left'" class='loc loc-horizontal-icon' data-loc='left'><span class="loc-point" style='left: 0px;'></span></div>
                                    <div v-if="item.attribute.horizontal == 'center'" class='loc loc-horizontal-icon' data-loc='center'><span class="loc-point" style='left: 3px;'></span></div>
                                    <div v-if="item.attribute.horizontal == 'right'" class='loc loc-horizontal-icon' data-loc='right'><span class="loc-point" style='left: 6px;'></span></div>
                                    <div v-if="item.attribute.horizontal == 'mostRight'" class='loc loc-horizontal-icon' data-loc='mostRight'><span class="loc-point" style='left: 11px;'></span></div>
                                    <div style="position: absolute; margin-left: 70px;">垂直</div>
                                    <div v-if="item.attribute.verity == 'mostTop'" class='loc loc-verity-icon' data-loc='mostTop'><span class="loc-point" style='top: -5px;'></span></div>
                                    <div v-if="item.attribute.verity == 'top'" class='loc loc-verity-icon' data-loc='top'><span class="loc-point" style='top: 0px;'></span></div>
                                    <div v-if="item.attribute.verity == 'center'" class='loc loc-verity-icon' data-loc='center'><span class="loc-point" style='top: 3px;'></span></div>
                                    <div v-if="item.attribute.verity == 'bottom'" class='loc loc-verity-icon' data-loc='bottom'><span class="loc-point" style='top: 6px;'></span></div>
                                    <div v-if="item.attribute.verity == 'mostBottom'" class='loc loc-verity-icon' data-loc='mostBottom'><span class="loc-point" style='top: 11px;'></span></div>
                                </div>
                            </el-col>
                            <el-col :span="13">
                                <div style="height: 49px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;line-height: 49px;vertical-align: middle;">
                                    <template v-if="item.attribute.showType == 'text'">
                                        <span v-html="formatContent(item.attribute.cfgContent)"></span>
                                    </template>
                                    <template v-if="item.attribute.showType == 'attribute'">
                                        <span v-html="'(' + formatContent(item.attribute.attrName) + ')'"></span>
                                    </template>
                                    <template v-if="item.attribute.showType == 'icon'">
                                        <i class="awsui-iconfont" :style="{'font-size': '30px', color: formatIconColor(item.attribute.iconContent)}" v-html=formatIconCode(item.attribute.iconContent)></i>
                                    </template>
                                </div>
                            </el-col>
                            <el-col :span="3">
                                <div class="row-operate-icon" style="display: none; height: 49px;line-height: 49px;vertical-align: middle;text-align: right;">
                                    <i class="awsui-iconfont" style="cursor: pointer;margin-right: 15px;" @click="updateShapeConfig(item)">&#58934;</i>
                                    <i class="awsui-iconfont" style="cursor: pointer;" @click="removeShapeConfig(item.id)">&#58918;</i>
                                </div>
                            </el-col>
                        </el-row>
                    </div>
                </div>
            </div>
            <span slot="footer" class="dialog-footer">
            <awsui-button class="button-general-color" type="primary" @click="submit()">确定</awsui-button>
            <awsui-button @click="cancel()">取消</awsui-button>
        </span>
        </el-dialog>
        <!--新增、修改形状锚点显示配置dlg-->
        <el-dialog
                id="updateShapeAnchor"
                :title="update.title"
                :visible.sync="update.visible"
                append-to-body
                :close-on-press-escape=false
                :close-on-click-modal=false
                width="500px"
                :before-close="handleUpdateClose">
            <div style="border: 1px solid #F2F2F2;padding: 0px 10px 10px 10px;height: 250px;overflow-y:auto;">
                <awsui-form ref="form1" :model="update.form" label-position="top">
                    <awsui-form-item label="显示位置">
                        <awsui-row :gutter="15">
                            <awsui-col :span="3">
                                <div style="text-align: right;"><span style="color: red;">*</span>水平</div>
                            </awsui-col>
                            <awsui-col :span="9">
                                <div>
                                    <el-select v-model="update.form.position.horizontal"
                                               placeholder="水平位置"
                                               size="mini">
                                        <el-option
                                                v-for="item in update.form.position.horizontalOpts"
                                                :key="item.value"
                                                :label="item.label"
                                                :value="item.value">
                                            <div v-if="item.value == 'mostLeft'" class='update-loc update-loc-horizontal-icon' data-loc='mostLeft'><span class="loc-point" style='left: -5px;'></span></div>
                                            <div v-if="item.value == 'left'" class='update-loc update-loc-horizontal-icon' data-loc='left'><span class="loc-point" style='left: 0px;'></span></div>
                                            <div v-if="item.value == 'center'" class='update-loc update-loc-horizontal-icon' data-loc='center'><span class="loc-point" style='left: 3px;'></span></div>
                                            <div v-if="item.value == 'right'" class='update-loc update-loc-horizontal-icon' data-loc='right'><span class="loc-point" style='left: 6px;'></span></div>
                                            <div v-if="item.value == 'mostRight'" class='update-loc update-loc-horizontal-icon' data-loc='mostRight'><span class="loc-point" style='left: 11px;'></span></div>
                                            <span>{{item.label}}</span>
                                        </el-option>
                                    </el-select>
                                </div>
                            </awsui-col>
                            <awsui-col :span="3">
                                <div style="text-align: right;"><span style="color: red;">*</span>垂直</div>
                            </awsui-col>
                            <awsui-col :span="9">
                                <div>
                                    <el-select v-model="update.form.position.verity"
                                               placeholder="垂直位置"
                                               size="mini">
                                        <el-option
                                                v-for="item in update.form.position.verityOpts"
                                                :key="item.value"
                                                :label="item.label"
                                                :value="item.value">
                                            <div v-if="item.value == 'mostTop'" class='update-loc update-loc-verity-icon' data-loc='mostTop'><span class="loc-point" style='top: -5px;'></span></div>
                                            <div v-if="item.value == 'top'" class='update-loc update-loc-verity-icon' data-loc='top'><span class="loc-point" style='top: 0px;'></span></div>
                                            <div v-if="item.value == 'center'" class='update-loc update-loc-verity-icon' data-loc='center'><span class="loc-point" style='top: 3px;'></span></div>
                                            <div v-if="item.value == 'bottom'" class='update-loc update-loc-verity-icon' data-loc='bottom'><span class="loc-point" style='top: 6px;'></span></div>
                                            <div v-if="item.value == 'mostBottom'" class='update-loc update-loc-verity-icon' data-loc='mostBottom'><span class="loc-point" style='top: 11px;'></span></div>
                                            <span>{{item.label}}</span>
                                        </el-option>
                                    </el-select>
                                </div>
                            </awsui-col>
                        </awsui-row>
                    </awsui-form-item>
                    <awsui-form-item label="显示方式">
                        <awsui-select v-model="update.form.showType.value" :options="update.form.showType.opts" @change="changeShowType"></awsui-select>
                    </awsui-form-item>
                    <awsui-form-item v-show="update.form.showType.value == 'text'" label="文本信息">
                        <awsui-input v-model="update.form.cfgContent" type="textarea" placeholder="请输入不超过200个字符的文本信息"></awsui-input>
                    </awsui-form-item>
                    <awsui-form-item  v-show="update.form.showType.value == 'attribute'" label="属性选择">
                        <el-popover
                                ref="attrPopover"
                                placement="bottom"
                                width="413"
                                popperClass="methodShapeAnchorUpdateAttrPopover"
                                :visible-arrow="false"
                                @after-enter="handleInitAttrTree"
                                trigger="click">
                            <div v-loading="attrTreeLoading" style="height: 168px;overflow: auto;">
                                <div style="margin: 0 5px;">
                                    <el-tree
                                            :data="attrTreeData"
                                            node-key="id"
                                            default-expand-all
                                            empty-text="请先配置形状的数据属性"
                                            :props="attrTreeProps"
                                            @node-click="handleNodeClick">
                                        <span slot-scope="{node, data}">
                                          <i class="awsui-iconfont tree-content-icon tree-content-icon-padding" :style="{'color': data.iconColor}" v-html="node.data.iconCode"></i>
                                          <span>{{node.label}}</span>
                                        </span>
                                    </el-tree>
                                </div>
                            </div>
                            <div slot="reference">
                                <awsui-input v-model="update.form.attrName" readonly placeholder="点击选择需要在该位置显示的属性"></awsui-input>
                            </div>
                        </el-popover>
                    </awsui-form-item>
                    <awsui-form-item  v-show="update.form.showType.value == 'icon'" label="图标选择">
                        <el-popover
                                ref="popover"
                                placement="bottom"
                                width="413"
                                popperClass="methodShapeAnchorUpdatePopover"
                                :visible-arrow="false"
                                trigger="click">
                            <div>
                                <div v-for="item in update.form.iconInfo.opts" style="display: inline-block;margin: 0 5px;">
                                    <i class="awsui-iconfont" style="font-size: 30px;cursor: pointer;" :style="{color: item.color}" v-html="item.code" @click="handleSetIcon(item)"></i>
                                </div>
                            </div>
                            <div slot="reference" style="height: 36px;line-height: 32px;vertical-align: middle;width: 436px;border: 1px solid #e9e9e9">
                                <div style="display: inline-block;position: relative;top: 2px;margin-left: 5px;">
                                    <i class="awsui-iconfont" :style="{'font-size': '30px', color: update.form.iconInfo.value.color}" v-html="update.form.iconInfo.value.code"></i>
                                </div>
                                <i class="el-icon-arrow-down column-arrow-down" style="float: right;"></i>
                            </div>
                        </el-popover>
                    </awsui-form-item>
                </awsui-form>
                <awsui-form  v-show="update.form.showType.value == 'attribute'" ref="form2" :model="update.form">
                    <awsui-form-item label="显示属性名">
                        <awsui-row :gutter="15">
                            <awsui-col :span="3" :offset="16">
                                <div>
                                    <awsui-switch activeColor="#4E7FF9" v-model="update.form.isShowAttrName"></awsui-switch>
                                </div>
                            </awsui-col>
                        </awsui-row>
                    </awsui-form-item>
                </awsui-form>
            </div>
            <span slot="footer" class="dialog-footer">
                    <awsui-button class="button-general-color" type="primary" @click="saveUpdateShapeConfig">确定</awsui-button>
                    <awsui-button @click="update.visible=false">取消</awsui-button>
                </span>
        </el-dialog>
    </div>

</template>

<script>
    import awsuiAxios from "../../awsuiAxios";

    export default {
        name: "MethodShapeAnchorDlg",
        props: {
            visible: {
                type: Boolean,
                default: false
            },
            type: {
                type: String,
                default: ''
            },
            methodId: {
                type: String,
                default: ''
            },
            wsId: {
                type: String,
                default: ''
            },
            shapeName: {// 形状定义的唯一标识,历史原因shapId与shapeName意义相同
                type: String,
                default: ''
            },
            shapeObjId: {// 具体形状id
                type: String,
                default: ''
            }
        },
        data() {
            return {
                dialogVisible: false,
                data: [],
                attrTreeLoading: false,
                update: {
                    visible: false,
                    title: '添加',
                    id: '',// 行主键，为空则新增，不为空则修改
                    form: {
                        position: {
                            horizontal: '',
                            horizontalOpts: [
                                {
                                    label: '左外边',
                                    value: 'mostLeft'
                                },
                                {
                                    label: '左内边',
                                    value: 'left'
                                },
                                {
                                    label: '中间',
                                    value: 'center'
                                },
                                {
                                    label: '右内边',
                                    value: 'right'
                                },
                                {
                                    label: '右外边',
                                    value: 'mostRight'
                                }
                            ],
                            verity: '',
                            verityOpts: [
                                {
                                    label: '上外边',
                                    value: 'mostTop'
                                },
                                {
                                    label: '上内边',
                                    value: 'top'
                                },
                                {
                                    label: '中间',
                                    value: 'center'
                                },
                                {
                                    label: '下内边',
                                    value: 'bottom'
                                },
                                {
                                    label: '下外边',
                                    value: 'mostBottom'
                                }
                            ]
                        },
                        showType: {
                            value: 'text',
                            opts: [
                                {
                                    value: 'text',
                                    label: '文本信息'
                                },
                                {
                                    value: 'attribute',
                                    label: '属性信息'
                                },
                                {
                                    value: 'icon',
                                    label: '图标'
                                }
                            ]

                        },
                        cfgContent: '',
                        attrName: '',
                        attrKey: '',
                        isShowAttrName: false,
                        iconInfo: {
                            value: {},
                            opts: [
                                {code: '&#xe609;',color: '#1296DB'},//提示
                                {code: '&#xe832;',color: '#EA9518'},//标签
                                {code: '&#xe807;',color: '#EA9518'},//反对
                                {code: '&#xe61c;',color: '#1296DB'},//减少
                                {code: '&#xe802;',color: '#1296DB'},//播放
                                {code: '&#xe63d;',color: '#EA9518'},//警告
                                {code: '&#xe62f;',color: '#D81E06'},//删除
                                {code: '&#xe836;',color: '#1296DB'},//群组
                                {code: '&#xe66a;',color: '#1296DB'},//上传
                                {code: '&#xe635;',color: '#707070'},//提示
                                {code: '&#xe81a;',color: '#D81E06'},//停止
                                {code: '&#xe69b;',color: '#00c853'},//完成
                                {code: '&#xe829;',color: '#FA8072'},//喜欢
                                {code: '&#xe69a;',color: '#00c853'},//下载
                                {code: '&#xe82a;',color: '#00c853'},//修改
                                {code: '&#xe773;',color: '#082E54'},//邮件
                                {code: '&#xe783;',color: '#EA9518'},//暂停
                                {code: '&#xe819;',color: '#FA8072'},//赞同
                                {code: '&#xe726;',color: '#00c853'},//增加
                                {code: '&#xe62a;',color: '#1296DB'},//上
                                {code: '&#xe62b;',color: '#1296DB'},//下
                                {code: '&#xe618;',color: '#1296DB'},//左
                                {code: '&#xe62e;',color: '#1296DB'},//右
                                {code: '&#xe80f;',color: '#7AA7AA'},//进度1
                                {code: '&#xe80e;',color: '#7AA7AA'},//进度2
                                {code: '&#xe811;',color: '#7AA7AA'},//进度3
                                {code: '&#xe813;',color: '#7AA7AA'},//进度4
                                {code: '&#xe814;',color: '#7AA7AA'},//进度5
                                {code: '&#xe810;',color: '#7AA7AA'},//进度6
                                {code: '&#xe815;',color: '#7AA7AA'},//进度7
                                {code: '&#xe812;',color: '#7AA7AA'},//进度8
                                {code: '&#xe835;',color: '#E9433F'},//红旗帜
                                {code: '&#xe835;',color: '#FFAE03'},//橙黄旗帜
                                {code: '&#xe835;',color: '#F4EA2A'},//黄旗帜
                                {code: '&#xe835;',color: '#00C853'},//绿旗帜
                                {code: '&#xe835;',color: '#1296DB'},//蓝旗帜
                                {code: '&#xe835;',color: '#082E54'},//深蓝旗帜
                                {code: '&#xe835;',color: '#88147F'},//紫旗帜
                                {code: '&#xe835;',color: '#7DABB1'},//浅蓝旗帜
                                {code: '&#xe835;',color: '#707070'}//灰旗帜
                            ]
                        }
                    }
                },
                attrTreeData: [],
                attrTreeProps: {
                    children: 'children',
                    label: 'label'
                }
            };
        },
        methods: {
            changeShowType(val) {
                this.update.form.showType.value = val;
            },
            initData() {
                if (this.type == 'commonShapeConfig') {// 通用配置（建模方法通配）
                    const that = this;
                    const params = {
                        url:'jd',
                        data:{
                            cmd: 'com.actionsoft.apps.coe.pal_pl_manage_shape_config_query',
                            wsId: that.wsId,
                            methodId: that.methodId,
                            shapeId: that.shapeName
                        }
                    };
                    awsuiAxios.post(params).then(function (ro) {// 查询数据总条数
                        if (ro.result == 'ok') {
                            for (let i = 0; i < ro.data.length; i++) {
                                ro.data[i].attribute = JSON.parse(ro.data[i].attribute);
                            }
                            that.data = ro.data;
                        } else {
                            that.$message.error(ro.msg);
                        }
                    }).catch(error=>{
                        console.log(error);
                    })
                } else if (this.type == 'specialShapeConfig') {// 特殊配置（设计器页面针对某形状配置） todo

                }
            },
            formatContent(text) {
                return text.replace(/</g, "&lt;").replace(/>/g, "&gt;")
            },
            formatIconCode(text) {
                return text.split('|')[0];
            },
            formatIconColor(text) {
                return text.split('|')[1];
            },
            handleClose(done) {
                this.closeDlalog('cancel');
                done();
            },
            cancel() {
                this.closeDlalog('cancel');
                this.dialogVisible = false;
            },
            submit() {
                const that = this;
                this.closeDlalog('save');
                this.dialogVisible = false;
            },
            closeDlalog(type) {// 取消/确定之后的关闭
                if (type == 'save') {
                    let result = {
                        data: [],
                        wsId: this.wsId,
                        methodId: this.methodId,
                        shapeId: this.shapeName
                    };
                    for (let i = 0; i < this.data.length; i++) {
                      result.data.push(this.data[i].attribute);
                    }
                    this.$emit('getResult', result);
                } else {
                    this.$emit('cancel');
                }
            },
            removeShapeConfig(id) {// 删除
                for (let i = 0; i < this.data.length; i++) {
                    if (this.data[i].id == id) {
                        this.data.splice(i, 1);
                        break;
                    }
                }
            },
            /********新增、修改********/
            updateShapeConfig(row) {
                this.clearUpdateShapeConfig();
                if (row) {
                    this.update.title = '修改';
                    this.update.id = row.id;
                    this.initUpdateShapeConfigData(row.attribute);
                } else {
                    this.update.title = '添加';
                }
                this.update.visible = true;
            },
            initUpdateShapeConfigData(attribute) {// 初始化到修改dlg中
                this.update.form.showType.value = attribute.showType;
                this.update.form.position.horizontal = attribute.horizontal;
                this.update.form.position.verity = attribute.verity;
                if (attribute.showType == 'text') {// 文本
                    this.update.form.cfgContent = attribute.cfgContent;
                } else if (attribute.showType == 'attribute') {// 属性
                    this.update.form.attrName = attribute.attrName;
                    this.update.form.attrKey = attribute.key;
                    this.update.form.isShowAttrName = attribute.isShowAttrName;
                } else if (attribute.showType == 'icon') {// 图标
                    const tempArr = attribute.iconContent.split('|');
                    this.update.form.iconInfo.value = {code: tempArr[0], color: tempArr[1]};
                }
            },
            clearUpdateShapeConfig() {// 清空
                this.update.id = '';
                this.update.form.position.horizontal = '';
                this.update.form.position.verity = '';
                this.update.form.showType.value = 'text';
                this.update.form.cfgContent = '';
                this.update.form.attrName = '';
                this.update.form.attrKey = '';
                this.update.form.isShowAttrName = false;
                this.update.form.iconInfo.value = {};
                this.attrTreeData = [];
            },
            handleUpdateClose(done) {
                done();
            },
            handleSetIcon(icon) {
                this.update.form.iconInfo.value = icon;
                this.$refs['popover'].doClose();
            },
            handleNodeClick(data) {
                if (!data.open) {
                    this.update.form.attrName = data.label;
                    this.update.form.attrKey = data.id;
                    this.$refs['attrPopover'].doClose();
                }
            },
            handleInitAttrTree() {
                this.attrTreeLoading = true;
                const that = this;
                const params = {
                    url:'jd',
                    data:{
                        cmd: 'com.actionsoft.apps.coe.pal_pl_manage_shape_config_attr_tree_query',
                        wsId: that.wsId,
                        methodId: that.methodId,
                        shapeId: that.shapeName
                    }
                };
                awsuiAxios.post(params).then(function (ro) {// 查询数据总条数
                    that.attrTreeLoading = false;
                    if (ro.result == 'ok') {
                        that.attrTreeData = ro.data;
                    }
                }).catch(error=>{
                    console.log(error);
                })
            },
            saveUpdateShapeConfig() {
                if (this.update.form.position.horizontal == '') {
                    this.$message({message: '请选择水平位置',type: 'warning'});
                    return false;
                }
                if (this.update.form.position.verity == '') {
                    this.$message({message: '请选择垂直位置',type: 'warning'});
                    return false;
                }
                for (let i = 0; i < this.data.length; i++) {
                    const attr = this.data[i].attribute;
                    if (((this.update.id != '' && this.update.id != this.data[i].id) || this.update.id == '') && attr.horizontal == this.update.form.position.horizontal && attr.verity == this.update.form.position.verity) {
                        this.$message({message: '此显示位置已被占用，请选择其它位置',type: 'warning'});
                        return false;
                    }
                }
                const attribute = {};
                attribute.horizontal = this.update.form.position.horizontal;
                attribute.verity = this.update.form.position.verity;
                // 组成新的attribute
                const showType = this.update.form.showType.value;
                attribute.showType = showType;
                if (showType == 'text') {
                    if (this.update.form.cfgContent.trim() == '') {
                        this.$message({message: '[文本信息]不允许为空',type: 'warning'});
                        return false;
                    }
                    if (this.update.form.cfgContent.trim().length >= 200) {
                        this.$message({message: '[文本信息]不允许超过200个字符',type: 'warning'});
                        return false;
                    }
                    attribute.cfgContent = this.update.form.cfgContent;
                } else if (showType == 'attribute') {
                    if (this.update.form.attrKey == '') {
                        this.$message({message: '请选择属性信息',type: 'warning'});
                        return false;
                    }
                    attribute.attrName = this.update.form.attrName;
                    attribute.key = this.update.form.attrKey;
                    attribute.isShowAttrName = this.update.form.isShowAttrName;
                    attribute.cfgContent = '';
                } else if (showType == 'icon') {
                    if (!this.update.form.iconInfo.value.code || this.update.form.iconInfo.value.code == '') {
                        this.$message({message: '请选择图标',type: 'warning'});
                        return false;
                    }
                    attribute.iconContent = this.update.form.iconInfo.value.code + '|' + this.update.form.iconInfo.value.color;
                }
                if (this.update.id != '') {// 更新
                    for (let i = 0; i < this.data.length; i++) {
                        if (this.data[i].id == this.update.id) {
                            this.data[i].attribute = attribute;
                            break;
                        }
                    }
                } else {// 新建
                    const obj = {
                        attribute: attribute,
                        id: 'new' + Math.random(),
                        methodId: this.methodId,
                        shapeId: this.shapeName,
                        wsId: this.wsId,
                        orderIndex: 0
                    }
                    this.data.push(obj);
                    for (let i = 0; i < this.data.length; i++) {
                        this.data[i].orderIndex = i+1;
                    }
                }
                this.update.visible = false;
                return true;
            }
        },
        watch: {
            visible(val) {
                this.dialogVisible = val;
                if (val) {// 打开
                    this.initData();
                } else {// 关闭

                }
            }
        }
    };
</script>

<style scoped>
    #methodShapeAnchor >>> .el-dialog__body {
        padding: 5px 20px;
    }
    #updateShapeAnchor >>> .el-dialog__body {
        padding: 5px 20px;
    }
    .row-div :hover {
        background-color: #F5F7FA;
    }
    .row-div :hover .row-operate-icon {
        display: block !important;
    }
    .el-col {
        padding: 0 10px;
    }
    .loc {
        position: absolute;
        width: 11px;
        height: 11px;
        left: 10px;
        top: 18px;
        border: 1px solid #333;
        background: white;
    }
    .loc-point {
        display: block;
        position: absolute;
        width: 5px !important;
        height: 5px;
        background: #dd4b39;
        top: 3px;
        left: 3px;
    }
    .loc-horizontal-icon {
        position: relative; 
        float: left; 
        margin-left: 30px;
    }
    .loc-verity-icon {
        position: relative;
        float: left;
        margin-left: 60px;
    }
    .update-loc {
        position: absolute;
        width: 11px;
        height: 11px;
        border: 1px solid #333;
        background: white;
    }
    .update-loc-horizontal-icon {
        position: relative;
        float: left;
        top: 10px;
        margin-right: 12px;
    }
    .update-loc-verity-icon {
        position: relative;
        float: left;
        top: 10px;
        margin-right: 12px;
    }
    .column-arrow-down {
        float: right;
        font-size: 15px;
        color: #c0c4cc;
        position: relative;
        right: 6px;
        top: 10px;
    }
    .icon-opts :hover {
        background-color: #F5F7FA;
    }

</style>
<style>
    .methodShapeAnchorUpdatePopover {
        margin-top: 0px !important;
    }
    .methodShapeAnchorUpdateAttrPopover {
        margin-top: 1px !important;
    }
</style>