<script setup lang="ts">
import { watch, onMounted } from 'vue';
import { $t } from '@/locales';
import { useAppStore } from '@/store/modules/app';
import { useEcharts } from '@/hooks/common/echarts';
import { api_pointsCount, api_taskCount } from '@/api/index.ts'

defineOptions({
  name: 'PieChart'
});

const getCardData = async () => {
  await api_taskCount().then(res => {
    if (res.data.code === 200) {
      updateOptions(opts => {
        opts.series[0].data = [
          { name: `已启动 ${res.data.data[0].count} 个`, value: res.data.data[0].count },
          { name: `已停用 ${res.data.data[1].count} 个`, value: res.data.data[1].count },
        ];
        return opts;
      });
    };
  })

};

const appStore = useAppStore();

const { domRef, updateOptions } = useEcharts(() => ({
  tooltip: {
    trigger: 'item'
  },
  legend: {
    bottom: '-1%',
    left: 'left',
    itemStyle: {
      borderWidth: 0,
    },
    textStyle: {
      color: 'white' // 设置图例字体颜色为白色
    }
  },
  series: [
    {
      color: ['#184ff0', '#f8f8f9c9'],
      name: '启动状态',
      type: 'pie',
      center: ['50%', '50%'],
      // selectedMode: 'single',
      itemStyle: {
        // borderRadius: 10,
        borderColor: '#fff',
        borderWidth: 1
      },
      // label: {
      //   show: false,
      //   position: 'center'
      // },
      emphasis: {
        label: {
          show: true,
          fontSize: '12'
        }
      },
      labelLine: {
        show: true
      },
      data: [] as { name: string; value: number }[]
    }
  ]
}));

async function mockData() {
  await new Promise(resolve => {
    setTimeout(resolve, 1000);
  });

  updateOptions(opts => {
    opts.series[0].data = [
      { name: '已启动 16 个', value: 20 },
      { name: '已停用 4 个', value: 10 },
    ];

    return opts;
  });
}

function updateLocale() {
  updateOptions((opts, factory) => {
    const originOpts = factory();

    opts.series[0].name = originOpts.series[0].name;

    opts.series[0].data = [
      { name: $t('page.home.study'), value: 20 },
      { name: $t('page.home.entertainment'), value: 10 },
      { name: $t('page.home.work'), value: 40 },
      { name: $t('page.home.rest'), value: 30 }
    ];

    return opts;
  });
}

// async function init() {
//   mockData();

// }

onMounted(() => {
  getCardData();
})

watch(
  () => appStore.locale,
  () => {
    updateLocale();
  }
);

// init
// init();
</script>

<template>
  <!-- <NCard :bordered="false" class="card-wrapper"> -->
  <!-- overflow-hidden -->
  <!--  text-focus-in -->
  <div ref="domRef" id="pie" class="h-400px"></div>
  <!-- </NCard> -->
</template>

<style scoped>
#pie {
  width: 100% !important;
  height: 100% !important;
}

.text-focus-in {
  -webkit-animation: text-focus-in 1s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
  animation: text-focus-in 1s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
}

/* ----------------------------------------------
 * Generated by Animista on 2024-10-29 15:10:15
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info.
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation text-focus-in
 * ----------------------------------------
 */
@-webkit-keyframes text-focus-in {
  0% {
    -webkit-filter: blur(12px);
    filter: blur(12px);
    opacity: 0;
  }

  100% {
    -webkit-filter: blur(0px);
    filter: blur(0px);
    opacity: 1;
  }
}

@keyframes text-focus-in {
  0% {
    -webkit-filter: blur(12px);
    filter: blur(12px);
    opacity: 0;
  }

  100% {
    -webkit-filter: blur(0px);
    filter: blur(0px);
    opacity: 1;
  }
}

/* =============================  card  ============================= | S */
</style>
