<template>
  <div class="level-chart">
    <div class="level-chart-back">
      <div
        :class="['back-item', { 'back-item-act': level.active }]"
        v-for="level in levels"
        :key="level.name"
        :style="level.areaStyle"
      ></div>
      <div class="level-chart-empit"></div>
    </div>
    <div class="level-chart-split">
      <div
        class="split-item"
        v-for="split in levelSplits"
        :key="split.name"
        :style="split.style"
      ></div>
    </div>
    <div class="level-chart-label">
      <div
        :class="['label-item', { 'label-item-act': level.active }]"
        v-for="level in levels"
        :key="level.name"
        :style="level.labelStyle"
      >
        {{ level.name }}
      </div>
    </div>
    <div class="level-chart-tips">
      <h4>{{ curLevel }}</h4>
      <p>你的位置</p>
    </div>
  </div>
</template>

<script>
export default {
  name: "level-chart",
  props: {
    infos: {
      type: Object,
      default() {
        return {
          levels: [],
          curLevel: ""
        };
      }
    }
  },
  data() {
    return {
      levels: [],
      levelSplits: [],
      curLevel: ""
    };
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      this.curLevel = this.infos.curLevel;
      this.levels = this.infos.levels.map((item, index) => {
        const areaAngle = ((item.range[1] - 100) * 180) / 100;
        const LabelAngle =
          ((-50 + (item.range[0] + item.range[1]) / 2) * 180) / 100;
        return {
          name: item.name,
          range: item.range,
          active: this.infos.curLevel === item.name,
          areaStyle: {
            transform: `rotate(${areaAngle}deg)`,
            zIndex: 100 - item.range[0]
          },
          labelStyle: { transform: `rotate(${LabelAngle}deg)` }
        };
      });
      this.levelSplits = this.infos.levels
        .filter(item => item.range[1] !== 0)
        .map((item, index) => {
          const angle = ((-50 + item.range[0]) * 180) / 100;
          return {
            name: item.name,
            style: { transform: `rotate(${angle}deg)` }
          };
        });
    }
  }
};
</script>
