<template>
  <el-card shadow="never">
    <template #header>
      <div class="header">新建任务</div>
    </template>
    <el-form label-width="100px" style="max-width: 760px">
      <el-form-item label="任务标题" required>
        <el-input v-model="form.title" placeholder="请输入任务标题" />
      </el-form-item>
      <el-form-item label="任务内容">
        <el-input v-model="form.content" type="textarea" :rows="4" placeholder="请输入任务内容" />
      </el-form-item>
      <el-form-item label="负责人">
        <el-input v-model="form.leaderName" placeholder="负责人（示例）" />
      </el-form-item>
      <el-form-item label="优先级">
        <el-select v-model="form.priorityType" style="width: 180px">
          <el-option label="高" :value="1" />
          <el-option label="中" :value="2" />
          <el-option label="低" :value="3" />
        </el-select>
      </el-form-item>
      <el-form-item label="计划时间">
        <el-date-picker
          v-model="range"
          type="datetimerange"
          start-placeholder="开始时间"
          end-placeholder="结束时间"
          value-format="YYYY-MM-DD HH:mm:ss"
          style="width: 360px"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" :loading="submitting" @click="submit">保存</el-button>
        <el-button @click="goBack">返回</el-button>
      </el-form-item>
    </el-form>
  </el-card>
</template>

<script setup lang="ts">
import { ElMessage } from 'element-plus'
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { taskAdd } from '@/api/otr/task/core'

const router = useRouter()
const submitting = ref(false)
const range = ref<string[]>([])
const form = ref({
  title: '',
  content: '',
  leaderName: '',
  priorityType: 2,
})

async function submit() {
  if (!form.value.title) {
    ElMessage.warning('请先填写任务标题')
    return
  }
  submitting.value = true
  try {
    await taskAdd({
      ...form.value,
      startTime: range.value?.[0] || '',
      endTime: range.value?.[1] || '',
    })
    ElMessage.success('任务已保存')
    router.push('/otr/task/list')
  } finally {
    submitting.value = false
  }
}

function goBack() {
  router.back()
}
</script>

<style scoped>
.header {
  font-weight: 600;
}
</style>
