<template>
  <van-cell
    class="employee_cell"
    :title="title"
    :label="label"
    :icon="icon"
    :url="url"
    :border="border"
    :required="required"
    @click="show_keyboard"
    :class="{'v-input': show_dept_selector}"
  >
    <template slot="default">
      <span v-if="input_value > 0" style="color:#ff1e1c;">+</span>
      <span v-if="input_value < 0" style="color:#4BD964;">-</span>
      <span v-if="input_value == 0 && type == 1" style="color:#ff1e1c;">+</span>
      <span v-if="input_value == 0 && type == 2" style="color:#408aff;">-</span>
      <span v-if="input_value > 0" style="color:#ff1e1c;">{{input_value}}</span>
      <span v-if="input_value < 0" style="color:#4BD964;">{{input_value * -1}}</span>
      <span v-if="input_value == 0">{{input_value}}</span>
      <span v-show="show_dept_selector" class="v-focus">|</span>
    </template>

    <van-number-keyboard
      ref="selector"
      :id="com_id"
      class="diy-key"
      :maxlength="maxlength"
      :show.sync="show_dept_selector"
      delete-button-text="删除"
      @blur="complete"
      @input="confirm"
      @delete="onDelete"
    >
      <template slot="title-left">
        <a href="javascript:void(0);" @touchend="complete">完成</a>
      </template>
      <template slot="extra-key" v-if="chosePoint">
        <span style="font-size:0.32rem; display: block;" v-if="type==2" @click="type = 1">奖分</span>
        <span style="font-size:0.32rem; display: block;" v-if="type==1" @click="type = 2">扣分</span>
      </template>

      <template slot="extra-key" v-else>
        <span style="font-size:0.32rem; display: block;">奖分</span>
      </template>
    </van-number-keyboard>
  </van-cell>
</template>

<script>
import Vue from 'vue'
import { NumberKeyboard } from 'vant'
Vue.use(NumberKeyboard)
export default {
  name: 'NumberInput',
  model: {
    prop: 'input_value',
    event: 'value'
  },
  props: {
    chosePoint: {
      type: Boolean,
      default: true
    },
    multi: {
      type: Boolean,
      default: true
    },
    input_value: {
      type: Number,
      default: 0
    },
    title: {
      type: String,
      default: ''
    },
    value: {
      type: String,
      default: ''
    },
    label: {
      type: String,
      default: ''
    },
    icon: {
      type: String,
      default: ''
    },
    url: {
      type: String,
      default: ''
    },
    border: {
      type: Boolean,
      default: true
    },
    required: {
      type: Boolean,
      default: false
    },
    max: {
      type: Number,
      default: 0
    },
    min: {
      type: Number,
      default: 0
    },
    maxlength: {
      type: Number,
      default: 10
    }
  },
  watch: {
    type (val) {
      this.confirm('')
    },
    show_dept_selector (val) {
      if (val) {
        this.$nextTick(() => {
          this.height = document.getElementById(this.com_id).offsetHeight
          document.querySelectorAll('body > div').item(0).style.height = 'calc(' + this.body_height + ' - ' + this.height + 'px)'
          document.querySelectorAll('body > div').item(0).style.width = 'calc(100% - 0.01rem)'
          document.querySelectorAll('body > div').item(0).style.marginRight = '-0.01rem'
          setTimeout(() => {
            document.querySelectorAll('body > div').item(0).style.width = '100%'
            document.querySelectorAll('body > div').item(0).style.marginRight = '0'
          }, 100)
        })
      } else {
        document.querySelectorAll('body > div').item(0).style.height = this.body_height
        document.querySelectorAll('body > div').item(0).style.width = 'calc(100% - 0.01rem)'
        document.querySelectorAll('body > div').item(0).style.marginRight = '-0.01rem'
        setTimeout(() => {
          document.querySelectorAll('body > div').item(0).style.width = '100%'
          document.querySelectorAll('body > div').item(0).style.marginRight = '0'
        }, 100)
      }
    }
  },
  data () {
    return {
      set_interval: null,
      show_focus: false,
      type: 1,
      com_id: '',
      show_dept_selector: false,
      selected_data: { cate: [], rule: [] },
      height: 0,
      body_height: 0
    }
  },
  methods: {
    show_keyboard () {
      if (this.min != 0 && this.min == this.max) {
        return
      }
      this.show_dept_selector = true
    },
    set_focus () {
      if (this.show_focus) {
        this.show_focus = false
      } else {
        this.show_focus = true
      }
    },
    clear () {
      this.$emit('value', 0)
    },
    randomString (len) {
      len = len || 32
      var $chars = 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz'
      /** **默认去掉了容易混淆的字符oOLl,9gq,Vv,Uu,I1****/
      var maxPos = $chars.length
      var pwd = ''
      for (var i = 0; i < len; i++) {
        pwd += $chars.charAt(Math.floor(Math.random() * maxPos))
      }
      return pwd
    },
    confirm (data) {
      let value = Math.abs(this.input_value).toString() + data
      if (value.length > this.maxlength) {
        return
      }
      if (this.type == 2) {
        value = value * 1 * -1
      }
      this.$emit('value', value * 1)
    },
    complete () {
      if (this.input_value === 0) {
        this.$toast('请输入积分')
        this.show_dept_selector = false
        return false
      }
      if (this.max != 0 && this.max < this.input_value * 1) {
        this.$emit('value', this.max * 1)
        this.$toast('超出范围')
        return false
      }
      if (this.min != 0 && this.min > this.input_value * 1) {
        this.$emit('value', this.min * 1)
        this.$toast('超出范围')
        return false
      }
      this.show_dept_selector = false
    },
    onDelete () {
      let basic = Math.abs(this.input_value).toString()
      basic = basic.substr(0, basic.length - 1)
      if (this.type == 2) {
        basic = basic * 1 * -1
      }
      this.$emit('value', basic * 1)
    }
  },
  beforeDestroy () {
    this.show_dept_selector = false
    clearInterval(this.set_interval)
    document.body.removeChild(document.getElementById(this.com_id))
  },
  created () {
    this.com_id = this.randomString(16)
    if (this.min < 0 && this.max < 0) {
      this.type = 2
    }

    this.$nextTick(() => {
      this.body_height = document.querySelectorAll('body > div').item(0).style.height
      let selected_data = { rule: [], cate: [] }
      selected_data.rule = this.selected
      this.selected_data = selected_data
      document.body.appendChild(this.$refs['selector'].$el)
    })
  }
}
</script>

<style scoped lang="less">
/deep/ .van-cell__title {
  width: 1.8rem;
  -webkit-box-flex: 0;
  -webkit-flex: none;
  flex: none;
}
/deep/ .van-cell__value {
  text-align: left;
}
.diy-bar {
  padding: 0.32rem;
}
.v-focus {
  font-size: 0.34rem;
  vertical-align: top;
  color: #238dfa;
  animation: 1s cursor-flicker infinite;
}

@keyframes cursor-flicker {
  from {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

/deep/ .van-number-keyboard__title {
  height: 0.88rem;
  border-top: 1px solid #94959a;
  background-color: #f0f1f3;
  text-align: right;
}
/deep/ .van-number-keyboard__title span {
  height: 0.88rem;
  line-height: 0.88rem;
}
/deep/ .van-number-keyboard__title-left {
  left: unset;
  right: 0;
}
/deep/ .van-number-keyboard__title-left a {
  padding: 0 0.32rem;
  color: #238dfa;
}
</style>
