<template>
  <div class="street-basic">
    <div>
      <p class="title">
        <img src="@/assets/images/icon7.png" />
        实有人口
        <m-count class="count" :value="curData.total" :decimal="0" />
        <span class="unit">人</span>
      </p>
      <div class="chart" v-if="showChart">
        <m-chart :config="config" :data="curData.pie" :options="options" />
      </div>
      <div class="chart" v-if="showChart">
        <m-chart :config="config2" :data="curData.bar" />
      </div>
    </div>
    <div>
      <p class="title">
        <img src="@/assets/images/icon8.png" />
        实有住户
        <m-count class="count" :value="list[1].value" :decimal="0" />
        <span class="unit">户</span>
      </p>
      <div class="sum">
        <div v-for="item in list" :key="item.name">
          <m-count class="count" :value="item.value" :decimal="item.dec || 0" />
          <p>{{item.name}}（{{item.unit}}）</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'StreetBasic',
  data() {
    return {
      showChart: false,
      config: {
        colors: ['#5bd4ff', '#72c011', '#fece35', '#ff6160', '#826bfa', '#cccccc'],
        tooltip: {
          formatter: '{b}：{c}人 ({d}%)',
          confine: true,
        },
        legend: {
          align: 'left',
          orient: 'vertical',
        },
        shape: [
          {type: 'pie', radius: [20 * Number((screen.height / 800).toFixed(1)), 40 * Number((screen.height / 800).toFixed(1))], center: ['75%', '50%']}
        ]
      },
      config2: {
        colors: ['#826bfa', '#cccccc'],
        legend: {hide: true},
        shape: [
          {key: 'value', type: 'bar', barWidth: '30%', barGap: '20%'},
        ],
        xAxis: {
          key: 'name',
        }
      },
      options: {
        legend: {
          top: '10%',
          // formatter: (name) => {
          //   // const data = this.$store.state.repairRate
          //   // return `${name} ${(data.find(e => e.name === name)).value}件`
          //   const data = this.$store.state.repairRate
          //   let total = 0
          //   let tarValue
          //   for (let i = 0; i < data.length; i++) {
          //     total += data[i].value
          //     if (data[i].name === name) {
          //       tarValue = data[i].value
          //     }
          //   }
          //   const percent = (tarValue / total * 100).toFixed(0)
          //   return `${name} ${percent}%`
          // }
        }
      }
    }
  },
  mounted() {
    setTimeout(() => this.showChart = true, 100)
  },
  computed: {
    list() {
      const {community, house, area} = this.$store.state.resourceSum
      return [
        {name: '小区数量', unit: '个', value: +community || 0},
        {name: '总户数', unit: '户', value: +house || 0},
        // {name: '物业企业', unit: '个', value: +company || 0},
        {name: '管理面积', unit: '㎡', value: +area || 0},
      ]
    },
    curData() {
      const {currentStreetInfo, populationInfo} = this.$store.state
      return populationInfo[currentStreetInfo.id]
    },
  },
}
</script>

<style lang="stylus" scoped>
.street-basic
  width 100%
  height 100%
  display flex
  flex-direction column
  justify-content space-around
  .title
    display flex
    align-items center
    margin-bottom .1rem
    img
      width .15rem
      height @width
      margin-right .1rem
    .count
      font-size .12rem
      margin-left .1rem
    .unit
      font-size .08rem
      color #999
  .sum
    display flex
    justify-content space-between
    >div
      width 30%
      min-height .5rem
      background $cardBg
      $flex-center()
      flex-direction column
      box-shadow inset 0 0 .1rem 0 rgba(71,179,255,.2)
      .count
        font-size 0.12rem
      p
        font-size .09rem
        color $cardFontColor
  .chart
    display inline-block
    width 49%
    height 14vh
    margin-top .1rem
</style>
