<script setup lang="ts">
import type { FormInstance } from 'element-plus'
import type { ExperimentItem } from '../types'
import { Plus } from '@element-plus/icons-vue'
import { gradeRuleList } from '@/utils/dictionary'

interface Props {
  data: ExperimentItem
}

const props = defineProps<Props>()

const emit = defineEmits<{
  (e: 'update'): void
  (e: 'update:modelValue', visible: boolean): void
}>()

const formRef = $ref<FormInstance>()
const form = reactive({
  is_show: 1,
  rule_list: [
    {
      id: '232',
      name: '实验报告',
      type: 1,
      percent: 100,
      rule_mode: 1
    }
  ]
})

// 添加
function handleAdd() {
  form.rule_list.push({ id: '0', name: '', type: undefined, percent: 100, rule_mode: 1 })
}

// 删除
function handleRemove(index: number) {
  form.rule_list.splice(index, 1)
}

// 提交
function handleSubmit() {
  formRef?.validate().then(() => {
    console.log(1)
  })
}

// 当前评分方法
function currentRuleNames(value: number) {
  const typeList = form.rule_list.map(item => item.type)
  return gradeRuleList.filter(item => {
    return item.value === value || item.value === 5 || !typeList.includes(item.value)
  })
}
</script>

<template>
  <el-dialog
    title="编辑实验成绩规则"
    :close-on-click-modal="false"
    width="800px"
    @update:modelValue="$emit('update:modelValue')">
    <el-form ref="formRef" :model="form" label-suffix="：">
      <el-form-item label="实验名称">{{ data?.name }}</el-form-item>
      <el-form-item label="是否允许查看成绩明细" prop="is_show">
        <el-radio-group v-model="form.is_show">
          <el-radio :label="1">是</el-radio>
          <el-radio :label="0">否</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item>
        <el-row justify="space-between" style="width: 100%">
          <p>实验成绩规则：</p>
          <el-button type="primary" :icon="Plus" @click="handleAdd"></el-button>
        </el-row>
        <el-table :data="form.rule_list" row-key="id">
          <el-table-column prop="name">
            <template #default="{ row }">
              <el-input v-model="row.name" style="width: 100%" v-if="row.type === 5" />
              <el-select v-model="row.type" :disabled="row.type === 1" style="width: 100%" v-else>
                <el-option v-for="item in currentRuleNames(row.type)" :key="item.value" v-bind="item"></el-option>
              </el-select>
            </template>
          </el-table-column>
          <el-table-column prop="percent" align="center" width="200">
            <template #default="{ row }"><el-input-number v-model="row.percent" /> %</template>
          </el-table-column>
          <el-table-column prop="rule_mode">
            <template #default="{ row }">
              <el-radio-group v-model="row.rule_mode">
                <el-radio :label="1">手工评分</el-radio>
                <el-radio :label="2" v-if="[2, 3].includes(row.type)">自动评分</el-radio>
              </el-radio-group>
            </template>
          </el-table-column>
          <el-table-column prop="rule_mode" align="center" width="90">
            <template #default="{ $index }">
              <el-button text type="primary" @click="handleRemove($index)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-form-item>
    </el-form>
    <el-row justify="center">
      <el-button type="primary" round auto-insert-space @click="handleSubmit">保存</el-button>
      <el-button round auto-insert-space @click="$emit('update:modelValue', false)">取消</el-button>
    </el-row>
  </el-dialog>
</template>
