<!--
  -
  - 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 } from '@renderer/types'

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

const tempGoal = ref<IGoal>({ importance: 'H', indicator: '', target: '' })
const tempGoalList = ref<IGoal[]>(store.goals)
const showAddGoal = 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)
}
</script>

<template>
  <div v-if="courseInfo">
    <div class="h-12 border-b border-gray-200 px-8 font-bold shadow leading-12">
      <p>{{ courseInfo.name }}</p>
    </div>

    <el-divider content-position="left">基本信息</el-divider>
    <div class="mx-auto w-full max-w-lg">
      <el-form :model="courseInfo" label-width="auto" disabled>
        <el-form-item label="课号">
          <el-input
            v-model="courseInfo!.id"
            type="text"
            placeholder="(xxxx-xxxx-x)-xxxxxxxxxx-xxxxx-x"
          />
        </el-form-item>
        <el-form-item label="课程名称">
          <el-input v-model="courseInfo.name" type="text" placeholder="课程名称" />
        </el-form-item>
        <el-form-item label="开课学院">
          <el-input v-model="courseInfo.campus" type="text" placeholder="开课学院" />
        </el-form-item>
        <el-form-item label="任课教师">
          <el-input v-model="courseInfo.teacher" type="text" placeholder="任课教师" />
        </el-form-item>
        <el-form-item label="课程负责人" class="relative">
          <el-input v-model="courseInfo.master" type="text" placeholder="课程负责人" />
        </el-form-item>
        <el-form-item label="学分">
          <el-input v-model="courseInfo.credit" type="number" placeholder="学分" />
        </el-form-item>
        <el-form-item label="教学班级">
          <el-input v-model="courseInfo.className" type="text" placeholder="教学班级" />
        </el-form-item>
      </el-form>
    </div>

    <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-button v-show="!showAddGoal" @click="handleAddNewGoal">添加</el-button>

        <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>
          <div class="flex justify-end">
            <el-button :disabled="addGoalSubmit" type="primary" @click="handleAddGoalSubmit"
              >添加</el-button
            >
            <el-button @click="handleAddGoalCancel">取消</el-button>
          </div>
        </el-form>
      </div>
    </div>
  </div>
</template>

<style scoped></style>
