<template>
  <el-dialog :title="'会诊结果模板类型管理'" v-model="dialog.visible" width="500px" append-to-body>
    <div class="mb-4">
      <el-input 
        v-model="form.templateType" 
        placeholder="请输入" 
        maxlength="30" 
        show-word-limit
        class="w-[300px] mr-2">
        <template #prepend>{{ isEdit ? '修改类型' : '新增类型' }}</template>
      </el-input>
      <el-button type="primary" @click="handleSubmit">确定</el-button>
    </div>

    <el-table :data="resultTemplateList" border>
      <el-table-column label="类型名称" prop="templateType" />
      <el-table-column label="操作" width="150" align="center">
        <template #default="scope">
          <el-button link type="primary" @click="handleUpdate(scope.row)">编辑</el-button>
          <el-button link type="danger" @click="handleDelete(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </el-dialog>
</template>

<script lang="ts">
import { defineComponent, ref, reactive, watch } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import { listResultTemplateType, getResultTemplateType, delResultTemplateType, addResultTemplateType, updateResultTemplateType } from '@/api/parameter/basicPublicTemplate/consultantResultTemplateType';
import type { ResultTemplateTypeVO, ResultTemplateTypeForm } from '@/api/parameter/basicPublicTemplate/consultantResultTemplateType/types';

export default defineComponent({
  name: 'ResultTemplateTypeDialog',
  setup(props, { emit }) {
    const dialog = reactive({
      visible: false
    });

    const resultTemplateList = ref<ResultTemplateTypeVO[]>([]);
    const isEdit = ref(false);

    const form = reactive<ResultTemplateTypeForm>({
      id: undefined,
      templateType: ''
    });

    // 获取列表
    const getList = async () => {
      try {
        const res = await listResultTemplateType({
          pageNum: 1,
          pageSize: 100
        });
        resultTemplateList.value = res.rows;
      } catch (error) {
        console.error('获取列表失败', error);
      }
    };

    // 提交（新增或修改）
    const handleSubmit = async () => {
      if (!form.templateType) {
        ElMessage.warning('请输入类型名称');
        return;
      }
      try {
        if (isEdit.value) {
          await updateResultTemplateType(form);
          ElMessage.success('修改成功');
        } else {
          await addResultTemplateType(form);
          ElMessage.success('添加成功');
        }
        resetForm();
        getList();
      } catch (error) {
        console.error(isEdit.value ? '修改失败' : '添加失败', error);
      }
    };

    // 打开编辑
    const handleUpdate = (row: ResultTemplateTypeVO) => {
      isEdit.value = true;
      form.id = row.id;
      form.templateType = row.templateType;
    };

    // 重置表单
    const resetForm = () => {
      isEdit.value = false;
      form.id = undefined;
      form.templateType = '';
    };

    // 删除
    const handleDelete = async (row: ResultTemplateTypeVO) => {
      try {
        await ElMessageBox.confirm('确认要删除该类型吗？');
        await delResultTemplateType(row.id);
        ElMessage.success('删除成功');
        // 如果正在编辑被删除的项，重置表单
        if (form.id === row.id) {
          resetForm();
        }
        getList();
      } catch (error) {
        console.error('删除失败', error);
      }
    };

    // 打开弹窗
    const open = () => {
      dialog.visible = true;
      resetForm();
      getList();
    };

    // 监听表单提交成功
    watch(() => dialog.visible, (val) => {
      if (!val) {
        emit('success');
      }
    });

    return {
      dialog,
      form,
      isEdit,
      resultTemplateList,
      handleSubmit,
      handleUpdate,
      handleDelete,
      open
    };
  }
});
</script>

<style scoped>
.el-input {
  width: auto;
}
</style>
