<template>
  <div>
    <ul>
      <li
        v-for="(rate, rateIndex) in rateItem"
        :key="rateIndex"
        class="rate_item"
        :class="{ active_item: rate.active }"
        @click="getItem(rate)"
      >
        {{ rate.label }}
      </li>
    </ul>
  </div>
</template>

<script setup>
import { ref, watch } from 'vue';

const rateItem = ref([
  {
    label: 1,
    active: false
  },
  {
    label: 2,
    active: false
  },
  {
    label: 3,
    active: false
  },
  {
    label: 4,
    active: false
  },
  {
    label: 5,
    active: false
  }
]);

const props = defineProps({
  config: {
    type: Object,
    required: true
  }
});

const model = defineModel();

const renderScore = (min, max, interval) => {
  const result = [];
  for (let i = min; i <= max; i += interval) {
    result.push({
      label: i,
      active: false
    });
    // 如果达到 10 条数据，停止生成
    if (result.length === 11) {
      break;
    }
  }
  rateItem.value = result;
};
// 重置颜色
const getItem = (value) => {
  model.value = value.label;
  rateItem.value.forEach((item, index) => {
    rateItem.value[index].active = item.label <= value.label;
  });
};

watch(model, () => {
  getItem({ label: model.value, active: false });
});

// 监听 min、max 和 score_interval 的变化
watch(
  () => [props.config.min, props.config.max, props.config.score_interval],
  (newValues) => {
    const [newMin, newMax, newScoreInterval] = newValues;
    renderScore(newMin, newMax, newScoreInterval);
  },
  { immediate: true }
);
</script>

<style scoped lang="scss">
ul {
  display: flex;
  margin-bottom: 10px;
}

.rate_item {
  margin: 0 3px;
  margin-top: 5px;
  padding: 0 6px;
  border: 1px solid #ddd;
  border-radius: 4px;
  color: #666;
}

.active_item {
  background-color: #70b936;
  color: #fff;
}
</style>
