<template>
    <div class="tool-type-string" style="width: 100%;">
                <div class="tool-type-div">
                    <p class="editorTextStyle">
                       {{editor.text}}
                        <span :class="noValidate?'editorMaxFontStyle':'editorMaxFontStyleFalse'"  v-if="editor.maxFont">最多{{editor.maxFont}}字</span>
                    </p>
                    <p>
                        <Input  :class="noValidate?'editorInput':'editorInputFalse'" v-model="value" placeholder="" @on-blur="listenerMaxFont(value)"  clearable  />
                    </p>
                     <p class="editorContentStyle" v-if="editor.maxInputFont">
                         内容最多可填写{{editor.maxInputFont}}个字
                     </p>
                </div>
    </div>
</template>

<script>
    import * as components from './style';
    import {PropertyMixin} from '../../service/main-tool-editor-type-mixin';

    export default {
        components: {
            ...components
        },
        mixins: [PropertyMixin],
        position: 'mainToolEditorTypeString',
        name: 'main-tool-editor-type-string',
        computed: {
            currentEditInstanceKey() {
                let currentEditInstanceKey = this.$store.state.viewport.currentEditInstanceKey;
                return currentEditInstanceKey;
            }
        },
        methods: {
            listenerMaxFont(el){
                debugger;
                if(el.length>parseInt(this.editor.maxFont)){
                   // this.val
                    this.noValidate=false;
                }else{
                    this.noValidate=true;
                }
            }
        },
        mounted() {
            debugger;
            this.initCurrtField();
            this.setInstanceProps(this.value);
            this.listenerMaxFont(this.value);
        },
        data() {
            return {
                noValidate:true,
                value: this.editor.value || ''
            }
        },
        watch: {
            field(n, o) {
                if (n === o) {
                    return;
                }
                deep:true//对象内部的属性监听，也叫深度监听
                //  this.setInstanceProps(n);
            },
            value(n, o) {
                if (n === o) {
                    return;
                }
                debugger;
                let currentInstance = this.$store.state.viewport.instances.get(this.$store.state.viewport.currentEditInstanceKey);
                if(this.editor.field=="extend.placeholder"){
                      //note 如果要是文本提示框  判断是否是必填，就添加（必填）
                     if(currentInstance.data.validateArr[0].required){
                         if(n||n.indexOf("必填")!=-1){
                             this.setInstanceProps(n);
                         }else{
                             this.setInstanceProps(n+'(必填)');
                         }
                         return;
                     }
                }
                this.setInstanceProps(n);
            }
        }
    };
</script>

<style scoped lang="less">
    .tool-type-string {
        margin: 10px 8px 0;
        .tool-type-div  {
            margin: 5px 8px 0;
            .editorTextStyle {
                font-weight: 700;
                font-size: 14px;
                color: #191f25;
                margin-bottom: 4px;
                .editorMaxFontStyle {
                    color: rgba(25,31,37,.4);
                    font-size: 12px;
                }
                .editorMaxFontStyleFalse{
                    color: red;
                    font-size: 12px;
                }
            }
            .editorInput {
                margin: 5px 0;
            }
            .editorInputFalse {
                margin: 5px 0;
                border:1px solid red;
            }
            .editorContentStyle {
                font-size: 12px;
                margin: 8px 0;
            }
        }
        .ivu-input {
            border-radius: 4px;
        }
    }
    .ivu-input {
        border-radius: 4px;
    }

</style>
