<template>
    <Select
        v-model="value[0]"
        class="transfer-select"
        @on-change='handleCronChange'
        :disabled="disabled"
        :placeholder="placeholder">
        <Option class="hidden" v-for="(item,i) in value" :value="item" :label="item" :key="i">
        </Option>
        <vue-cron class='vue-cron'  @cronValue='handleCronChange'></vue-cron>
    </Select>
    
</template>


<script lang="ts">
import { Vue, Component, Prop, Watch, Model } from 'vue-property-decorator';
import VueCron from './vue-cron/vue-cron.vue';

@Component({
    components: {
        'vue-cron': VueCron,
    }
})
export default class CronEditor extends Vue {
    
    /**
     * 启用状态
     *
     * @type {any}
     * @memberof CronEditor
     */ 
    @Prop() disabled: any;

    /**
     * 下拉框显示值
     *
     * @type {any}
     * @memberof CronEditor
     */ 
    @Prop() placeholder:any;

    /**
     * 绑定Cron表达式
     * 
     * @type {any[]}
     * @memberof CronEditor
     */
    public value: any[] = [];

    /**
     * 处理返回Cron表达式
     *
     * @type {any}
     * @memberof CronEditor
     */ 
    public handleCronChange(val: any) {
        this.value[0] = val;
        this.value.push(val);
    }

    /**
     * Vue生命周期
     * 
     */
    public created() {
        this.value[0] = '';
    }
}

</script>

<style lang="scss">
.transfer-select{
  .ivu-select-dropdown {
      padding: 0px;
      overflow: inherit;
      .hidden {
          display: none;
      }
      .vue-cron{
          min-width: 100% !important;
      }
  }
}

</style>