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

const balanceChart = ref<HTMLElement>()
const quotaChart = ref<HTMLElement>()
const charts: ECharts[] = []

function createChart(el: HTMLElement | undefined, option: EChartsOption) {
  if (!el) return
  const chart = echarts.init(el)
  chart.setOption(option)
  charts.push(chart)
}

function resizeCharts() {
  charts.forEach((chart) => chart.resize())
}

function ringOption(
  centerText: string,
  data: Array<{ value: number; name: string; itemStyle?: object }>,
): EChartsOption {
  return {
    color: ['#1267f2', '#e7f0ff'],
    animationDuration: 900,
    title: {
      text: centerText,
      left: 'center',
      top: '42%',
      textStyle: { color: '#05070b', fontSize: 30, fontWeight: 800 },
    },
    series: [
      {
        type: 'pie',
        radius: ['57%', '77%'],
        center: ['50%', '51%'],
        startAngle: 90,
        avoidLabelOverlap: false,
        label: { show: false },
        labelLine: { show: false },
        itemStyle: { borderColor: '#fff', borderWidth: 4 },
        data,
      },
    ],
  }
}

onMounted(async () => {
  await nextTick()
  createChart(
    balanceChart.value,
    ringOption('55%', [
      { value: 55, name: '账户余额', itemStyle: { color: '#1267f2' } },
      { value: 45, name: '其他', itemStyle: { color: '#e7f0ff' } },
    ]),
  )

  createChart(quotaChart.value, {
      color: ['#1267f2', '#0b55d9', '#57aaf7', '#bfeeff'],
      series: [
        {
          type: 'pie',
          radius: '75%',
          center: ['50%', '51%'],
          label: { show: false },
          labelLine: { show: false },
          itemStyle: { borderColor: '#fff', borderWidth: 2 },
          data: [
            { value: 36.6, name: '国库集中支付' },
            { value: 39.8, name: '财政资金专户' },
            { value: 23.6, name: '预算单位零余额' },
            { value: 18, name: '其他客户' },
          ],
        },
      ],
    })

  window.addEventListener('resize', resizeCharts)
})

onUnmounted(() => {
  window.removeEventListener('resize', resizeCharts)
  charts.forEach((chart) => chart.dispose())
})
</script>

<template>
  <article class="board account-board">
    <div class="board-head">
      <h2><span></span>人行账户情况</h2>
      <div class="actions">
        <button>本月数据<el-icon><ArrowDown /></el-icon></button>
        <el-icon><RefreshRight /></el-icon>
        <el-icon><Setting /></el-icon>
        <el-icon><Minus /></el-icon>
      </div>
    </div>
    <div class="account-layout">
      <div class="metric-box balance-box">
        <h3>账户余额</h3>
        <div ref="balanceChart" class="ring"></div>
        <div class="balance-copy">
          <p><b class="dot blue"></b>账户余额(亿)</p>
          <strong>2.02.33</strong>
          <p><b class="dot sky"></b>账户数量(个)</p>
          <strong>23</strong>
          <small>较上月 +8%</small>
        </div>
      </div>
      <div class="metric-box quota-box">
        <h3>可用额度</h3>
        <div ref="quotaChart" class="pie"></div>
        <ul class="quota-list">
          <li><b></b>国库集中支付</li>
          <li><b></b>财政资金专户</li>
          <li><b></b>预算单位零余额</li>
          <li><b></b>其他客户</li>
          <li><b></b>保证金专户</li>
          <li><b></b>待清算资金</li>
        </ul>
        <div class="pie-foot">
          <span><b></b>16.48亿&nbsp;&nbsp;36.6%</span>
          <span><b></b>18.63亿&nbsp;&nbsp;39.8%</span>
          <span><b></b>11.57亿&nbsp;&nbsp;23.6%</span>
        </div>
      </div>
      <div class="progress-box">
        <div>
          <p>账户总数(个)</p>
          <strong>63</strong>
        </div>
        <b>6.29% <em>↑</em></b>
        <div class="progress-line"><i></i><span>63</span></div>
        <div class="scale-row">
          <span>0</span><span>10</span><span>20</span><span>30</span><span>40</span><span>50</span>
          <span>60</span><span>70</span><span>80</span><span>90</span><span>100</span>
        </div>
      </div>
    </div>
  </article>
</template>

<style scoped>
.account-board {
  --blue: #1267f2;
  --line: #dce4ef;
  min-width: 0;
  height: clamp(520px, 58vh, 640px);
  min-height: 520px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  background: rgba(255, 255, 255, .96);
  border-radius: 10px;
  box-shadow: 0 10px 22px rgba(34, 67, 123, .16);
}

.board-head {
  height: 38px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}

.board-head h2 {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 20px;
  line-height: 1.1;
  font-weight: 900;
}

.board-head h2 span {
  width: 13px;
  height: 14px;
  border-radius: 4px;
  background: var(--blue);
  box-shadow: inset 0 0 4px rgba(255, 255, 255, .35);
}

.actions {
  display: flex;
  align-items: center;
  gap: 16px;
  color: #6c7480;
  font-size: 15px;
}

.actions button {
  height: 26px;
  display: flex;
  align-items: center;
  gap: 3px;
  border: 0;
  background: transparent;
  color: #6c7480;
  font-size: 13px;
  font-weight: 600;
}

.account-layout {
  display: grid;
  flex: 1;
  margin-top: 8px;
  gap: 12px;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: minmax(0, 1fr) auto;
}

.metric-box {
  min-width: 0;
  position: relative;
  min-height: 0;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
}

.metric-box h3 {
  position: absolute;
  left: 18px;
  top: 18px;
  z-index: 1;
  font-size: 18px;
  font-weight: 900;
}

.ring,
.pie {
  position: absolute;
  left: 38%;
  top: 53%;
  width: min(58%, 340px);
  height: min(72%, 340px);
  transform: translate(-50%, -50%);
}

.pie {
  left: 36%;
  width: min(60%, 360px);
  height: min(74%, 360px);
}

.balance-copy {
  position: absolute;
  right: 8%;
  top: 50%;
  width: 132px;
  transform: translateY(-42%);
}

.balance-copy p,
.quota-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #56606d;
  font-size: 15px;
  white-space: nowrap;
}

.balance-copy strong {
  display: block;
  margin: 14px 0 22px 20px;
  font-size: 32px;
  font-weight: 800;
}

.balance-copy small {
  display: block;
  margin-left: 21px;
  color: #7b828c;
  font-size: 14px;
}

.dot,
.quota-list b,
.pie-foot b {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--blue);
}

.sky {
  background: #58aef7 !important;
}

.quota-list {
  position: absolute;
  right: 8%;
  top: 50%;
  transform: translateY(-55%);
  display: grid;
  gap: 18px;
  list-style: none;
}

.quota-list b:nth-child(n) {
  background: #399df7;
}

.pie-foot {
  position: absolute;
  left: 40px;
  right: 30px;
  bottom: 28px;
  display: flex;
  justify-content: space-between;
  font-size: 14px;
}

.pie-foot span {
  display: flex;
  align-items: center;
  gap: 8px;
}

.progress-box {
  grid-column: 1 / -1;
  height: 124px;
  position: relative;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  padding: 16px 19px;
}

.progress-box p {
  color: #4d5868;
  font-size: 14px;
}

.progress-box strong {
  display: block;
  margin-top: 10px;
  color: var(--blue);
  font-size: 30px;
  font-weight: 800;
}

.progress-box > b {
  position: absolute;
  left: 143px;
  top: 52px;
  font-size: 36px;
  line-height: 1;
}

em {
  color: #10b990;
  font-style: normal;
}

.progress-line {
  position: absolute;
  left: 222px;
  right: 21px;
  top: 41px;
  height: 44px;
  border-top: 6px solid #e4e8ee;
}

.progress-line i {
  display: block;
  width: 57%;
  height: 6px;
  margin-top: -6px;
  background: var(--blue);
}

.progress-line span {
  position: absolute;
  left: 55%;
  top: -17px;
  min-width: 52px;
  height: 28px;
  padding: 5px 14px;
  transform: translateX(-50%);
  border-radius: 14px;
  background: var(--blue);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  text-align: center;
}

.scale-row {
  position: absolute;
  left: 222px;
  right: 16px;
  bottom: 14px;
  display: flex;
  justify-content: space-between;
  color: #6b7280;
  font-size: 14px;
}

@media (max-width: 1200px) {
  .account-board {
    height: auto;
    min-height: 0;
  }

  .account-layout {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
  }

  .metric-box {
    height: auto;
    min-height: 230px;
  }
}

@media (max-width: 720px) {
  .actions {
    gap: 10px;
  }

  .board-head {
    height: auto;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 12px;
  }

  .account-layout {
    gap: 10px;
  }

  .balance-copy,
  .quota-list {
    right: 16px;
  }

  .ring,
  .pie {
    left: 32%;
    width: min(46%, 220px);
    height: min(66%, 220px);
  }

  .balance-copy,
  .quota-list {
    top: 54%;
    width: 128px;
  }

  .balance-copy strong {
    margin: 10px 0 16px 20px;
    font-size: 28px;
  }

  .quota-list {
    gap: 10px;
  }

  .balance-copy p,
  .quota-list li {
    gap: 8px;
    font-size: 14px;
  }

  .pie-foot {
    left: 40px;
    right: 150px;
    bottom: 22px;
    flex-wrap: wrap;
    gap: 8px 18px;
  }

  .progress-box {
    height: 146px;
  }

  .progress-box > b {
    left: 122px;
    top: 55px;
    font-size: 30px;
  }

  .progress-line,
  .scale-row {
    left: 222px;
  }
}
</style>
