<script setup lang="ts">
/**
 * 台账控制弹窗
 *
 * 从地图底部弹出的台账列表，展示管网/设施信息。
 */
import { ref } from 'vue'

defineProps<{
  show: boolean
}>()

const emit = defineEmits<{
  'update:show': [val: boolean]
}>()

/** 台账数据 */
const records = ref([
  { id: 1, name: 'DN300 雨水管-城北段', type: '雨水管网', length: '2.3km' },
  { id: 2, name: 'DN400 污水管-高新区', type: '污水管网', length: '1.8km' },
  { id: 3, name: '1# 提升泵站', type: '泵站', length: '-' },
  { id: 4, name: '中山河节制闸', type: '水闸', length: '-' },
  { id: 5, name: 'DN200 给水管-老城区', type: '给水管网', length: '3.1km' },
])

function onClose() {
  emit('update:show', false)
}

function onItemClick(item: typeof records.value[number]) {
  // 处理台账项点击
  console.log('selected:', item)
}
</script>

<template>
  <van-popup
    :show="show"
    position="bottom"
    round
    :style="{ height: '50%' }"
    @update:show="emit('update:show', $event)"
  >
    <div class="pop-container">
      <!-- Header -->
      <div class="pop-header">
        <span class="pop-title">台账信息</span>
        <span class="pop-count">{{ records.length }} 条记录</span>
        <van-icon name="cross" size="20" color="#C8C9CC" @click="onClose" />
      </div>

      <!-- Body -->
      <div class="pop-body">
        <div
          v-for="item in records"
          :key="item.id"
          class="record-item"
          @click="onItemClick(item)"
        >
          <div class="record-icon-wrap">
            <van-icon name="notes-o" size="22" color="#1E74FF" />
          </div>
          <div class="record-info">
            <span class="record-name">{{ item.name }}</span>
            <span class="record-meta">{{ item.type }} · {{ item.length }}</span>
          </div>
          <van-icon name="arrow" color="#C8C9CC" size="16" />
        </div>
      </div>

      <!-- Safe Area -->
      <div class="pop-safe-bottom" />
    </div>
  </van-popup>
</template>

<style lang="scss" scoped>
.pop-container {
  height: 100%;
  display: flex;
  flex-direction: column;
  background: #fff;
}

// ── Header ──
.pop-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 18px 20px;
  border-bottom: 1px solid #EBEDF0;
  flex-shrink: 0;

  .pop-title {
    font-size: 17px;
    font-weight: 600;
    color: #323233;
    flex: 1;
  }

  .pop-count {
    font-size: 12px;
    color: #969799;
  }
}

// ── Body ──
.pop-body {
  flex: 1;
  overflow-y: auto;
}

.record-item {
  display: flex;
  align-items: center;
  padding: 14px 20px;
  border-bottom: 1px solid #F2F3F5;
  cursor: pointer;
  transition: background 0.15s;

  &:active {
    background: #F7F8FA;
  }

  .record-icon-wrap {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: #E3F2FD;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 12px;
    flex-shrink: 0;
  }

  .record-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;

    .record-name {
      font-size: 15px;
      color: #323233;
      font-weight: 500;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .record-meta {
      font-size: 12px;
      color: #969799;
    }
  }
}

// ── Safe Area ──
.pop-safe-bottom {
  height: env(safe-area-inset-bottom, 16px);
  flex-shrink: 0;
}
</style>
