<template>
    <div :style="contentStyle">
        <vb-edit-iframe
            class="edit-area"
            :class="active?'theme-border-color':''"
            @blur="active=false"
            @focus="active=true"
            :html="value"
            :limit="limit"
            :placeholder="placeholder"
            ref="vbEditIframe"
            :style="iframeStyle"
            @change="onChange"
        >
        </vb-edit-iframe>
        <el-color-picker size="mini" :style="pickerStyle" v-model="color" @change="setColor"></el-color-picker>
    </div>
</template>
<script>
import vbEditIframe from "./vbEditIframe"

export default {
    name: "vbEditTextColor",
    components: {vbEditIframe},
    props: {
        value: {
            type: String
        },
        limit: {//限制多少字符
            type: Number,
            default: null
        },
        placeholder: {
            type: String,
            default: "请输入文字"
        },
        size: {
            type: Number,
            default: 14
        }
    },
    model: {
        prop: 'value',
        event: 'change'
    },
    data() {
        return {
            active: false,
            color: "#000000",
            divHeight: 28,
        }
    },
    mounted() {
        this.$refs.vbEditIframe.setStyle(this.iframeEditStyle);
    },
    computed: {
        contentHeight(){
            return this.size + 8 + 6+2
        },
        contentStyle() {
            return {
                height: this.contentHeight+ 'px',
                width: (this.size * (this.limit || 15) + 10) + 'px',
                position: 'relative',
            }
        },
        iframeStyle() {
            return {
                // top:-(divHeight-size-8-6)/2+'px',
                // position: 'absolute',
                height: this.contentHeight+ 'px',
                'padding-right': this.contentHeight +'px',
                width: (this.size * (this.limit || 15) + 10) + 'px',
            }
        },
        iframeEditStyle() {
            let size = this.size;
            return {
                width: size * (this.limit || 15) + 'px',
                "height": size + 8 + 'px',
                "line-height": size + 8 + 'px',
                "font-size": size + "px",
                "white-space": "nowrap"
            }
        },

        pickerStyle() {
            return {
                position: 'absolute',
                top: (this.contentHeight-28)/2 +'px',
                right:(this.contentHeight - 28)/2+'px'
            }
        }
    },
    methods: {
        setColor(color) {
            this.$refs.vbEditIframe.setColor(color);
        },
        onChange() {
            let str = this.$refs.vbEditIframe.getHtml();
            str = str.replace(/\"/g, "'");
            this.$emit('change', str);
        },
        getHtml() {
            let str = this.$refs.vbEditIframe.getHtml();
            str = str.replace(/\"/g, "'");
            return str;
        }
    }
}
</script>
<style lang="less" scoped>
.edit-area {
    border: 1px solid rgb(221, 221, 221);
    padding: 3px 5px;
    border-radius: 4px;
}

.edit-area:focus, .edit-area.theme-border-color {
    outline: 0;
}

/deep/ .el-color-picker__trigger {
    border: none;
}
</style>
