<!--
descript: number组件
author: zhanghelong
param: props
methods:
seledcheck: 用于选择默认值 传入一个索引数即可
-->
<template>
  <div>
    <x-number @input="onChange" :max="max" :min="min" :step="step" :value="innerValue" :name="name" :width="width" class="za-number" :class="{'weui-cell_warn': !isValid}" :readOnly="formModel.rules.readOnly">
    </x-number>
    <div v-if="totalSum !== 0">
      <span>小计: </span>
      <span class="money"><i class="m-label">¥</i>{{ totalSum }}</span>
    </div>
  </div>

</template>
<script>
import { XNumber } from '../../vux'
import formMixin from './mixin/number-mixin'

export default {
  name: 'za-number',
  components: {
    XNumber
  },
  mixins: [formMixin],
  data () {
    return {
      width: '44px'
    }
  },
  watch: {
    'formModel.rules': {
      deep: true,
      handler(v) {
         this.max = this.__num(v.max) || undefined
         this.min = this.__num(v.min) || 0
         this.step = this.__num(v.step) || 1
         this.totalSum = this.__num(v.total) || 0
      }
    }
  },
  methods: {
    onChange(val) {
      this.$nextTick(() => {
        if(this.oldNum !== val) {
          this.oldNum = this.innerValue = val
          // 触发event事件
          this.onEvent('onChange', {
            name: this.name,
            event: null,
            type: 'change',
            triggerType: 'onChange',
            value: this.innerValue
          })
        }
      })
    }
  }
}
</script>

<style lang='less'>
.za-number {
  display: inline-block;
  vertical-align: middle;
  .vux-number-selector-plus{
    margin-right: 0;
  }
}

.money {
  color: #EC602A;
  font-weight: 400;
  font-size: 20px;
}
.m-label {
  font-size: 14px;
  margin: 0 3px;
}
</style>
