<script setup lang="ts">
import { useRoute } from 'vue-router'
import RewardItem from './reward-item/index.vue'
import TargetItem from './target-item/index.vue'
import TaskCfgItem from './task-cfg-item/index.vue'
import hud from '@/utils/hud'
import { getTimeText } from '@/utils'
import { globalBack } from '@/router'
import { taskService } from '@/api/service/task'
import studentManageApi from '@/api/studentManage'
import { task_priority_options } from '..'
import { storeToRefs } from 'pinia'
import { userStore } from '@/stores'

defineOptions({ name: 'AddTask' })

const route = useRoute()
const { schoolId } = route.query as any

const { schoolMap } = storeToRefs(userStore())

const priority = ref(task_priority_options[0].value)

// 任务配置
const taskCfgRef = ref()
// 对象设置
const targetRef = ref()
// 奖惩设置
const rewardRef = ref()
// 时间
const date = ref('')

// 添加
function add() {
  if (!date.value) {
    hud.error('请输入时间')
    return
  }

  const cfg = taskCfgRef.value.submit()
  if (!cfg) return

  const target = targetRef.value.submit()
  if (!target) return

  const reward = rewardRef.value.submit()
  if (!reward) return

  const data = {
    ...cfg,
    ...target,
    ...reward,
    priority: priority.value,
    schoolId,
    startTime: getTimeText(date.value[0]),
    endTime: getTimeText(date.value[1]),
  }

  hud.load({
    task: async () => {
      await taskService.saveOrUpdate(data)
      globalBack()
    },
    option: '添加',
  })
}

const title = computed(() => {
  let name = schoolMap.value[schoolId]?.schoolName || ''
  if (name) {
    name = `【${name}】`
  }
  return `${name}添加任务`
})
</script>

<template>
  <div class="add-task">
    <div class="top">
      <BackBar :leftText="title" />
    </div>
    <div class="task-content">
      <!-- 时间 -->
      <div class="mj-data-row auto-items">
        <div class="mj-data-item required">
          <span class="mj-data-item-title">优先级</span>
          <select-tab v-model="priority" :dataList="task_priority_options" type="small" />
        </div>
        <div class="mj-data-item time required">
          <span class="mj-data-item-title">时间</span>
          <mj-date-picker v-model="date" type="datetimerange" clear-icon="none" />
        </div>
      </div>
      <div class="mj-data-divider"></div>
      <!-- 主题 -->
      <task-cfg-item ref="taskCfgRef" />
      <div class="mj-data-divider"></div>
      <!-- 任务对象 -->
      <target-item ref="targetRef" />
      <div class="mj-data-divider"></div>
      <!-- 奖惩 -->
      <reward-item ref="rewardRef" />
      <div class="bottom">
        <mj-button type="primary" @click="add">添加</mj-button>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
@use './index.scss' as *;

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

  .task-content {
    position: relative;
    margin-top: 1.5rem;
    flex: 1;
    background-color: rgb(249, 253, 255);
    border-radius: 3.33vh;
    box-shadow: 0 0.33vh 0.33vh 0 rgba(0, 0, 0, 0.25);
    display: flex;
    flex-direction: column;
    row-gap: 3vh;
    align-items: center;
    padding: 2rem;
    max-height: 100%;
    overflow: hidden;
    // @include hidden_scroll;

    :deep(.mj-date-picker) {
      input {
        width: 320px !important;
      }
    }

    .mj-data-row.auto-items {
      gap: 5vh;
      .mj-data-item.time {
        flex: 1;
      }
    }

    .bottom {
      position: fixed;
      bottom: 5.83vh;
      right: 100px;
    }
  }
}
</style>
