<template>
  <div class="demo-slider-step">
    <label>显示刻度：</label>
    <ui-slider
      ref="demo1"
      v-model="value"
      :use-keyboard="true"
      :width="540"
      :min="30"
      :max="60"
      :interval="10"
      :piecewise="true"
      :piecewise-label="true"
      :formatter="formatterSliderData"
      :dot-size="value === 65 ? 24 : 16"
      :bg-style="setStyle"
      :slider-style="setStyle"
      :process-style="setStyle"
      :piecewise-style="setStyle"
      :piecewise-active-style="setStyle"
      :tooltip-style="labStyle"
      :label-style="labStyle"
      class="test-1-slider">
    </ui-slider>

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

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

<script>
import { Slider, Button } from "amumu-ui"
import { message } from "amumu-ui/src/factory"
export default {
  components: {
    "ui-slider": Slider,
    "ui-button": Button,
  },
  data() {
    return {
      value: 40,
    }
  },
  computed: {
    sliderDom() {
      return this.$refs.demo1
    },
    labStyle() {
      let color = "#E95B5B"
      if (this.value > 35) {
        color = "#FFAB00"
      }
      if (this.value > 45) {
        color = "#36B37E"
      }
      if (this.value > 55) {
        color = "#0884F3"
      }
      return {
        background: color,
        borderColor: color,
      }
    },
    setStyle() {
      let bgColor = "#E95B5B"
      if (this.value > 35) {
        bgColor = "#FFAB00"
      }
      if (this.value > 45) {
        bgColor = "#36B37E"
      }
      if (this.value > 55) {
        bgColor = "#0884F3"
      }
      return {
        background: bgColor,
      }
    },
  },
  methods: {
    getValue() {
      message.info(this.sliderDom.getValue())
    },
    setValue() {
      let value = prompt("要设置的值(例:  123)：")
      if (!value) {
        return
      }

      this.sliderDom.setValue(value)
    },
    formatterSliderData(v) {
      if (v > 55) {
        return "第四纪"
      }
      if (v > 45) {
        return "白垩纪"
      }
      if (v > 35) {
        return "三叠纪"
      }
      if (v >= 30) {
        return "寒武纪"
      }
    },
  },
}
</script>

<style lang="scss">
.demo-slider-step {
  display: flex;
  flex-wrap: wrap;
  .test-1-slider {
    .mm-slider-piecewise-label {
      background: #333;
      color: #fff;
      padding: 2px 8px;
      border-radius: 3px;
      margin-top: 8px;
    }
  }
  .btns {
    margin-top: 30px;
    width: 100%;
    display: flex;
    align-items: center;
    > * {
      margin-right: 8px;
    }
  }
}
</style>
