<template>
  <div class="home-screen">
    <div>
      <div class="title">实有人口</div>
      <div class="info">
        <div v-for="item in population" :key="item.name">
          <p>{{item.name}}</p>
          <m-count class="count" :value="item.value" /> <span class="unit">人</span>
        </div>
      </div>
      <div class="wrapper">
        <div class="chart" v-if="showChart">
          <m-chart :config="config" :data="populationData" />
        </div>
        <div class="tips">
          <div>
            <div v-for="(item, i) in populationData[0]" :key="item.name">
              <p><span class="dot" :style="{background: config.colors[0][i]}"/> {{item.name}}</p>
              <p><m-count :isPang="false" :value="item.percent" />% &nbsp;&nbsp;&nbsp;&nbsp; <m-count :isPang="false" :value="item.value" />人</p>
            </div>
          </div>
          <div>
            <div v-for="(item, i) in populationData[1]" :key="item.name">
              <p><span class="dot" :style="{background: config.colors[1][i]}"/> {{item.name}}</p>
              <p><m-count :isPang="false" :value="item.percent" />% &nbsp;&nbsp;&nbsp;&nbsp; <m-count :isPang="false" :value="item.value" />人</p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div>
      <div class="title">
        <p>实有房屋</p>
        <p><m-count class="count" :value="5012" /> <span class="unit">幢</span></p>
      </div>
      <div class="info">
        <div v-for="item in house" :key="item.name">
          <p>{{item.name}}</p>
          <m-count class="count" :value="item.value" /> <span class="unit">人</span>
        </div>
      </div>
      <div class="wrapper">
        <div class="chart" v-if="showChart">
          <m-chart :config="houseConfig" :data="houseData" />
        </div>
        <div class="tips">
          <p>非居房屋 <m-count class="count" :value="195" /> <span class="unit">幢</span></p>
          <div>
            <div v-for="(item, i) in houseData.slice(0, 3)" :key="item.name">
              <span class="dot" :style="{background: houseConfig.colors[i]}"/>
              {{item.name}} &nbsp;&nbsp;&nbsp;&nbsp;
              <m-count :isPang="false" :value="item.value" />
            </div>
          </div>
          <div>
            <div v-for="(item, i) in houseData.slice(3)" :key="item.name">
              <span class="dot" :style="{background: houseConfig.colors[i + 3]}"/>
              {{item.name}} &nbsp;&nbsp;&nbsp;&nbsp;
              <m-count :isPang="false" :value="item.value" />
            </div>
          </div>
        </div>
      </div>
    </div>
    <div>
      <div class="title">
        <p>实有企业法人</p>
        <p><m-count class="count" :value="46" /> <span class="unit">名</span></p>
      </div>
      <div class="info">
        <div v-for="item in company" :key="item.name">
          <p>{{item.name}}</p>
          <m-count class="count" :value="item.value" /> <span class="unit">家</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'HomeScreen',
  data() {
    return {
      showChart: false,
      population: [
        {name: '实有人口', value: 36281},
        {name: '本市户籍', value: 17354},
        {name: '境内外省', value: 11645},
        {name: '境外人口', value: 7282},
      ],
      house: [
        {name: '居住房屋', value: 4817},
        {name: '商品房', value: 3954},
        {name: '混合与直管', value: 591},
        {name: '保障及其他', value: 272},
      ],
      company: [
        {name: '实有企业', value: 19},
        {name: '亿元以上', value: 3},
        {name: '千万-亿元', value: 6},
        {name: '千万以下', value: 10},
      ],
      config: {
        colors: [
          ['#1992e5', '#f85453'],
          ['#72c011', '#ffce34', '#826bfa'],
        ],
        legend: {hide: true},
        shape: [
          {type: 'pie', radius: [35 * Number((screen.height / 800).toFixed(1)), 45 * Number((screen.height / 800).toFixed(1))], center: ['35%', '50%']},
          {type: 'pie', radius: [0, 25 * Number((screen.height / 800).toFixed(1))], center: ['35%', '50%']},
        ]
      },
      houseConfig: {
        colors: ['#01bffe', '#589d1e', '#ffce34', '#f47b1e', '#ff5152', '#826bfa'],
        legend: {hide: true},
        shape: [
          {type: 'pie', radius: [0, 45 * Number((screen.height / 800).toFixed(1))], center: ['35%', '50%']},
        ]
      },
    }
  },
  mounted() {
    setTimeout(() => this.showChart = true, 100)
  },
  computed: {
    populationData() {
      return [
        [
          {name: '男性', value: 19954, percent: 55},
          {name: '女性', value: 16327, percent: 45},
        ], [
          {name: '0-18岁', value: 7256, percent: 20},
          {name: '18-70岁', value: 18141, percent: 50},
          {name: '60岁以上', value: 10884, percent: 30},
        ]
      ]
    },
    houseData() {
      return [
        {name: '服装', value: 56},
        {name: '饭店', value: 12},
        {name: '旅馆', value: 27},
        {name: '学校', value: 18},
        {name: '医院', value: 6},
        {name: '娱乐', value: 76},
      ]
    },
  },
}
</script>

<style lang="stylus" scoped>
.home-screen
  z-index 99
  width 90%
  height calc(100vh - 0.5rem)
  padding-left .1rem
  >div
    width 100%
    margin-bottom .2rem
  .title
    font-size .13rem
    margin-bottom .1rem
    font-weight bold
    display flex
    align-items center
    .count
      font-size .15rem
      color $color-yellow
      margin-left .2rem
    .unit
      font-size .1rem
      color #999
  .info
    height .5rem
    background-image url(../../assets/images/info-wrapper.png)
    background-size 100% 100%
    display flex
    align-items center
    margin-bottom .1rem
    >div
      flex 1
      text-align center
      padding-left .05rem
      &:nth-of-type(1)
        .count
          color $color-yellow
      &:nth-of-type(2)
        margin-left .1rem
      p
        color $fontColor
      .unit
        $unit()
      .count
        font-size .12rem
  .wrapper
    display flex
    .chart
      width 35%
      height 1rem
    .tips
      display flex
      flex-wrap wrap
      flex 1
      >p
        width 100%
        color $fontColor
        font-size .11rem
        .count
          color $color-yellow
          font-size .13rem
          margin-left .05rem
        .unit
          color #999
      >div
        flex 1
        >div
          margin-bottom .05rem
          >p
            &:last-child
              padding-left 0.16rem
        .dot
          display inline-block
          width .06rem
          height @width
          border-radius 50%
          margin-right .05rem
</style>
