<script setup lang="ts">
import type { TripTemplate } from '../types'
import type { FormInstance, FormRules } from 'element-plus'
import { ElMessage } from 'element-plus'
import { createTripTemplate, updateTripTemplate } from '../api'
import { tripTemplateTypeList } from '@/utils/dictionary'
import { pick } from 'lodash-es'

const props = defineProps<{ data?: TripTemplate }>()

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

const isUpdate = $computed(() => !!props.data?.id)
const title = $computed(() => (isUpdate ? '修改旅程模板' : '新建旅程模板'))

const formRef = $ref<FormInstance>()
const form = reactive({
  id: '',
  name: '',
  type: '1',
  score: 100,
  is_view_answer: '1',
  status: '1'
})

watchEffect(() => {
  if (props.data) Object.assign(form, props.data, { score: parseInt(props.data.score) })
})

const rules = ref<FormRules>({
  name: [{ required: true, message: '请输入模板名称' }],
  type: [{ required: true, message: '请选择旅程类型' }],
  score: [{ required: true, message: '请输入不超过100的整数数值' }]
})

// 提交
function handleSubmit() {
  formRef?.validate().then(() => (isUpdate ? handleUpdate() : handleCreate()))
}
// 新建
function handleCreate() {
  const params = pick(form, ['name', 'type', 'score', 'is_view_answer', 'status'])
  createTripTemplate(params).then(() => {
    ElMessage({ message: '创建成功', type: 'success' })
    emit('update')
    emit('update:modelValue', false)
  })
}
// 修改
function handleUpdate() {
  const params = pick(form, ['id', 'name', 'type', 'score', 'is_view_answer', 'status'])
  updateTripTemplate(params).then(() => {
    ElMessage({ message: '修改成功', type: 'success' })
    emit('update')
    emit('update:modelValue', false)
  })
}
</script>

<template>
  <el-dialog :title="title" :close-on-click-modal="false" width="600px" @closed="$emit('update:modelValue', false)">
    <el-form ref="formRef" :model="form" :rules="rules" label-suffix="：" label-width="170px">
      <el-form-item label="模板名称" prop="name">
        <el-input v-model="form.name" placeholder="请输入" />
      </el-form-item>
      <el-form-item label="旅程类型" prop="type">
        <el-select v-model="form.type" style="width: 100%">
          <el-option v-for="item in tripTemplateTypeList" :key="item.value" v-bind="item"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="旅程分值" prop="score">
        <el-input-number
          v-model="form.score"
          step-strictly
          :min="0"
          :max="100"
          placeholder="请输入不超过100的整数数值"
          style="width: 100%"></el-input-number>
      </el-form-item>
      <el-form-item label="是否允许学生查看解析" prop="is_view_answer">
        <el-switch
          v-model="form.is_view_answer"
          active-text="允许"
          active-value="1"
          inactive-text="不允许"
          inactive-value="0" />
      </el-form-item>
      <el-form-item label="状态" prop="status">
        <el-switch v-model="form.status" active-text="生效" active-value="1" inactive-text="失效" inactive-value="0" />
      </el-form-item>
    </el-form>
    <template #footer>
      <el-row justify="center">
        <el-button plain auto-insert-space @click="$emit('update:modelValue', false)">关闭</el-button>
        <el-button type="primary" auto-insert-space @click="handleSubmit">保存</el-button>
      </el-row>
    </template>
  </el-dialog>
</template>
