<template>
    <div class="tool-type-timeSelect" 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>
            <Select v-model="value" style="width:96.5%;" >
                <Option v-for="item in optionsData" :value="item.value||''" :key="item.value">{{ item.key }}</Option>
            </Select>
        </div>
    </div>
</template>

<script>
import * as components from './style';
import {PropertyMixin} from '../../service/main-tool-editor-type-mixin';
import eventbus from '../../service/eventbus';
export default {
    components: {
        ...components
    },
    mixins: [PropertyMixin],
    position: 'mainToolEditorTypeTimeSelect',
    name: 'main-tool-editor-type-timeSelect',
    data () {
        return {
            propArr:[]
        };
    },
    props: {
        instanceInfo: Object,
        editor: Object
    },
    computed: {
        applicationState () {
            return this.$store.state.application;
        },
        viewportState () {
            return this.$store.state.viewport;
        },
        optionsData () {
            let _data = this.propArr || [];
            return _data;
        }
    },
    methods:{
        initSelectValue(){
            let currentInstance = this.$store.state.viewport.instances.get(this.$store.state.viewport.currentEditInstanceKey);
            //note 为事件新增一项
              if (currentInstance.data.extend.type) {
                 this.value= currentInstance.data.extend.type;
              }
        }
    },
    mounted(){
        let _this=this;
            _this.propArr=configPageIde.timeType;
            _this.initSelectValue();
    },
    watch: {
        value (n, o) {
            debugger;
            if (n === o) {
                return;
            }
            let comVal = '';
            if(n!=="textarea"){
                comVal = "extend.rows";
            }
            eventbus.$emit("computIsShow",{com:comVal});//用来按需隐藏需要隐藏的组件
            debugger;
            let currentInstance = this.$store.state.viewport.instances.get(this.$store.state.viewport.currentEditInstanceKey);
            //note 为事件新增一项
            //  if (currentInstance.data.extend.type) {
            currentInstance.data.extend.type=n;
        }
    }
};
</script>

<style lang="less">
.tool-type-timeSelect{
     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;
            }
        }
    }

}
</style>
