
const truncateLabel = (value, maxLen = 6) => {
  if (value === null || value === undefined) return ''
  const str = String(value)
  const chars = Array.from(str)
  if (chars.length <= maxLen) return str
  return `${chars.slice(0, maxLen).join('')}...`
}

const getCssVar = (varName, fallback) => {
  try {
    if (typeof window === 'undefined') return fallback
    const val = window.getComputedStyle(document.documentElement).getPropertyValue(varName)
    return (val || '').trim() || fallback
  } catch (e) {
    return fallback
  }
}

const getDoublePieChart = (data1, data2) => {
  const senateInnerColor = getCssVar('--color-primary-100', '#055FC2')
  const senateDeptColor = getCssVar('--color-primary-50', '#89C1FF')
  const houseInnerColor = 'rgba(255, 169, 64, 1)'
  const houseDeptColor = 'rgba(255, 213, 145, 1)'
  const innerLabelColor = getCssVar('--text-primary-80-color', '#3b414b')
  let option = {
    series: [
      {
        type: 'pie',
        radius: [35, 78],
        // height: '100%',
        left: 'center',
        // width: '100%',
        itemStyle: {
          borderColor: '#fff',
          borderWidth: 1
        },
        label: {
          position: 'inside',
          fontSize: '16px',
          fontWeight: 700,
          color: innerLabelColor,
          textBorderColor: '#fff',
          textBorderWidth: 1
        },
        data: data1.map(item => {
          return {
            name: item.name,
            value: item.value,
            itemStyle: {
              color: item.name === '参议院' ? senateInnerColor : houseInnerColor
            }
          }
        })
      },
      {
        type: 'pie',
        radius: [80, 110],
        height: '100%',
        left: 'center',
        width: '98%',
        itemStyle: {
          borderColor: '#fff',
          borderWidth: 1
        },
        label: {
          alignTo: 'edge',
          formatter: params => {
            const name = truncateLabel(params?.name, 6)
            const value = params?.value ?? 0
            const percent = typeof params?.percent === 'number' ? params.percent : 0
            return `{name|${name}}\n{time|${value} 条 ${percent}%}`
          },
          minMargin: 5,
          edgeDistance: 10,
          lineHeight: 20,
           rich: {
            name: {
              color: 'rgba(59, 65, 75, 1)',
              fontFamily: 'Microsoft YaHei',
              fontSize: 14,
              fontWeight: 'bold',
              padding: [10,0,10,0]
            },
            time: {
              fontSize: 14,
              fontFamily: 'Microsoft YaHei',
              color: 'rgba(95, 101, 108, 1)',
              padding: [10,0,10,0]
            }
          }
        },
        labelLine: {
          length: 15,
          length2: 0,
          maxSurfaceAngle: 80
        },
        labelLayout: function (params) {
          const isLeft = params.labelRect.x < 556 / 2;
          const points = params.labelLinePoints;
          // Update the end point.
          points[2][0] = isLeft
            ? params.labelRect.x
            : params.labelRect.x + params.labelRect.width;
          return {
            labelLinePoints: points
          };
        },
        data: data2.map(item => {
          return {
            name: item.name,
            value: item.value,
            percent: item.percent,
            itemStyle: {
              color: item.type === '参议院' ? senateDeptColor : houseDeptColor

            }
          }
        })
      }


    ]
  }
  return option
}

export default getDoublePieChart;