<template>
  <div id="right-total">
    <div class="right-total-title">{{Type === 'total'?'各个学校事务项':'事务项'}}上报情况</div>
    <div class="right-total-item" v-for= "item in rightData" :key="item.id">
        <p>{{ item.name }} 上报率</p>
        <dv-percent-pond :config="item.config" style="width:300px;height:60px;" />
    </div>
  </div>
</template>

<script>
export default {
  name: 'RankingBoard',
  props: ['LeftData', 'Type'],
  data () {
    return {
      config: {
        data: [ ],
        rowNum: 10
      },
      rightData: []
    }
  },
  created () {
    this.rightData = this.LeftData.map((item) => {
      return {
        id: item.ID,
        name: item.dinnerName,
        value: item.quantityDone,
        config: {
          value: Math.floor((item.quantityDone / item.quantity) * 100),
          borderWidth: 5,
          borderRadius: 10,
          borderGap: 5
        }
      }
    })
    this.rightData.sort((a, b) => b.config.value - a.config.value)
  }
}
</script>

<style lang="less">
#right-total {
  width: 50%;
  box-shadow: 0 0 3px blue;
  display: flex;
  flex-direction: column;
  background-color: rgba(6, 30, 93, 0.5);
  border-top: 2px solid rgba(1, 153, 209, .5);
  box-sizing: border-box;
  padding: 0px 30px;

  .right-total-title {
    font-weight: bold;
    height: 50px;
    display: flex;
    align-items: center;
    font-size: 20px;
  }

  .dv-scroll-ranking-board {
    flex: 1;
  }
  .right-total-item{
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    p{
        font-size: 20px;
        margin-right: 20px;
    }
  }
}
</style>
