<!-- CopyRight (C) 2017-2022 Alibaba Group Holding Limited. -->
<!-- Created by Tw93 on 16/10/25. -->
<!--A Stepper-->

<template>
    <div class="lc-stepper">
        <div class="stepper-minus"
            @click="minusClicked"
            aria-label="减数"
            :accessible="true">
        <text class="stepper-icon" :style="{ color: isLess||disabled?'#cccccc':'#666666' }">-</text>
        </div>
        <!-- 205627【lighting-ui】step组件增加disable切换动态的支持 -->
        <div v-if="disabled">
          <input class="stepper-input"
            ref="input"
            type="number"
            key="1"
            v-model="valueString"
            @input="onInput"
            @blur="onBlur"
            :style="disableStyle"
            :disabled="disabled||readOnly" />
        </div>
        <div v-if="!disabled">
          <input class="stepper-input"
            ref="input"
            type="number"
            :key="'dis'+index"
            v-model="valueString"
            @input="onInput"
            @blur="onBlur"
            :style="disableStyle" />
        </div> 
        <div class="stepper-plus"
            @click="plusClicked"
            aria-label="加数"
            :accessible="true">
        <text class="stepper-icon" :style="{ color: isOver||disabled ? '#cccccc': '#666666' }">+</text>
        </div>
    </div>
</template>

<style scoped>
  .lc-stepper {
    flex-direction: row;
  }

  .stepper-plus, .stepper-minus {
    width: 56px;
    height: 56px;
    background-color: #ededed;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
  }

  .stepper-input {
    border-width: 0;
    outline: none;
    text-align: center;
    color: #3d3d3d;
    font-size: 30px;
    line-height: 56px;
    width: 86px;
  }

  .stepper-icon {
    font-size: 36px;
    color: #666666;
    margin-top: -4px;
  }

</style>

<script>
  export default {
    props: {
      min: {
        type: [String, Number],
        default: 1
      },
      max: {
        type: [String, Number],
        default: 100
      },
      step: {
        type: [String, Number],
        default: 1
      },
      disabled: {
        type: Boolean,
        default: false
      },
      defaultValue: {
        type: [String, Number],
        default: 1
      },
      readOnly: {
        type: Boolean,
        default: false
      },
      index:String
    },
    computed: {
      disableStyle () {
        if (this.disabled) {
          return {
            color: '#cccccc'
          }
        }
      },
    },
    data: () => ({
      value: 1,
      isLess: false,
      isOver: false,
      validValue: 1,
      valueString: 1
    }),
    watch: {
        value(val) {
          this.valueString = val;
          this.$emit('inputValue', { value: val });
          //bug#114987：更新按钮状态
          if(!this.disabled) {
            this.isLess = parseInt(val,10) <= parseInt(this.min,10) ? true : false;
            this.isOver = parseInt(val,10) >= parseInt(this.max,10) ? true : false;
          }
        },
        // 205625【lighting-ui】step组件增加对defaultValue字段监听
        defaultValue(val) {
            this.valueString = val;
        }   
    },
    created () {
      //193043【lighting-ui】升级兼容：lc-stepper
      setTimeout(()=>{
        const self = this;
    //   self.value = parseInt(self.defaultValue, 10);
      //初始值应当在有效范围内
      //value:number, valueString:string
        if(parseInt(self.defaultValue,10) <= parseInt(self.min,10)) {
            self.value = parseInt(self.min,10);
            self.isLess = true;
        } else if(parseInt(self.defaultValue,10) >= parseInt(self.max,10)) {
            self.value = parseInt(self.max,10);
            self.isOver = true;
        } else {
            self.value = parseInt(self.defaultValue, 10);
        }
        self.validValue = self.value;

        if (self.disabled) {
            self.isLess = true;
            self.isOver = true;
        }
      }, 0)
    },
    methods: {
      minusClicked () {
        const self = this;
        if (self.disabled) {
          return;
        }
        this.compaire(this.valueString)
        const isMinOver = self.value <= parseInt(self.min,10);
        const nowNum = self.value - parseInt(self.step,10);
        if (isMinOver) {
          self.$emit('LcStepperValueIsMinOver', { value: self.value });
        } else {
          self.value = nowNum;
          self.resetDisabledStyle();
        }
        // 由于此处已经减step
        if (nowNum <= parseInt(self.min,10)) {
          self.value = parseInt(self.min, 10);
          self.isLess = true;
        }
        self.validValue = self.value;
        self.$emit('LcStepperValueChanged', { value: self.value });
      },
      plusClicked () {
        const self = this;
        if (self.disabled) {
          return;
        }
        this.compaire(this.valueString)
        const isMaxOver = self.value >= parseInt(self.max,10);
        const nowNum = self.value + parseInt(self.step, 10);
        if (isMaxOver) {
          self.$emit('LcStepperValueIsMaxOver', { value: self.value });
        } else {
          self.value = nowNum;
          self.resetDisabledStyle();
        }
        // 由于此处已经加step
        if (nowNum >= parseInt(self.max,10)) {
          self.value = parseInt(self.max, 10);
          self.isOver = true;
        }
        self.validValue = self.value;
        self.$emit('LcStepperValueChanged', { value: self.value });
      },
      onInput (e) {
        // this.correctInputValue(e.value);
      },
      onBlur (e) {
        this.correctInputValue(e);
      },
      correctInputValue (e) {
          var v = this.$page.config.env.platform=='Web'?e.value:e.target.attr.value;
        // let v = this.$page.config.env.platform=='Web' ? e.value : e.target.attr.value;
        this.compaire(v)
      },
      // 205625【lighting-ui】step组件增加对defaultValue字段监听
      compaire(v){
        const self = this;
        if (/^[1-9]\d{0,}$/.test(v) && parseInt(v, 10) >= parseInt(self.min, 10) && parseInt(v, 10) <= parseInt(self.max, 10)) {
          //校验是否符合step规则
          if( (parseInt(v,10) - parseInt(self.min,10)) % parseInt(self.step,10) == 0) {
              self.value = parseInt(v, 10);
                self.validValue = self.value;
          } else {
              self.value = self.validValue;
            self.valueString = self.validValue;
          }
          
        } else {
            self.value = self.validValue;
            self.valueString = self.validValue;
        }
        
        self.$emit('LcStepperValueChanged', { value: self.value });
      },

      resetDisabledStyle () {
        this.isLess = false;
        this.isOver = false;
      }
    }
  };
</script>
