<template>
  <a-row>
    <a-col :span="16">
      <a-slider
        v-model:value="inputValue"
        :min="min"
        :max="max"
        :marks="marks"
        :tooltipVisible="tooltipVisible"
        @change="changeValues"
        :default-value="defaultValue"
      />
    </a-col>
    <a-col :span="4" style="padding-left: 20px; padding-top: 4px">
      <a-input-number v-model:value="inputValue" :min="min" :max="max" />
    </a-col>
  </a-row>
</template>

<script lang="ts">
  import { defineComponent, ref } from 'vue';

  export default defineComponent({
    name: 'NsSlider',
    props: {
      // 最小值
      min: {
        type: Number,
        default: 0,
      },
      // 最大值
      max: {
        type: Number,
        require: true,
      },
      // 默认值
      defaultValue: {
        type: Number,
        default: () => {
          // return this.min;
        },
      },
      tooltipVisible: {
        type: Boolean,
        default: () => {
          return false;
        },
      },
    },
    setup(props) {
      console.log(props.max);
      const { min, max, marks, defaultValue, tooltipVisible } = props;
      let inputValue = ref(defaultValue);
      // const sliderState = reactive({
      //   value: 1,
      //   defaultValue: 10,
      // });
      // const markerState = reactive({
      //   marks: {
      //     1: '1',
      //     3: '3',
      //     5: '5',
      //     10: '10',
      //     20: {
      //       style: {
      //         color: '#f50',
      //       },
      //       label: '100'
      //     }
      //   },
      // });
      const changeValues = function (value) {
        inputValue.value = value;
        // sliderState.value = value;
      };

      return {
        // sliderState,
        // markerState,
        inputValue,
        tooltipVisible,

        min,
        max,
        marks,
        defaultValue,
        tooltipVisible,
        changeValues,
      };
    },
  });
</script>

<style lang="less" scoped></style>
