<template>
  <div class="app-container">
    <el-card shadow="never">
      <template #header>
        <span>药物相互作用检查</span>
      </template>
      <el-form :model="form" label-width="80px">
        <el-form-item label="药物">
          <el-select v-model="form.drugCodes" multiple filterable allow-create default-first-option placeholder="输入药物编码后回车" style="width: 100%">
            <el-option v-for="item in drugOptions" :key="item" :label="item" :value="item" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" :loading="loading" @click="handleCheck">检查相互作用</el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <el-card shadow="never" class="mt16" v-if="results.length > 0">
      <template #header>
        <span>检查结果（发现 {{ results.length }} 个相互作用）</span>
      </template>
      <el-table :data="results" border stripe>
        <el-table-column prop="drugNameA" label="药物A" min-width="140" show-overflow-tooltip />
        <el-table-column prop="drugCodeA" label="编码A" width="120" show-overflow-tooltip />
        <el-table-column prop="drugNameB" label="药物B" min-width="140" show-overflow-tooltip />
        <el-table-column prop="drugCodeB" label="编码B" width="120" show-overflow-tooltip />
        <el-table-column prop="interactionType" label="相互作用类型" width="140" show-overflow-tooltip />
        <el-table-column prop="severity" label="严重程度" width="100" align="center">
          <template #default="{ row }">
            <el-tag :type="row.severity === '严重' ? 'danger' : 'warning'">
              {{ row.severity }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="description" label="描述" min-width="200" show-overflow-tooltip />
      </el-table>
    </el-card>

    <el-card shadow="never" class="mt16" v-if="checked && results.length === 0">
      <el-empty description="未发现药物相互作用" />
    </el-card>
  </div>
</template>

<script setup name="DrugInteractionCheck">
import { ref, reactive } from 'vue'
import { checkDrugInteractions } from '@/api/knowledgegraph/api'
import { ElMessage } from 'element-plus'

const loading = ref(false)
const results = ref([])
const checked = ref(false)

const form = reactive({
  drugCodes: []
})

const drugOptions = ref([])

async function handleCheck() {
  if (form.drugCodes.length < 2) {
    ElMessage.warning('请至少输入两种药物')
    return
  }
  loading.value = true
  checked.value = false
  try {
    const res = await checkDrugInteractions(form)
    if (res.code === 200) {
      results.value = res.data || []
      checked.value = true
    } else {
      ElMessage.error(res.msg || '检查失败')
    }
  } finally {
    loading.value = false
  }
}
</script>

<style scoped>
.mt16 { margin-top: 16px; }
</style>
