<template>
  <div :class="{'b-input-container': true, 'b-input-borderBottom': border}">
    <div class="input-title-wrapper">
      <div class="input-title">{{title}}</div>
      <div @click="titleButton" v-if="titleIcon" class="title-img-wrapper">
        <img mode="widthFix" :src="titleIcon" />
      </div>
    </div>
    <div class="input-value-wrapper">
      <input
        v-if="!valueButtonText && !valueButtonIcon"
        @change="valueChange"
        :maxlength="maxlength"
        :placeholder="placeholder"
        :value="value"
        :type="type"
        class="input-value"
      />
      <div v-if="valueButtonText" @click="valueButton" class="valueButtonText">{{valueButtonText}}</div>
      <div @click="valueButton" v-if="valueButtonIcon" class="value-img-wrapper">
        <img mode="widthFix" :src="valueButtonIcon" >
      </div>
    </div>
  </div>
</template>

<script>
export default {
  /**
    * type：数字键盘类型，支持number、text、idcard
    * title：标题文字
    * defaultValue：输入框默认文字
    * placeholder：输入框占位文字
    * border：输入框底部边框
    * maxlength：输入框最大长度
    * valueButtonText：输入框为按钮时的文字
    * valueButtonIcon：输入框为图标按钮时的图标url
    * titleIcon：标题右侧图标url
  */
  props: {
    type: {
      type: String,
      default: () => 'text'
    },
    title: {
      type: String,
      default: () => ''
    },
    defaultValue: {
      type: String,
      default: () => ''
    },
    placeholder: {
      type: String,
      default: () => ''
    },
    border: {
      type: Boolean,
      default: () => true
    },
    maxlength: {
      type: String | Number,
      default: () => 99
    },
    valueButtonText: {
      type: String,
      default: () => ''
    },
    valueButtonIcon: {
      type: String,
      default: () => ''
    },
    titleIcon: {
      type: String,
      default: () => ''
    }
  },
  data: () => {
    return {
      value: undefined
    }
  },
  mounted () {
    this.value = this.defaultValue
  },
  methods: {
    // 输入内容改变
    valueChange (e) {
      this.$emit('change', e.target.value)
    },
    // 点击标题栏图标
    titleButton (e) {
      this.$emit('titleButtonClick', e)
    },
    // 点击输入栏按钮文字或图标
    valueButton (e) {
      this.$emit('valueButtonClick', e)
    }
  }
}
</script>

<style scoped>
.b-input-container {
  display: flex;
  margin: 0 42px;
  padding: 46px 0 20px;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;
}
.b-input-container img {
  display: block;
  width: 14px;
  height: 14px;
}
.b-input-container .input-title-wrapper {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  color: #222222;
  font-size: 32px;
  font-weight: bold;
  white-space: nowrap;
}
.b-input-container .input-title-wrapper img {
  margin-left: 18px;
}
.b-input-container .input-value-wrapper {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  text-align: right;
  color: #666666;
  font-size: 32px;
}
.b-input-borderBottom {
  border-bottom: 1px solid #EBEBEB;
}
.b-input-container .valueButtonText {
  color: #3072F6;
}
.b-input-container .title-img-wrapper {
  display: flex;
  width: 100px;
  height: 50px;
  align-items: center;  
}
.b-input-container .value-img-wrapper {
  display: flex;
  width: 100px;
  height: 50px;
  justify-content: flex-end;
  align-items: center;
}
</style>

