<!--
 * @Description: 城市治理基础信息
 * @Author: 王晓颖
 * @Date: 2020-09-04 14:34:47
 -->
<template>
  <div class="baseinfo-container">
    <!--<TitleThree title="基础设施建设情况" />-->
    <panel-title-1>社会治理</panel-title-1>
    <div class="row-flex" style="height: calc(100% - 0.26rem)">
      <!--人口数-->
      <div class="col-35">
        <population-total style="height:0.4rem"/>
        <population-pie :data="populationPie" style="height: calc(100% - 0.4rem)"/>
      </div>
      <!--地下管线数量-->
      <div class="col-30">
        <special-bar/>
      </div>
      <!--交通设施数量-->
      <div class="col-30">
        <youth-pie :data="youthPie"/>

      </div>
    </div>
  </div>
</template>

<script>

import PopulationPie from './components/populationPie'
import PopulationTotal from './components/populationTotal'
import SpecialBar from './components/specialBar'
import YouthPie from './components/younthPie'
export default {
  name: 'CityGovern',
  components: {YouthPie, SpecialBar, PopulationTotal, PopulationPie},
  data () {
    return {
      // 人员类别数量
      populationPie: {
        id: 'population-pie',
        // width: 0,
        // height: 0,
        legend: ['常住人口', '流动人口', '户籍', '留守'],
        data: [
          {value: 34, name: '常住人口'},
          {value: 34, name: '流动人口'},
          {value: 34, name: '户籍'},
          {value: 34, name: '留守'}
        ]
      },
      youthPie: {
        id: 'youth-pie',
        // width: 0,
        // height: 0,
        legend: ['常住人口', '流动人口', '户籍', '留守'],
        data: [
          {value: 34, name: '农村留守儿童'},
          {value: 34, name: '服刑人员'},
          {value: 34, name: '流浪乞讨'},
          {value: 34, name: '闲散青少年'},
          {value: 34, name: '有不良行为'},
          {value: 34, name: '其他'}
        ]
      }
    }
  },
  mounted () {
    // this.callEchart(this.populationPie, this.populationPie.id, 1.5)
    // this.callEchart(this.youthPie, this.youthPie.id, 1.5)
  },
  methods: {
    callEchart (data, idBox, offset) {
      const _width = document.getElementById(idBox).clientWidth
      this.$set(data, 'width', _width + 'px')
      this.$set(data, 'height', _width / offset + 'px')
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  .baseinfo-container{
    height: 100%;
  }
</style>