<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 model = defineModel('model', { type: Number, required: true });
const rateItem = ref([
  {
    label: 1,
    active: false
  },
  {
    label: 2,
    active: false
  },
  {
    label: 3,
    active: false
  },
  {
    label: 4,
    active: false
  },
  {
    label: 5,
    active: false
  }
]);

const config = defineModel('config', {
  type: Object,
  required: true
});
const index = defineModel('index', {
  type: Number
});
const emit = defineEmits(['change']);
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;
};

// 重置颜色
function getItem(value) {
  // console.log(value.label);
  rateItem.value.forEach((item, index) => {
    rateItem.value[index].active = item.label <= value.label;
  });
  model.value = value.label;
}

watch(
  model,
  () => {
    getItem({ label: model.value, active: false });
    emit('change', index.value, model.value);
  },
  {
    // immediate: true
  }
);

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

<style scoped lang="scss">
ul {
  display: flex;
  align-items: center;
  justify-content: space-between;

  //margin-bottom: 10px;
}

.rate_item {
  width: 20px;
  height: 20px;

  //margin: 0 5px 0 0;
  border: 1px solid #979797;
  border-radius: 5px;

  //padding: 0 6px;
  color: #000;

  //margin-top: 5px;
  font-weight: 600;
  line-height: 20px;
  text-align: center;
}

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