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

const props = 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: '-' },
])

function onClose() {
  emit('update:show', false)
}
</script>

<template>
  <van-popup
    :show="show"
    position="bottom"
    round
    :style="{ height: '50%' }"
    @update:show="emit('update:show', $event)"
  >
    <div class="tckz-pop">
      <div class="pop-header">
        <span class="pop-title">台账信息</span>
        <van-icon name="cross" size="20" color="#999" @click="onClose" />
      </div>
      <div class="pop-body">
        <div
          v-for="item in records"
          :key="item.id"
          class="record-item"
        >
          <div class="record-icon">
            <van-icon name="notes-o" size="20" color="#1989fa" />
          </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="#ccc" />
        </div>
      </div>
    </div>
  </van-popup>
</template>

<style lang="scss" scoped>
.tckz-pop {
  height: 100%;
  display: flex;
  flex-direction: column;

  .pop-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid var(--color-border);

    .pop-title {
      font-size: 16px;
      font-weight: 600;
      color: var(--color-text-regular);
    }
  }

  .pop-body {
    flex: 1;
    overflow-y: auto;
    padding: 8px 0;
  }

  .record-item {
    display: flex;
    align-items: center;
    padding: 12px 20px;
    border-bottom: 1px solid var(--color-border);
    cursor: pointer;

    .record-icon {
      margin-right: 12px;
      flex-shrink: 0;
    }

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

      .record-name {
        font-size: 14px;
        color: var(--color-text-regular);
      }

      .record-meta {
        font-size: 12px;
        color: var(--color-text-placeholder);
      }
    }
  }
}
</style>
