<script setup lang="ts">
/**
 * 排水户详情（二维码扫码入口）
 *
 * 通过扫码获取排水户 ID，展示详细信息及二维码。
 */
import { ref, computed } from 'vue'
import { useRoute, useRouter } from 'vue-router'

const route = useRoute()
const router = useRouter()

const pshId = computed(() => route.params.id as string | undefined)

/** 模拟排水户详情 */
const detail = ref({
  id: pshId.value || 'PSH-001',
  name: '万达广场（城北店）',
  type: '商业',
  address: '城北区东风路 128 号',
  contact: '张经理',
  phone: '138****5678',
  licenseNo: '排许字第2024-0031号',
  drainType: '雨污分流',
  qrCodeUrl: '', // 实际从接口获取
})

function goBack() {
  router.back()
}
</script>

<template>
  <div class="psh-detail-page">
    <van-nav-bar title="排水户详情" left-arrow fixed placeholder @click-left="goBack" />

    <!-- 基本信息 -->
    <van-cell-group title="基本信息" inset>
      <van-cell title="排水户编号" :value="detail.id" />
      <van-cell title="排水户名称" :value="detail.name" />
      <van-cell title="排水户类型" :value="detail.type" />
      <van-cell title="地址" :value="detail.address" />
      <van-cell title="联系人" :value="detail.contact" />
      <van-cell title="联系电话" :value="detail.phone" />
      <van-cell title="排水许可证" :value="detail.licenseNo" />
      <van-cell title="排水方式" :value="detail.drainType" />
    </van-cell-group>

    <!-- 二维码 -->
    <van-cell-group title="排水户二维码" inset>
      <div class="qr-section">
        <div class="qr-placeholder">
          <van-image
            v-if="detail.qrCodeUrl"
            :src="detail.qrCodeUrl"
            width="160"
            height="160"
            fit="contain"
          />
          <template v-else>
            <van-icon name="qr" size="64" color="#ccc" />
            <p class="qr-hint">扫码查看排水户信息</p>
          </template>
        </div>
      </div>
    </van-cell-group>
  </div>
</template>

<style lang="scss" scoped>
.psh-detail-page {
  min-height: 100vh;
  background: var(--color-bg-page);
  padding-bottom: 20px;

  :deep(.van-nav-bar) {
    background: var(--color-primary);
    --van-nav-bar-title-text-color: #fff;
    --van-nav-bar-text-color: #fff;
    --van-nav-bar-icon-color: #fff;
  }

  :deep(.van-cell-group) {
    margin: 12px 8px;
  }

  :deep(.van-cell-group__title) {
    padding: 12px 16px 8px;
  }
}

.qr-section {
  display: flex;
  justify-content: center;
  padding: 24px;

  .qr-placeholder {
    width: 160px;
    height: 160px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: 2px dashed #ddd;
    border-radius: 10px;
    background: #fafafa;

    .qr-hint {
      margin: 8px 0 0 0;
      font-size: 12px;
      color: var(--color-text-placeholder);
    }
  }
}
</style>
