<template>
  <view class="charts-container">
    <qiun-data-charts type="ring" :opts="opts" :chartData="chartData" @getIndex="handleChartClick" />
  </view>
</template>

<script>
import { getHomePageListApi } from '@/api/phaseTwo/homePage'
export default {
  data() {
    return {
      chartData: {},
      opts: {
        timing: 'easeOut',
        duration: 1000,
        rotate: false,
        rotateLock: false,
        color: ['#1890FF', '#91CB74', '#FAC858', '#EE6666', '#73C0DE', '#3CA272', '#FC8452', '#9A60B4', '#ea7ccc'],
        padding: [5, 5, 5, 5],
        fontSize: 13,
        fontColor: '#666666',
        dataLabel: false,
        dataPointShape: true,
        dataPointShapeType: 'solid',
        touchMoveLimit: 60,
        enableScroll: false,
        enableMarkLine: false,
        legend: {
          show: true,
          position: 'bottom',
          lineHeight: 20,
          float: 'center',
          padding: 0,
          margin: 5,
          backgroundColor: 'rgba(0,0,0,0)',
          borderColor: 'rgba(0,0,0,0)',
          borderWidth: 0,
          fontSize: 12,
          fontColor: '#666666',
          hiddenColor: '#CECECE',
          itemGap: 10
        },
        title: {
          name: '总数量',
          fontSize: 15,
          color: '#666666',
          offsetX: 0,
          offsetY: 0
        },
        subtitle: {
          name: 0,
          fontSize: 25,
          color: '#7cb5ec',
          offsetX: 0,
          offsetY: 0
        },
        extra: {
          ring: {
            ringWidth: 15,
            activeOpacity: 0.5,
            activeRadius: 10,
            offsetAngle: 0,
            labelWidth: 10,
            border: true,
            borderWidth: 3,
            borderColor: '#FFFFFF',
            centerColor: '#FFFFFF',
            customRadius: 70,
            linearType: 'none'
          },
          tooltip: {
            showBox: true,
            showArrow: true,
            showCategory: false,
            borderWidth: 0,
            borderRadius: 0,
            borderColor: '#000000',
            borderOpacity: 0.7,
            bgColor: '#000000',
            bgOpacity: 0.7,
            gridType: 'solid',
            dashLength: 4,
            gridColor: '#CCCCCC',
            boxPadding: 3,
            fontSize: 13,
            lineHeight: 20,
            fontColor: '#FFFFFF',
            legendShow: true,
            legendShape: 'auto',
            splitLine: true,
            horizentalLine: false,
            xAxisLabel: false,
            yAxisLabel: false,
            labelBgColor: '#FFFFFF',
            labelBgOpacity: 0.7,
            labelFontColor: '#666666'
          }
        }
      }
    }
  },
  mounted() {
    this.getServerData()
  },
  methods: {
    getServerData() {
      getHomePageListApi().then(res => {
        const { twentyNum, thirtyNum, fortyNum, fiftyNum, sixtyNum } = res.data.workerMsgBean
        const amountNum = twentyNum + thirtyNum + fortyNum + fiftyNum + sixtyNum
        this.opts.subtitle.name = amountNum
        setTimeout(() => {
          let data = {
            series: [
              {
                data: [
                  {
                    name: '< 20',
                    value: twentyNum,
                    legendText: `< 20  ${((twentyNum / amountNum) * 100).toFixed(2)}%      ${twentyNum}`
                  },
                  {
                    name: '20-30',
                    value: thirtyNum,
                    legendText: `20-30  ${((thirtyNum / amountNum) * 100).toFixed(2)}%     ${thirtyNum}`
                  },
                  {
                    name: '30-40',
                    value: fortyNum,
                    legendText: `30-40  ${((fortyNum / amountNum) * 100).toFixed(2)}%      ${fortyNum}`
                  },
                  {
                    name: '40-50',
                    value: fiftyNum,
                    legendText: `40-50  ${((fiftyNum / amountNum) * 100).toFixed(2)}%      ${fiftyNum}`
                  },
                  {
                    name: '50-60',
                    value: sixtyNum,
                    legendText: `50-60  ${((sixtyNum / amountNum) * 100).toFixed(2)}%       ${sixtyNum}`
                  }
                ]
              }
            ]
          }
          this.chartData = JSON.parse(JSON.stringify(data))
        }, 500)
      })
    },
    handleChartClick(index) {
      const { currentIndex } = index // 获取当前点击的图表索引
      const chartsData = this.chartData.series[0].data
      const currenRows = chartsData[currentIndex]
      console.log('currenRows选中的人员类型(这个应该时年龄范围)', currenRows.name)
	  if(currenRows.name=="< 20"){
	  		  uni.navigateTo({ url: `/pages/realName/index/pages/personList?ageType=0`})
	  }else if(currenRows.name=="20-30"){
	  		  uni.navigateTo({ url: `/pages/realName/index/pages/personList?ageType=1`})
	  }else if(currenRows.name=="30-40"){
	  		  uni.navigateTo({ url: `/pages/realName/index/pages/personList?ageType=2`})
	  }else if(currenRows.name=="40-50"){
	  		  uni.navigateTo({ url: `/pages/realName/index/pages/personList?ageType=3`})
	  }else if(currenRows.name=="50-60"){
	  		  uni.navigateTo({ url: `/pages/realName/index/pages/personList?ageType=4`})
	  }
    }
  }
}
</script>

<style scoped>
/* 请根据实际需求修改父元素尺寸，组件自动识别宽高 */
.charts-container {
  width: 100%;
  height: 100%;
}
</style>
