<template>
  <div class="dof-step-action" :style="style">
    <div @click="onSubClick">
      <slot name="sub">
        <dof-iconfont
          v-if="_isColmo"
          :code="'\u4760'"
          :size="64"
          :color="'rgba(255,255,255,0.80)'"
          @dofIconFontClicked="onSubClick"
        ></dof-iconfont>
        <image v-else :src="icons[_isDiablo ? 'sub_diablo' : 'sub']" :style="btnStyle"></image>
      </slot>
    </div>
    <div class="dof-step-action-container">
      <slot></slot>
    </div>
    <div @click="onAddClick">
      <slot name="add">
        <dof-iconfont
          v-if="_isColmo"
          :code="'\u4705'"
          :size="64"
          :color="'rgba(255,255,255,0.80)'"
          @dofIconFontClicked="onAddClick"
        ></dof-iconfont>
        <image v-else :src="icons[_isDiablo ? 'add_diablo' : 'add']" :style="btnStyle"></image>
      </slot>
    </div>
  </div>
</template>

<script>
import DofIconfont from '../dof-iconfont'
import ColmoMixin from '../../mixins/colmo'
import DiabloMixin from '../../mixins/diablo'
import icons from './img'
export default {
  mixins: [ColmoMixin, DiabloMixin],
  components: { DofIconfont },
  props: {
    height: {
      type: Number,
      default: 40
    },
    color: {
      type: String,
      default: ''
    },
    vertical: {
      type: String,
      default: ''
    },
    max: {
      type: Number,
      default: 100
    },
    min: {
      type: Number,
      default: 0
    },
    step: {
      type: Number,
      default: 1
    },
    value: {
      type: Number,
      required: true
    },
    disabled: {
      type: Boolean,
      default: false
    }
  },
  model: {
    prop: 'value',
    event: 'change'
  },
  data() {
    return {
      icons
    }
  },
  computed: {
    style() {
      const res = { opacity: 1 }
      if (this.vertical) {
        switch (this.vertical) {
          case 'top':
            res.alignItems = 'flex-start'
            break
          case 'middle':
            res.alignItems = 'center'
            break
          case 'bottom':
            res.alignItems = 'flex-end'
        }
      }
      this.disabled && (res.opacity = 0.3)
      return res
    },
    btnStyle() {
      const res = {
        width: `${this.height}px`,
        height: `${this.height}px`,
        borderRadius: `${this.height / 2}px`,
        backgroundColor: this.color || (this._isDiablo ? '#2b2f32' : '#f2f2f2')
      }
      return res
    }
  },
  methods: {
    onSubClick() {
      if (this.disabled) return
      const value = Math.max(this.value - this.step, this.min)
      this.$emit('change', value)
      this.$emit('sub')
    },
    onAddClick() {
      if (this.disabled) return
      const value = Math.min(this.value + this.step, this.max)
      this.$emit('change', value)
      this.$emit('add')
    }
  }
}
</script>

<style scoped>
.dof-step-action {
  flex-direction: row;
}

.dof-step-action-container {
  flex: 1;
  padding-left: 16px;
  padding-right: 16px;
}
</style>
