<template>
    <div>
        <p class="c-white "><slot name="title"></slot></p>
        <div class="chart-rank" :class="className">
            <div class="p-20">
                <div class="clearfix" v-for="(item,index) in items" :key="index">
                <span class="c-white flex  m-r-33 left rank-icon"  :class="{'rank-icon_other':(index>2&&type!='pro')}" >
                     <svg-icon id="rank" :style="{color:colors[index]}" className="icon-rank"></svg-icon>
                     <span class="rank-icon_item" >{{index+1}}</span>
                </span> 
                <div class="c-white  rank-content flex" >
                    <span class="rank-logo" :style="{'backgroundColor':colors[index]}"><svg-icon className="icon-car" id="car2"></svg-icon></span>
                    <span class="inlnb rank-0 rank-item" :class="{'rank-other':(index>2&&type=='pro')}" :style="{'backgroundColor':colors[index],'width':index<6?(100-index*3)+'%':'82%'}">{{item.name}}</span>
                </div>
                </div>
                <div class="chart-tip">
                    <div class="c-primary text-left">
                        <slot name="subtitle"></slot>
                    </div>
                    <div class="c-white text-left">
                        <slot name="content"></slot>
                    </div>
                 </div>
            </div>
        </div>
    </div>
</template>
<script>
export default {
  name: "rankItem",
  data() {
    return {
      items: []
    };
  },
  props: {
    className: String,
    colors: Array,
    type: {
      default: "nor",
      type: String
    },
    datas: {
      type: Object,
      default: function() {
        return {};
      }
    }
  },
  mounted() {
    this.items = [];
    this.$nextTick(res => {
      for (var key in this.datas) {
        this.items.push({ name: key, value: this.datas[key] });
      }
      this.items = this.items.sort(function(a, b) {
        return b.value - a.value;
      });
    });
  }
};
</script>

<style lang="scss" scoped>
.m-r-33 {
  margin-right: 0.33rem;
}
.rank-icon {
  justify-content: center;
  align-items: center;
  position: relative;
  .icon-rank {
    top: 0;
    left: 0;
    color: #00c7da;
    font-size: 0.275rem;
  }
  .rank-icon_item {
    position: absolute;
    top: 0%;
    left: 50%;
    transform: translate(-50%, 0%);
    font-size: 0.14rem;
    font-weight: bold;
  }
}
.rank-icon_other {
  margin-left: 0.02rem;
  .icon-rank {
    color: #ccc !important;
    left: 0.3rem !important;
    font-size: 0.24rem !important;
  }
  .rank-icon_item {
    font-size: 0.12rem !important;
  }
}
.rank-item {
  padding-left: 0.275rem;
  border-radius: 0.2rem 0.2rem;
}
.rank-content {
  justify-content: flex-start;
  align-items: center;
  height: 0.24rem;
  text-align: left;
  position: relative;
  .rank-logo {
    width: 0.275rem;
    height: 0.275rem;
    left: -0.1rem;
    border-radius: 50%;
    border: 1px solid #fff;
    display: inline-block;
    position: absolute;
    font-size: 0.24rem;
    line-height: 0.275rem;
    text-align: center;
    fill: "#fff";
    // background: url('../assets/images/pro/one_brand.png') center no-repeat;
    // background-size: contain;
  }
}
.rank-other {
  background: linear-gradient(to right, #00c7da, #17ce72) !important;
}
// .rank-icon_1 {
//     background: url('../assets/images/pro/one_icon.png') center no-repeat;
//     background-size: contain;
// }
// .rank-icon_2 {
//     background: url('../assets/images/pro/two_icon.png') center no-repeat;
//     background-size: contain;
// }
// .rank-icon_3 {
//     background: url('../assets/images/pro/three_icon.png') center no-repeat;
//     background-size: contain;
// }
// .rank-icon_other {
//     background: url('../assets/images/pro/four_icon.png') center no-repeat;
//     background-size: contain;
// }
// .icon-car{
//     fill:#fff !important;
// }
// .rank-0{
//     background: #f39c12
// }
// .rank-1{
//     background: #f37087;
// }
// .rank-2{
//     background: #d4cc88;
// }
</style>


