<!-- @desc:百分比组件封装  @auth:张潇木  @time:2022-9-3 16:41 -->
<template>
  <Poptip popper-class="popper-class" trigger="focus" placement="top-start" :disabled="true">
    <Input size="small" ref="inputNumber" @on-blur="handleBlur" @on-focus="handleFocus"
           @on-click="handleClick"
           @on-clear="handleClear"
           @on-enter="handleEnter" @on-change="handleChange" @on-keyup="handleKeyup"
           @on-keydown="handleKeydown"
           @input.native="handleInput"
           @contextmenu.native.prevent
           @dblclick.native="copyValue()"
           :disabled="disabled"
           :name="name" :readonly="readonly" :value="value2" :placeholder="placeholder"
           :class="(readonly ? 'readonly-input' : '') +' ' + (textRight?'text-right':'')" :clearable="!readonly" type="text" :digits="digits"
           :max="max" :min="min" number
           :maxlength="maxlength">
      <span v-if="unit" slot="append">{{ unit }}</span>
    </Input>
    <div slot="content" class="pop-content">
      <div class="pop-item-content">{{ vm.$t('numberValue') + '：' + (this.value2 ? this.value2 : '') }}</div>
      <div class="pop-item-content">
        {{
          vm.$t('maxValue') + '：' + this.$libaray.getMaxValue(this.max ? this.max : this.$config.maxNumber, this.digits)
        }}
      </div>
      <div class="pop-item-content">{{ vm.$t('digits') + '：' + this.digits }}</div>
    </div>
  </Poptip>
  <!--    <InputNumber ref="inputNumber" size="small"  @on-blur="$emit('on-blur')" :name="name" :readonly="readonly" v-model="value2" :placeholder="placeholder"-->
  <!--            :class="readonly ? 'readonly-input' : null" :clearable="!readonly" @keydown="handleKeydown"-->
  <!--            :max="max" :min="min" :digits="digits" :active-change="false"  show-word-limit style="width: 100%;">-->
  <!--    </InputNumber>-->

</template>

<script>
import XEUtils from "xe-utils";

export default {
  name: 'InputNumberPercentPop',
  inject: {
    prop: {
      type: String,
      default: null
    }
  },
  props: {
    //input值
    value: {
      type: [String, Number],
      default: null
    },
    //formItem别名
    prop: {
      type: String,
      default: ''
    },
    //名称
    name: {
      type: String,
      default: null
    },
    //单位
    unit: {
      type: String,
      default: null
    },
    //最大长度
    maxlength: {
      type: String,
      default: '100'
    },
    //只读
    readonly: {
      type: Boolean,
      default: false
    },
    // 最大值
    max: {
      type: Number,
      default: null
    },
    //最小值
    min: {
      type: Number,
      default: null
    },
    //小数位数
    digits: {
      type: Number,
      default: 0
    },
    //是否显示千分位
    formatThousandth: {
      type: Boolean,
      default: true
    },
    //是否包括负数
    negative:{
      type: Boolean,
      default: false
    },
    disabled:{
      type: Boolean,
      default: false
    },
    textRight:{
      type:Boolean,
      default: true
    }
  },
  data() {
    const vm = window.vm;
    return {
      vm: vm,
      flag1: true,
      value2: null,          //记录显示值
      valueNumber: null,    //记录数值
      valueStr: '',         //用于控制输入
      placeholder: null,
      label: '',
      popVisibleData: true,
      inputing: false,
      clearFlag:false,
    }
  },
  watch: {
    value2(n, o) {
      // let newData = n;
      //如果有中文输入的非数字需要清空
      // if(Number.isNaN( Number(newData))){
      //   newData = null;
      // }
      // if(newData == null){
      //   this.valueStr = '';
      // }
      // console.log('bdds',n)
      // this.$emit('input', n)
    },
    value(n, o) {
      if((!n || n == 0) && this.prop  && this.prop === 'displayNo' && !this.clearFlag){
        n = 1;
        let e = {target:{value:1}}
        this.handleChange(e);
      }
      this.value2 = n?n:0;
      //只有直接进入才会处理
      if(!this.inputing){
        if (this.formatThousandth == undefined || this.formatThousandth) {
          let digits = this.digits;
          this.value2 = XEUtils.toFixed(XEUtils.round(this.value2, digits), digits);
          if (!isNaN(Number(n))) {
            this.valueNumber = Number(n);
          }
        }else{
          if (!isNaN(Number(n))) {
            this.valueNumber = Number(n);
          }
        }
      }else{
        this.inputing = false;
      }
      if(this.clearFlag){
        this.clearFlag = false;
      }
    },
    readonly(n, o) {
      // 给提示信息赋值
      this.setReadOnly(n)
    }
  },
  methods: {
    /**
     * @desc   : 复制单元格
     * @author : 周兴
     * @date   : 2022/6/9 9:31
     */
    copyValue() {
      if (this.value2) {
        this.$message.success( vm.$t('copySuccess') + '：' + this.value2);
        //创建一个input框
        const input = document.createElement("input");

        input.setAttribute("style","z-index:-1000;position: absolute;bottom:0;")
        //将指定的DOM节点添加到body的末尾
        document.body.appendChild(input);
        //设置input框的value值为直播地址
        input.setAttribute("value", this.value2);
        //选取文本域中的内容
        input.select();
        //copy的意思是拷贝当前选中内容到剪贴板
        //document.execCommand（）方法操纵可编辑内容区域的元素
        //返回值为一个Boolean，如果是 false 则表示操作不被支持或未被启用
        if (document.execCommand("copy")) {
          document.execCommand("copy");
        }
      }
    },
    /**
     * @desc   : 处理值的显示
     * @author : 周兴
     * @date   : 2022/4/13 19:49
     */
    handleInput(e) {
      // //控制传出的值显示
      // if (Number.isNaN(Number(e.target.value))) {
      //   this.valueNumber = null;
      // } else {
      //   this.valueNumber = Number(e.target.value);
      // }
      this.$emit('input', this.valueNumber);
    },
    /**
     * @desc   : 焦点进入后进行处理
     * @author : 周兴
     * @date   : 2022/4/13 19:50
     */
    handleFocus(e) {
      // if(this.readonly){
      //   return;
      // }
      if(this.valueNumber === 0){
        this.value2 = null;
      }else{
        this.value2 = this.valueNumber;
        this.valueStr = this.valueNumber ? this.valueNumber.toString() : '';
      }
      e.target.selectionStart = 0;
      e.target.selectionEnd = this.valueStr.length;
      this.$emit('on-focus')
    },
    /**
     * @desc   : 清空
     * @author : 周兴
     * @date   : 2022/4/13 14:51
     */
    handleClear(e) {
      this.value2 = null;
      this.valueStr = '';
      this.valueNumber = null;
      this.$refs.inputNumber.$refs.input.focus();
      this.clearFlag = true;
      this.$emit('input',0)
    },
    handleEnter(e) {
      this.$emit('on-enter');
    },
    handleClick(e) {
      this.$emit('on-click');
    },
    /**
     * @desc   : 改变事件
     * @author : 周兴
     * @date   : 2022/4/12 15:08
     */
    handleChange(e) {
      //如果是非数字 那么就要清空
      if (!e.target.value || Number.isNaN(Number(e.target.value))) {
        this.value2 = null;
        this.valueNumber = null;
        e.target.value = null;
      } else {
        this.value2 = e.target.value;
        this.valueNumber = Number(e.target.value);
      }
      if(this.value2 == null ){
        this.clearFlag = true;
      }
      // console.log('change',this.valueNumber,this.value2)
      this.inputing = true;
      this.$emit('input', this.valueNumber );
      this.$emit('on-change', this.valueNumber );
    },
    /**
     * @desc   : 光标离开事件
     * @author : 周兴
     * @date   : 2022/4/11 15:09
     */
    handleBlur(e) {
      //如果是非数字 那么就要清空
      if (Number.isNaN(Number(e.target.value))) {
        this.value2 = null;
        this.valueNumber = null;
        e.target.value = null;
      }
      //如果需要显示千分位
      if (this.formatThousandth == undefined || this.formatThousandth) {
        let digits = this.digits;
        this.value2 = XEUtils.commafy(Number(this.value2), {digits});
        //重新按照小数点进行控制，避免输入不合法的数据
        if(this.valueNumber){
          this.valueNumber = Number(this.valueNumber.toFixed(digits))
        }
      }
      this.$emit('on-blur', this.valueStr);
    },
    /**
     * @desc   : 键盘事件
     * @author : 周兴
     * @date   : 2022/4/12 15:09
     */
    handleKeyup(e) {
      this.$emit('on-keyup');
      //复制时调用改变事件
      if (e.key === 'v' && e.ctrlKey) {
        this.changeValueByCtrlV();
        return;
      }
      if (this.value2 === null) {
        this.valueStr = '';
      }
      // 如果没有小数点
      if (e.key != ".") {
        this.valueStr = e.target.value;
      } else {
        //值中已经有小数点了
        if (e.target.value.indexOf('.') >= 0) {
          this.valueStr = e.target.value;
        } else {
          this.valueStr = e.target.value + e.key;
        }
        this.value2 = this.valueStr;
      }
      if(this.value2 == 0 && e.key === '-'){
        this.value2 = null;
      }
      if (Number.isNaN(Number(this.value2))) {
        this.value2 = null;
        this.valueStr = '';
      } else {
        //判断是否超过最大值，如果超过最大值，就取最大值
        this.setMaxValue();
      }
    },
    /**
     * @desc   : 值改变
     * @author : 周兴
     * @date   : 2022/4/10 14:21
     */
    changeValueByCtrlV() {
      this.valueStr = this.value2 === null ? '' : this.value2.toString();
      if (this.valueStr) {
        if (Number.isNaN(Number(this.valueStr))) {
          this.valueStr = ''
          this.value2 = null;
        } else {
          //正则表达式去控制输入
          if (!this.$libaray.getRegex(this.digits).test(this.valueStr)) {
            this.valueStr = XEUtils.toFixed(XEUtils.round(this.valueStr, this.digits), this.digits);
            this.value2 = parseFloat(this.valueStr);
          }
          //判断是否超过最大值，如果超过最大值，就取最大值
          this.setMaxValue();
        }
      }
    },
    /**
     * @desc   : 设置最大值
     * @author : 周兴
     * @date   : 2022/5/20 16:46
     */
    setMaxValue() {
      //判断是否超过最大值，如果超过最大值，就取最大值
      let max = this.max ? this.max : this.$config.maxNumber;
      if (parseFloat(this.valueStr) >= max) {
        //获取最大值
        let maxValue = this.$libaray.getMaxValue(max, this.digits);
        this.value2 = maxValue;
        this.valueStr = maxValue.toString();
        this.valueNumber = maxValue;
        this.$emit('input', this.valueNumber);
      }
    },
    /**
     * @desc   : 键盘事件
     * @author : 周兴
     * @date   : 2022/4/12 10:26
     */
    handleKeydown(e) {
      this.$emit('on-keydown',e);
      //backspace,delete,enter,tab，左右不控制
      if (e.keyCode === 8 || e.keyCode === 9 || e.keyCode === 46 || e.keyCode === 37
        || e.keyCode === 39 || e.keyCode === 13) {
        return;
      }
      //ctrl+v,ctrl+c不控制
      if ((e.key === 'v' || e.key === 'c') && e.ctrlKey) {
        return;
      }
      //不允许其他非数字按键输入
      if ((e.keyCode < 48 || e.keyCode > 57)
        && (e.keyCode < 96 || e.keyCode > 105)
        && e.keyCode != 110 && e.keyCode != 190 && e.keyCode != 189) {
        e.preventDefault();
      }
      //查看是否有选中数据，再输入的情况(除小数点外)
      let selectedLength = e.target.selectionEnd - e.target.selectionStart;
      if (selectedLength > 0) {
        return;
      }
      // 如果内容已经包括负号，输入的负号就不允许
      if(this.valueStr && this.valueStr.indexOf('-') >= 0 && e.key === '-'){
        e.preventDefault();
      }
      let num = this.valueStr + "" + e.key;
      //说明是插入到字符串中的
      if (e.target.selectionEnd < e.target.value.length) {
        num = this.$libaray.insertStr(e.target.value, e.target.selectionEnd, e.key)
      }
      //判断是否包括负数
      // console.log('bb1',this.valueStr, num, this.$libaray.getRegex(this.digits,this.negative),!this.$libaray.getRegex(this.digits,this.negative).test(num))
      //正则表达式去控制输入
      if (!this.$libaray.getRegex(this.digits,this.negative).test(num)) {
        e.preventDefault();
      } else {
        //如果有最大值，需要判断不要超过最大值
        let max = this.max ? this.max : this.$config.maxNumber;
        if (num >= max) {
          e.preventDefault();
        }
      }
    },
    /**
     * @desc   : 控件只读时的处理
     * @author : 周兴
     * @date   : 2022/3/4 11:12
     */
    setReadOnly(value) {
      // 给提示信息赋值
      if (value) {
        this.placeholder = null
        // 给输入框赋值灰色背景
      } else {
        this.placeholder = vm.$t('inputWords', {'search-name': this.label})
      }
    }
  },
  created() {
    this.value2 = this.value
    //如果需要显示千分位
    if (this.formatThousandth == undefined || this.formatThousandth) {
      let digits = this.digits;
      this.value2 = XEUtils.toFixed(XEUtils.round(this.value2, digits), digits);
    }
    if (!isNaN(Number(this.value))) {
      this.valueNumber = Number(this.value);
    }
    //获取名称
    let name = null;
    if (this.name) {
      // 给label赋值
      name = this.name
    } else {
      name = this.prop
    }
    // 获取国际化名称
    this.label = vm.$t(name)
    // 给提示信息赋值
    this.setReadOnly(this.readonly)
    // 给顺序赋默认值
    if(this.prop  && this.prop === 'displayNo'){
      this.value2 = 1;
      this.valueNumber = 1;
    }
  }
}
</script>
<style scoped>
/deep/ .ivu-input-group-prepend {
  background-color: #fff;
  border: none;
}

/*文字居右*/
/deep/ .text-right>.ivu-input {
  text-align: right;
  padding-right: 20px;
}


/*只读颜色*/
.readonly-input > /deep/ .ivu-input {
  background-color: #f3f3f3;
}


.ivu-poptip {
  width: 100%;
}

/deep/ .ivu-poptip-rel {
  width: 100%;
}

.pop-content {
  width: 255px;
  min-width: 200px;
  /*background: #e9edf1;*/
  padding: 10px;
  border: 1px #a5acb5;
}

.pop-item-content {
  padding: 5px 5px 5px 5px;

}

</style>

