<script lang="ts">
import Vue from 'vue'
export default Vue.extend({
  name: 'RenderSlider',
  props: {
    /**
     * @description 当前值
     */
    value: {
      type: Number,
      default: 0
    },
    /**
     * @description 是否显示 tooltip
     */
    showTooltip: {
      type: Boolean,
      default: true
    },
    max: {
      type: Number,
      default: 1
    },
    step: {
      type: Number,
      default: 0.1
    },
    min: {
      type: Number,
      default: 0
    },
    marks: {
      type: Object,
      default: () => {}
    },
    hitTest: {
      type: Boolean,
      default: false
    }
  },
  model: {
    prop: 'value',
    event: 'input'
  }
})
</script>

<template>
  <div class="grid grid-cols-3 grid-rows-2">
    <el-slider
      class="col-span-3 row-span-1"
      v-model="value"
      :show-tooltip="showTooltip"
      @input="$emit('input', $event)"
      :marks="hitTest ? marks : {}"
      :step="step"
      :min="min"
      :max="max"
    />
    <!-- 靠左显示 -->
    <div
      v-if="hitTest"
      class="col-span-2 row-span-1"
      style="justify-self: start"
    >
      语义 {{ (max - value).toFixed(1) }}
    </div>
    <!-- 靠右显示 -->
    <div v-if="hitTest" class="col-span-1 row-span-1" style="justify-self: end">
      关键词 {{ value.toFixed(1) }}
    </div>
  </div>
</template>
