<!-- webview only -->
<template>
    <section
        @click.capture="focusInput"
        @touchcancel.capture="$emit('touchcancel', $event)"
        @touchend.capture="$emit('touchend', $event)"
        @touchmove.capture="$emit('touchmove', $event)"
        @touchstart.capture="$emit('touchstart', $event)"
        :class="['b-textfield', !multiple ? 'not-multiple' : '' ]"
    >   
        <template v-if="!multiple">
            <section class="b-textfield-wrapper">
                <span class="b-textfield-one-value" v-show="hasValue">{{ showText }}</span>
                <span :class="['b-textfield-placeholder', placeholderClass]" :style="placeholderStyle" v-show="!hasValue">{{placeholder}}</span>
            </section>
        </template>   
        <template v-else>
            <section class="b-textfield-wrapper-multiple">
                <section v-show="hasValue">{{ showText }}</section>
                <span :class="['b-textfield-placeholder', placeholderClass]" :style="placeholderStyle" v-show="!hasValue">{{placeholder}}</span>
            </section>
        </template>
    </section>
</template>

<script>
export default {
    name: 'Bili_Textfield',
    props: {
        value: {
            type: String,
            default: ''
        },
        placeholder: {
            type: String,
            default: ''
        },
        placeholderStyle: {
            type: String,
            default: ''
        },
        placeholderClass: {
            type: String,
            default: ''
        },
        disabled: {
            type: Boolean,
            default: false
        },
        maxlength: {
            type: Number,
            default: 140
        },
        multiple: {
            type: Boolean,
            default: false
        },
        confirmType: {
            type: String,
            default: 'done'
        },
        confirmHold: {
            type: Boolean,
            default: false
        },
    },
    data() {
        return {
            showText: ''
        };
    },
    watch: {
        value(value) {
            this.showText = value + '';
            global["__bili_channel"].publish('Bili_Textfield_changeValue', {
              value: value
            });
        },
        maxlength(value) {
          this.changeShowText(value);
        }
    },
    computed: {
        hasValue() {
            return this.showText.length > 0;
        }
    },
    mounted() {
        this.changeShowText(this.maxlength, true);
    },
    methods: {
      changeShowText(maxlength,init){
        let _value = this.showText;
        if (init) _value = this.value + '';
        this.showText = maxlength >= 0 && _value ? _value.substr(0, maxlength) : _value;
      },
        focusInput() {
            if (!this.disabled) {
              global["__bili_channel"].publish('Bili_Textfield_showKeyboard', {
                defaultValue: this.showText,
                maxLength: this.maxlength,
                multiple: this.multiple,
                confirmType: this.confirmType,
                confirmHold: this.confirmHold,
                hasButton: this.multiple
              });

              global["__bili_channel"].subscribe('Bili_Textfield_Focus', ()=>{
                this.$emit('focus', {
                  detail: {
                    value: this.showText || ''
                  }
                });
              })

              global["__bili_channel"].subscribe('Bili_Textfield_Input', (e)=>{
                this.showText = e.value;
                if (!this.multiple && this.showText !== '') {
                  let _ele = document.getElementsByClassName('b-textfield-one-value');
                  if(_ele.length > 0) {
                    this.$nextTick(()=>{
                      _ele[0].scrollLeft = 999999
                    })
                  }
                }
                this.$emit('input', {
                  detail: {
                    value: e.value
                  }
                });
              })

              global["__bili_channel"].subscribe('Bili_Textfield_Confirm', (e)=>{
                this.$emit('confirm', {
                  detail: {
                    value: e.value
                  }
                });
              })

              global["__bili_channel"].subscribe('Bili_Textfield_Complete', (e)=>{
                this.$emit('blur', {
                  detail: {
                    value: e.value
                  }
                });
              })
            }
        }
    }
}
</script>

<style>
.b-textfield {
    cursor: auto;
    display: block;
    text-overflow: clip;
    overflow: hidden;
    white-space: nowrap;
    position: relative;
}
.b-textfield.not-multiple {
    height: 1.4rem;
    min-height: 1.4rem;
}
.b-textfield .b-textfield-wrapper {
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}
.b-textfield .b-textfield-wrapper span {
    line-height: 1;
}
.b-textfield .b-textfield-wrapper-multiple {
    width: inherit;
    height: inherit;
    overflow-x: hidden;
    overflow-y: auto;
}
.b-textfield .b-textfield-wrapper-multiple section {
    word-wrap: break-word;
    white-space: pre-line;
}
.b-textfield-placeholder {
    color: #808080;
    font-size: inherit;
}

.b-textfield-one-value {
  width: 100%;
  overflow-x: auto;
  display: inline-block;
}

</style>
