<!-- webview only -->
<template>
  <div
      class="bl___cover-input"
      :style="positionStyle"
      @input="inputEvent"
      @focus="focusEvent"
      @blur="blurEvent"
      @confirm="confirmEvent"
      @keyboardheightchange="keyboardheightchangeEvent"
      @framechange="framechange"
  >
  </div>
</template>

<script>
import {naDataToObj} from '../util/logic';

export default {
  name: 'Bili_CoverInput',
  data() {
    return {
      positionStyle: {},
      classKey: ''
    };
  },
  props: {
    "value": {
      type: String,
      default: ''
    },
    "type": {
      type: String,
      default: 'text'
    },
    "password": {
      type: Boolean,
      default: false
    },
    "animation": {
      type: String,
      default: ''
    },
    "placeholder": {
      type: String,
      default: ''
    },
    "placeholderStyle": {
      type: Object,
      default: ''
    },
    "placeholderClass": {
      type: String,
      default: ''
    },
    "disabled": {
      type: Boolean,
      default: false
    },
    "maxlength": {
      type: Number,
      default: 140
    },
    "cursorSpacing": {
      type: Number,
      default: 0
    },
    "focus": {
      type: Boolean,
      default: false
    },
    "confirmType": {
      type: String,
      default: 'done'
    },
    "confirmHold": {
      type: Boolean,
      default: false
    },
    "cursor": {
      type: Number,
      default: -1
    },
    "selectionStart": {
      type: Number,
      default: -1
    },
    "selectionEnd": {
      type: Number,
      default: -1
    },
    "adjustPosition": {
      type: Boolean,
      default: true
    },
    "holdKeyboard": {
      type: Boolean,
      default: false
    }
  },
  watch: {
    value: {
      handler: function (value) {
        this.changeAttr('value', value);
      }
    },
    type: {
      handler: function (value) {
        this.changeAttr('type', value);
      }
    },
    password: {
      handler: function (value) {
        this.changeAttr('password', value);
      }
    },
    placeholder: {
      handler: function (value) {
        this.changeAttr('placeholder', value);
      }
    },
    animation(value) {
      this.changeAttr('animation', value);
    },
    placeholderStyle: {
      handler: function () {
        this.dealStyle();
      }
    },
    placeholderClass: {
      handler: function () {
        this.dealStyle();
      }
    },
    disabled: {
      handler: function (value) {
        this.changeAttr('disabled', value);
      }
    },
    maxlength: {
      handler: function (value) {
        this.changeAttr('maxlength', value);
      }
    },
    cursorSpacing: {
      handler: function (value) {
        this.changeAttr('cursorSpacing', value);
      }
    },
    focus: {
      handler: function (value) {
        this.changeAttr('focus', value);
      }
    },
    confirmType: {
      handler: function (value) {
        this.changeAttr('confirmType', value);
      }
    },
    confirmHold: {
      handler: function (value) {
        this.changeAttr('confirmHold', value);
      }
    },
    cursor: {
      handler: function (value) {
        this.changeAttr('cursor', value);
      }
    },
    selectionStart: {
      handler: function (value) {
        this.changeAttr('selectionStart', value);
      }
    },
    selectionEnd: {
      handler: function (value) {
        this.changeAttr('selectionEnd', value);
      }
    },
    adjustPosition: {
      handler: function (value) {
        this.changeAttr('adjustPosition', value);
      }
    },
    holdKeyboard: {
      handler: function (value) {
        this.changeAttr('holdKeyboard', value);
      }
    }

  },
  methods: {
    dealStyle() {
      let _getStyleByClass = window.__smallAppFE.COVERVIEWDATA[this.classKey][this.placeholderClass];
      let _output = {};
      if (_getStyleByClass) {
        // 特殊处理placeholder-class的样式
        if (this.placeholderStyle) {
          Object.assign(_output, _getStyleByClass, this.placeholderStyle);
        } else {
          _output = _getStyleByClass;
        }
      }
      this.changeAttr('placeholderStyle', _output);
    },
    inputEvent(e) {
      this.$emit('input', {
        detail: e.data
      });
    },
    focusEvent(e) {
      this.$emit('focus', {
        detail: e.data
      });
    },
    blurEvent(e) {
      this.$emit('blur', {
        detail: e.data
      });
    },
    confirmEvent(e) {
      this.$emit('confirm', {
        detail: e.data
      });
    },
    keyboardheightchangeEvent(e) {
      this.$emit('keyboardheightchange', {
        detail: e.data
      });
    },
    changeAttr(key, value) {
      let _obj = {};
      _obj[key] = value;
      SmallApp.postMessage({
        "module": "dom", // cover-view 的所有通信固定使用 dom
        "method": "updateAttrs", // addElement...
        "args": {
          id: this.$el.getAttribute('nodeid'),
          attrs: _obj
        }
      });
    },
    framechange(e) {
      // 修复默认v-show为false，然后再设置为true，cover-view展示错误。
      if (getComputedStyle(this.$el).display !== 'none') {
        naDataToObj(this.$el, e.data);
      }
    }
  },
  mounted() {
    this.classKey = this.$el.getAttribute('classkey');
  }
};
</script>

<style lang="less">
.bl___cover-input {
  font-size: 13px;
  padding: 2px;
  width: var(--width);
  height: var(--height);
  overflow: hidden;
  --width: '122px';
  --height: 'auto';
}
</style>

