<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"  /> <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"  /> <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, on: curTab === btn.value}"
          v-for="btn in tabs"
          :key="btn.value"
          @click="curTab = btn.value"
          >
          {{btn.name}}
        </div>
      </div>
      <Select class="select" v-model="curType">
        <Option v-for="option in options" :key="option.value" :value="option.value">{{option.name}}</Option>
      </Select>
    </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>
import {mapState} from 'vuex'
export default {
  name: 'OperationSign',
  data() {
    return {
      options: [
        {name: '按管理面积', value: 'area'},
        {name: '按管理数量', value: 'num'},
      ],
      curType: 'area',
      tabs: [
        {name: '全部物业', value: 'all'},
        {name: '仅区内物业', value: 'in'},
        {name: '仅区外物业', value: 'out'},
      ],
      curTab: 'all',
      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},
      // ],
    }
  },
  computed: {
    ...mapState([
      'resourceCount',
      'communityRate',
      'marketShare',
    ]),
    list(){
      const {community, building, area} = this.resourceCount
      return [
        {name: '物业小区', value: +community || 0, unit: '个'},
        {name: '楼栋总数', value: +building || 0, unit: '个'},
        {name: '物业管理面积', value: +area || 0, unit: '㎡'},
      ]
    },
    info() {
      const {ic, company, csm} = this.resourceCount
      return [
        {name: '业委会', value: +ic || 0, unit: '个', img: 'operation1.png'},
        {name: '物业企业', value: +company || 0, unit: '个', img: 'operation2.png'},
        {name: '小区经理', value: +csm || 0, unit: '个', img: 'operation3.png'},
      ]
    },
    rate() {
      const {condoRatio, condoRows, straightAndMixedRows, straightAndMixedRatio, otherRows, otherRatio} = this.communityRate
      return [
        {name: '商品房', value: +condoRows || 0, percent: condoRatio || '0', color: '#00C6FE'},
        {name: '直管公房及混合', value: +straightAndMixedRows || 0, percent: straightAndMixedRatio || '0', color: '#FF9500'},
        {name: '保障房及其他', value: +otherRows || 0, percent: otherRatio || '0', color: '#44D7B6'},
      ]
    },
    chartData() {
      const result = this.marketShare[`${this.curTab}_${this.curType}`]
      return (result && result.map(item => ({
        name: item.name,
        value: Number(item.ratio.replace('%', '')),
      }))) || []
    },
  },
}
</script>

<style lang="stylus">
  .operation-sign
    .ivu-select-dropdown
    .ivu-select-selection
      border-color #3391FF !important
      border-radius .04rem !important
      >div
        .ivu-select-selected-value
          line-height .25rem !important
</style>

<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 .3rem
        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 .1rem .04rem
  .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-radius .04rem
      color #839DAC
      width 32%
      text-align center
      line-height .25rem
      cursor pointer
      &:first-child
        width 65%
        display flex
        padding 0 .08rem
        border .01rem solid #3391FF
        >div
          flex 1
          box-sizing border-box
          border-top .02rem solid transparent
          &:hover
          &.on
            background linear-gradient(to bottom, rgba(250,219,113,.5), transparent)
            color $color-yellow
          &.on
            border-top .02rem solid $color-yellow
  .chart-wrapper
    width 100%
    height 2rem
    display flex
    .chart
      height 100%
      width 40%
    .tips
      flex 1
      display flex
      flex-direction column
      flex-wrap wrap
      margin-top 3%
      transform translateX(-15%)
      >div
        min-height 16.5%
        display flex
        align-items flex-start
        margin-left .03rem
      .dot
        display inline-block
        width .08rem
        height @width
        border .02rem solid
        border-radius 50%
      p
        margin 0 .02rem
        display inline-block
        font-size .09rem
        line-height 1.2
        &:nth-of-type(1)
          width .81rem

</style>
