<template>
  <div class="operation-sign">
    <div class="sum">
      <div v-for="item in list" :key="item.name">
        <p>{{item.name}}</p>
        <p><m-count class="count" :value="item.value" :decimal="item.dec || 0" /><span class="unit">{{item.unit}}</span></p>
      </div>
    </div>
    <div class="info">
      <div v-for="item in info" :key="item.name">
        <img :src="require(`@/assets/images/${item.img}`)"/>
        <div>
          <p>{{item.name}}</p>
          <p><m-count class="count" :value="item.value" :decimal="0" /> <span class="unit">{{item.unit}}</span></p>
        </div>
      </div>
    </div>
    <Divider>小区占比</Divider>
    <div class="rate">
      <div class="item-wrapper">
        <div v-for="item in rate" :key="item.name">
          <p>{{item.name}}</p>
          <p><m-count class="count" :style="`color:${item.color}`" :value="item.value" :decimal="0" /> <span class="unit">个</span></p>
        </div>
      </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}`">{{item.percent}}</p>
        </div>
      </div>
    </div>
    <Divider>市场份额</Divider>
    <div class="btns">
      <div class="select">
        <div class="btn" v-for="btn in ['全部物业', '仅区内物业', '仅区外物业']" :key="btn">
          {{btn}}
        </div>
      </div>
      <div class="select">按管理面积</div>
    </div>
    <div class="chart-wrapper">
      <div class="chart"><m-chart :config="config" :data="chartData" /></div>
      <div class="tips">
        <div v-for="(item, i) in chartData" :key="item.name">
          <span class="dot" :style="`border-color:${config.colors[i]}`"/>
          <p>{{item.name}}</p>
          <p>{{item.value}}%</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'OperationSign',
  data() {
    return {
      list: [
        {name: '物业小区', value: 909, unit: '个'},
        {name: '楼栋总数', value: 27644, unit: '个'},
        {name: '物业管理面积', value: 41935047, unit: '㎡'},
      ],
      info: [
        {name: '业委会', value: 725, unit: '个', img: 'operation1.png'},
        {name: '物业企业', value: 222, unit: '个', img: 'operation2.png'},
        {name: '小区经理', value: 505, unit: '个', img: 'operation3.png'},
      ],
      rate: [
        {name: '商品房', value: 946, percent: '41%', color: '#00C6FE'},
        {name: '直管公房及混合', value: 20, percent: '19%', color: '#FF9500'},
        {name: '保障房及其他', value: 361, percent: '40%', color: '#44D7B6'},
      ],
      config: {
        colors: ['#E44949', '#FDA62D', '#FFCE34', '#71C012', '#6BE1B2', '#DC732D', '#5BD5FF', '#006ED4', '#2E43C9', '#826AFA', '#CCCCCC'],
        // tooltip: {
        //   formatter: '{b}：{c}个 ({d}%)',
        //   confine: true,
        // },
        legend: {hide: true},
        shape: [
          {type: 'pie', radius: [40 * Number((screen.height / 800).toFixed(1)), 55 * Number((screen.height / 800).toFixed(1))], center: ['40%', '50%']}
        ]
      },
      chartData: [
        {name: '上海延吉物业', value: 6},
        {name: '上海四平物业', value: 3},
        {name: '上海殷行物业', value: 3},
        {name: '上海阳置物业', value: 3},
        {name: '上海凯晨物业', value: 2},
        {name: '上海兴桥盛物业', value: 2},
        {name: '上海五角场物业', value: 2},
        {name: '上海文化银湾物业', value: 2},
        {name: '上海海鸿福船物业', value: 2},
        {name: '上海平凉物业', value: 1},
        {name: '其他', value: 74},
      ],
    }
  },
}
</script>

<style lang="stylus" scoped>
.operation-sign
  .unit
    font-size .08rem
    color #aaa
  .count
    font-size .12rem
  .sum
    display flex
    justify-content space-between
    >div
      width 32.5%
      min-height .5rem
      background $cardBg
      $flex-center()
      flex-direction column
      p
        font-size .09rem
        color #fff
        .count
          color $color-yellow
  .info
    display flex
    justify-content space-between
    margin .05rem 0
    >div
      display flex
      align-items center
      flex 1
      img
        width .25rem
        height @width
        margin-right .05rem
      p
        color $fontColor
      .count
        color $color-blue
  .rate
    .item-wrapper
      display flex
      font-size .08rem
      color #ccc
      >div
        flex 1
        display flex
        align-items center
        justify-content space-between
        background linear-gradient(to right, rgba(20,92,143,.5), transparent)
        border-left .03rem solid #315E8B
        padding 0 .04rem
        line-height .35rem
  .bar
    width 100%
    height .08rem
    display flex
    margin-top .3rem
    >div
      >p
        text-indent .05rem
        font-size .12rem
        font-weight bold
        transform translateY(-100%)
  .btns
    display flex
    justify-content space-between
    align-items center
    .select
      background rgba(25,154,204,.2)
      border .01rem solid #3391FF
      border-radius .04rem
      color #839DAC
      width 25%
      text-align center
      line-height .25rem
      cursor pointer
      &:first-child
        width 70%
        display flex
        padding 0 .08rem
        >div
          flex 1
          box-sizing border-box
          &:first-child
            background linear-gradient(to bottom, rgba(250,219,113,.5), transparent)
            border-top .02rem solid $color-yellow
            color $color-yellow
  .chart-wrapper
    width 100%
    height 1.6rem
    display flex
    .chart
      height 100%
      width 40%
    .tips
      flex 1
      display flex
      flex-direction column
      flex-wrap wrap
      padding-left .1rem
      margin-top 5%
      // margin-left -0.3rem
      transform translateX(-0.3rem)
      >div
        height 16%
      .dot
        display inline-block
        width .08rem
        height @width
        border .02rem solid
        border-radius 50%
      p
        margin 0 .03rem
        display inline-block

</style>
