<template>
    <el-container style="height: 100%;width: 100%">
        <el-form :model="formData" :validate-on-rule-change="false" size="small" ref="form">
            <el-form-item label="显示文本">
                <el-select label-position="top" v-model="formData.value"
                           @change="changeText($event)" style="width: 100%">
                    <el-option v-for="item in options"
                               :key="item.value"
                               :label="item.label"
                               :value="item.value">
                    </el-option>

                </el-select>
            </el-form-item>


            <el-form-item v-if="formData.value=='diy'">
                    <span slot="label">
                        <span style="color: red;font-size: 12px">有效入参rowData，vm，value，Ajax，CTX</span>
                    </span>
                <el-input
                        type="textarea"
                        resize="none"
                        :autosize="{ minRows: 4, maxRows: 4 }"
                        placeholder="请输入信息"
                        v-model="formData.msg"
                >
                </el-input>
            </el-form-item>
            <el-form-item label="文本样式" v-model="formData.viewStyle">
                <div style="width: 80%">
                    <br/>
                    <!--字体样式（粗体）  开始-->
                    <el-tooltip slot="append" effect="light" content="加粗（将所选内容字体加粗）" placement="top">
                        <div class="form-title-style"
                             :class="{'form-title-style-active':formData.showFontWeight == '1'}"
                             @click="changeStyle(formData,'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':formData.showFontLean == '1'}"
                             @click="changeStyle(formData,'lean')">
                            <i class="saspiconfont pl-icon-zitixieti"></i>
                        </div>
                    </el-tooltip>
                    <!--字体颜色  开始-->
                    <el-tooltip slot="append" effect="light" content="选择字体颜色" placement="top" style="display: inline">
                        <div class="form-title-style">
                            <i class="saspiconfont pl-icon-zitiyanse1 color-set-css"
                               :style="{borderBottomColor:formData.fontColor}"></i>
                            <el-color-picker v-model="formData.fontColor" size="mini"
                                             style="position: absolute;left: 84px;opacity: 0;">
                            </el-color-picker>
                        </div>
                    </el-tooltip>
                    <div style="margin-top: 10px;display: inline" >
                        <el-input-number v-model="formData.fontSize" style="width: 50%"></el-input-number>
                        <span style="width: 40px;padding-left: 10px">px</span>
                    </div>
                </div>
            </el-form-item>
        </el-form>
    </el-container>
</template>

<script>
import eventParentConfig from "../../eventParentConfig";
import {red} from "chalk";

export default {
    name: "font-format-config",//eventKey事件唯一标识(保证唯一性)
    extends: eventParentConfig,
    eventType: 'list', //规则类型 'tableView'表单事件  list:列表事件 flow 流程事件
    eventName: '文字格式', //事件显示名称
    version: "1.0",
    renderKey: 'font-format-render', //渲染模版对应的唯一标识（渲染组件 name）
    data() {
        return {
            options: [{
                value: 'default',
                label: '默认'
            }, {
                value: 'diy',
                label: '自定义'
            },],
            formData: {
                showFontWeight: "",
                showFontLean: "",
                msg: "",
                value: '',
                viewStyle: "",
                viewPage: "",
                fontColor: "",
                fontSize: "",
            }, //表达视图数据
        }
    },

    created() {
        this.initData(); //配置数据初始化
    },
    methods: {
        red,
        /**
         * 执行配置数据初始化，对于传入参数 configData 初始值设置或者数据回填显示
         */
        initData() {
            this.formData = JSON.parse(JSON.stringify(this.cloumnFormatterObj || {}));
            if (!this.formData.fontSize) {
                this.formData.fontSize = '14';
            }
            if (!this.formData.value) {
                this.$set(this.formData, "value", 'default');
            }
        },

        //-------------- 模板返回方法 (为事件渲染提供 ) start--------------------------
        /**
         * 表单规则、流程规则渲染方法
         */
        renderConfig() {

        },
        validateMethod() {
            let result = false;
            this.$refs.form.validate(valid => {
                result = valid;
            })
            return result;
        },
        /**
         * 列表规则返回
         */
        getConfigDatas() {
            return this.formData;
        },

        /**
         * 改变样式（粗体）
         */
        changeStyle(eventData, type) {
            if (type == "weight") {
                if (eventData.showFontWeight == "1") {
                    this.$set(eventData, "showFontWeight", "0");
                } else {
                    this.$set(eventData, "showFontWeight", "1");
                }
            } else if (type == "lean") {
                if (eventData.showFontLean == "1") {
                    this.$set(eventData, "showFontLean", "0");
                } else {
                    this.$set(eventData, "showFontLean", "1");
                }
            } else if (type == "decoration") {
                if (eventData.showTextDecoration == "1") {
                    this.$set(eventData, "showTextDecoration", "0");
                } else {
                    this.$set(eventData, "showTextDecoration", "1");
                }
            }
        },

        // ---------------------- 模板返回方法 end -----------------------------
        /**
         * 更改显示组件
         */
        changeText(val) {
            console.log(val);
            if ("diy" == val) {
                this.$set(this.formData, "value", 'diy');
            } else {
                this.$set(this.formData, "msg", null);
                this.$set(this.formData, "value", 'default');
            }
        },
    }


}
</script>

<style scoped  scoped lang="scss">

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

.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>