<template>
  <BodyPanlHeader>
    <div class="project-detail-body">
      <a-radio-group v-model:value="type">
        <a-badge :count="Object.values(totals).reduce((t, c) => t + c, 0)">
          <a-radio-button value="all">{{ $t('sys.all') }}</a-radio-button>
        </a-badge>
        <a-badge
          v-for="(option, key) in types"
          :key="key"
          :count="totals[option]"
        >
          <a-radio-button :key="option" :value="option">
            {{ TaggingStatusDesc[option] }}
          </a-radio-button>
        </a-badge>
      </a-radio-group>
    </div>
    <div>
      <a-input-search
        v-model:value="filterName"
        :placeholder="$t('tagging.filterNamePlace')"
        style="width: 280px"
        @search="updateMaterials"
      />
    </div>
  </BodyPanlHeader>

  <BodyPanlBody>
    <a-table
      :scroll="{ x: '100%', y: 350 }"
      :columns="materialColumns"
      :data-source="materials"
      :pagination="pagination"
    >
      <template #bodyCell="{ column, record }">
        <template v-if="column.key === 'action'">
          <div class="table-actions">
            <a
              :href="`smart-viewer.html?projectId=${record.projectId}&lang=${lang}&m=${record.num}`"
              target="_blank"
              >{{ $t('sys.query') }}</a
            >
          </div>
        </template>
      </template>
    </a-table>
  </BodyPanlBody>
</template>

<script lang="ts" setup>
import {
  computed,
  onActivated,
  onDeactivated,
  reactive,
  ref,
  watch,
  watchEffect
} from 'vue'
import { BodyPanlBody, BodyPanlHeader } from '@/layout/panl'
import { useRealtime } from '@/hook'
import { router } from '@/router'
import { taggingColumns as baseColumns } from './columns'
import type { FetchTaggingsProps } from '@/api'
import {
  fetchTaggings,
  fetchTaggingsTotal,
  TaggingStatus,
  TaggingStatusDesc
} from '@/api'
import { lang, ui18n } from '@/lang'

const materialColumns = [
  ...baseColumns,
  {
    title: ui18n.t('sys.oper'),
    dataIndex: 'action',
    key: 'action'
  }
]

const types = [
  TaggingStatus.pending,
  TaggingStatus.progress,
  TaggingStatus.unsolved,
  TaggingStatus.solved
]
const type = ref<TaggingStatus | 'all'>('all')
const filterName = ref('')
const projectId = computed(() => Number(router.currentRoute.value.params.id))
const pagination = reactive({
  current: 1,
  total: 0,
  pageSize: 10,
  onChange: (current: number) => {
    pagination.current = current
    updateMaterials()
  }
})
watch(filterName, () => (pagination.current = 1), { flush: 'sync' })

const totals = ref({
  [TaggingStatus.pending]: 0,
  [TaggingStatus.progress]: 0,
  [TaggingStatus.unsolved]: 0,
  [TaggingStatus.solved]: 0
})
watch(projectId, () => {
  totals.value = {
    [TaggingStatus.pending]: 0,
    [TaggingStatus.progress]: 0,
    [TaggingStatus.unsolved]: 0,
    [TaggingStatus.solved]: 0
  }
})

onDeactivated(() => {
  filterName.value = ''
})

let interval: number
onActivated(() => {
  interval = setInterval(async () => {
    totals.value = await fetchTaggingsTotal(projectId.value)
  }, 1000)
})
onDeactivated(() => {
  clearInterval(interval)
})

const [materials, updateMaterials] = useRealtime(async () => {
  const params: FetchTaggingsProps = {
    markingTitle: filterName.value,
    projectId: projectId.value,
    pageNum: pagination.current,
    pageSize: pagination.pageSize
  }
  if (!params.projectId) {
    return
  }
  if (type.value !== 'all') {
    params.markingStatus = type.value
  }
  const result = await fetchTaggings(params)
  pagination.total = result.total
  if (type.value !== 'all') {
    totals.value[type.value] = result.total
  }
  return result.list
}, [])

watch(() => type.value + filterName.value, updateMaterials)
</script>

<style lang="scss">
.project-detail-body .ant-badge:first-child .ant-radio-button-wrapper {
  margin-left: -1px;
}

.project-detail-body
  .ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled) {
  z-index: auto;
  border-left: 1px solid #2997ff !important;
  margin-left: -1px;
}
</style>
