<!--
  -
  - 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 { storeToRefs } from 'pinia'
import { computed, ref } from 'vue'
import { IGoal, ICourse } from '@renderer/types'
import { InfoFilled, Plus } from '@element-plus/icons-vue'

const store = useGlobalStore()
const { courseInfo } = storeToRefs(store)

const tempCourseInfo = ref<ICourse>({ ...store.courseInfo! })
const tempGoal = ref<IGoal>({ importance: 'H', indicator: '', target: '' })
const tempGoalList = ref<IGoal[]>(store.goals)
const showAddGoal = ref(false)
const showEditCourse = ref(false)

const addGoalSubmit = computed(() => !Object.values(tempGoal.value).every((v) => v))

const handleAddNewGoal = () => {
  showAddGoal.value = true
}

const clearTempGoal = () => {
  tempGoal.value = { importance: 'H', indicator: '', target: '' }
}

const handleAddGoalCancel = () => {
  clearTempGoal()
  showAddGoal.value = false
}

const handleAddGoalSubmit = () => {
  tempGoalList.value.push(tempGoal.value)
  clearTempGoal()
  showAddGoal.value = false
}

const handleDeleteGoal = (idx: number) => {
  tempGoalList.value.splice(idx, 1)
}

const handleEditCourse = (action: 'save' | 'cancel') => {
  if (action === 'save') {
    store.saveCourseInfo(tempCourseInfo.value)
    tempCourseInfo.value = { ...store.courseInfo! }
  } else if (action === 'cancel') {
    tempCourseInfo.value = { ...store.courseInfo! }
  }
  showEditCourse.value = false
}
</script>

<template>
  <div v-if="courseInfo">
    <div class="border-b border-gray-300 px-8 font-bold flex justify-between items-center h-14">
      <p>课程信息：{{ courseInfo.name }}</p>
      <div class="flex items-center">
        <el-button type="primary" :icon="InfoFilled" @click="showEditCourse = true"
          >编辑课程信息</el-button
        >
        <el-button :icon="Plus" @click="handleAddNewGoal">添加课程目标</el-button>
      </div>
    </div>

    <el-descriptions class="mx-auto p-4" border>
      <el-descriptions-item>
        <template #label> 课程名称 </template>
        {{ courseInfo.name }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label> 开课学院 </template>
        {{ courseInfo.campus }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label> 任课教师 </template>
        {{ courseInfo.teacher }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label> 课程负责人 </template>
        {{ courseInfo.master }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label> 学分 </template>
        {{ courseInfo.credit }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label> 教学班级 </template>
        {{ courseInfo.className }}
      </el-descriptions-item>
    </el-descriptions>
    <el-dialog
      v-model="showEditCourse"
      title="编辑课程信息"
      :show-close="false"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
    >
      <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="课程负责人" />
        </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>
      </el-form>
      <template #footer>
        <el-button type="primary" @click="handleEditCourse('save')">确认</el-button>
        <el-button @click="handleEditCourse('cancel')">取消</el-button>
      </template>
    </el-dialog>

    <el-divider content-position="left">课程目标</el-divider>
    <div class="mx-auto w-full max-w-lg">
      <div class="my-4">
        <div
          v-for="(item, index) in tempGoalList"
          :key="index"
          class="mb-4 rounded-md border border-gray-200"
        >
          <div class="border-b border-b-gray-200 p-4 font-bold">
            <p>目标 {{ index + 1 }}（{{ item.importance }}）</p>
          </div>
          <div class="p-4">
            <p class="mb-1">课程目标：</p>
            <p class="indent-8 text-sm">{{ item.target }}</p>
            <p class="my-1">目标支撑的毕业要求指标点：</p>
            <p class="indent-8 text-sm">{{ item.indicator }}</p>
          </div>
          <div class="flex justify-end border-t border-gray-200 p-4">
            <el-button type="danger" @click="handleDeleteGoal">删除</el-button>
          </div>
        </div>

        <el-dialog v-model="showAddGoal" title="添加课程目标">
          <el-form v-show="showAddGoal" v-model="tempGoal">
            <el-form-item label="强弱支撑" label-position="top">
              <el-select v-model="tempGoal.importance">
                <el-option label="H" value="H">H</el-option>
                <el-option label="M" value="M">M</el-option>
                <el-option label="L" value="L">L</el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="课程目标" label-position="top">
              <el-input v-model="tempGoal.target" type="textarea" />
            </el-form-item>
            <el-form-item label="目标支撑的毕业要求指标点" label-position="top">
              <el-input v-model="tempGoal.indicator" type="textarea" />
            </el-form-item>
          </el-form>
          <template #footer>
            <el-button :disabled="addGoalSubmit" type="primary" @click="handleAddGoalSubmit"
              >添加</el-button
            >
            <el-button @click="handleAddGoalCancel">取消</el-button>
          </template>
        </el-dialog>
      </div>
    </div>
  </div>
</template>

<style scoped></style>
