<template>
  <div class="rate-component">
    <div class="info">
      <p :style="`color:${item.color}`" v-for="item in rate" :key="item.name">
        <span>{{item.name}}</span>
        <span>{{item.value}}/{{item.percent}}/{{item.rate}}</span>
      </p>
    </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}`" /> -->
      </div>
    </div>
    <div class="wrapper">
      <template v-if="list.length > 0">
      <div v-for="item in list" :key="item.cspName">
        <p :title="item.cspName">{{item.cspName}}</p>
        <div><div class="inner" :style="`width:${item.cspRatio};background:linear-gradient(to right, ${colors[0]}, ${colors[1]})`"/></div>
        <p>{{item.countSize || item.cspCount || 0}} / {{item.cspRatio || 0}} / {{item.cspDensity || 0}}</p>
      </div>
      </template>
      <div v-else class="no-data">
        <img src="@/assets/images/building.png" />
        <p>— 暂无数据 —</p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'RateComponent',
  props: {
    colors: {
      type: Array,
      default() {
        return ['#D445EC', '#008FFF']
      }
    },
    list: {
      type: Array,
      default() {
        return []
      },
    },
    info: {
      type: Object,
      default() {
        return {}
      }
    },
  },
  computed: {
    rate() {
      const {
        condoCount = 0,
        condoRatio = 0,
        condoDensity = 0,
        straightAndMixedCount = 0,
        straightAndMixedRatio = 0,
        straightAndMixedDensity = 0,
        otherCount = 0,
        otherRatio = 0,
        otherDensity = 0
      } = this.info
      return [
        {name: '商品房', value: condoCount, percent: condoRatio, rate: condoDensity, color: '#00C6FE'},
        {name: '老旧小区', value: straightAndMixedCount, percent: straightAndMixedRatio, rate: straightAndMixedDensity, color: '#FF9500'},
        {name: '保障房', value: otherCount, percent: otherRatio, rate: otherDensity, color: '#44D7B6'},
      ]
    },
  },
}
</script>

<style lang="stylus" scoped>
.rate-component
  width 100%
  height 100%
  display flex
  flex-direction column
  .info
    margin-top .1rem
    display flex
    justify-content space-between
    p
      >span
        display block
        &:first-child
          color #fff
          font-size .09rem
  .bar
    width 100%
    height .08rem
    display flex
  .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
      height 16.6%
      &.no-data
        $flex-center()
        flex-direction column
        width 100%
        height 100%
        color #999
        img
          width .35rem
          height @width
      p
        font-size .09rem
        line-height 1.5
        &:first-child
          width 1.2rem
          overflow hidden
          white-space nowrap
          text-overflow ellipsis
          color #aaa
          border-right .01rem solid $cardFontColor
          padding-right .05rem
      >div
        flex 1
        .inner
          border-radius .03rem
          height .05rem

</style>
