<!--
  -
  - Copyright (c) 2025. Jeffery Hsu - Achievement Report Generator
  -
  - This program is free software: you can redistribute it and/or modify
  - it under the terms of the GNU General Public License as published by
  - the Free Software Foundation, either version 3 of the License, or
  - (at your option) any later version.
  -
  - This program is distributed in the hope that it will be useful,
  - but WITHOUT ANY WARRANTY; without even the implied warranty of
  - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
  - GNU General Public License for more details.
  -
  - You should have received a copy of the GNU General Public License
  - along with this program. If not, see <https://www.gnu.org/licenses/>.
  -
  -->

<script setup lang="ts">
import { useGlobalStore } from '@renderer/store'
import router from '@renderer/router'
import { storeToRefs } from 'pinia'
import { computed, ref } from 'vue'
import { ICourse } from '@renderer/types'
import { ElMessage } from 'element-plus'
const store = useGlobalStore()
const { courseInfo } = storeToRefs(store)

const tempCourseInfo = ref<ICourse>({
  campus: '',
  className: '',
  credit: 0,
  id: '',
  master: '',
  name: '',
  teacher: ''
})

const isShowCopyFrom = ref<boolean>(false)

const enableSubmit = computed(() => !Object.values(tempCourseInfo.value).every((v) => v))

const handleCreateFrom = async (from: 'xlsx' | 'jwxt') => {
  if (from === 'xlsx') {
    if (await store.createCourseFromXlsx()) {
      ElMessage({ type: 'success', message: '成功' })
      tempCourseInfo.value = courseInfo.value!
    }
  } else if (from === 'jwxt') {
    ElMessage({ type: 'warning', message: '功能暂时不可用，敬请期待' })
  }
}

const handleBack = () => router.back()

const handleFormReset = () => {
  tempCourseInfo.value = {
    campus: '',
    className: '',
    credit: 0,
    id: '',
    master: '',
    name: '',
    teacher: ''
  }
}

const handleShowCopyBtn = () => {
  isShowCopyFrom.value = (!tempCourseInfo.value.master && tempCourseInfo.value.teacher) as boolean
}

const handleCopyFromTeacher = () => {
  tempCourseInfo.value.master = tempCourseInfo.value.teacher
  isShowCopyFrom.value = false
}

const handleSubmit = () => {
  store.saveCourseInfo(tempCourseInfo.value)
  router.push({ name: 'panel' })
}
</script>

<template>
  <div class="flex items-center justify-center bg-white/75">
    <div
      class="relative flex flex-col items-center justify-center bg-white px-32 py-8 rounded-lg border border-gray-300 shadow-xl"
    >
      <div
        class="absolute top-4 left-32 cursor-pointer rounded border border-gray-300 px-4 shadow hover:bg-gray-100"
        @click="handleBack"
      >
        返回
      </div>
      <p class="text-center text-2xl">创建新的文件</p>
      <el-divider> 填写基本课程信息以继续 </el-divider>
      <div class="mx-auto w-lg">
        <el-form :model="tempCourseInfo" label-width="auto">
          <el-form-item label="课号">
            <el-input
              v-model="tempCourseInfo.id"
              type="text"
              placeholder="(xxxx-xxxx-x)-xxxxxxxxxx-xxxxx-x"
            />
          </el-form-item>
          <el-form-item label="课程名称">
            <el-input v-model="tempCourseInfo.name" type="text" placeholder="课程名称" />
          </el-form-item>
          <el-form-item label="开课学院">
            <el-input v-model="tempCourseInfo.campus" type="text" placeholder="开课学院" />
          </el-form-item>
          <el-form-item label="任课教师">
            <el-input v-model="tempCourseInfo.teacher" type="text" placeholder="任课教师" />
          </el-form-item>
          <el-form-item label="课程负责人" class="relative">
            <el-input
              v-model="tempCourseInfo.master"
              type="text"
              placeholder="课程负责人"
              @focus="handleShowCopyBtn"
              @blur="handleShowCopyBtn"
            />
            <div
              class="invisible absolute right-4 cursor-pointer text-gray-400"
              :class="{ visible: isShowCopyFrom }"
              @click="handleCopyFromTeacher"
            >
              从任课教师复制
            </div>
          </el-form-item>
          <el-form-item label="学分">
            <el-input v-model="tempCourseInfo.credit" type="number" placeholder="学分" />
          </el-form-item>
          <el-form-item label="教学班级">
            <el-input v-model="tempCourseInfo.className" type="text" placeholder="教学班级" />
          </el-form-item>
          <div class="flex justify-end">
            <el-button @click="handleFormReset">重置</el-button>
            <el-button type="primary" :disabled="enableSubmit" @click="handleSubmit"
              >下一步</el-button
            >
          </div>
        </el-form>
      </div>
      <el-divider>或</el-divider>
      <div class="flex justify-center">
        <el-button @click="handleCreateFrom('xlsx')">从 Excel 中导入</el-button>
        <el-button @click="handleCreateFrom('jwxt')">从 教务系统 中导入</el-button>
      </div>
    </div>
  </div>
</template>

<style scoped></style>
