<script setup lang="ts">
import { taskService } from '@/api/service/task'
import studentManageApi from '@/api/studentManage'
import type { MjGridEventProps, MjGridProps } from '@/components/mj/mj-table'
import router from '@/router'
import {
  getTaskStatusClass,
  task_priority_map,
  task_status_canceled,
  task_status_finished,
  task_status_map,
  topicTypeCodeMap,
  topicTypeCodeOptions,
} from '.'
import hud from '@/utils/hud'
import obj from '@/utils/obj'
import { useStudentManageStore } from '../store'

defineOptions({ name: 'SetTask' })

const { schoolId } = storeToRefs(useStudentManageStore())

// 学校信息
const school = ref({
  schoolId: toRaw(schoolId.value),
} as any)

// 添加任务
function addTask() {
  router.push({
    path: '/student-mgr/add-task',
    query: { schoolId: school.value.schoolId },
  })
}

const gridRef = ref()
const grid = {
  columns: [
    {
      field: 'createUserName',
      title: '创建人',
    },
    {
      field: 'topicTypeCode',
      title: '类型',
      formatter({ cellValue }) {
        return topicTypeCodeMap[cellValue]
      },
    },
    {
      title: '对象',
      field: 'objTypeData',
    },
    {
      title: '状态',
      slots: {
        default: 'status',
      },
    },
    {
      title: '进度',
      formatter({ row }) {
        return `${row.completedPersonCount || 0}/${row.personCount || 0}`
      },
    },
    {
      field: 'priority',
      title: '优先级',
      formatter({ cellValue }) {
        return task_priority_map[cellValue]
      },
    },
    {
      field: 'startTime',
      title: '开始时间',
    },
    {
      field: 'endTime',
      title: '结束时间',
    },
    {
      title: '操作',
      fixed: 'right',
      slots: {
        default: 'options',
      },
    },
  ],
  beforeLoadData(params) {
    params = {
      schoolId: school.value.schoolId,
      ...(params || {}),
    }
    if (status.value !== undefined) {
      params.status = status.value
    }
    if (type.value !== undefined) {
      params.topicTypeCode = type.value
    }
    params.selfFlag = selfFlag.value ? 1 : 0
    return params
  },
} as MjGridProps

const gridEvents = {
  cellClick(evt: any) {
    detail(evt.row)
  },
} as MjGridEventProps

const statusOptions = [
  {
    label: '所有状态',
    value: undefined,
  },
  ...obj.map2options(task_status_map),
]
const status = ref(undefined)

const typeOptions = [
  {
    label: '所有类型',
    value: undefined,
  },
  ...topicTypeCodeOptions,
]
const type = ref(undefined)

const selfFlag = ref(false)

watch(
  [() => status.value, () => type.value, () => selfFlag.value, () => school.value.schoolId],
  () => {
    gridRef.value?.reload()
  },
)

function cancel(task: any) {
  const name = topicTypeCodeMap[task.topicTypeCode]
  hud.confirmLoad({
    dialog: `确定要取消这个【${hud.highlight(name)}】任务么？`,
    task: async () => {
      await taskService.cancel(task.id)
      // 刷新表格
      gridRef.value.reload()
    },
    option: '取消',
  })
}

function detail(task: any) {
  router.push({
    path: '/student-mgr/task-detail',
    query: {
      id: task.id,
    },
  })
}

function canCancel(task: any) {
  const status = Number(task.status)
  return status !== task_status_canceled && status !== task_status_finished
}
</script>

<template>
  <div class="set-task">
    <div class="top">
      <div class="left">
        <BackBar />
        <SchoolClassSelect v-model="school" hide-class />
        <Select v-model="status" :selectList="statusOptions" />
        <Select v-model="type" :selectList="typeOptions" />
        <mj-check v-model="selfFlag" class="self-flag" label="仅查询我创建的任务" />
      </div>
      <div class="status-buttons">
        <mj-button class="status-button" type="warn" @click="addTask">添加任务</mj-button>
      </div>
    </div>
    <mj-table
      ref="gridRef"
      class="task-table"
      :service="taskService"
      :grid="grid"
      :grid-events="gridEvents"
      hide-remove
      hide-search
      hide-toolbar
    >
      <template #options="{ row }">
        <div class="table-option-buttons">
          <mj-button
            v-if="canCancel(row)"
            class="table-option-button"
            thin-font
            type="danger"
            @click.stop="cancel(row)"
            >取消</mj-button
          >
        </div>
      </template>
      <template #status="{ row }">
        <span :class="getTaskStatusClass(row.status)">{{ task_status_map[row.status] }}</span>
      </template>
    </mj-table>
  </div>
</template>

<style lang="scss" scoped>
@use '../index.scss' as *;
$font_size: 2.67vh;
$heder_h: 6.17vh;

.set-task {
  @include main_bg;
  height: 100%;
  padding: $space-4_h $space-6 1vh;
  display: flex;
  flex-direction: column;

  .top {
    display: flex;
    align-items: center;
    justify-content: space-between;

    .left {
      display: flex;
      align-items: center;
      gap: 2vh;

      .self-flag {
        :deep(.el-checkbox__label) {
          font-size: 3vh;
        }
      }
    }
  }

  .status-buttons {
    display: flex;
    column-gap: 1vw;
    .status-button {
      width: 16vh;
      height: 5vh;
    }
  }
  .task-table {
    margin-top: 2vh;

    .canceled {
      color: $error-color;
    }

    .published {
      color: skyblue;
    }

    .ing {
      color: $success-color;
    }

    .finished {
      color: #aaa;
    }

    .ready {
      color: $warning-color;
    }
  }
}
</style>
