<template>
  <div class="flex direction-column full group-monitoring-view">
    <div class="p-l-base p-r-base p-t-medium-base fill-blank">
      <base-form size="small" :label-width="'60px'" :disabled="loading" :model="model" :items="items">
        <template #form-item-button-group>
          <el-button :loading="loading" type="primary" @click="onSearch">刷新</el-button>
        </template>
      </base-form>
    </div>
    <div class="flex-1 p-base">
      <div class="radius-base p-l-base p-r-base p-t-mini fill-blank p-b-mini">
        <base-table border stripe size="small" :columns="columns" :data="tableData">
          <template #column-leader="{ row }">
            <div style="text-align: left; overflow: hidden; white-space: nowrap; text-overflow: ellipsis">
              <span
                :style="{
                  backgroundColor: row.online ? '#00B42A' : '#ddd',
                  display: 'inline-block',
                  width: '10px',
                  height: '10px',
                  marginRight: '4px',
                  borderRadius: '2px',
                }"
              ></span>
              <span>{{ row.markingGroupLeader }}</span>
            </div>
          </template>
        </base-table>
        <el-pagination
          v-bind="pagination"
          v-model:current-page="currentPage"
          background
          right
          layout="total,pager"
        ></el-pagination>
      </div>

      <div class="radius-base m-t-base p-l-base p-r-base p-t-mini fill-blank p-b-mini">
        <div class="chart-wrap">
          <vue-echarts :option="chartOptions" autoresize></vue-echarts>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="tsx" name="AnalysisGroupMonitoring">
/** 小组监控 */
import { computed, ref } from 'vue'
import { useRouter } from 'vue-router'
import { ElButton, ElPagination } from 'element-plus'
import BaseForm from '@/components/element/BaseForm.vue'
import BaseTable from '@/components/element/BaseTable.vue'
import useFetch from '@/hooks/useFetch'
import useVW from '@/hooks/useVW'
import useFormFilter from './hooks/useFormFilter'
import { reactive } from 'vue'
import VueEcharts from 'vue-echarts'
import type { EpTableColumn } from 'global-type'
import type { ExtractApiResponse } from '@/api/api'
const jumpParams = reactive<any>({
  subjectCode: '',
  questionMainNumber: void 0,
})
const { push } = useRouter()

const { model, formModel, items, onOptionInit } = useFormFilter()

const { loading, fetch: getGroupMonitor, result } = useFetch('getGroupMonitor')

const columns: any = [
  {
    label: '组长',
    prop: 'markingGroupLeader',
    width: 150,
    fixed: 'left',
    slotName: 'leader',
    align: 'left',
  },
  {
    label: '已浏览试卷总数',
    prop: 'totalCount',
    minWidth: 138,
    sortable: true,
    formatter(row: any) {
      return (
        <ElButton type="primary" link onClick={() => viewMonitoringDetail(row, 'VIEW')}>
          {row.totalCount}
        </ElButton>
      )
    },
  },
  {
    label: '已给分试卷总数',
    prop: 'totalReScoreCount',
    minWidth: 138,
    sortable: true,
    formatter(row: any) {
      return (
        <ElButton type="primary" link onClick={() => viewMonitoringDetail(row, 'MARK')}>
          {row.totalReScoreCount}
        </ElButton>
      )
    },
  },
  { label: '已浏览系统抽查卷数', prop: 'sysCheckCount', minWidth: 160, sortable: true },
  { label: '已给分系统抽查卷数', prop: 'sysCheckReScoreCount', minWidth: 160, sortable: true },
  { label: '打回量', prop: 'rejectCount', minWidth: 85, sortable: true },
  { label: '主动抽查次数', prop: 'initiativeCheckCount', minWidth: 120, sortable: true },
  { label: '主动抽查给分次数', prop: 'initiativeCheckReScoreCount', minWidth: 150, sortable: true },

  { label: '已浏览问题卷数', prop: 'problemCount', minWidth: 138, sortable: true },
  { label: '已给分问题卷数', prop: 'problemReScoreCount', minWidth: 138, sortable: true },
  { label: '已浏览自定义抽查卷数', prop: 'customCheckCount', minWidth: 178, sortable: true },
  { label: '已给分自定义抽查卷数', prop: 'customCheckReScoreCount', minWidth: 178, sortable: true },
]

const pagination = computed(() => ({
  layout: 'prev,pager,next',
  pageCount: Math.ceil((result.value?.length || 0) / 10),
  pageSize: 10,
  total: result.value?.length || 0,
}))
const currentPage = ref(1)
const tableData = computed(() => {
  return (result.value || []).slice((currentPage.value - 1) * 10, (currentPage.value - 1) * 10 + 10)
})
/** 刷新按钮 */
function onSearch() {
  let markingGroupNumbers: any = formModel.value.markingGroupNumbers
  if (
    !markingGroupNumbers ||
    (Array.isArray(markingGroupNumbers) && markingGroupNumbers.length !== markingGroupNumbers.filter((v) => !!v).length)
  ) {
    markingGroupNumbers = []
  }
  getGroupMonitor({ ...formModel.value, markingGroupNumbers }).then(() => {
    jumpParams.subjectCode = formModel.value.subjectCode
    jumpParams.questionMainNumber = formModel.value.questionMainNumber
  })
}

/** 查看抽查详情 */

function viewMonitoringDetail(
  row: ExtractArrayValue<ExtractApiResponse<'getGroupMonitor'>>,
  operateType: 'VIEW' | 'MARK'
) {
  push({
    name: 'AnalysisGroupDetail',
    query: {
      operateType,
      headerId: row.markingGroupLeaderId,
      source: '组长监控',
      subjectCode: jumpParams.subjectCode,
      questionMainNumber: jumpParams.questionMainNumber,
    },
  })
}

onOptionInit(onSearch)

const chartOptions = computed(() => {
  const xData = result.value?.map((item) => item.markingGroupLeader) || []
  // const radius = xData.length <= 20 ? 10 : 8
  return {
    grid: {
      top: 50,
      bottom: 15,
      left: 30,
      right: 30,
      containLabel: true,
    },
    legend: {
      top: 10,
      itemWidth: 14,
      data: ['已浏览', '已给分'],
    },
    tooltip: {
      trigger: 'item',
      triggerOn: 'mousemove',
    },
    xAxis: {
      axisLine: { show: false },
      axisTick: { show: false },
      splitLine: { show: false },
      axisLabel: {
        rotate: 30,
        // interval: 0,
      },
      data: xData,
    },
    yAxis: {
      axisTick: { show: false },
      type: 'value',
    },
    // dataZoom: [
    //   {
    //     show: xData.length > 20,
    //     realtime: true,
    //     height: 20,
    //     bottom: 10,
    //     start: 0,
    //     end: 2000 / xData.length,
    //   },
    // ],
    dataZoom: [
      {
        show: xData.length > 20,
        realtime: true,
        height: 20,
        bottom: 10,
        start: 0,
        end: 2000 / xData.length,
        brushSelect: false,
      },
    ],
    series: [
      {
        name: '已浏览',
        type: 'bar',
        itemStyle: {
          color: '#0064FF',
          // borderRadius: [radius, radius, 0, 0],
        },
        data: result.value?.map((item) => item.totalCount) || [],
        label: {
          show: true,
          color: '#444',
          fontSize: 10,
          position: 'top',
          formatter({ value }: { value: number }) {
            return value > 0 ? `${value}` : ''
          },
        },
        barWidth: xData.length <= 20 ? '20' : '16',
        barCategoryGap: '50%',
        barGap: '0%',
      },
      {
        name: '已给分',
        type: 'bar',
        itemStyle: {
          color: '#3AD500',
          // borderRadius: [radius, radius, 0, 0],
        },
        data: result.value?.map((item) => item.totalReScoreCount) || [],
        label: {
          show: true,
          color: '#444',
          fontSize: 10,
          position: 'top',
          formatter({ value }: { value: number }) {
            return value > 0 ? `${value}` : ''
          },
        },
        barWidth: xData.length <= 20 ? '20' : '16',
        barCategoryGap: '50%',
        barGap: '0%',
      },
    ],
  }
})
</script>

<style scoped lang="scss">
.group-monitoring-view {
  .chart-wrap {
    height: 300px;
  }
}
</style>
