{{extend genshinLayout}}

{{block 'css'}}
<link rel="stylesheet" type="text/css" href="{{_res_path}}html/ledger/ledger-count-sr.css"/>
<link rel="preload" href="{{_res_path}}script/g2plot.min.js" as="script"/>
{{/block}}

{{block 'main'}}

<div class="head_box">
  <div class="id_text">ID: {{uid}}</div>
  <h2 class="day_text">{{yearText}}星琼统计</h2>
  <img class="genshin_logo" src="{{_res_path}}StarRail/img/other/logo.png"/>
</div>
<div class="data_box">
  <div class="tab_lable">数据总览</div>
  <div class="data_line">
    <div class="data_line_item">
      <div class="num">{{allPrimogemsShow}}</div>
      <div class="lable">总星琼</div>
    </div>
    <div class="data_line_item">
      <div class="num">{{allGacha}}抽</div>
      <div class="lable">总抽数</div>
    </div>
    <div class="data_line_item">
      <div class="num">{{maxPrimogems.month}}月</div>
      <div class="lable">星琼最多</div>
    </div>
    <div class="data_line_item">
      <div class="num">{{maxPrimogems.value}}</div>
      <div class="lable">{{maxPrimogems.month}}月星琼</div>
    </div>
  </div>
  <div class="data_line">
    <div class="data_line_item">
      <div class="num">{{allMora}}</div>
      <div class="lable">总专&通票</div>
    </div>
    <div class="data_line_item">
      <div class="num">{{maxMora.month}}月</div>
      <div class="lable">专&通票最多</div>
    </div>
    <div class="data_line_item">
      {{if group_by.length>0 }}
      <div class="num">{{group_by[0].num}}</div>
      <div class="lable">{{group_by[0].action}}</div>
      {{/if}}
    </div>
    <div class="data_line_item">
      {{if group_by.length>0 }}
      <div class="num">{{group_by[1].num}}</div>
      <div class="lable">{{group_by[1].action}}</div>
      {{/if}}
    </div>
  </div>
</div>
<div class="data_box">
  <div class="tab_lable">月份统计</div>
  <div id="chartContainer"></div>
</div>
<div class="data_box">
  <div class="tab_lable">详细统计</div>
  <div id="chartContainer2"></div>
</div>
{{if hasMore }}
<div class="hasMore">*该数据只显示最近12个月</div>
{{/if}}

<script type="text/javascript" src="{{_res_path}}script/g2plot.min.js"></script>
<script>
  const { Column, Pie } = G2Plot

  const primogemsMonth = JSON.parse(`{{@ primogemsMonth}}`)
  const primogemsMax = `{{maxPrimogems.value}}` * 1

  const stackedColumnPlot = new Column('chartContainer', {
    data: primogemsMonth,
    isGroup: true,
    xField: 'month',
    yField: 'value',
    seriesField: 'name',
    animation: false,
    renderer: 'svg',
    padding: [40, 10, 30, 52],
    label: {
      position: 'top',
      style: {
        fontFamily: 'tttgbnumber'
      },
      offsetY: 10
    },
    xAxis: {
      label: {
        autoHide: false,
        formatter: (v) => {
          return v + '月'
        },
        style: {
          fontFamily: 'tttgbnumber',
          fontSize: 14
        }
      }
    },
    yAxis: {
      label: {
        style: {
          fontFamily: 'tttgbnumber',
          fontSize: 14
        }
      }
    }
  })
  stackedColumnPlot.render()

  const countdata = JSON.parse(`{{@ pieData}}`)
  const piePlot = new Pie('chartContainer2', {
    renderer: 'svg',
    animation: false,
    data: countdata,
    appendPadding: 10,
    angleField: 'num',
    colorField: 'action',
    radius: 1,
    innerRadius: 0.7,
    // appendPadding: 20,
    color: JSON.parse(`{{@ color}}`),
    meta: {
      // num: {
      //   formatter: (v) => `${v}`,
      // },
    },
    label: {
      type: 'inner',
      offset: '-50%',
      autoRotate: false,
      style: {
        textAlign: 'center',
        fontFamily: 'tttgbnumber'
      },
      formatter: ({ percent }) => {
        percent = (percent * 100).toFixed(0)
        return percent >= 2 ? `${percent}%` : ''
      }
    },
    statistic: {
      title: {
        offsetY: -8,
        content: '总计'
      },
      content: {
        style: {
          fontFamily: 'tttgbnumber'
        }
      }
    },
    legend: {
      offsetX: -56,
      itemValue: {
        formatter: (text, item) => {
          const items = countdata.filter((d) => d.action === item.value)[0]
          return items.num
        },
        style: {
          opacity: 0.65,
          fontFamily: 'tttgbnumber',
          'fontSize': 16
        }
      },
      itemName: {
        style: {
          'fontSize': 16
        }
      }
    }
  })
  piePlot.render()
</script>

{{/block}}