<template>
  <div class="risk-cell" @click.stop="$emit('click')" style="cursor:pointer;">
    <template v-if="quadrant">
      <div v-for="risk in quadrant.risks" :key="risk.id" class="risk-item" :style="{ backgroundColor: riskTypeBg(risk.type) }">
        <span class="risk-dot" :style="{ backgroundColor: riskTypeColor(risk.type) }"></span>
        <span class="risk-name">{{ risk.name }}</span>
        <span class="risk-value">{{ risk.detail?.split('，')[0] || '' }}</span>
      </div>
    </template>
    <div v-else class="risk-empty">—</div>
  </div>
</template>

<script setup lang="ts">
defineProps<{ quadrant: any }>()
defineEmits<{ click: [] }>()
function riskTypeColor(type: string): string {
  return { red: '#f56c6c', orange: '#e6a23c', yellow: '#409eff', green: '#67c23a' }[type] || '#999'
}
function riskTypeBg(type: string): string {
  return { red: '#fef0f0', orange: '#fdf6ec', yellow: '#ecf5ff', green: '#f0f9eb' }[type] || '#f5f7fa'
}
</script>

<style scoped>
.risk-cell { min-height:80px; border-radius:6px; padding:6px; background:#fafafa; border:1px solid #e8e8e8; }
.risk-item { padding:4px 6px; margin-bottom:3px; border-radius:4px; font-size:12px; line-height:1.4; }
.risk-item:last-child { margin-bottom:0; }
.risk-dot { display:inline-block; width:8px; height:8px; border-radius:50%; margin-right:4px; }
.risk-name { font-weight:500; }
.risk-value { display:block; font-size:11px; color:#666; margin-top:1px; padding-left:12px; }
.risk-empty { color:#ddd; text-align:center; line-height:80px; font-size:13px; }
</style>
