<!--
  -
  - 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 { ref, computed } from 'vue'
import { Goal } from '@renderer/models/Goal'
import { useGlobalStore } from '@renderer/store'
import { IGoal } from '@renderer/types'
import { storeToRefs } from 'pinia'

const store = useGlobalStore()
const { goals } = storeToRefs(store)
const showEditor = ref(false)
const tempGoal = ref<IGoal>(Goal.factoryToImpl())

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

function handleAddGoalSubmit() {
  store.addGoal(tempGoal.value)
  handleAddGoalCancel()
}

function handleAddGoalCancel() {
  showEditor.value = false
  tempGoal.value = Goal.factory()
}

function handleShowEditor() {
  showEditor.value = true
}

function handleGoalListEdit(idx: number) {
  tempGoal.value = Goal.fac
  handleShowEditor()
}

function handleGoalListDelete(idx: number) {
  store.removeGoalByIdx(idx)
}

defineExpose({ handleShowEditor })
</script>

<template>
  <div>
    <el-descriptions
      v-for="(item, idx) in goals"
      :key="item.indicator"
      class="mx-auto px-8 py-2"
      :title="`目标${idx + 1}（${item.importance}）`"
      border
      column="1"
    >
      <template #extra>
        <el-button @click="handleGoalListEdit(idx)">编辑</el-button>
        <el-button type="danger" @click="handleGoalListDelete(idx)">删除</el-button>
      </template>
      <el-descriptions-item label-align="center" :label-width="120" label="课程目标"
        >{{ item.target }}
      </el-descriptions-item>
      <el-descriptions-item label-align="center" :label-width="120" label="目标支撑的毕业要求指标点"
        >{{ item.indicator }}
      </el-descriptions-item>
    </el-descriptions>
  </div>

  <el-dialog
    v-model="showEditor"
    title="添加课程目标"
    :close-on-click-modal="false"
    :show-close="false"
  >
    <el-form 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="canSubmit" type="primary" @click="handleAddGoalSubmit">
        添加
      </el-button>
      <el-button @click="handleAddGoalCancel">取消</el-button>
    </template>
  </el-dialog>
</template>

<style scoped></style>
