<template>
  <div class="doctor-phrase-container">
    <!-- 搜索栏 -->
    <div class="search-bar">
      <el-select v-model="searchScope" placeholder="范围" style="width: 120px;">
        <el-option label="个人" :value="1"></el-option>
        <el-option label="科室" :value="2"></el-option>
        <el-option label="全院" :value="3"></el-option>
      </el-select>
      <el-input
        v-model="searchKeyword" 
        placeholder="请输入名称"
        style="width: 240px; margin-left: 10px;"
        @keyup.enter="handleSearch"
      ></el-input>
      <el-button style="margin-left: 10px;" @click="handleSearch"><el-icon><Search /></el-icon> 查询</el-button>
      <el-button style="margin-left: 10px;" @click="handleReset"><el-icon><Refresh /></el-icon> 重置</el-button>
      <el-button type="primary" style="margin-left: 10px;" @click="showAddDialog"><el-icon><Plus /></el-icon> 增加</el-button>
    </div>

    <!-- 表格 -->
    <el-table :data="tableData" style="width: 100%; margin-top: 20px;">
      <el-table-column prop="sortNo" label="排序号" width="200">
        <template #default="scope">
          <el-input-number
            v-if="editingId === scope.row.id"
            v-model="editForm.sortNo"
            :min="1"
            :step="1"
            style="width: 100%"
          />
          <span v-else>{{ scope.row.sortNo }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="phraseName" label="名称" width="250">
        <template #default="scope">
          <el-input
            v-if="editingId === scope.row.id"
            v-model="editForm.phraseName"
            placeholder="请输入名称(不超过50字)"
            maxlength="50"
            show-word-limit
            style="width: 100%"
          />
          <span v-else>{{ scope.row.phraseName }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="phraseContent" label="内容">
        <template #default="scope">
          <el-input
            v-if="editingId === scope.row.id"
            v-model="editForm.phraseContent"
            placeholder="请输入内容"
            type="textarea"
            :rows="3"
            style="width: 100%"
          />
          <span v-else>{{ scope.row.phraseContent }}</span>
        </template>
      </el-table-column>
      <el-table-column label="范围" width="250">
        <template #default="scope">
          <el-select
            v-if="editingId === scope.row.id"
            v-model="editForm.phraseType"
            placeholder="请选择范围"
            style="width: 100%"
          >
            <el-option label="个人" :value="1"></el-option>
            <el-option label="科室" :value="2"></el-option>
            <el-option label="全院" :value="3"></el-option>
          </el-select>
          <span v-else>{{ getScopeName(scope.row.phraseType) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="业务分类" width="200">
        <template #default="scope">
          <el-select
            v-if="editingId === scope.row.id"
            v-model="editForm.phraseCategory"
            placeholder="请选择业务分类"
            style="width: 100%"
          >
            <el-option label="病愈" value="12"></el-option>
            <el-option
              v-for="item in businessclassification"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
          <span v-else>{{ getBusinessTypeName(scope.row.phraseCategory) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="200" fixed="right">
        <template #default="scope">
          <!-- 编辑状态 -->
          <template v-if="editingId === scope.row.id">
            <el-button
              type="success"
              size="small"
              @click="handleSave"
            >
              <el-icon><Check /></el-icon> 保存
            </el-button>
            <el-button
              type="warning"
              size="small"
              style="margin-left: 5px;"
              @click="handleCancel"
            >
              <el-icon><Close /></el-icon> 取消
            </el-button>
          </template>
          <!-- 非编辑状态 -->
          <template v-else>
            <el-button
              type="primary"
              size="small"
              @click="handleEdit(scope.row)"
            >
              编辑
            </el-button>
            <el-button
              type="danger"
              size="small"
              style="margin-left: 5px;"
              @click="handleDelete(scope.row)"
            >
              删除
            </el-button>
          </template>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <div class="pagination-container">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[15, 30, 50]"
        :page-size="pageSize"
        layout="total, prev, pager, next, jumper, sizes"
        :total="total"
      ></el-pagination>
    </div>

    <!-- 新增模态框 -->
    <el-dialog
      v-model="addDialogVisible"
      title="新增医生常用语"
      width="600px"
      center
    >
      <el-form ref="addFormRef" :model="addForm" :rules="rules" label-width="100px" class="add-form">
        <el-form-item label="名称" prop="phraseName" required>
          <el-input v-model="addForm.phraseName" placeholder="请输入常用语名称(不超过50字)" maxlength="50" show-word-limit style="width: 100%;"></el-input>
        </el-form-item>
        <el-form-item label="内容" prop="phraseContent" required>
          <el-input
            v-model="addForm.phraseContent"
            placeholder="请输入常用语内容"
            type="textarea"
            :rows="4"
            style="width: 100%;"
          ></el-input>
        </el-form-item>
        <el-form-item label="排序号">
          <el-input-number v-model="addForm.sortNo" :min="1" :step="1" style="width: 100%;"></el-input-number>
        </el-form-item>
        <el-form-item label="业务分类">
          <el-select v-model="addForm.phraseCategory" placeholder="请选择业务分类" style="width: 100%;">
            <!-- 默认添加"病愈"选项 -->
            <el-option label="病愈" value="12"></el-option>
            <!-- 从数据字典获取其他选项 -->
            <el-option
              v-for="item in businessclassification"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="范围">
          <el-select v-model="addForm.phraseType" placeholder="请选择范围" style="width: 100%;">
            <el-option label="个人" :value="1"></el-option>
            <el-option label="科室" :value="2"></el-option>
            <el-option label="全院" :value="3"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="addDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="handleAdd">确定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import {onMounted, ref} from 'vue'
import {Check, Close, Plus, Refresh, Search} from '@element-plus/icons-vue'
import {
  addDoctorPhrase,
  deleteDoctorPhrase,
  getDoctorPhraseList,
  searchDoctorPhraseList,
  updateDoctorPhrase
} from './api'
import {ElMessage, ElMessageBox} from 'element-plus'
import {useDict} from '@/utils/dict'

// 搜索条件
 const searchScope = ref(null)  // null表示未选择，数字类型：1=个人，2=科室，3=全院
 const searchKeyword = ref('')

// 表格数据
const tableData = ref([])

// 分页
const currentPage = ref(1)
const pageSize = ref(15)
const total = ref(0)

// 新增模态框相关
const addDialogVisible = ref(false)
const addFormRef = ref()
const addForm = ref({
  phraseName: '',
  phraseContent: '',
  sortNo: 1,
  phraseType: 1,
  phraseCategory: '病愈'
})

// 表单验证规则
const rules = {
  phraseName: [
    { required: true, message: '请输入常用语名称', trigger: 'blur' }
  ],
  phraseContent: [
    { required: true, message: '请输入常用语内容', trigger: 'blur' }
  ],
  phraseType: [
    { required: true, message: '请选择范围', trigger: 'change' }
  ]
}

// 编辑状态管理
const editingId = ref(null)
const editForm = ref({})
const editRules = {
  phraseName: [
    { required: true, message: '请输入常用语名称', trigger: 'blur' }
  ],
  phraseContent: [
    { required: true, message: '请输入常用语内容', trigger: 'blur' }
  ]
}

// 获取业务分类数据字典
const { businessclassification } = useDict('businessclassification')

// 获取业务分类名称
const getBusinessTypeName = (category) => {
  // 直接返回后端返回的phrase_category字段值
  // 从数据库截图看，phrase_category已经是中文名称："主诉"、"现病史"、"术后"等
  if (category) {
    return category
  }
  return '未知类型'
}

// 获取范围名称
const getScopeName = (scope) => {
  const scopeMap = {
    1: '个人',
    2: '科室',
    3: '全院'
  }
  return scopeMap[scope] || '未知范围'
}

// 名称唯一性校验函数
const validatePhraseName = (phraseName, excludeId = null) => {
  if (!phraseName || !phraseName.trim()) {
    return { valid: false, message: '请输入常用语名称' }
  }
  
  // 检查字数限制
  if (phraseName.trim().length > 50) {
    return { valid: false, message: '常用语名称不能超过50字' }
  }
  
  // 检查名称是否已存在
  const existingPhrase = allData.value.find(item => {
    // 排除自身（更新时）
    if (excludeId && item.id === excludeId) {
      return false
    }
    return item.phraseName === phraseName.trim()
  })
  
  if (existingPhrase) {
    return { valid: false, message: '常用语名称已存在，请输入不同的名称' }
  }
  
  return { valid: true, message: '' }
}

// 所有数据（用于客户端分页）
const allData = ref([])

// 获取医生常用语列表
const fetchDoctorPhraseList = async () => {
  try {
    const response = await getDoctorPhraseList()
    // 处理后端返回的数据结构：data.data
    if (response.code === 200 && response.data && response.data.data) {
      // 按照sortNo由小到大排序
      allData.value = response.data.data.sort((a, b) => a.sortNo - b.sortNo)
      total.value = response.data.data.length
      // 执行客户端分页
      applyPagination()
    } else {
      ElMessage.error('获取数据失败: ' + (response.msg || '未知错误'))
      allData.value = []
      total.value = 0
    }
  } catch (error) {
    ElMessage.error('获取数据失败: 网络请求错误')
    allData.value = []
    total.value = 0
  }
}

// 重置功能
const handleReset = () => {
  // 重置搜索条件
  searchScope.value = null
  searchKeyword.value = ''
  
  // 重新加载所有数据
  fetchDoctorPhraseList()
}

// 客户端分页处理
const applyPagination = () => {
  const start = (currentPage.value - 1) * pageSize.value
  const end = start + pageSize.value
  tableData.value = allData.value.slice(start, end)
}

// 分页处理
const handleSizeChange = (val) => {
  pageSize.value = val
  applyPagination()
}

const handleCurrentChange = (val) => {
  currentPage.value = val
  applyPagination()
}

// 搜索功能
const handleSearch = async () => {
  try {
    // searchScope可能是null（未选择）、1=个人，2=科室，3=全院
    const searchScopeValue = searchScope.value
    const phraseType = searchScopeValue === null ? undefined : searchScopeValue
    
    // 调用搜索接口：phraseName, phraseType
    // 如果phraseType为undefined，则后端不会按范围过滤，查询所有数据
    const response = await searchDoctorPhraseList(searchKeyword.value, phraseType)
    
    // 处理后端返回的数据结构：data.data
    if (response.code === 200 && response.data && response.data.data) {
      // 按照sortNo由小到大排序
      allData.value = response.data.data.sort((a, b) => a.sortNo - b.sortNo)
      total.value = response.data.data.length
      currentPage.value = 1 // 搜索后重置到第一页
      applyPagination() // 应用分页
    } else {
      ElMessage.error('搜索失败: ' + (response.msg || '未知错误'))
      allData.value = []
      total.value = 0
    }
  } catch (error) {
    ElMessage.error('搜索失败: 网络请求错误')
    allData.value = []
    total.value = 0
  }
}

// 打开新增模态框
const showAddDialog = () => {
  // 重置表单
    addForm.value = {
      phraseName: '',
      phraseContent: '',
      sortNo: 1,
      phraseType: 1,
      phraseCategory: '病愈'
    }
  // 打开模态框
  addDialogVisible.value = true
}

// 提交新增表单
const handleAdd = async () => {
  try {
    // 验证表单
    await addFormRef.value.validate()
    
    // 名称唯一性校验
    const nameValidation = validatePhraseName(addForm.value.phraseName)
    if (!nameValidation.valid) {
      ElMessage.error(nameValidation.message)
      return
    }
    
    // 添加数据库要求的必填默认字段
    const formData = {
      ...addForm.value,
      phraseCode: 'PHR000',
      enableFlag: 1,
      staffId: 1001,
      deptCode: 'DEPT001',
      creatorId: 1001
    }
    
    // 调用新增接口
    const response = await addDoctorPhrase(formData)
    
    // 处理新增结果
    if (response.code === 200) {
      ElMessage.success('新增成功')
      // 关闭模态框
      addDialogVisible.value = false
      // 将新数据添加到数组开头，使新增的数据在表格最上方显示
      const newData = {
        ...formData,
        id: response.data.id || Date.now() // 使用后端返回的id或当前时间戳作为临时id
      }
      allData.value.unshift(newData)
      total.value = allData.value.length
      // 重新应用分页
      applyPagination()
    } else {
      ElMessage.error('新增失败: ' + (response.msg || '未知错误'))
    }
  } catch (error) {
    // 表单验证失败或其他错误
    if (error instanceof Error) {
      ElMessage.error('请填写完整信息或网络请求错误')
    } else {
      // 表单验证失败的情况
      ElMessage.error('请填写完整信息')
    }
  }
}

// 删除功能
const handleDelete = async (row) => {
  try {
    // 弹出确认对话框
    await ElMessageBox.confirm('确定要删除该常用语吗？', '删除确认', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    })
    
    // 调用删除接口
    const response = await deleteDoctorPhrase(row.id)
    
    // 处理删除结果
    if (response.code === 200) {
      ElMessage.success('删除成功')
      // 重新获取数据以更新界面
      fetchDoctorPhraseList()
    } else {
      ElMessage.error('删除失败: ' + (response.msg || '未知错误'))
    }
  } catch (error) {
    // 如果用户取消删除，不显示错误信息
    if (error !== 'cancel' && error !== undefined) {
      if (error.msg) {
        ElMessage.error('删除操作失败: ' + error.msg)
      } else if (error instanceof Error) {
        ElMessage.error('删除操作失败: 网络请求错误')
      } else {
        ElMessage.error('删除操作失败: 未知错误')
      }
    }
  }
}

// 编辑按钮点击事件
const handleEdit = (row) => {
  // 进入编辑状态
  editingId.value = row.id
  // 复制当前行数据到编辑表单
  editForm.value = {
    ...row,
    // 确保phraseCategory和phraseType类型正确
    phraseCategory: row.phraseCategory,
    phraseType: row.phraseType
  }
}

// 取消编辑
const handleCancel = () => {
  // 退出编辑状态
  editingId.value = null
  // 清空编辑表单
  editForm.value = {}
}

// 保存编辑
const handleSave = async () => {
  try {
    // 验证表单数据
    if (!editForm.value.phraseName || !editForm.value.phraseContent) {
      ElMessage.error('请填写完整信息')
      return
    }
    
    // 名称唯一性校验（排除当前记录）
    const nameValidation = validatePhraseName(editForm.value.phraseName, editingId.value)
    if (!nameValidation.valid) {
      ElMessage.error(nameValidation.message)
      return
    }
    
    // 准备更新数据
    const updateData = {
      ...editForm.value,
      enableFlag: 1 // 确保启用状态
    }
    
    // 调用更新接口
    const response = await updateDoctorPhrase(updateData)
    
    // 处理更新结果
    if (response.code === 200) {
      ElMessage.success('更新成功')
      // 退出编辑状态
      editingId.value = null
      // 清空编辑表单
      editForm.value = {}
      // 重新获取数据以更新界面
      fetchDoctorPhraseList()
    } else {
      ElMessage.error('更新失败: ' + (response.msg || '未知错误'))
    }
  } catch (error) {
    ElMessage.error('更新操作失败: 网络请求错误')
  }
}

// 组件挂载时获取数据
onMounted(() => {
  fetchDoctorPhraseList()
})
</script>

<style scoped>
.doctor-phrase-container {
  padding: 20px;
}

.search-bar {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.pagination-container {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
}
</style>