<!--
 * @Description:各类型人口分布总数&饼状图
 * @Author: 王晓颖
 * @Date: 2020-09-04 18:41:53
 -->
<template>
  <div style="height: 100%">
    <div class="module-corner Modular_left" style="height: 100%;">
      <div class="row-flex" style="height: 100%;">
        <div class="col-50" style="height: 100%">
          <dv-active-ring-chart :config="data" style="width:100%;height:100%" />
        </div>
        <div class="col-50 population-flex">
          <div v-for="(item,index) in data.data" :key="'pie'+index" class="legend-div">
            <div class="legend-name">{{item.name}}</div>
            <div class="legend-value">{{item.value}}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import SimplePieChart from '@/components/pieChart/simplePieChart'
import Corner1 from '@/components/corner/Corner1'
export default {
  name: 'populationPie',
  components: {Corner1, SimplePieChart},
  props: {
    data: {
      type: Object,
      default: () => {
        return {
          id: 'population-pie',
          width: '100%',
          height: '100%',
          legend: ['常住人口', '流动人口', '户籍', '留守'],
          data: [
            {value: 341, name: '常住人口'},
            {value: 121, name: '流动人口'},
            {value: 34, name: '户籍'},
            {value: 24, name: '留守'}
          ]
        }
      }
    }
  },
  data () {
    return {
      options: {
      }
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  .population-flex{
    margin: 0.2rem 0.1rem;
    display: flex;
    justify-content: start;
    flex-wrap: wrap;
    .legend-div{
      width:46%;
      margin-right:2%;
      height:0.3rem;
      padding:0.04rem 0.07rem;
      background: url("../../../../../assets/images/moduleBg01.png") no-repeat left top;
      background-size: 100% 100%;
      .legend-name{
        font-size:0.07rem;
        color:white;
        margin-bottom: 0.01rem;
      }
      .legend-value{
        font-size:0.11rem;
        color:#00e5ff;
      }
    }
  }

</style>