<template>
  <div id="cmp3">
    <div class="left">
      <div class="d-flex pt-2 pl-2">
        <span style="color:#5cd9e8">
          <icon name="align-left"></icon>
        </span>
        <span class="fs-xl text mx-2">社区老人占比</span>
      </div>
        <Echart
          :options="options"
          id="cmp1"
          style="position: absolute;top: .4rem;"
        ></Echart>
    </div>
    <div class="right">
      <div class="d-flex pt-2 pl-2">
        <span style="color:#5cd9e8">
          <icon name="align-left"></icon>
        </span>
        <span class="fs-xl text mx-2">社区老人统计</span>
      </div>
      <div class="up">
        <div class=" item" v-for="item in titleItem" :key="item.title">
          <p class="ml-3 colorBlue fw-b">{{item.title}}</p>
          <div>
            <dv-digital-flop :config="item.number" style="width:1.25rem;height:.625rem;" />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  var timer = null;
    import Echart from '../../common/echart'
  export default{
    components:{
      Echart,
    },
    data(){
      return{
        options:{},
        titleItem: [
                {
                  title: "社区老人总数",
                  number: {
                    number: [9020],
                    content: "{nt}",
                    style:{
                      fontSize:20
                    },
                  }
                },
                {
                  title: "无劳动能力者",
                  number: {
                    number: [2560],
                    content: "{nt}",
                    style:{
                      fontSize:20
                    }
                  }
                },
                {
                  title: "无赡养人",
                  number: {
                    number: [987],
                    content: "{nt}",
                    style:{
                      fontSize:20
                    }
                  }
                },
                {
                  title: "无生活来源",
                  number: {
                    number: [4401],
                    content: "{nt}",
                    style:{
                      fontSize:20
                    }

                  }
                },
                {
                  title: "独居老人",
                  number: {
                    number: [1206],
                    content: "{nt}",
                    style:{
                      fontSize:20
                    }
                  }
                },
                {
                  title: "残障老人",
                  number: {
                    number: [45],
                    content: "{nt}",
                    style:{
                      fontSize:20
                    }
                  }
                }
              ],
      }
    },
    mounted() {
      this.initLine()
    },
    methods:{
      initLine(){
        var data = [{
            name: '社区老人总数',
            value: 9020
        }, {
            name: '无劳动能力者',
            value: 2506
        }, {
            name: '无赡养人',
            value: 987
        }, {
            name: '无生活来源',
            value: 4401
        }, {
            name: '独居老人',
            value: 1206
        },{
            name: '残障老人',
            value: 45
        }];

        var newdata = [];
        var color = ['#4B93FE', '#7487FF', '#8DFAEE', '#ECC091', '#F4EB8F','#5433f7']
        for (var i = 0; i < data.length; i++) {
            newdata.push({
                value: data[i].value,
                name: data[i].name,
                itemStyle: {
                    normal: {
                        borderWidth: 3,
                        shadowBlur: 10,
                        borderColor: color[i],
                        shadowColor: color[i]
                    }
                }
            }, {
                value: 2,
                name: '',
                itemStyle: {
                    normal: {
                        label: {
                            show: false
                        },
                        labelLine: {
                            show: false
                        },
                        color: 'rgba(0, 0, 0, 0)',
                        borderColor: 'rgba(0, 0, 0, 0)',
                        borderWidth: 0
                    }
                }
            });
        }
        function _pie2() {
            let dataArr = [];
            for (var i = 0; i < 8; i++) {
                if (i % 2 === 0) {
                    dataArr.push({
                        name: '',
                        value: 25,
                        itemStyle: {
                            normal: {
                                color: "rgba(3,173,248,.4)",
                                borderWidth: 0,
                                borderColor: "rgba(0,0,0,0)"
                            }
                        }
                    })
                } else {
                    dataArr.push({
                        name: '',
                        value: 20,
                        itemStyle: {
                            normal: {
                                color: "rgba(0,0,0,0)",
                                borderWidth: 0,
                                borderColor: "rgba(0,0,0,0)"
                            }
                        }
                    })
                }
            }
            return dataArr
        }
        function aniLine(){
          let seriesData = [];
          for(var i = 0; i < 13; i++){
              seriesData.push({
                  name: '',
                  value: 1,
                  itemStyle: {
                      normal: {
                          color: "rgb(126,190,255)",
                          borderWidth: 0,
                          borderColor: "rgba(0,0,0,0)"
                      }
                  }

              });
              seriesData.push({
                  name: '',
                  value: 1,
                  itemStyle: {
                      normal: {
                          color: "rgba(0,0,0,0)",
                          borderWidth: 0,
                          borderColor: "rgba(0,0,0,0)"
                      }
                  }
              })
          }
          return seriesData
        }
        let angle = 0;
        var seriesOption = [{
            name:'外圈3',
            type: 'pie',
            zlevel: 4,
            silent: true,
            radius: ['62%', '63%'],
            startAngle:angle,
            label: {
                normal: {
                    show: false
                },
            },
            labelLine: {
                normal: {
                    show: false
                }
            },
            data: aniLine()
        },
        {

                name: '外圈4',
                type: 'pie',
                // clockWise: false,
                radius: ["55%", "45%"],
                center: ['50%', '50%'],
                hoverAnimation: false,
                itemStyle: {
                    normal: {
                        label: {
                            show: true,
                        },
                        labelLine: {
                            show: true,
                        }
                    }
                },
                data: newdata
            },

            {
                name:'外圈2',
                type: 'pie',
                zlevel: 20,
                silent: true,
                radius: ['70%', '68%'],
                center: ['50%', '50%'],
                hoverAnimation: false,
                itemStyle: {
                    color: '#3690D7',
                    shadowColor: '#3690D7',
                    shadowBlur: 10
                },
                // animation:false,
                data: [1],
                labelLine: {
                    normal: {
                        show: false
                    }
                }
            },
            {
                name:'外圈1',
                type: 'pie',
                zlevel: 20,
                silent: true,
                radius: ['77%', '75%'],
                center: ['50%', '50%'],
                hoverAnimation: false,
                itemStyle: {
                    color: '#092563',
                    shadowColor: '#092563',
                    shadowBlur: 10
                },
                // animation:false,
                data: [1],
                labelLine: {
                    normal: {
                        show: false
                    }
                }
            },
            {
                name: '',
                type: 'gauge',
                detail: false,
                splitNumber: 10, //刻度数量
                radius: '40%', //图表尺寸
                center: ['50%', '50%'],
                startAngle: 0, //开始刻度的角度
                endAngle: -356, //结束刻度的角度
                axisLine: {
                    show: false,
                    lineStyle: {
                        width: 0,
                        shadowBlur: 0,
                    }
                },
                axisTick: {
                    show: true,
                    lineStyle: {
                        color: '#194482',
                        width: 1
                    },
                    length: 5,
                    splitNumber: 5
                },
                splitLine: {
                    show: false,
                    length: 5,
                    lineStyle: {
                        color: '#194482',
                    }
                },
                axisLabel: {
                    show: false
                },
            },{
                type: 'pie',
                zlevel: 2,
                silent: true,

                center: ['50%', "50%"],
                radius: ['23%', '32%'],
                startAngle: -110,
                label: {
                    normal: {
                        show: false
                    },
                },
                data: _pie2()
              },
              {
                type: 'pie',
                zlevel: 2,
                silent: true,

                center: ['50%', "50%"],
                radius: ['23%', '32%'],
                startAngle: -110,
                label: {
                    normal: {
                        show: false
                    },
                },
                data: _pie2()
              },{
                type: 'pie',
                zlevel: 2,
                silent: true,
                color:'rgba(3,173,248,.4)',
                backgroundColor:'red',
                center: ['50%', "50%"],
                radius: ['23%', '22%'],
                startAngle: -110,
                label: {
                    normal: {
                        show: false
                    },
                },
                data: [1]
              },
              {
                type: 'pie',
                zlevel: 2,
                silent: true,
                color:'rgba(3,173,248,.2)',
                center: ['50%', "50%"],
                radius: ['0', '22%'],
                startAngle: -110,
                label: {
                    normal: {
                        show: false
                    },
                },
                data: [1]
              },
        ];

        let option = {
            color: color,
            tooltip: {
                show: false
            },
            // legend: {
            //     show: true,
            //     right: 0,
            //     icon: 'circle',
            //     itemWidth: 1,
            //     textStyle: {
            //         color: '#94B7CC'
            //     },
            //     formatter: params => {
            //         var onData = data.find(item => item.name == params)
            //         return `{a|${onData.name}}{b|${onData.value}%}`
            //     },
            //     textStyle: {
            //         rich: {
            //             a: {
            //                 color: '#CEF6FA',
            //                 width: 60
            //             },
            //             b: {
            //                 color: '#52D3F9',
            //                 width: 20,
            //                 textAlign: 'right'
            //             }
            //         },
            //     },

            // },
            series: seriesOption
        }
        this.options = option
        timer = setInterval(function(){
                angle = angle - 1
                option.series[0].startAngle = angle
                this.options = option
            }, 100);
      }
    },
    destroyed() {
      if(timer){
        clearInterval(timer)
      }
    }
  }
</script>

<style lang="less" scoped="scoped">
  #cmp3{
    width: 100%;
    height: 33.33%;
    display: flex;
    .left,.right{
      width: 50%;
      position: relative;
    }
      .up {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-around;
        .item {
          border-radius: 0.0625rem;
          padding-top: 0.2rem;
          margin-top: 0.1rem;
          width: 32%;
          height: 0.875rem;
        }
      }
  }
</style>
