<script setup lang="ts">
import { $font_color } from '@/styles/variate'
import Chart from 'chart.js/auto'

const props = defineProps<{
  data: anyObj[]
}>()

const chartRef: Ref<HTMLCanvasElement | null> = ref(null)
const chart: Ref<Chart | null> = shallowRef(null)

const colors = [
  '#FB9FD5',
  '#D59FFB',
  '#9FA7FB',
  '#85DEFB',
  '#85FBDE',
  '#82F58B',
  '#FB8F85',
  '#F5EB82',
  '#FBCA85',
]

const invisibleSubjectIds = ref([] as number[])

function handleToggleLegend(item: anyObj) {
  const ids = invisibleSubjectIds.value
  const index = ids.indexOf(item.subjectId)
  if (index === -1) {
    ids.push(item.subjectId)
  } else {
    ids.splice(index, 1)
  }

  chart.value!.data.datasets[0].data = props.data
    .filter((item: anyObj) => !ids.includes(item.subjectId))
    .map((item: anyObj) => item.number)
  chart.value!.data.datasets[0].backgroundColor = props.data
    .map((item: anyObj, index: number) => ({ item, color: colors[index] }))
    .filter(({ item }) => !ids.includes(item.subjectId))
    .map(({ color }) => color)
  chart.value!.data.labels = props.data
    .filter((item: anyObj) => !ids.includes(item.subjectId))
    .map((item: anyObj) => item.subjectName)
  chart.value!.update('none')
}

onMounted(() => {
  if (chartRef.value !== null) {
    chart.value = new Chart(chartRef.value, {
      type: 'bar',
      data: {
        labels: props.data.map((item: anyObj) => item.subjectName),
        datasets: [
          {
            data: props.data.map((item: anyObj) => item.number),
            backgroundColor: colors,
            borderColor: '#FFFFFF',
            borderWidth: 1,
          },
        ],
      },
      options: {
        maxBarThickness: 128,
        scales: {
          y: {
            beginAtZero: true,
            border: {
              dash: ({ index }) => {
                if (index === 0) {
                  return []
                }
                return [8, 10]
              },
              color: 'rgba(138, 148, 253, 0.25)',
            },
            ticks: {
              padding: 16,
              color: '#666',
              font: {
                size: 28,
                lineHeight: '42px',
              },
            },
            grid: {
              display: true,
              lineWidth: 2,
              color: 'rgba(138, 148, 253, 0.25)',
              drawTicks: false,
            },
          },
          x: {
            border: {
              width: 2,
              color: 'rgba(138, 148, 253, 0.65)',
            },
            ticks: {
              padding: 16,
              color: '#666',
              font: {
                size: 28,
                lineHeight: '42px',
              },
            },
            grid: {
              display: false,
              drawTicks: false,
            },
          },
        },
        plugins: {
          tooltip: {
            enabled: false,
          },
          legend: {
            display: false,
          },
        },
        events: [],
        animation: {
          onComplete() {
            const chartInstance = chart.value
            if (!chartInstance) {
              return
            }
            const ctx = chartInstance.ctx

            ctx.textAlign = 'center'
            ctx.font = '32px Arial'
            ctx.fillStyle = $font_color

            this.data.datasets.forEach((dataset, i) => {
              const meta = chartInstance.getDatasetMeta(i)
              meta.data.forEach((bar, index) => {
                const data = dataset.data[index]
                ctx.fillText(String(data), bar.x, bar.y - 12)
              })
            })
          },
        },
      },
    })
  }
})
</script>

<template>
  <h3>
    <LineFont text="各学科观看视频统计" size="40" />
  </h3>
  <div class="chart-container">
    <ul class="chart-legend">
      <li
        v-for="(item, index) in props.data"
        :key="item.subjectId"
        :class="{ invisible: invisibleSubjectIds.includes(item.subjectId) }"
        :style="{ '--color': colors[index] }"
        @click="handleToggleLegend(item)"
      >
        {{ item.subjectName }}
      </li>
    </ul>
    <canvas ref="chartRef"></canvas>
  </div>
</template>

<style scoped lang="scss">
.chart-legend {
  text-align: center;
  color: #666;
  font-size: 2.33vh;
  line-height: 3.5vh;
  margin-bottom: 2vh;

  > li {
    display: inline-flex;
    align-items: center;

    + li {
      margin-left: 32px;
    }

    &.invisible {
      color: #666;
      text-decoration: line-through;

      &:before {
        background: #999;
      }
    }

    &:before {
      content: '';
      width: 28px;
      height: 0.5vh;
      background-color: var(--color);
      margin-right: 10px;
    }
  }
}

.chart-container {
  padding: 0 84px;
  margin-top: 4vh;
}

h3 {
  text-align: center;
  margin-top: 6vh;
  font-weight: normal;
}

.title-outline {
  line-height: normal;
}
</style>
