import { defineComponent, reactive } from 'vue'
import { Button, Slider } from 'vant'
import classnames from 'classnames'
import styles from './speed.module.less'

import MinusIcon from './icons/minus.png'
import PlusIcon from './icons/plus.png'

const state = reactive({
  speed: 90,
  showHint: false,
})

export default defineComponent({
  name: 'speed',
  props: {
    changed: {
      type: Function,
      default: (speed: number) => {}
    },
    close: {
      type: Function,
      default: () => {}
    },
    mode: {
      type: String
    },
    changeMode: {
      type: Function,
      default: (val: string) => {}
    },
    lib: {
      type: Object
    }
  },
  setup(props) {
    state.speed = props.lib?.speed
    const onDragStart = () => {
      state.showHint = true
    }

    const onDragEnd = () => {
      state.showHint = false
    }

    const changeSpeed = (speed: number) => {
      state.speed = speed
      props.changed(state.speed)
    }

    const minusSpeed = () => {
      state.speed = Math.max(state.speed - 1, 45)
      props.changed(state.speed)
    }

    const plusSpeed = () => {
      state.speed = Math.min(state.speed + 1, 270)
      props.changed(state.speed)
    }

    return () => (
      <div class={styles['speed-change']}>
        <div class={styles.speed}>
          <span>速度</span>
          <div>
            <Button
              color="#01C1B5"
              icon={MinusIcon}
              type="primary"
              size="mini"
              round
              disabled={state.speed == 45}
              onClick={minusSpeed}
            />
            <Slider
              class={styles.slider}
              max={270}
              min={45}
              barHeight="4px"
              buttonSize="18px"
              modelValue={state.speed}
              onUpdate:modelValue={changeSpeed}
              step="1"
              activeColor="#01C1B5"
              onChange={changeSpeed}
              onDragStart={onDragStart}
              onDragEnd={onDragEnd}
              vSlots={{
                button: () => (
                  <div class={styles['custom-button']}>
                    <span>{state.speed}</span>
                    <div class={classnames(styles.title, {[styles.show]: state.showHint})}><span class={styles.strong}>{state.speed}</span></div>
                  </div>
                )
              }}
            />
            <Button
              color="#01C1B5"
              icon={PlusIcon}
              type="primary"
              size="mini"
              round
              disabled={state.speed == 270}
              onClick={plusSpeed}
            />
          </div>
        </div >
        <Button
          onClick={props.close}
          block round
          color="#01C1B5"
          class={styles['speed-button']}
        >
          确认
        </Button >
      </div>
    )
  },
  methods: {
    resetSpeed() {
      state.speed = this.lib?.speed
      this.changed(this.lib?.speed)
    }
  }
})
