<template>
  <section class="residentSta">
    <div class="dataStatistic">
      <div class="above">
        <div class="data-item">
          <div id="LocalResident" v-if="showStatis"/>
          <ai-empty v-else/>
          <h5 v-if="LocalResidentData">
            更新时间:{{ statisticData.更新时间 }}
          </h5>
        </div>
        <div class="data-item" style="width:66%;">
          <div id="ResidentDistribution" v-if="showStatis"/>
          <ai-empty v-else/>
        </div>
      </div>
      <div class="above" style="margin-top:24px;">
        <div class="data-item">
          <div id="SexRatio" v-if="showStatis"/>
          <ai-empty v-else/>
          <div rightTop><i v-html="'有效数据:'"/> {{ LocalResidentData }}</div>
        </div>
        <div class="data-item">
          <div id="MaritalSta" v-if="showStatis"/>
          <ai-empty v-else/>
          <div rightTop><i v-html="'有效数据:'"/>{{ LocalResidentData }}</div>
        </div>
        <div class="data-item">
          <div id="AgeDistribution" v-if="showStatis"/>
          <ai-empty v-else/>
          <div rightTop><i v-html="'有效数据:'"/>{{ LocalResidentData }}</div>
        </div>
      </div>
    </div>
  </section>
</template>

<script>
import * as echarts from 'echarts'

export default {
  name: "residentSta",
  inject: ['resident'],
  props: {
    areaId: String
  },
  computed: {
    LocalResidentData() {
      return this.statisticData?.总人数 || 0
    },
    AgeDistributionData() {
      return this.statisticData?.年龄层次 || []
    },
    MaritalStaData() {
      return this.statisticData?.婚姻状况 || []
    },
    SexRatioData() {
      return this.statisticData?.男女比例 || []
    },
    ResidentDistributionData() {
      return this.statisticData?.人口分布 || []
    }
  },
  data() {
    return {
      statisticData: {},
      showStatis: true,
    }
  },
  watch: {
    areaId(v) {
      v && this.getStaData()
    }
  },
  methods: {
    getStaData() {
      this.resident.instance.post(`/app/appresident/queryCustInfoByAreaId`, null, {
        params: {
          areaId: this.areaId
        }
      }).then(res => {
        if (res?.data) {
          this.statisticData = res.data;
          this.showStatis = this.LocalResidentData > 0;
          this.showLocalResident();
          this.showSexRatio();
          this.showAgeDistribution();
          this.showResidentDistribution();
          this.showMaritalSta();
        }
      })
    },
    showAgeDistribution() {
      //年龄分布
      let myChart = echarts.init(document.getElementById("AgeDistribution"));
      if (!this.showStatis) {
        return myChart.dispose();
      }
      myChart.setOption({
        title: {
          text: "年龄层次统计",
          subtext: "",
          x: "left"
        },
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        legend: {
          orient: "vertical",
          bottom: "bottom",
          data: this.AgeDistributionData.map(e => e.v1)
        },
        series: [
          {
            name: "年龄层次统计",
            type: "pie",
            radius: ["40%", "55%"],
            center: ["50%", "50%"],
            data: this.AgeDistributionData.map(e => ({value: e.v2 * 1, name: e.v1})),
            itemStyle: {
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)"
              },
              normal: {
                color: function (params) {
                  //自定义颜色
                  var colorList = [
                    "#FB3C3C",
                    "#fc5947",
                    "#81E84F",
                    "#3C76FF",
                    "#6995FF",
                    "#FFD500",
                    "#FEF517",
                    "#B1E598",
                    "#81E84F",
                    "#B1E598",
                    "#FEBB8E"
                  ];
                  return colorList[params.dataIndex];
                }
              }
            }
          }
        ]
      });
    },
    showLocalResident() {
      //本地居民
      let myChart = echarts.init(document.getElementById("LocalResident"));
      if (!this.showStatis) {
        return myChart.dispose();
      }
      let option = {
        title: {
          text: "本地居民",
          subtext: "",
          x: "left"
        },
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b}: {c} ({d}%)"
        },
        series: [
          {
            name: "本地居民",
            type: "pie",
            radius: ["50%", "65%"],
            avoidLabelOverlap: false,
            label: {
              normal: {
                show: true,
                position: "center",
                textStyle: {
                  fontSize: "40",
                  fontWeight: "normal",
                  color: "#333333"
                }
              },
              emphasis: {
                show: true,
                textStyle: {
                  fontSize: "40",
                  fontWeight: "normal",
                  color: "#333333"
                }
              }
            },
            labelLine: {
              normal: {
                show: false
              }
            },
            data: [{value: this.LocalResidentData, name: this.LocalResidentData}],
            itemStyle: {
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)"
              },
              normal: {
                color: function (params) {
                  //自定义颜色
                  var colorList = ["#5088FF"];
                  return colorList[params.dataIndex];
                }
              }
            }
          }
        ]
      };
      myChart.setOption(option);
    },
    showMaritalSta() {
      //婚姻状况
      let myChart = echarts.init(document.getElementById("MaritalSta"));
      if (!this.showStatis) {
        return myChart.dispose();
      }
      let option = {
        color: [
          "#FB3C3C",
          "#FC5947",
          "#FE8B3F",
          "#3C76FF",
          "#6995FF",
          "#FFD500",
          "#FEF517",
          "#B1E598",
          "#81E84F",
          "#B1E598",
          "#FEBB8E"
        ],
        backgroundColor: "#FFFFFF",
        title: {
          text: "婚姻状况统计",
          x: "left"
        },
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        legend: {
          orient: "vertical",
          bottom: "bottom",
          width: "auto",
          height: 50,
          data: this.MaritalStaData.map(e => e.v1)
        },
        series: [
          {
            name: "婚姻状况",
            type: "pie",
            radius: ["40%", "55%"],
            center: ["50%", "50%"],
            data: this.MaritalStaData.map(e => ({value: e.v2 * 1, name: e.v1})),
          }
        ]
      };
      myChart.setOption(option);
    },
    showResidentDistribution() {
      //人口分布/居民分布
      let myChart = echarts.init(document.getElementById("ResidentDistribution"));
      if (!this.showStatis) {
        return myChart.dispose();
      }
      let option = {
        title: {
          text: "人口分布统计",
          subtext: "",
          x: "left"
        },
        color: ["#5088FF"],
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
          },
          formatter: "{a} <br/>{b} : {c} "
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true
        },
        xAxis: [
          {
            type: "category",
            data: this.ResidentDistributionData.map(e => e.name),
            axisTick: {
              alignWithLabel: true
            }
          }
        ],
        yAxis: [
          {
            type: "value"
          }
        ],
        dataZoom: [
          {
            id: "dataZoomX",
            type: "slider",
            xAxisIndex: [0],
            filterMode: "filter"
          }
        ],
        series: [
          {
            name: "人口数量",
            type: "bar",
            barWidth: "16",
            data: this.ResidentDistributionData.map(e => e.v1)
          }
        ]
      };
      myChart.setOption(option);
    },
    showSexRatio() {
      //男女比例
      let myChart = echarts.init(document.getElementById("SexRatio"));
      if (!this.showStatis) {
        return myChart.dispose();
      }
      myChart.setOption({
        title: {
          text: "男女比例统计",
          subtext: "",
          x: "left"
        },
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        legend: {
          orient: "vertical",
          bottom: "bottom",
          data: this.SexRatioData.map(e => e.v1)
        },
        series: [
          {
            name: "男女比例",
            type: "pie",
            radius: ["40%", "55%"],
            center: ["50%", "50%"],
            data: this.SexRatioData.map(e => ({value: e.v2 * 1, name: e.v1})),
            itemStyle: {
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)"
              },
              normal: {
                color: function (params) {
                  //自定义颜色
                  let colorList = [
                    "#FB3C3C",
                    "#3C76FF",
                    "#3C76FF",
                    "#FC5947",
                    "#6995FF",
                    "#FB3C3C",
                    "#FE8B3F",
                    "#B1E598",
                    "#81E84F",
                    "#FEBB8E"
                  ];
                  return colorList[params.dataIndex];
                }
              }
            }
          }
        ]
      });
    },
  },
  created() {
    this.getStaData()
  }
}
</script>

<style lang="scss" scoped>
.residentSta {
  height: 100%;

  .dataStatistic {
    width: 100%;
    height: 100%;
    overflow-y: auto;
    padding: 16px 0;
    box-sizing: border-box;

    .above {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;

      .data-item {
        width: 32%;
        height: 380px;
        background: rgba(255, 255, 255, 1);
        border-radius: 4px;
        padding: 16px;
        box-sizing: border-box;
        position: relative;

        div[rightTop] {
          position: absolute;
          right: 16px;
          top: 16px;
          font-size: 14px;
          font-weight: bold;
          color: #333;

          & > i {
            font-style: normal;
            color: #999;
          }
        }

        & > h5 {
          width: 100%;
          color: #999;
          text-align: center;
          position: absolute;
          bottom: 0;
        }
      }
    }
  }

  #LocalResident, #MaritalSta, #ResidentDistribution, #SexRatio, #AgeDistribution {
    width: 100%;
    height: 95%
  }
}
</style>
