<template>
<div>
  <div class="numberfield-input-container">
    <div class="numberfield-icon-container" v-if="showIcon">
        <text class="numberfield-icon-rmb" >￥</text>
    </div>
    <div class="numberfield-input-row">
        <!-- 205631	【lighting-ui】numberfield设置maxlength字段不生效 -->
      <input ref="input0" class="numberfield-input" type="tel" v-if="!formatShow" @blur="numbertBlur" @input="onInput" @focus="numberFocus" v-model="numberValue" :maxlength="maxlength" :placeholder="placeholder" :autofocus="isAutoFocus" singleline="true" />
      
      <text class="numberfield-input__text" v-if="formatShow" @click="textFocus" v-model="textValue">{{textValue}}</text>
    </div>
    <image class="numberfield-input__clear" @click="clearHandle" v-if="isClearShow" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAcCAYAAAByDd+UAAAACXBIWXMAAAsTAAALEwEAmpwYAAADQElEQVRIia3WS6jVVRTH8c/1XrT3QwxpoBFlpAWBcYUkykgskJ6kNLJsuGjgpLCa1SAtIgRZOqgowx4olTYoRcusoNRKUkKkyCLQqMDoccnu9TTY+9jh9j/nXs09+fP/r73+3732+q29V1+r1TKekZnnYhYuxlk4iu9wICJGxvUT9PUCZuZ5uB/3Yg76G6b9hi14HlsiomcEjcDMnIDA47gQLXyJ3fgWf+AiXIEbMLW6foaIiF3jBmbmFLyGmzGE1ciIONT0g7q4m/AwFmAEj0XEyjGBmTkVO3AlduK+bqAu8LvwHCZjTUREV2BmnoGPcC3WY2lE/D1eWAf0MryLy7F8dKSdwGexDJtx98korwv0U1yAuZ057Wu1WjJzliKKH3FVRBw9VVgH9A68pQhpsK3egWp/RJH8o6cDBhGxKTO3KkK6Fe/AQGaej0X4Qcnd6JX2Y61SYxtH2SbiKXwRES81cFdW4AMngIr8J2FDRAw3OPXjNizNzCUR8UoHbANuxyo0AXfgCG7JzIGIGB7AYDV+0OAgIo5l5ny8h3WZCRs7YJuVGmzyPZ6ZO7FYKbX9A7i02g80OVXH/Zk5F+9jnaLmwQpbFBHHuvniYH1ObwMn1Q+/9HASEV9n5gJFzYPYOw4Y/Fyfkyk5bB8153QY/zNqzlZUn2Fco4hh7RjAM+vzzzbwcP0wDYd6wNo5exVPYGsxpYjoBW2n7HAbuK9+mIMPG2B92KTU0nrlfB3JzHmKCjMzh7qURfu/x/FVG7i9Gu7EMw0Ok5ScvaycryMQEd9U6HZcp6EsMvMSZev3RMSv/Hu07cFszI6IvV1WetIjM1cqJbMsIla1I4SnlTtwhbJ1pwM2HQ8qrciJ6NsRTsAnytZFRKz5n7ABbMONOqI7AayTZmIXJuKeiHj7FGH9eAFLFFHN77zqRt/4C/FGfV12spHWi+BFRYAHcX1E/NQ5p6mnWYjXcbbSjS0fS0h1CxcrGpiGz7EwIo6Mntuta5upJHpQOYk+xpvKln+P3zEFMzCvwqYr9ba6LnKoaXFd+9IqpEV4SOlzeo2/lFQ8GRH7ek3s2Qh3wGdgPq5WOu8+HFN61N3Y1i7ssca4gKdz/AMrrmWzLf9vBgAAAABJRU5ErkJggg=="></image>
    <slot name="action"></slot>
  </div>
</div>  
</template>

<script>
export default {
  created () {
    this.numberValue = (this.value === undefined || this.value === null) ? '' :  this.value
  },
  name: "numberfield",
  props: {
    value: {
      type: [Number,String],
      default: 0
    },
    showIcon: {
      default: false
    },
    placeholder: {
      default: '请输入...'
    },
    maxlength: {
      default: 12
    }
  },
  data(){
    return {
      numberValue: '',
      formatShow: false,
      isClearShow: false,
      textValue: undefined,
      isAutoFocus: false,
    }
  },
  methods: {
    clearHandle() {
      this.numberValue = "";
      this.textValue = "0.00";
      this.isClearShow = false;
      // this.isAutoFocus = true;
    },
    numberFocus(){
      this.isClearShow = true;
    },
    /* 聚焦切换为number */
    textFocus(){
      this.formatShow = false;
      this.isAutoFocus = true;
    },
    /* 失去焦点显示为text */
    numbertBlur(){
      if(this.numberValue !== ""){
        this.isClearShow = true;
        this.textValue = this.format(this.numberValue);
      }else{
        this.isClearShow = false;
        this.textValue = "0.00";
      }
      this.formatShow = true;
      
    },
    format(s){
      s = parseFloat((s + "").replace(/[^\d\.-]/g, "")).toFixed(2) + "";   
      var l = s.split(".")[0].split("").reverse(),r = s.split(".")[1];   
      var t = "";   
      for(var i = 0; i < l.length; i ++ )   {   
        t += l[i] + ((i + 1) % 3 == 0 && (i + 1) != l.length ? "," : "");
      }   
      return t.split("").reverse().join("") + "." + r;   
    },
    setValue(val){
      this.numberValue = val;
    },
    onInput($event) {
      this.$emit('onInput', this.numberValue, $event)
    }
  },
  watch: {
    value (val) {
      this.numberValue = val
    },
    numberValue () {
      this.$emit('input', this.numberValue);
    }
  }
};
</script>

<style scoped>
  .numberfield-input-container{
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    height: 120px;
    padding-top: 24px;
    padding-bottom: 24px;
    border-bottom-width: 1px;
    border-bottom-color: #e8e8e8;
  }
  .numberfield-input-row{
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    flex: 1;
    position: relative;
    height: 72px;;
  }
  .numberfield-input__text{
    width: 500px;
    height: 72px;
    padding-top: 6px;
    justify-content: center;
    font-size: 52px;
    color: #333;
  }
  .numberfield-input {
    width: 500px;
    height: 72px;
    font-size: 52px;
    justify-content: center;
    color: #333;
    background-color: #ffffff;
  }
  .numberfield-input__clear{
    width: 32px;
    height: 32px;
    margin-left: 10px;
  }
  .numberfield-icon-container{
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    height: 72px;
  }
  .numberfield-icon-rmb{
      width: 60px;
      background-color: #ffffff;
      font-size: 56px;
      color: #333;
  }
</style>


