<script setup lang="ts">
import { userTaskService } from '@/api/service/user-task'
import type { MjGridEventProps, MjGridProps } from '@/components/mj/mj-table'
import num from '@/utils/num'
import {
  user_task_status_map,
  getUserStatusClass,
  user_task_status_finished,
  topicTypeCodeMap,
} from '@/page/student-mgr/set-task'
import { getProgressClass, percentWidth } from '@/utils'
import type { VxeGridPropTypes } from 'vxe-table'
import router from '@/router'

const props = defineProps<{
  userId?: any
  taskId?: any
  status?: any
}>()

defineOptions({ name: 'UserTaskList' })

let columns = [
  {
    type: 'seq',
    fixed: 'left',
    title: '序号',
  },
] as VxeGridPropTypes.Columns
if (props.taskId) {
  columns.push({
    field: 'userName',
    title: '姓名',
  })
} else {
  columns.push({
    title: '类型',
    field: 'topicTypeCode',
    formatter({ cellValue }) {
      return topicTypeCodeMap[cellValue]
    },
  })
}
columns = columns.concat([
  {
    title: '状态',
    slots: {
      default: 'status',
    },
  },
  {
    title: '进度',
    slots: {
      default: 'progress',
    },
  },
  {
    field: 'completeTime',
    title: '完成时间',
  },
  {
    title: '名次',
    field: 'rankNum',
    formatter({ cellValue }) {
      return cellValue ? `第${cellValue}名` : ''
    },
  },
  {
    title: '乐贝',
    slots: {
      default: 'coin',
    },
  },
])
if (!props.taskId) {
  columns.push({
    field: 'endTime',
    title: '截止时间',
  })
}

const gridRef = ref()
const grid = {
  columns,
  beforeLoadData(params) {
    params = params || {}
    if (props.taskId) {
      params.taskId = props.taskId
    } else if (props.userId) {
      params.userId = props.userId
    } else {
      params.selfTask = 1
    }
    if (props.status) {
      params.status = props.status
    }
    return params
  },
} as MjGridProps

watch(
  () => props.status,
  () => {
    gridRef.value.reload()
  },
)

function getProgress(task: any) {
  const amount = Math.min(task.completeAmount, task.taskAmount)
  const s = `${amount}/${task.taskAmount}`
  const v = amount / task.taskAmount
  const cls = getProgressClass(v)
  if (!v) {
    return `<span class="${cls}">${s}</span>`
  }
  return `<span class="${cls}">${s}（${num.toPercent(v)}）</span>`
}

const gridEvents = {
  cellClick(evt: any) {
    if (props.taskId) return
    router.push({
      path: '/student-mgr/task-detail',
      query: {
        id: evt.row.taskId,
      },
    })
  },
} as MjGridEventProps
</script>

<template>
  <div class="user-task-list">
    <mj-table
      ref="gridRef"
      :service="userTaskService"
      :grid="grid"
      :grid-events="gridEvents"
      hide-remove
      hide-search
      hide-toolbar
    >
      <template #status="{ row }">
        <span :class="getUserStatusClass(row.status)">{{ user_task_status_map[row.status] }}</span>
      </template>
      <template #coin="{ row }">
        <span v-if="row.reward" class="progress-100">+{{ row.reward }}</span>
        <span v-if="row.punish" class="progress-1">-{{ row.punish }}</span>
        <span v-if="row.status === user_task_status_finished && !row.rewardFlag" class="progress-0"
          >暂未领取</span
        ><span v-if="row.rewardFlag && !row.reward" class="progress-0">0</span>
      </template>
      <template #progress="{ row }">
        <div v-html="getProgress(row)"></div>
      </template>
    </mj-table>
  </div>
</template>

<style lang="scss" scoped>
.user-task-list {
}
</style>
