<!--
  -
  - 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 { 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[]>([])
const showAddGoal = ref(false)

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

<template>
  <div v-if="courseInfo">
    <div class="border-b border-gray-200 h-12 shadow leading-12 font-bold px-8">
      <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">
      <el-button :disabled="showAddGoal" @click="handleAddNewGoal">添加</el-button>

      <div>
        <div v-for="(item, index) in tempGoalList" :key="index">
          {{ item.importance }}
          {{ item.indicator }}
          {{ item.target }}
        </div>
        <el-form v-show="showAddGoal" v-model="tempGoal">
          <el-form-item label="强弱支撑">
            <el-select v-model="tempGoal.importance">
              <el-option>H</el-option>
              <el-option>M</el-option>
              <el-option>L</el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<style scoped></style>
