<!--
  // 隐藏的颜色值
| themeColor | 主题色 | stirng | —— | #fff |
| innerColor | 背景条颜色 | stirng | —— | #D1D1D1 |
| stopColor | 断点颜色 | stirng | —— | #D1D1D1 |
| barColor | 进度条颜色 | stirng | —— | —— |
| btnColor | 按钮颜色 | stirng | —— | —— |
| btnShadow | 按钮阴影 | stirng | —— | rgba(98,107,119,0.30) |
| textColor | 选中文字颜色 | stirng | —— | #0082FF |
| subtextColor | 未选中文字颜色 | stirng | —— | #626B77 |
-->
<template>
  <div class="slider">
    <slider title="开关大集" v-model="val3" @change="onChange" :disabled="disabled" :show-points="false" bar-color="#0082FF">
      <div slot="left">开</div>
      <div slot="right">关</div>
    </slider>

    <!-- <div class="slider-item">靠边展示，无刻度</div> -->
    <slider type="" v-model="val" @change="onChange" :disabled="disabled" :outerFormat="outerFormat" :min="min" :max="max" :step="step"></slider>
    <!-- <div class="slider-item">居中展示，有刻度</div> -->

    <slider v-model="val3" @change="onChange" :disabled="true" :show-points="false" bar-color="#0082FF">
      <div slot="left">开</div>
      <div slot="right">关</div>
    </slider>

    <slider
      v-model="val4" @change="onChange" :min="min2" :disabled="disabled" :max="max2" :step="step2" :show-stops="showstops2"
      :outer-stops="stops3" align="center" 
    ></slider>

     <!-- :disabled="true" -->
     <!-- :disable-selected="true" --> 
    <slider
      type="onDark" :disabled="disabled"
      v-model="val2" @change="onChange" :min="min2" :max="max2" :step="step2" :show-stops="showstops2"
      :outer-stops="stops2" align="center" 
    ></slider>

    

    
    <div @click="disabled = !disabled">change it</div>
  </div>
</template>

<script lang="ts">
import Vue from 'vue'
import { Slider, Icon } from '../../tunas'

export default Vue.extend({
  components: {
    Slider, Icon,
  },

  data () {
    return {
      disabled: false,
      val: 40,
      min: 0,
      max: 100,
      step: 1,
      showstops: false,
      val2: 40,
      min2: 40,
      max2: 80,
      step2: 10,
      showstops2: true,
      // stops2: ['超低档', '低档', '中档', '高档', '超高档'],
      stops2: ['200g', '400g', '600g', '800g', '1000g'],
      stops3: [45, 50, 55, 60, 65, 70, 75, 80],
      val4: 50,
      val3: 30
    }
  },

  methods: {
    onChange (v) {
      console.log('change', v)
    },
    outerFormat(e) {
      // return e
      return e + '℃'
    },
    formatPoint (v) {
      if (v === 0) {
        return '0K'
      } else if (v === 100) {
        return '100K'
      }
      return v + 'K'
    }
  }
})
</script>

<style lang="stylus">
.slider
  margin 0 -20px
  &-item
    margin-left 20px
</style>

