<template>
  <div :style="_inputBoxStyle">
    <div class="inputBox" :style="{ borderRadius }">
      <input
        class="input"
        :type="type_"
        :value="value"
        :autofocus="autofocus"
        :maxlength="maxlength"
        :return-key-type="returnKeyType"
        :singleline="singleline"
        :max="max"
        :min="min"
        :upriseOffset="upriseOffset"
        :hideDoneButton="hideDoneButton"
        :placeholder="placeholder"
        :style="_inputStyle"
        @input="input"
      />
      <div class="right" v-if="isShowRight" :style="{ backgroundColor: _inputStyle.backgroundColor }">
        <dof-iconfont
          v-if="_isShowClear && _isColmo"
          class="icon"
          :code="'\u4725'"
          :size="48"
          :color="_isColmo ? '#78797A' : '#1E2E37'"
          @dofIconFontClicked="handleClear"
        ></dof-iconfont>
        <image v-if="_isShowClear && !_isColmo" class="clearImg" :src="iconImg.empty" @click="handleClear"></image>
        <dof-iconfont
          v-if="isShowPWDIcon && _isColmo"
          class="icon"
          :code="PWDIcon"
          :size="48"
          :color="_isColmo ? '#78797A' : '#1E2E37'"
          @dofIconFontClicked="handleTogglePWD"
        ></dof-iconfont>
        <image v-if="isShowPWDIcon && !_isColmo" class="PWDImg" :src="PWDImg" @click="handleTogglePWD"></image>
        <slot name="right">
          <!-- <dof-iconfont
          class="icon"
          :code="icon.code ? icon.code : iconCode"
          :size="icon.size ? icon.size : 48"
          :color="icon.color ? icon.color : _isColmo ? '#78797A' : '#1E2E37'"
          @dofIconFontClicked="handleClick"
        ></dof-iconfont> -->
        </slot>
      </div>
    </div>
  </div>
</template>
<style src="./colmo.css" scoped></style>
<style scoped>
.inputBox {
  display: flex;
  flex-direction: row;
  position: relative;
  align-items: stretch;
  overflow: hidden;
}
.input {
  flex: 1;
  padding-left: 32px;
  /* padding-right: 30px; */
  placeholder-color: #c7c7cc;
}
.right {
  /* padding-left: 30px; */
  padding-right: 30px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
.icon {
  /* position: absolute; */
}
.clearImg {
  width: 48px;
  height: 48px;
}
.PWDImg {
  width: 48px;
  height: 48px;
  margin-left: 10px;
}
</style>

<script>
import ColmoMixin from '../../mixins/colmo'
import DofIconfont from '../dof-iconfont'
import iconImg from './icon'
export default {
  mixins: [ColmoMixin],
  components: { DofIconfont },
  props: {
    //
    value: {
      type: String,
      default: ''
    },
    placeholder: {
      type: String,
      default: ''
    },
    type: {
      type: String,
      default: 'text'
    },
    autofocus: {
      type: Boolean,
      default: false
    },
    maxlength: {
      type: Number
    },
    returnKeyType: {
      type: String
    },
    singleline: {
      type: Boolean,
      default: true
    },
    max: {
      type: String
    },
    min: {
      type: String
    },
    upriseOffset: {
      type: Number
    },
    hideDoneButton: {
      type: Boolean,
      default: false
    },
    bgColor: {
      type: String,
      default: ''
    },
    height: {
      type: Number,
      default: 0
    },
    // 是否展示右侧X
    isShowClear: {
      type: Boolean,
      default: false
    },
    // 是否展示右侧密码切换图标
    isShowPWDIcon: {
      type: Boolean,
      default: false
    },
    // { code: '\u4729', size: 48, color: '#333'}
    icon: {
      type: Object,
      default: () => ({})
    },
    inputStyle: {
      type: Object,
      default: () => ({})
    },
    inputBoxStyle: {
      type: Object,
      default: () => ({})
    },
    // 增加边框弧度参数，设置内容器弧度，解决安卓边框渲染问题
    borderRadius: {
      type: String,
      default: ''
    }
  },
  model: {
    prop: 'value',
    event: 'input'
  },
  watch: {
    type: {
      handler(val) {
        this.type_ = val
      },
      immediate: true
    }
  },
  computed: {
    _height() {
      return this.height ? this.height : this._isColmo ? '104' : '104'
    },
    _inputStyle() {
      return {
        backgroundColor: this.bgColor ? this.bgColor : this._isColmo ? '#303237' : '#fff',
        height: this._height + 'px',
        lineHeight: this._height + 'px',
        ...this.inputStyle
      }
    },
    _inputBoxStyle() {
      return {
        height: Number(this._height) + 2 + 'px',
        borderRadius: this.borderRadius,
        ...this.inputBoxStyle
      }
    },
    _isShowClear() {
      return this.isShowClear && this.value.length > 0
    },
    isShowRight() {
      return this._isShowClear || this.isShowPWDIcon || !!this.$slots.right
    },
    PWDIcon() {
      return this.type_ === 'password' ? '\u4769' : '\u4768'
    },
    PWDImg() {
      return this.type_ === 'password' ? this.iconImg.show : this.iconImg.hide
    }
  },
  data() {
    return {
      type_: 'text',
      iconCode: '',
      iconImg
    }
  },
  methods: {
    input({ value }) {
      this.$emit('input', value)
    },
    handleClear() {
      this.$emit('input', '')
    },
    handleClick() {
      this.$emit('iconClick')
    },
    handleTogglePWD() {
      if (this.type !== 'password' && this.type !== 'text') return

      if (this.type_ === 'password') {
        this.type_ = 'text'
      } else {
        this.type_ = 'password'
      }
    }
  }
}
</script>
