<template>
    <div style="height: 100%;width: 100%" ref="homePieRef"></div>
</template>

<script setup lang="ts">
import {
  reactive,
  defineExpose,
  ref,
  markRaw,
} from "vue";
import * as echarts from "echarts";
import { storeToRefs } from "pinia";
import { useThemeConfig } from "/@/stores/themeConfig";
const storesThemeConfig = useThemeConfig();
const { themeConfig } = storeToRefs(storesThemeConfig);

// 定义变量内容
const homePieRef = ref();
const state = reactive({
  global: {
    homeChartTwo: null,
    dispose: [null, "", undefined],
  } as any,
  myCharts: [] as any,
  charts: {
    theme: "",
    bgColor: "",
    color: "#303133",
  },
});

// 饼图
const initPieChart = () => {
  if (!state.global.dispose.some((b: any) => b === state.global.homeChartTwo))
    state.global.homeChartTwo.dispose();
  state.global.homeChartTwo = markRaw(echarts.init(homePieRef.value, state.charts.theme));
  const option = {
    tooltip: {
      trigger: 'item'
    },
    series: [
      {
        name: '',
        type: 'pie',
        radius: '90%',
        label: {
          show: false,
        },
        data: [
          { value: 1048, name: 'Search Engine' },
          { value: 735, name: 'Direct' },
          { value: 580, name: 'Email' },
          { value: 484, name: 'Union Ads' },
          { value: 300, name: 'Video Ads' }
        ],
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        }
      }
    ]
  };
  state.global.homeChartTwo.setOption(option);
  state.myCharts.push(state.global.homeChartTwo);
};
defineExpose({
  initPieChart,
});
// 批量设置 echarts resize
// const initEchartsResizeFun = () => {
//   nextTick(() => {
//     for (let i = 0; i < state.myCharts.length; i++) {
//       setTimeout(() => {
//         state.myCharts[i].resize();
//       }, i * 1000);
//     }
//   });
// };
// // 批量设置 echarts resize
// const initEchartsResize = () => {
//   window.addEventListener("resize", initEchartsResizeFun);
// };
// // 监听 pinia 中是否开启深色主题
// watch(
//   () => themeConfig.value.isIsDark,
//   (isIsDark) => {
//     nextTick(() => {
//       state.charts.theme = isIsDark ? "dark" : "";
//       state.charts.bgColor = isIsDark ? "transparent" : "";
//       state.charts.color = isIsDark ? "#dadada" : "#303133";
//       setTimeout(() => {
//         initPieChart();
//       }, 700);
//     });
//   },
//   {
//     deep: true,
//     immediate: true,
//   }
// );
</script>

<style scoped lang="scss">
.smetext {
  &::before {
    content: "套数:";
  }
}
.smetexts {
  &::before {
    content: "面积:";
  }
}
.uconss {
  text-align: left;
  padding: 10px 20px;

  .uconsstitle {
    font-size: 15px;
    font-weight: bold;
    margin: 8px 0;
  }
  .uconsstext {
    font-size: 14px;
    color: #666;
    margin-bottom: 8px;
  }
  img {
    height: 26px;
  }
}
.bold {
  font-weight: bold;
}
.maxauto {
  height: auto !important;
}
.autoheight {
  height: auto !important;
}
$homeNavLengh: 8;
.home-container {
  overflow: hidden;
  .home-card-one,
  .home-card-two,
  .home-card-three {
    .home-card-item {
      width: 100%;
      height: 130px;
      border-radius: 4px;
      transition: all ease 0.3s;
      padding: 20px;
      overflow: hidden;
      background: var(--el-color-white);
      color: var(--el-text-color-primary);
      border: 1px solid var(--next-border-color-light);
      &:hover {
        box-shadow: 0 2px 12px var(--next-color-dark-hover);
        transition: all ease 0.3s;
      }
      &-icon {
        width: 70px;
        height: 70px;
        border-radius: 100%;
        flex-shrink: 1;
        i {
          color: var(--el-text-color-placeholder);
        }
      }
      &-title {
        font-size: 15px;
        font-weight: bold;
        height: 30px;
      }
    }
  }
  .home-card-one {
    @for $i from 0 through 3 {
      .home-one-animation#{$i} {
        opacity: 0;
        animation-name: error-num;
        animation-duration: 0.5s;
        animation-fill-mode: forwards;
        animation-delay: calc($i/4) + s;
      }
    }
  }
  .home-card-two,
  .home-card-three {
    .home-card-item {
      height: 400px;
      width: 100%;
      overflow: hidden;
      .home-monitor {
        height: 100%;
        .flex-warp-item {
          width: 25%;
          height: 111px;
          display: flex;
          .flex-warp-item-box {
            margin: auto;
            text-align: center;
            color: var(--el-text-color-primary);
            display: flex;
            border-radius: 5px;
            background: var(--next-bg-color);
            cursor: pointer;
            transition: all 0.3s ease;
            &:hover {
              background: var(--el-color-primary-light-9);
              transition: all 0.3s ease;
            }
          }
          @for $i from 0 through $homeNavLengh {
            .home-animation#{$i} {
              opacity: 0;
              animation-name: error-num;
              animation-duration: 0.5s;
              animation-fill-mode: forwards;
              animation-delay: calc($i/10) + s;
            }
          }
        }
      }
    }
  }
}
</style>
