<!--表单事件规则 修改标题-->
<template>
        <el-form
                 ref="eventForm"
                 :model="eventData" label-width="120px"
                 :validate-on-rule-change="false" size="small"
                 style="width: 100%;height: 100%;padding:5px;box-sizing: border-box;">
            <el-row>
                <el-col :span="12">
                    <el-form-item label="显示标题" prop="editTitle">
                        <el-input v-model="eventData.editTitle"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="标题样式">
                        <div>
                            <!--字体样式（粗体）  开始-->
                            <el-tooltip slot="append" effect="light" content="加粗（将所选内容字体加粗）" placement="top">
                                <div class="form-title-style" :class="{'form-title-style-active':eventData.titleFontWeight == '1'}"
                                     @click="changeTitleStyle(eventData,'weight')">
                                    <i class="saspiconfont pl-icon-font-weight"></i>
                                </div>
                            </el-tooltip>
                            <!--字体样式（斜体）  开始-->
                            <el-tooltip slot="append" effect="light" content="倾斜（将所选内容字体设置为倾斜）" placement="top">
                                <div class="form-title-style" :class="{'form-title-style-active':eventData.titleFontLean == '1'}"
                                     @click="changeTitleStyle(eventData,'lean')">
                                    <i class="saspiconfont pl-icon-zitixieti"></i>
                                </div>
                            </el-tooltip>
                            <!--字体样式（下划线）  开始-->
                            <el-tooltip slot="append" effect="light" content="下划线（给所选文字内容设置下划线）" placement="top">
                                <div class="form-title-style" :class="{'form-title-style-active':eventData.titleTextDecoration == '1'}"
                                     @click="changeTitleStyle(eventData,'decoration')">
                                    <i class="saspiconfont pl-icon-zitixiahuaxian"></i>
                                </div>
                            </el-tooltip>
                            <!--字体颜色  开始-->
                            <el-tooltip slot="append" effect="light" content="选择字体颜色" placement="top">
                                <div class="form-title-style">
                                    <i class="saspiconfont pl-icon-zitiyanse1 color-set-css" :style="{borderBottomColor:eventData.titleFontColor}"></i>
                                    <el-color-picker v-model="eventData.titleFontColor" size="mini"></el-color-picker>
                                </div>
                            </el-tooltip>
                            <!--内容背景色  开始-->
                            <el-tooltip slot="append" effect="light" content="选择背景色" placement="top">
                                <div class="form-title-style">
                                    <i class="saspiconfont pl-icon-youqitong color-set-css" :style="{borderBottomColor:eventData.titleBgColor}"></i>
                                    <el-color-picker v-model="eventData.titleBgColor" size="mini"
                                                     style="position: absolute;left: 154px;opacity: 0;">
                                    </el-color-picker>
                                </div>
                            </el-tooltip>
                            <!--字体大小 开始-->
                            <!--<div style="margin-top: 10px;">-->
                            <el-input-number v-model="eventData.titleFontSize"></el-input-number>
                            <el-tag style="width: 40px;color: #409EFF;background-color: white;cursor: default;">px</el-tag>
                            <!--</div>-->
                        </div>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
</template>

<script>
    import EventParentConfig from "../../eventParentConfig";
    export default {
        name: "edit-title-config",
        extends: EventParentConfig,
        eventType: 'tableView',
        eventSource:'1',
        eventName:'修改标题',
        data(){
            return {

            }
        },
        created() {
            this.initData();
        },
        methods:{
            initData(){

            },
            /**
             * 切换标题样式
             * @param eventData
             * @param type
             */
            changeTitleStyle(eventData,type){
                if(this.eventData.isView){
                    return;
                }
                if(type == "weight"){
                    if(eventData.titleFontWeight == "1"){
                        this.$set(eventData,"titleFontWeight","0");
                    }else{
                        this.$set(eventData,"titleFontWeight","1");
                    }
                }else if(type == "lean"){
                    if(eventData.titleFontLean == "1"){
                        this.$set(eventData,"titleFontLean","0");
                    }else{
                        this.$set(eventData,"titleFontLean","1");
                    }
                }else if(type == "decoration"){
                    if(eventData.titleTextDecoration == "1"){
                        this.$set(eventData,"titleTextDecoration","0");
                    }else{
                        this.$set(eventData,"titleTextDecoration","1");
                    }
                }
            },

            /**
             * 校验规则，不写默认通过
             * @returns {boolean}
             */
            validateMethod(){
                let result = false;
                this.$refs.eventForm.validate(valid => {
                    result = valid;
                })
                return result;
            },

            /**
             * 如果是表单规则（eventType: 'tableView'）走此渲染方法
             * @vm 当前整个表单对象
             * @CTX 后台url前缀 如 http://localhost:8080
             * @axios axios 请求对象
             * @formData 响应字段配置
             * @affectContent 响应配置（表单规则配置好数据）
             *
             */
            renderTableViewConfig(vm,CTX,axios,formData,affectContent){
                let field = affectContent.field;
                if(formData[field].controlType == "titleBox" && affectContent.editTitle){
                    formData[field].title = affectContent.editTitle || '';
                }else if(affectContent.editTitle){
                    formData[field].showName = affectContent.editTitle || '';
                }
                if(affectContent.titleBgColor){
                    vm.$set(formData[field]["td-style"],"background-color",affectContent.titleBgColor);
                }
                if(affectContent.titleFontColor){
                    vm.$set(formData[field]["td-style"],"color",affectContent.titleFontColor);
                }
                if(affectContent.titleFontSize){
                    vm.$set(formData[field]["td-style"],"font-size",affectContent.titleFontSize + "px");
                }
                if(affectContent.titleFontLean == "1"){
                    vm.$set(formData[field]["td-style"],"font-style","italic");
                }
                if(affectContent.titleFontWeight == "1"){
                    vm.$set(formData[field]["td-style"],"font-weight","bold");
                }
                if(affectContent.titleTextDecoration == "1"){
                    vm.$set(formData[field]["td-style"],"text-decoration","underline");
                }
            }
        }
    }
</script>

<style scoped lang="scss">
    .el-select {
        width:100%;
    }
    .el-card ::v-deep .el-card__body {
        padding-bottom: 10px;
    }

    .drag-class {
        .el-card {
            background-color: #F5F6F7;
        }
    }

    .color-set-css {
        display: inline-block;
        height: 17px;
        border-bottom-width:2px;
        border-bottom-style:solid;
    }

    .el-color-picker {
        position: absolute;left: 116px;opacity: 0;
    }

    .form-title-style{
        display: inline-block;
        height: 30px;
        line-height: 22px;
        padding: 0 4px;
        box-sizing: border-box;
        background-color: #ecf5ff;
        box-shadow: -1px -1px 3px lightgray;
        border: 4px outset rgba(236,245,255,0.4);
        border-radius: 4px;
        margin-right: 6px;
        i{
            font-size: 16px;
            cursor: pointer;
            color: #409EFF;
        }
    }

    .form-title-style-active{
        box-shadow: -2px -2px 4px lightgrey;
        border: 4px solid #409EFF;
        background-color: #409EFF;
        i{
            color: #ecf5ff;
        }
    }
</style>