<script setup lang="ts">
/**
 * 项目列表展示组件
 * 接收两个参数：title（字符串）和data（字符串数组）
 */
const props = defineProps({
  title: {
    type: String,
    default: '对话列表',
  },
  data: {
    type: Array,
    default: () => [],
  },
})

// 定义输出事件
const emit = defineEmits(['click'])

// 点击项，向外抛出数据
function handleItemClick(item: any[], index: number) {
  emit('click', item, index)
}
</script>

<template>
  <div class="hazard-list-container">
    <!-- 标题栏 -->
    <el-row class="p-3">
      <!-- <el-text tag="b"> -->
      <el-text type="info" size="small">
        {{ props.title }} (共 {{ props.data.length }} 条)
      </el-text>
    </el-row>

    <!-- 滚动列表区域 -->
    <el-row style="flex: 1; overflow-y: auto;">
      <el-col>
        <el-row v-for="(item, index) in props.data" :key="index">
          <!-- 无物体类型标签 隐患等级体颜色显示在编号标签上 -->
          <!-- 0为隐患等级 1为隐患描述 -->
          <el-button class="message-btn" text @click="handleItemClick(item as any[], index)">
            <div class="flex flex-col items-start">
              <div class="flex flex-row gap-2">
                <el-text class="item-text" type="info" size="small">
                  {{ (item as any[])[1] }}
                </el-text>
                <el-text class="item-text" type="info" size="small">
                  {{ (item as any[])[2] }}
                </el-text>
              </div>
              <el-text class="item-text">
                {{ (item as any[])[3] }}
              </el-text>
            </div>
          </el-button>
        </el-row>
      </el-col>
    </el-row>
  </div>
</template>

<style scoped>
.hazard-list-container {
  height: 100%;
  width: 100%;
}

/* 纵向布局 */
.message-btn {
  width: 100%;
  padding: 4px 0.75rem;
  display: flex;
  justify-content: flex-start;
  height: auto;
  min-height: 28px;
  line-height: normal;
}

.item-text {
  word-break: break-word;
  white-space: normal;
  text-align: left;
}

.message-title {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 4px;
}

.message-content {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
}

.item-text.ep-text {
  align-self: start;
  line-height: 1.5; /* 消除行高留白 */
}
</style>
