<script setup lang="ts">
/**
 * 排水户详情页
 *
 * 展示排水户详细信息，包含基本信息、排水许可、检查记录等。
 */
import { ref } from 'vue'
import { useRouter, useRoute } from 'vue-router'

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

const detailId = (route.params.detail || route.query.id) as string

/** 模拟排水户详情 */
const drainUser = ref({
  id: detailId || '1',
  name: '华丰食品厂',
  type: 'industrial',
  typeLabel: '工业',
  address: '城北工业园区A1栋',
  contact: '张经理',
  phone: '13800001011',
  drainNo: 'PSH-2025-001',
  status: 'normal',
  statusLabel: '正常',
  licenseNo: '排水许可证-2025-001',
  licenseDate: '2025-01-15',
  licenseExpire: '2030-01-14',
  dischargeVolume: '500吨/日',
  pipeMaterial: 'PE管',
  pipeDiameter: 'DN300',
  monitorPoint: '2个监测点',
  remark: '该排水户已安装在线监测设备，运行正常。',
})

/** 类型颜色 */
const typeColorMap: Record<string, string> = {
  industrial: '#1989fa',
  domestic: '#07c160',
  commercial: '#ff976a',
}

const statusColorMap: Record<string, 'success' | 'warning' | 'danger'> = {
  normal: 'success',
  warning: 'warning',
  danger: 'danger',
}
</script>

<template>
  <div class="detail-page">
    <van-nav-bar title="排水户详情" left-text="返回" left-arrow fixed placeholder @click-left="router.back()" />

    <!-- 状态栏 -->
    <div class="status-bar">
      <van-tag :color="typeColorMap[drainUser.type]" size="large" text-color="#fff">
        {{ drainUser.typeLabel }}
      </van-tag>
      <van-tag :type="statusColorMap[drainUser.status]" size="large">
        {{ drainUser.statusLabel }}
      </van-tag>
    </div>

    <!-- 基本信息 -->
    <van-cell-group title="基本信息" class="info-group">
      <van-cell title="排水户名称" :value="drainUser.name" />
      <van-cell title="排水户编号" :value="drainUser.drainNo" />
      <van-cell title="地址" :value="drainUser.address" />
      <van-cell title="联系人" :value="drainUser.contact" />
      <van-cell title="联系电话" :value="drainUser.phone" />
    </van-cell-group>

    <!-- 排水许可 -->
    <van-cell-group title="排水许可" class="info-group">
      <van-cell title="许可证编号" :value="drainUser.licenseNo" />
      <van-cell title="发证日期" :value="drainUser.licenseDate" />
      <van-cell title="有效期至" :value="drainUser.licenseExpire" />
    </van-cell-group>

    <!-- 排放信息 -->
    <van-cell-group title="排放信息" class="info-group">
      <van-cell title="排放量" :value="drainUser.dischargeVolume" />
      <van-cell title="管道材质" :value="drainUser.pipeMaterial" />
      <van-cell title="管径" :value="drainUser.pipeDiameter" />
      <van-cell title="监测点" :value="drainUser.monitorPoint" />
    </van-cell-group>

    <!-- 备注 -->
    <van-cell-group title="备注信息" class="info-group">
      <van-cell>
        <p class="desc-text">{{ drainUser.remark }}</p>
      </van-cell>
    </van-cell-group>
  </div>
</template>

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

  :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;
  }
}

.status-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 12px 16px;
  background: var(--color-bg-card);
}

.info-group {
  margin-top: 8px;
}

.desc-text {
  font-size: 14px;
  line-height: 1.6;
  color: var(--color-text-regular);
  padding: 4px 0;
}
</style>
