<template>
  <div
    v-if="permission != 'n' && permission_sub != 'n'"
    :class="[
      'inputs',
      formInputsDisplay == 'block'
        ? 'ht-form-inputs__block'
        : 'ht-form-inputs__inline',
      isMobile ? 'mobile-slider__wrap' : '',
    ]"
  >
    <template v-if="isMobile">
      <van-slider
        v-model="inputVal"
        bar-height="4px"
        :max="max"
        :min="min"
        :step="step"
        :inactive-color="inactiveColor"
        :active-color="activeColor"
        :disabled="!inputWriteable"
      >
        <template #button>
          <div class="custom-button">
            <div class="tips">{{ inputVal }}</div>
          </div>
        </template>
      </van-slider>
    </template>

    <template v-else>
      <template v-if="isSubCellReadOnly || !inputWriteable">
        <input
          v-model="value"
          v-validate="inputValidate"
          type="hidden"
          :name="inputName"
          :data-vv-as="name"
        />
        <div
          class="sub-table-cell-readonly"
          :style="{
            background: !inputWriteable && '#fff',
          }"
          @click="handleCellClick"
        >
          <span>
            {{ inputVal }}
          </span>
        </div>
      </template>
      <el-slider
        v-else
        v-model="inputVal"
        :max="max"
        :min="min"
        :step="step"
        :show-input="showInput"
        :disabled="!inputWriteable"
      ></el-slider>
    </template>

    <!-- 校验 -->
    <input
      v-model="value"
      v-validate="inputValidate"
      type="hidden"
      :name="inputName"
      :data-vv-as="name"
    />
  </div>
</template>
<script>
  import permission from '@/mixins/permission.js'
  import inputName from '@/mixins/inputName.js'
  import form from '@/mixins/form.js'
  import mobileMode from '@/mixins/mobileMode.js'
  import tableFieldReadOnly from '@/mixins/tableFieldReadOnly.js'

  export default {
    name: 'HtSlider',
    mixins: [permission, inputName, form, mobileMode, tableFieldReadOnly],
    props: {
      value: [Number, String],
      max: {
        type: Number,
        default: 100,
      },
      min: {
        type: [String, Number],
        default: 0,
      },
      defaultValue: {
        type: Number,
        default: 50,
      },
      step: {
        type: Number,
        default: 1,
      },
      showInput: {
        type: Boolean,
        default: false,
      },
      activeColor: {
        type: String,
        default: '#409EFF',
      },
      inactiveColor: {
        type: String,
        default: '#e5e5e5',
      },
      isPreview: {
        type: Boolean,
        default: false,
      },
    },
    computed: {
      inputVal: {
        get() {
          if (
            this.value !== null &&
            this.value !== undefined &&
            this.value.constructor == String
          ) {
            if (this.value.trim() == '') {
              return 0
            }
            const valueNum = Number(this.value)
            if (isNaN(valueNum)) {
              throw `HtSlider组件的值必须是数字或值为数字的字符串。`
            }
            return valueNum
          }
          return this.value
        },
        set(val) {
          this.$emit('input', val)
        },
      },
    },
    mounted() {
      if (!this.value) {
        this.inputVal = this.defaultValue
      }
    },
  }
</script>
<style lang="scss" scoped>
  .mobile-slider__wrap {
    .tip {
      font-size: 12px;
    }
  }
  .custom-button {
    width: 10px;
    height: 10px;
    border: 3px solid #409eff;
    background-color: #fff;
    color: #fff;
    border-radius: 100px;
    position: relative;
    &::before {
      position: absolute;
      content: '';
      top: -16px;
      left: 50%;
      transform: translateX(-50%);
      width: 0;
      height: 0;
      border: 10px solid;
      border-color: #000 transparent transparent transparent;
    }
    .tips {
      position: absolute;
      min-width: 28px;
      padding: 0 4px;
      height: 18px;
      line-height: 18px;
      border-radius: 5px;
      overflow: hidden;
      background: #000;
      top: -30px;
      left: 50%;
      transform: translateX(-50%);
      text-align: center;
      font-size: 12px;
    }
  }
</style>
