import {Component, Prop, Vue, Emit, Watch, Model} from 'vue-property-decorator';

@Component
export default class EflyInput extends Vue {
    @Prop({default: () => ''}) private prefixIcon!: any;
    @Prop({default: () => ''}) private suffixIcon!: any;
    @Prop({default: () => 'text'}) private type!: any;
    @Prop({default: () => ''}) private placeholder!: any;
    @Prop({default: () => ''}) private maxlength!: any;
    @Prop({default: () => ''}) private width!: any;
    @Prop({default: () => 'left'}) private align!: any;
    @Prop({default: () => ''}) private size!: any;
    @Prop({default: () => false}) private disabled!: any;
    @Model('input') value!: string;

    @Emit('input') changed($event: any) {
        return $event.target.value
    }

    @Emit('iconClick') suffixIconClick($event: any) {

    }

    private status: any = {
        disabled: false
    }

    private mounted() {
        this.status.disabled = this.disabled === '' || this.disabled ? true : false;
    }

    @Watch('disabled', {deep: true})
    private watchMonitor(value: any) {
        this.status.disabled = this.disabled === '' || this.disabled ? true : false;
    }

    private inputEvent($event: any) {
        this.$emit($event.type, $event);
    }

}