<!--
 * @Description: 
 * @Autor: Heloise
 * @Date: 2022-06-20 15:27:16
 * @LastEditors: Heloise
 * @LastEditTime: 2022-07-05 16:06:25
-->
<template>
  <div class="el-weight-strip">
    <div :class="['el-weight-strip--content', disabled && 'is-disabled']">
      <div v-for="(item, index) in colors" :key="item">
        <div class="el-weight-strip__top">
          <!-- 差图标 -->
          <div class="water" v-if="checkedInx === index">
            <i
              class="iconfont bi-iconfont-mark"
              :style="{ color: colors[index] }"
            ></i>
            <span>{{ index }}</span>
          </div>
        </div>
        <el-tooltip
          effect="dark"
          :disabled="
            disabled ||
            singleDisabledList.includes(index) ||
            checkedInx === index
          "
          :content="index.toString()"
          placement="top"
        >
          <div
            :class="[
              'el-weight-strip__bottom',
              singleDisabledList.includes(index) && 'is-single-disabled',
            ]"
            :style="{
              background: singleDisabledList.includes(index) ? '#EEF0F6' : item,
            }"
            @click="clickBtn(index)"
          ></div>
        </el-tooltip>
      </div>
      <span>{{ checkedInx >= 0 && 10 >= checkedInx ? checkedInx : "" }}</span>
    </div>
    <span class="el-weight-strip--tip">数值越高权重越大</span>
  </div>
</template>

<script>
export default {
  name: 'ElWeightStrip',
  props: {
    value: Number,
    disabled: {
      type: Boolean,
      default: false
    },
    singleDisabledList: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      colors: [
        '#C8D2F9',
        '#B1BFF6',
        '#9AACF4',
        '#8399F1',
        '#6C87EF',
        '#5574EC',
        '#3E61EA',
        '#274EE7',
        '#1840DD',
        '#163AC6',
        '#1333AF'
      ]
    };
  },
  computed: {
    checkedInx: {
      get() {
        if (typeof this.value === 'number' && !isNaN(this.value)) {
          return this.value;
        } else {
          return -1;
        }
      },
      set(value) {
        this.$emit('getWeightVal', value);
      }
    }
  },
  methods: {
    clickBtn(index) {
      if (!this.disabled && !this.singleDisabledList.includes(index)) {
        this.checkedInx = index;
      }
    }
  }
};
</script>
