<template>
  <div class="Ranking3" :class="'Ranking3-' + theme">
    <div class="Ranking-item" v-for="(item, index) in list" :key="index" :class="'Ranking-item' + (index + 1)">
      <div class="Ranking-item__top">
        <div class="left">
          <i>No.{{ index + 1 > 9 ? '' : '0' }}{{ index + 1 }}</i>
          <h2>{{ item.name }}</h2>
        </div>
        <span>{{ item.value }}</span>
      </div>
      <div class="Ranking-item__rate--wrapper">
        <div class="Ranking-item__rate" :style="{width: item.rate + '%'}">
          <div class="bar"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'Ranking3',

    props: {
      data: {
        type: Array,
        default: () => []
      },

      theme: {
        type: String,
        default: '0'
      }
    },

    watch: {
      data: {
        handler (v) {
          this.init(v)
        },
        deep: true,
        immediate: true
      }
    },

    data () {
      return {
        list: []
      }
    },

    methods: {
      init (v) {
        if (!v.length) {
          this.list = []
          return false
        }

        const total = this.sum(v.map(v => v.value))
        this.list = v.map(e => {
          return {
            ...e,
            rate: ((Number(e.value) / total) * 100).toFixed(2)
          }
        })
      },

      sum (arr) {
        return arr.reduce((x, y) => x + y)
      }
    }
  }
</script>

<style lang="scss" scoped>
  .Ranking3 {
    height: 100%;
    overflow-y: auto;

    .Ranking-item {
      margin-bottom: 16px;

      .Ranking-item__top {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 8px;

        .left {
          display: flex;
          align-items: center;
          height: 24px;

          i {
            width: 40px;
            height: 24px;
            line-height: 24px;
            margin-right: 8px;
            text-align: center;
            color: #fff;
            font-style: normal;
            font-size: 14px;
          }

          h2 {
            color: rgba(255, 255, 255, 1);
            font-size: 14px;
            font-weight: 500;
          }
        }

        span {
          color: #fff;
          font-weight: 500;
          font-size: 14px;
        }
      }

      .Ranking-item__rate--wrapper {
        height: 10px;
        background: rgb(26, 26, 26);
      }

      .Ranking-item__rate {
        position: relative;

        .bar {
          position: relative;
          height: 10px;
          background: linear-gradient(270deg, rgb(54, 234, 175) 0%, rgb(75, 179, 210) 100%);
        }
      }
    }

    &.Ranking3-1 {
      .Ranking-item {
        .Ranking-item__rate--wrapper {
          background: rgba(255, 217, 112, 0.16);
        }

        .Ranking-item__rate {
          position: relative;

          .bar {
            background: linear-gradient(90deg, rgb(249, 210, 103) 0%, rgb(241, 150, 70) 100%);
          }
        }
      }
    }
  }
</style>
