<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: [],
            userType: "",
        });
        let state: any = ref([
            {
                label: "all",
                value: "",
            },
            {
                label: "visitor",
                value: "visitor",
            },
            {
                label: "trial",
                value: "trial",
            },
            {
                label: "official",
                value: "official",
            },
        ]);
        //查询列表
        let searchHistoryList = () => {
            gettrialList();
        };
        //获取列表
        let gettrialList = async () => {
            Https.axiosGet(Https.httpUrls.trialUserCountry).then((rv: any) => {
                if (rv) {
                    let data: any = [];
                    rv.names.forEach((item: any, index: number) => {
                        let obj = {
                            name: item,
                            value: rv.values[index],
                        };
                        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",
                    },
					legend: {
						top: '5%',
						left: 'center'
					},
                    series: [
                        {
                            type: "pie",
                            radius: "55%",
                            center: ["50%", "55%"],
                            data: data,
                            emphasis: {
                                itemStyle: {
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowColor: "rgba(0, 0, 0, 0.5)",
                                },
                            },
                        },
                    ],
                };

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

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