<template>
  <div class="resident">
    <div class="resident_num">
      <div class="num_item" v-for="(item,index) in cardArray" :key="index">
        <p class="num_item_name">{{ item }}</p>
        <p class="num_item_data">{{ Number(data[item]).toLocaleString('en-US') }}</p>
      </div>
    </div>

    <!-- 特殊人群 -->
    <div class="specialPeople">
      <h3>特殊人群</h3>
      <div class="specialBox">
        <div id="specialEcharts" v-if="specialFlag"></div>
        <AiEmpty style="padding-top: 10px;" description="暂无数据" v-else></AiEmpty>
      </div>
    </div>
    <!-- 年龄分布 -->
    <div class="ageDistribution">
      <h3>年龄分布</h3>
      <div class="ageBox">
        <div id="ageEcharts" v-if="ageFlag"></div>
        <AiEmpty style="padding-top: 10px;" description="暂无数据" v-else></AiEmpty>
      </div>
    </div>
    <!-- 男女比例 -->
    <div class="ageProportion">
      <h3>男女比例</h3>
      <div class="proportionBox">
        <div id="proportionEcharts" v-if="sexFlag"></div>
        <AiEmpty style="padding-top: 10px;" description="暂无数据" v-else></AiEmpty>
      </div>
    </div>
  </div>
</template>

<script>
import echarts from 'echarts';
export default {
  name: "resident",
  props: ['areaId'],
  data() {
    return {
      data: {},
      specialPeople: {},
      specialFlag: true,
      ageArray: [],
      ageFlag: true,
      sexArray: [],
      sexFlag: true,
      cardArray: ['居民总数','本地居民','流动人口']
    }
  },
  created() {
    this.getData()
  },
  mounted() {
    this.getSpecialEcharts()
    this.getAgeEcherts()
    this.getAgeProportion()
  },
  methods: {
    getData() {
      this.$http.post(`/app/appresident/residentStatisticsByAreaId?areaId=${this.areaId}`).then(res=> {
        if(res?.data) {
          this.data = res.data
          this.specialPeople = res.data.特殊人群
          let specialArr = Object.values(this.specialPeople)
          this.specialFlag = !specialArr.every(e=> e==0)
          this.ageArray = res.data.年龄层次.map(v=> v.v2)
          this.ageFlag = !this.ageArray.every(e=> e==0)
          this.sexArray = res.data.男女比例.map(v=> v.v2)
          this.sexFlag = !this.sexArray.every(e=> e==0)
          this.$nextTick(()=> {
            this.getSpecialEcharts()
            this.getAgeEcherts(this.ageArray)
            this.getAgeProportion()
          })
        }
      })
    },
    // 特殊人群
    getSpecialEcharts() {
      let specialDom = document.getElementById('specialEcharts');
      let myChart = echarts.init(specialDom);
      let option = {
        title: {
          zlevel: 0,
          text: ['{name|特殊人群}'],
          top: 'center',
          left: '48%',
          textAlign: 'center',
          textStyle: {
            rich: {
              name: {
                color: '#999999',
                fontSize: 13,
                lineHeight: 15
              },
            },
          },
        },
        color: ['#4980CB','#F3A963','#6B79BB','#97D1B3'], 
        series: [
          {
            name: '特殊人群',
            type: 'pie',
            radius: ['30%', '60%'],
            avoidLabelOverlap: false,
            hoverAnimation: false,
            emphasis: {
              disabled: false,
              scale: false,
              scaleSize: 0,
            },
            label: {
              alignTo: 'labelLine',
              formatter: '{name|{b}}\n{value|{c}}',
              padding: [0, -70],
              minMargin: 5,
              edgeDistance: 10,
              lineHeight: 15,
              rich: {
                time: {
                  fontSize: 10,
                  color: '#999'
                }
              }
            },
            labelLine: {
              length: 15,
              length2: 70,
              maxSurfaceAngle: 80
            },
            data: [
              { value: this.specialPeople.吸毒人员, name: '吸毒人员' },
              { value: this.specialPeople.残疾人, name: '残疾人' },
              { value: this.specialPeople.刑满释放人员, name: '刑满释放人员' },
              { value: this.specialPeople.社区矫正人群, name: '社区矫正人群' },
              { value: this.specialPeople.精神病人, name: '精神病人' },
            ]
          }
        ]
      };
      option && myChart.setOption(option);
    },
    // 年龄分布
    getAgeEcherts(ageArray) {
      let ageDom = document.getElementById('ageEcharts');
      let myChart = echarts.init(ageDom);
      let option;
      option = {
        xAxis: {
          type: 'category',
          data: ['10以下', '10-18', '18-65', '65-80', '80以上']
        },
        yAxis: {
          type: "value",
          axisTick: {
            show: false,
          },
          axisLine: {
            show: false,
          },
        },
        series: [
          {
            data: ageArray,
            type: 'bar',
            itemStyle: {
              normal: {
                // 每个柱子的颜色
                color: function(params) {
                  var colorList = ['#3975C6','#3975C6', '#3975C6', '#3975C6', '#F3A963',];
                  return colorList[params.dataIndex]
                },
                label: {
                  show: true,  //开启显示
                  position: 'top',    //在上方显示
                  textStyle: {
                    fontSize: 13,
                    color: '#4980CB'
                  }
                },
              },
            },
            barWidth: 22,
            barGap: '20%',
          }
        ]
      };
      option && myChart.setOption(option);
    },
    // 男女比例
    getAgeProportion() {
      let proportionDom = document.getElementById('proportionEcharts');
      let myChart = echarts.init(proportionDom);
      let option = {
        title: {
          zlevel: 0,
          text: ['{name|男女比例}'],
          top: 'center',
          left: '48%',
          textAlign: 'center',
          textStyle: {
            rich: {
              name: {
                color: '#999999',
                fontSize: 13,
                lineHeight: 15
              },
            },
          },
        },
        color: ['#3975C6','#F3A963'],
        series: [
          {
            name: '特殊人群',
            type: 'pie',
            radius: ['30%', '60%'],
            avoidLabelOverlap: false,
            hoverAnimation: false,
            emphasis: {
              disabled: false,
              scale: false,
              scaleSize: 0,
            },
            label: {
              alignTo: 'labelLine',
              formatter: '{name|{b}}{value|{c}}\n',
              padding: [0, -50],
              minMargin: 5,
              edgeDistance: 10,
              lineHeight: 15,
              rich: {
                time: {
                  fontSize: 10,
                  color: '#999'
                }
              }
            },
            labelLine: {
              length: 20,
              length2: 50,
              maxSurfaceAngle: 80
            },
            data: [
              { value: this.sexArray?.[1] , name: '男' },
              { value: this.sexArray?.[0] , name: '女' },
            ] 
          }
        ]
      };
      option && myChart.setOption(option);
    },
  },
  destroyed() {

  },
}
</script>

<style lang="scss" scoped>
.resident {
  padding: 0 30px;
  box-sizing: border-box;

  .resident_num {
    width: 100%;
    height: 160px;
    background: #FFF;
    margin-top: 32px;
    border-radius: 16px;
    display: flex;
    .num_item {
      width: 33%;
      height: 100%;
      text-align: center;
      margin-top: 32px;

      .num_item_name {
        color: #666666;
      }

      .num_item_data {
        margin-top: 10px;
        color: #000000;
        font-size: 36px;
      }
    }
  }
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      
  .specialPeople,
  .ageDistribution,
  .ageProportion {
    margin-top: 32px;
    .specialBox,
    .ageBox,
    .proportionBox {
      margin-top: 24px;
      width: 100%;
      height: 480px;
      border-radius: 8px;
      background: #FFF;

      #specialEcharts,
      #ageEcharts,
      #proportionEcharts {
        width: 100%;
        height: 100%;
      }
    }
    
  }
}
</style>