<template>
  <div class="demo-slider-range">
    <label>这从聚会大约有 {{ value.join('-') }} 人参加：</label>
    <ui-slider
      ref="demo2"
      v-model="value"
      :use-keyboard="true"
      :max="2000"
      :height="300"
      :width="24"
      :dot-size="24"
      :disabled="isDisabled"
      direction="vertical"
      formatter="{value}人"
      class="test-slider"></ui-slider>

    <label>固定两个值之间的距离：</label>
    <ui-slider
      v-model="value"
      :use-keyboard="true"
      :max="2000"
      :width="300"
      :height="24"
      :dot-size="24"
      :fixed="true"
      :disabled="isDisabled"
      :slider-style="fetchSliderStyle"
      tooltip="hover"
      formatter="{value}人"
      class="test-slider"></ui-slider>

    <div class="btns">
      <label>
        Disabled:
        <ui-switch
          v-model="isDisabled"></ui-switch>
      </label>

      <ui-button
        @click="getValue">
        获取当前值
      </ui-button>

      <ui-button
        type="primary"
        @click="setValue">
        设置值
      </ui-button>
    </div>
  </div>
</template>

<script>
import { Slider, Switch, Button } from "amumu-ui"
export default {
  components: {
    "ui-slider": Slider,
    "ui-switch": Switch,
    "ui-button": Button,
  },
  data() {
    return {
      value: [1203, 1432],
      isDisabled: false,
    }
  },
  computed: {
    sliderDom() {
      return this.$refs.demo2
    },
  },
  methods: {
    fetchSliderStyle(index, val) {
      let isBigNumber = false
      if (Array.isArray(val)) {
        isBigNumber = val.some(item => Number(item) > 1000)
      } else {
        isBigNumber = Number(val) > 1000
      }
      return isBigNumber
        ? {
          color: "red",
          background: "red",
        }
        : {
          color: "blue",
          background: "blue",
        }
    },
    getValue() {
      alert(this.sliderDom.getValue())
    },
    setValue() {
      let value = prompt("要设置的值(例:  123, 321)：")
      if (!value) {
        return
      }
      value = value.split(",")
      if (!Array.isArray(value) && value.length !== 2) {
        alert("请输入正确的值")
        return
      }

      this.sliderDom.setValue(value)
    },
  },
}
</script>

<style lang="scss">
.demo-slider-range {
  .test-2-slider {
    width: 100px;
  }
  .test-slider {
    margin: 30px 0;
  }
  .btns {
    margin-top: 30px;
    width: 100%;
    display: flex;
    align-items: center;
    > * {
      margin-right: 8px;
    }
  }
}
</style>
