<template>
  <div class="code-num-charts">
    <div class="code-num-txt" :style="{ 'background-image': 'url(' + getAssetsFile('images/trace/bg1.png') + ')' }">
      <template v-for="(n, index) in valData" :key="index">
        <div class="num-txt-warp">
          <div class="num-txt">
            <div class="val">{{ n.value }}</div>
            <div class="label">{{ n.name }}</div>
          </div>
        </div>
      </template>
    </div>
    <div class="code-pie">
      <custom-echart-pie-gauge :chart-data="chartsData.valData" height="100%" :option="chartsData.option" />
    </div>
  </div>
</template>
<script setup>
import { ref, reactive, onMounted } from 'vue';
import { isEmpty, getAssetsFile } from '@/utils';
let valData = reactive([
  { value: 205.6, name: '生产溯源码' },
  { value: 308.7, name: '有效溯源码' },
]);
const chartsData = reactive({
  option: {
    backgroundColor: 'transparent',
    title: {
      zlevel: 0,
      text: 806,
      subtext: '设备管理',
      top: '38%',
      left: '80%',
      textAlign: 'center',
      textStyle: {
        color: '#fff',
        fontSize: 14,
      },
      subtextStyle: {
        fontSize: 10,
        color: '#fff',
      },
      show: false,
    },
    color: [
      {
        x: 0,
        y: 0,
        x2: 0,
        y2: 1,
        colorStops: [
          { offset: 0, color: 'rgba(40, 218, 239, 1)' },
          { offset: 1, color: 'rgba(130, 249, 255, 0.8)' },
        ],
      },
      {
        x: 0,
        y: 0,
        x2: 1,
        y2: 0,
        colorStops: [
          { offset: 0, color: 'rgba(198, 201, 24, 1)' },
          { offset: 1, color: 'rgba(198, 201, 24, 0.8)' },
        ],
      },
      {
        x: 1,
        y: 1,
        x2: 0,
        y2: 0,
        colorStops: [
          {
            offset: 0,
            color: 'rgba(15, 44, 88, 1)', // 0% 处的颜色
          },
          {
            offset: 0.7,
            color: 'rgba(40, 55, 255, 1)', // 100% 处的颜色
          },
          {
            offset: 1,
            color: 'rgba(244, 245, 255, 1)', // 100% 处的颜色
          },
        ],
      },
      {
        x: 1,
        y: 0,
        x2: 0,
        y2: 1,
        colorStops: [
          {
            offset: 0,
            color: 'rgba(75, 238, 114, 0.2)', // 0% 处的颜色
          },
          {
            offset: 1,
            color: 'rgba(75, 238, 114, 1)', // 100% 处的颜色
          },
        ],
      },
      {
        x: 0,
        y: 0,
        x2: 0,
        y2: 1,
        colorStops: [
          {
            offset: 0,
            color: 'rgba(255, 19, 0, 0.2)', // 0% 处的颜色
          },
          {
            offset: 1,
            color: 'rgba(251, 95, 79, 1)', // 100% 处的颜色
          },
        ],
      },
    ],
  },
  valData: [
    {
      type: 'pie',
      name: '外层细圆环',
      radius: ['58%', '60%'],
      center: ['80%', '50%'],
      hoverAnimation: true,
      startAngle: 0,
      clockWise: false,
      itemStyle: {
        normal: {
          color: 'rgba(40, 218, 239, 0.8)',
        },
      },
      label: {
        show: false,
      },
      data: [10],
    },
    {
      type: 'pie',
      name: '内层细圆环',
      radius: ['38%', '40%'],
      center: ['80%', '50%'],
      hoverAnimation: true,
      startAngle: 0,
      clockWise: false,
      itemStyle: {
        normal: {
          color: 'rgba(40, 218, 239, 0.5)',
        },
      },
      label: {
        show: false,
      },
      data: [10],
    },
    {
      name: '',
      type: 'pie',
      startAngle: 0,
      radius: 70,
      clockWise: false,
      hoverAnimation: false,
      center: ['80%', '50%'],
      itemStyle: {
        normal: {
          labelLine: {
            show: false,
          },
          color: {
            type: 'radial',
            x: 0.5,
            y: 0.5,
            r: 0.5,
            colorStops: [
              { offset: 1, color: 'rgba(129, 197, 200, 0.1)' },
              { offset: 0, color: 'rgba(129, 197, 200, 0)' },
            ],
            globalCoord: false,
          },
          shadowBlur: 10,
        },
      },
      data: [
        {
          value: 100,
        },
      ],
    },
    //环形
    {
      name: '',
      type: 'pie',
      clockwise: false,
      startAngle: -90,
      radius: ['45%', '55%'],
      center: ['80%', '50%'],
      hoverAnimation: false,
      label: {
        normal: {
          show: false,
        },
        emphasis: {
          show: false,
        },
      },
      zlevel: 1,
      labelLine: {
        normal: {
          show: false,
        },
      },
      data: valData,
    },
    //环形分割线
    {
      name: '分割线',
      type: 'gauge',
      radius: '75%',
      center: ['80%', '50%'],
      clockwise: true,
      startAngle: 90, // 起始角度
      endAngle: -360, // 结束角度
      splitNumber: 50, // 分割线数量
      zlevel: 2,
      detail: {
        offsetCenter: [10, 20],
        formatter: ' ',
      },
      axisLine: {
        show: false, // 隐藏轴线
      },
      axisTick: {
        show: false, // 隐藏刻度
      },
      splitLine: {
        show: true,
        length: 10, // 分割线的长度
        lineStyle: {
          color: '#1e4960',
          width: 1, // 分割线的宽度
        },
      },
      axisLabel: {
        show: false, // 隐藏标签
      },
    },
  ],
});

onMounted(() => {
  if (chartsData.valData && chartsData.valData.length) {
    chartsData.valData.forEach((m, index) => {
      let num = 100;
      m.value = (Number(m.value) + Math.random() + num).toFixed(2);
    });
  }
});
</script>
<style lang="scss" scoped>
div {
  box-sizing: border-box;
}
.code-num-charts {
  height: 100%;

  position: relative;
  .code-num-txt {
    position: absolute;
    left: 0;
    top: 50%;
    width: 80%;
    transform: translateY(-50%);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: left center;
    height: 90%;
    .num-txt-warp {
      width: 100%;
      height: calc((100% - 4px) / 2);
      display: inline-flex;
      justify-content: center;
      flex-direction: column;
    }
    .num-txt {
      width: 72%;
      display: inline-flex;
      justify-content: space-between;
      padding: 0 16px;
      line-height: 50px;
      .val,
      .label {
        vertical-align: middle;
        display: inline-flex;
      }
      .val {
        font-size: 18px;
        font-weight: bold;
        background: linear-gradient(360deg, #34c7d1, #fff); /* 渐变颜色 */
        -webkit-background-clip: text; /* 裁剪背景为文字形状 */
        background-clip: text;
        letter-spacing: -1px;
        -webkit-text-fill-color: transparent; /* 设置文字颜色为透明 */
      }
      .label {
        font-size: 12px;
        font-weight: bold;
        display: inline-flex;
        transform: skewX(-8deg);
        background: linear-gradient(to bottom, '#ff7e5f', '#548fff');
        -webkit-background-clip: text;
        letter-spacing: 1px;
        color: #fff;
        text-shadow: -2px 0 0 1px #add8f1;
      }
    }
  }
  .code-pie {
    position: absolute;
    right: 0;
    top: 0;
    width: 100%;
    height: 100%;
  }
}
</style>
