<template>
    <div class="recentNewUserChart admin_page">
        <div class="admin_table_search">
            <div class="admin_state">
            </div>
            <div class="admin_search">
               
            </div>
        </div>

        <div class="admin_table_content" ref="pageChartDom"></div>
    </div>
</template>
<script lang="ts">
import {
    defineComponent,
    ref,
    createVNode,
    computed,
    reactive,
    toRefs,
    onMounted,
} from "vue";
import { Https } from "@/tool/https";
import { formatTime } from "@/tool/util";
import * as echarts from "echarts/core";
import { TooltipComponent, LegendComponent } from "echarts/components";
import { PieChart } from "echarts/charts";
import { LabelLayout } from "echarts/features";
import { CanvasRenderer } from "echarts/renderers";
export default defineComponent({
    components: {},
    setup() {
        let filter: any = reactive({
            dataList: {},
        });

        let filterData: any = reactive({
            rangePickerValue: [],
        });
     
        //查询列表
        let searchHistoryList = () => {
            gettrialList();
        };
        //获取列表
        let gettrialList = async () => {
            Https.axiosGet(Https.httpUrls.conversionRate).then((rv: any) => {
                if (rv) {
					let entries:any = Object.entries(rv);
                    let data: any = [];
					for (let [key, value] of entries) {
						let str 
						if(key != 'conversionRate'){
							if(key == 'trialToOfficialCount'){
								str = 'Trial To Official'
							}else{
								str = 'Trial User'
							}
							let obj = {
								name: str,
								value: value
							}
							data.push(obj);
						}
					}
                    filter.dataList = data;
                    setEcharts(data);
                    // this.workspaceItem.position = this.singleTypeList[0].label
                }
            });
        };
        let myChart: any;
        let setEcharts = (data: any) => {
            if (myChart) {
                myChart.setOption({
                    series: [
                        {
                            data: data,
                        },
                    ],
                });
            } else {
                echarts.use([
                    TooltipComponent,
                    LegendComponent,
                    PieChart,
                    CanvasRenderer,
                    LabelLayout,
                ]);
                var chartDom = pageChartDom.value;
                myChart = echarts.init(chartDom);
                var option;

                option = {
                    tooltip: {
                        trigger: "item",
						formatter: '{a} <br/>{b} : {c} ({d}%)'
                    },
					legend: {
						top: '10%',
						left: 'center'
					},
                    series: [
						{
							name:'Rate',
							type: 'pie',
							radius: ['40%', '70%'],
							avoidLabelOverlap: false,
							
							itemStyle: {
								borderRadius: 10
							},
							label: {
								show: false,
								position: 'center'
							},
							emphasis: {
								label: {
								show: true,
								fontSize: 30,
								fontWeight: 'bold'
								}
							},
							labelLine: {
								show: false
							},
							data: data
						}
					]
                };

                option && myChart.setOption(option);
            }
        };
       
        let pageChartDom: any = ref();
        onMounted(() => {
            gettrialList();
        });
        return {
            ...toRefs(filter),
            ...toRefs(filterData),
            searchHistoryList,
            gettrialList,
            pageChartDom,
        };
    },
    data() {
        return {};
    },

    methods: {},
});
</script>
