<template>
    <div style="width: 100%">
        <Container>
            <Select class="dateSelect main-li-item" v-model="val" style="width:96.5%;" clearable>
                <Option class="main-li-item-option" v-for="item in optionsData" :value="item.value" :key="item.value">{{ item.key }}</Option>
            </Select>
        </Container>
    </div>
</template>

<script>
import * as components from './style';
import {PropertyMixin} from '../../service/main-tool-editor-type-mixin';
export default {
    components: {
        ...components
    },
    mixins: [PropertyMixin],
    position: 'mainToolEditorTypeDateSelect',
    name: 'main-tool-editor-type-dateSelect',
    data () {
        return {
            val:this.editor.val||'',
            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: {
        initCurrtField () {
            let props = this.instanceInfo.vm.$data;
            let val = _.get(props, this.field);
            if (val !== undefined) {//改为undefined,校验boolean类型false错误
                this.val = val;
            }
        },
        handleChange () {

        }
    },
    mounted(){
            let _this=this;
            _this.propArr=configPageIde.dateType;
            _this.initCurrtField();
    },
    watch: {
        val (n, o) {


            if (n === o) {
                return;
            }
            this.setInstanceProps(n);
        }
    }
};
</script>

<style scoped lang="less" >

    .main-li-item {
        width: 90%;
        min-height: 32px;
        float: left;
        margin: 0px 8px 12px 8px;
        .main-li-item-option {
            width:219px;
            text-overflow:ellipsis;
        }
    }
    .dateSelect{
        .ivu-select-dropdown{
            left:0px !important;
            .ivu-select-dropdown-list {
                min-width: 100%;
                list-style: none;
                max-width: 262px !important;
            }
        }

    }

</style>
