<script>

export default {
  name: "ThresholdPicker",
  components: {},
  mounted() {
    this.LocalThresholds = this.Thresholds
    this.showThresholdPicker = this.enable
  },
  methods: {
    updateThresholds() {
      this.$emit("update:Thresholds", this.LocalThresholds)
    }
  },
  data() {
    return {
      showThresholdPicker: false,
      LocalThresholds: {
        min: "",
        max: "",
      },
      unit: "%"
    }
  },
  props: {
    title: {
      type: String,
      default: ""
    },
    Thresholds: {
      type: Object,
      default: () => ({
        min: "",
        max: "",
      })
    },
    enable: {
      type: Boolean,
      default: true
    }
  }
}
</script>

<template>
  <div class="d-flex align-items-center flex-wrap">
    <div class="form-check form-switch">
      <input
          type="checkbox"
          class="form-check-input"
          role="switch"
          id="showThresholdPicker"
          v-model="showThresholdPicker"
      />
      <label class="form-check-label me-4" for="showThresholdPicker">{{ title }}</label>
    </div>
    <div v-if="showThresholdPicker">
      <input
          v-for="(threshold, index) in LocalThresholds"
          :key="index"
          :placeholder="index ==='min'? '输入最小阈值' : '输入最大阈值'"
          @input="updateThresholds"
          v-model="LocalThresholds[index]"
          type="text"
          class="picker-input fs-5" />
    </div>
  </div>
</template>

<style scoped>
.picker-input {
  width: 200px;
  margin-left: 9px;
  padding: 10px 10px  10px;
  font-size: 14px;
  border: 1px solid #ccc;
  outline: none;
}

.picker-input:focus {
  border: 2px solid #101010;
  border-radius: 5px;
}

</style>