<template>
  <div class="party-lead">
    <div class="sum">
      <i-circle
        v-for="item in list"
        :key="item.name"
        :percent="item.percent"
        :size="size * 6"
        :stroke-width="size / 2"
        :stroke-color="item.color"
        :trail-width="size / 10"
        :trail-color="item.color"
        >
        <div :style="`color:${item.color};font-size:.1rem`">
          <m-count style="font-size:.12rem" :value="item.value"  />
          <p>{{item.name}}</p>
        </div>
      </i-circle>
      <div class="sum-item">
        <p><m-count class="count" :value="5"  /><span class="unit">个</span></p>
        <p>交叉任职数</p>
      </div>
    </div>
    <div class="chart">
      <m-chart v-if="mockData.length > 0" :config="config" :data="mockData" :options="options" />
      <div v-else class="no-data">
        <img src="@/assets/images/building.png" />
        <p>— 暂无数据 —</p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'PartyLead',
  data() {
    return {
      list: [
        {name: '居委会', value: 10, percent: 25, color: '#5BD5FF'},
        {name: '业委会', value: 10, percent: 25, color: '#FF9D27'},
        {name: '物业企业', value: 20, percent: 50, color: '#23D5C0'},
      ],
      config: {
        colors: [['#3023AE', '#C86DD7'], '#5BD5FF', '#FF9D27', '#23D5C0'],
        legend: {
          align: 'right',
        },
        shape: [
          {key: 'total', name: '党小组数量', type: 'bar', barWidth: '30%', barGap: '20%'},
          {key: 'num1', name: '居委会', type: 'bar', stack: '党小组', barWidth: '10%', barGap: '20%'},
          {key: 'num2', name: '业委会', type: 'bar', stack: '党小组', barWidth: '10%', barGap: '20%'},
          {key: 'num3', name: '物业企业', type: 'bar', stack: '党小组', barWidth: '10%', barGap: '20%'},
        ],
        xAxis: {
          key: 'name',
        },
      },
      options: {
        xAxis: {
          splitLine: {show: false},
          axisLabel: {
            formatter: value => {
              const arr = [...value]
              return (arr.slice(0, 3)).join('') + '\n' + (arr.slice(3)).join('')
            }
          },
        }
      },
      mockData: [
        {name: '定海路街道', total: 13, num1: 3, num2: 3, num3: 7},
        {name: '平凉路街道', total: 20, num1: 5, num2: 5, num3: 10},
        {name: '江浦路街道', total: 13, num1: 3, num2: 3, num3: 7},
        {name: '四平路街道', total: 25, num1: 7, num2: 7, num3: 11},
        {name: '控江路街道', total: 20, num1: 5, num2: 5, num3: 10},
        {name: '长白新村街道', total: 13, num1: 3, num2: 3, num3: 7},
        {name: '延吉新村街道', total: 25, num1: 7, num2: 7, num3: 1},
        {name: '新江湾城街道', total: 13, num1: 3, num2: 3, num3: 7},
        {name: '长海路街道', total: 30, num1: 10, num2: 10, num3: 10},
        {name: '大桥街道', total: 20, num1: 5, num2: 5, num3: 10},
        {name: '五角场街道', total: 13, num1: 3, num2: 3, num3: 7},
      ],
    }
  },
  computed: {
    size() {
      return Math.floor(screen.height * 1.48 / 100)
    },
  }
}
</script>

<style lang="stylus" scoped>
.party-lead
  .no-data
    $flex-center()
    flex-direction column
    width 100%
    height 100%
    color #999
    img
      width .35rem
      height @width
  .sum
    display flex
    justify-content space-around
    align-items center
    >.sum-item
      min-width .9rem
      min-height .5rem
      background $cardBg
      $flex-center()
      flex-direction column
      p
        font-size .09rem
        color #fff
        .count
          color $color-yellow
          font-size .12rem
        .unit
          font-size .08rem
          color #aaa
  .chart
    margin-top .1rem
    width 100%
    height 65%
    background-image url('../../assets/images/chart-bg.png')
    background-size 100% 100%
    background-repeat no-repeat
    padding .1rem 0 .03rem .05rem
</style>
