<template>
  <div class="rate-component">
    <div>
      <div class="bar">
        <div v-for="item in rate" :key="item.name" :style="`background:${item.color};width:${item.percent}%;`">
          <p :style="`color:${item.color}`">
            <span>{{item.name}}</span>
            <span>{{item.value}}/{{item.percent}}%/{{item.rate}}</span>
          </p>
        </div>
      </div>
    </div>
    <div class="wrapper">
      <div v-for="item in list" :key="item.name">
        <p>{{item.name}}</p>
        <div><div class="inner" :style="`width:${item.val2 * 10}%;background:linear-gradient(to right, ${colors[0]}, ${colors[1]})`"/></div>
        <p>{{item.val1}} / {{item.val2}}% / {{item.val3}}</p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'RateComponent',
  props: {
    colors: {
      type: Array,
      default() {
        return ['#D445EC', '#008FFF']
      }
    }
  },
  data() {
    return {
      rate: [
        {name: '商品房', value: 60, percent: 20, rate: 0.1, color: '#00C6FE'},
        {name: '老旧小区', value: 135, percent: 45, rate: 0.5, color: '#FF9500'},
        {name: '保障房', value: 105, percent: 35, rate: 0.3, color: '#44D7B6'},
      ],
      list: [
        {name: '物业企业1', val1: 21, val2: 7, val3: 0.5},
        {name: '物业企业2', val1: 12, val2: 4, val3: 0.4},
        {name: '物业企业3', val1: 12, val2: 4, val3: 0.4},
        {name: '物业企业4', val1: 9, val2: 3, val3: 0.3},
        {name: '物业企业5', val1: 9, val2: 3, val3: 0.3},
        {name: '其他', val1: 210, val2: 7, val3: 0.8},
      ]
    }
  },
}
</script>

<style lang="stylus" scoped>
.rate-component
  width 100%
  height 100%
  display flex
  flex-direction column
  .bar
    width 100%
    height .08rem
    display flex
    margin-top .4rem
    >div
      >p
        transform translateY(-100%)
        >span
          display block
          &:first-child
            color #fff
            font-size .09rem
  .wrapper
    flex 1
    margin-top .05rem
    background-image url('../../assets/images/chart-bg.png')
    background-size 100% 100%
    background-repeat no-repeat
    padding .02rem .06rem
    >div
      display flex
      align-items center
      p
        font-size .09rem
        line-height 1.5
        min-width .6rem
        &:first-child
          color #aaa
          border-right .01rem solid $cardFontColor
          padding-right .05rem
      >div
        flex 1
        .inner
          border-radius .03rem
          height .06rem

</style>
