<template>
  <section class="px-64 h-b100 overflow-y-auto pb-20 min-w-800">
    <section class="mt-36">
      <div class="fs-18">余量统计</div>
      <div class="flex gap-20 mt-10 flex-wrap">
        <div class="child card1 rounded-16 p-20">
          <div class="">积分余量</div>
          <div class="h-200" id="chart1"></div>
          <div class="flex-between-center">
            <div class="">
              <span class="text-888">积分余量</span>
              <div class="flex items-end mt-16">
                <span class="fs-28 fw-bold line-h20">879</span>
                <span class="fs-12 ml-2">个</span>
              </div>
            </div>
            <div class="">
              <span class="text-888">积分总量</span>
              <div class="flex items-end mt-16">
                <span class="fs-28 fw-bold line-h20">10000</span>
                <span class="fs-12 ml-2">个</span>
              </div>
            </div>
          </div>
        </div>
        <div class="child card1 rounded-16 p-20">
          <div class="">子账号余量</div>
          <div class="h-200" id="chart2"></div>
          <div class="flex-between-center">
            <div class="">
              <span class="text-888">子账号余量</span>
              <div class="flex items-end mt-16">
                <span class="fs-28 fw-bold line-h20">30</span>
                <span class="fs-12 ml-2">个</span>
              </div>
            </div>
            <div class="">
              <span class="text-888">子账号总量</span>
              <div class="flex items-end mt-16">
                <span class="fs-28 fw-bold line-h20">30</span>
                <span class="fs-12 ml-2">个</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
    <section class="mt-36">
      <div class="fs-18">资源明细</div>
      <div class="flex gap-20 mt-10 flex-wrap">
        <div class="child card2 rounded-16 p-20">
          <div class="flex-between-center">
            <span>权益套餐-基础版</span>
            <span class="tag rounded-4 px-6 py-2">使用中</span>
          </div>
          <div class="text-666 fs-12">
            <div class="flex-between-center mt-16">
              <span>积分余量（个）</span>
              <span class="text-333 fw-bold">977 / 10000</span>
            </div>
            <div class="flex-between-center mt-16">
              <span>子账号余量（个）</span>
              <span class="text-333 fw-bold">30 / 30</span>
            </div>
          </div>
          <div class="boo mt-20 pt-12">
            <span class="text-999 fs-12">2026-03-22 10:22 ~ 2026-05-22 23:59</span>
          </div>
        </div>
      </div>
    </section>
    <section class="mt-36">
      <div class="fs-18">积分消耗趋势</div>
      <div class="gap-20 mt-10">
        <div class="child card2 rounded-16 p-20">
          <div class="flex-between-center">
            <span>消耗积分统计 (个)</span>
            <div class="flex-align-center rounded-4 bbb">
              <div class="px-10 py-4 cursor-pointer" @click="refreshCharts">
                <svg t="1779783997777" class="icon" viewBox="0 0 1024 1024" version="1.1"
                  xmlns="http://www.w3.org/2000/svg" p-id="28452" width="14" height="14">
                  <path
                    d="M524.288 25.173333l2.816 2.389334 128 128a21.333333 21.333333 0 0 1 2.432 27.221333l-2.432 2.986667-128 128a21.333333 21.333333 0 0 1-36.138667-11.434667L490.666667 298.666667V213.973333a341.333333 341.333333 0 1 0 317.141333 170.24 42.666667 42.666667 0 0 1 73.898667-42.666666A424.874667 424.874667 0 0 1 938.666667 554.666667c0 235.648-191.018667 426.666667-426.666667 426.666666S85.333333 790.314667 85.333333 554.666667c0-228.48 179.626667-415.018667 405.333334-426.154667V42.666667a21.333333 21.333333 0 0 1 33.621333-17.493334z"
                    fill="#3f3f51" p-id="28453"></path>
                </svg>
              </div>
              <span class="text-999 fs-12 line-h10" style="margin-top: -2px;">|</span>
              <div class="px-10 py-4 cursor-pointer">
                <svg t="1779783965212" class="icon" viewBox="0 0 1030 1024" version="1.1"
                xmlns="http://www.w3.org/2000/svg" p-id="27299" width="13" height="13">
                <path
                  d="M140.8 1017.6c-38.4 0-70.4-12.8-96-38.4-25.6-25.6-38.4-57.6-38.4-96v-185.6c0-12.8 6.4-25.6 12.8-32s19.2-12.8 32-12.8 25.6 6.4 32 12.8 12.8 19.2 12.8 32v185.6c0 12.8 6.4 32 12.8 38.4 6.4 6.4 19.2 12.8 38.4 12.8h742.4c12.8 0 32-6.4 38.4-12.8 6.4-6.4 12.8-19.2 12.8-38.4v-185.6c0-12.8 6.4-25.6 12.8-32 6.4-6.4 19.2-12.8 32-12.8s25.6 6.4 32 12.8c6.4 6.4 12.8 19.2 12.8 32v185.6c0 38.4-12.8 70.4-38.4 96-25.6 25.6-57.6 38.4-96 38.4H140.8z m377.6-275.2c-12.8 0-25.6-6.4-32-12.8s-12.8-19.2-12.8-32V160s0-6.4-6.4-6.4h-6.4L313.6 313.6c-6.4 6.4-25.6 12.8-25.6 12.8-12.8 0-25.6-6.4-32-12.8-12.8-12.8-19.2-19.2-19.2-25.6 0-12.8 6.4-25.6 12.8-32L480 25.6c12.8-12.8 25.6-19.2 38.4-19.2 12.8 0 25.6 6.4 32 12.8L774.4 256c6.4 6.4 12.8 19.2 12.8 32s-6.4 25.6-12.8 32-19.2 12.8-32 12.8-19.2-12.8-25.6-19.2L563.2 153.6h-6.4s-6.4 0-6.4 6.4V704c0 12.8-6.4 25.6-12.8 32s-12.8 6.4-19.2 6.4z"
                  p-id="27300" fill="#3f3f51"></path>
              </svg>
              </div>
            </div>
          </div>
          <div class="flex gap-10 mt-10">
            <el-tree-select v-model="teamVal" :data="data1" multiple collapse-tags collapse-tags-tooltip
              :max-collapse-tags="2" :render-after-expand="false" show-checkbox style="width: 200px"
              placeholder="团队选择" />
            <el-tree-select v-model="useItemVal" :data="data2" multiple collapse-tags collapse-tags-tooltip
              :max-collapse-tags="2" :render-after-expand="false" show-checkbox style="width: 260px"
              placeholder="消耗项选择" />
            <div style="width: 350px"><el-date-picker v-model="dateVal" type="daterange" start-placeholder="开始日期"
                end-placeholder="结束日期" /></div>
          </div>
          <div class="h-300 mt-40" id="chart3"></div>
        </div>
      </div>
    </section>
  </section>
</template>

<script setup lang="ts">
import { onMounted, ref, nextTick } from 'vue'
import * as echarts from 'echarts'
import { RefreshRight } from '@element-plus/icons-vue'

const teamVal = ref(null)
const useItemVal = ref(null)
const dateVal = ref(null)
const data1 = ref([
  {
    value: 1,
    label: '默认团队'
  },
])
const data2 = ref([
  {
    value: 1,
    label: '角色生成'
  },
  {
    value: 2,
    label: '场景生成'
  },
  {
    value: 3,
    label: '道具生成'
  },
  {
    value: 4,
    label: '分镜视频生成'
  },
])

// 图表实例引用
let chart1: echarts.ECharts | null = null
let chart2: echarts.ECharts | null = null
let chart3: echarts.ECharts | null = null

// 积分余量图表配置
const chart1Option = ref({
  tooltip: {
    trigger: 'item'
  },
  color: ['#ddd', '#fac858'],
  series: [
    {
      name: '积分使用占比',
      type: 'pie',
      radius: ['50%', '70%'],
      avoidLabelOverlap: false,
      label: {
        show: false,
        position: 'center'
      },
      emphasis: {
        label: {
          show: true,
          fontSize: 40,
          fontWeight: 'bold'
        }
      },
      labelLine: {
        show: false
      },
      data: [
        { value: 9121, name: '已使用' },
        { value: 879, name: '剩余' }
      ]
    }
  ]
})

// 子账号余量图表配置
const chart2Option = ref({
  tooltip: {
    trigger: 'item'
  },
  color: ['#ddd', '#5252ff'],
  series: [
    {
      name: '子账号使用占比',
      type: 'pie',
      radius: ['50%', '70%'],
      avoidLabelOverlap: false,
      label: {
        show: false,
        position: 'center',
      },
      emphasis: {
        label: {
          show: true,
          fontSize: 40,
          fontWeight: 'bold'
        }
      },
      labelLine: {
        show: false
      },
      data: [
        { value: 0, name: '已使用' },
        { value: 30, name: '剩余' }
      ]
    }
  ]
})

const chart3Option = ref({
  grid: {
    left: '0%',    // 左侧距离，可设置为 '3%' 或具体数值如 20
    right: '0%',   // 右侧距离
    top: 20,
    bottom: 20,
    containLabel: true  // 包含坐标轴标签，避免标签被裁剪
  },
  xAxis: {
    type: 'category',
    data: ['2026-05-20', '2026-05-21', '2026-05-22', '2026-05-23', '2026-05-24', '2026-05-25', '2026-05-26'],
    axisTick: {
      show: true  // 显示刻度线（默认就是 true）
    }
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: [820, 932, 901, 934, 1290, 1330, 1320],
      type: 'line',
      smooth: true
    }
  ]
})


// 初始化图表的函数
const initCharts = () => {
  const chart1Dom = document.getElementById('chart1')
  const chart2Dom = document.getElementById('chart2')
  const chart3Dom = document.getElementById('chart3')

  if (chart1Dom) {
    chart1 = echarts.init(chart1Dom)
    chart1.setOption(chart1Option.value)
  }

  if (chart2Dom) {
    chart2 = echarts.init(chart2Dom)
    chart2.setOption(chart2Option.value)
  }
  if (chart3Dom) {
    chart3 = echarts.init(chart3Dom)
    chart3.setOption(chart3Option.value)
  }
}
// 刷新图表
const refreshCharts = () => {
  if (chart3) {
    chart3.clear() // 清空图表实例，以便重新设置数据
    teamVal.value = null
    useItemVal.value = null
    dateVal.value = null
    chart3.setOption(chart3Option.value, true) // true 表示不合并，完全替换
  }
}
// 响应窗口大小变化
const handleResize = () => {
  chart1?.resize()
  chart2?.resize()
  chart3?.resize()
}

onMounted(() => {
  // 确保 DOM 完全渲染后再初始化图表
  nextTick(() => {
    initCharts()
  })

  // 监听窗口大小变化
  window.addEventListener('resize', handleResize)
})

// 组件卸载时销毁图表实例
import { onUnmounted } from 'vue'
onUnmounted(() => {
  window.removeEventListener('resize', handleResize)
  chart1?.dispose()
  chart2?.dispose()
  chart3?.dispose()
})
</script>

<style lang="scss" scoped>
.child {
  flex: 0 0 calc(25% - 15px);
  border: 1px solid #eaebee;

  &.card1 {
    background: linear-gradient(to bottom, #f8f8fd 0%, #fff 18%, #fff);
  }

  &.card2 {
    background: #fff;

    .boo {
      border-top: 1px solid #eaebee;
    }
  }

  .tag {
    background-color: #d9f1dd;
    color: #07b44f;
  }
}

.bbb {
  border: 1px solid #eaebee;
}


/* 1600px以下：一行3个 */
@media (max-width: 1600px) {
  .child {
    flex: 0 0 calc(33.333% - 14px);
  }
}

/* 1400px以下：一行2个 */
@media (max-width: 1400px) {
  .child {
    flex: 0 0 calc(50% - 11px);
  }
}
</style>
<style lang="scss">
:root {
  --el-color-primary: #5272ff;
  /* 修改主色 */
}

.el-tree-node__content {
  padding-left: 14px !important;
  padding-top: 15px !important;
  padding-bottom: 15px !important;

  .el-tree-node__expand-icon {
    display: none;
  }
}
</style>