<script setup lang="ts">
import type { BaseUser } from '@af-mobile-client-vue3/components/data/UserDetail/types'
import NormalDataLayout from '@af-mobile-client-vue3/components/layout/NormalDataLayout/index.vue'
import { Button as VanButton } from 'vant'

import { reactive } from 'vue'
import { useRouter } from 'vue-router'

const router = useRouter()

// 模拟用户数据
const mockUsers = reactive<BaseUser[]>([
  {
    f_userinfo_id: '65836',
    f_userinfo_code: '1166730',
    f_user_name: '刘思聪',
    f_user_phone: '15199996077',
    f_address: '滨河营业厅',
    f_user_state: '正常',
    f_user_type: '民用',
    f_meter_type: '气量卡表',
    f_meternumber: '0002353',
    f_balance: 1.61,
    f_balance_amount: 0,
    f_userfiles_id: '71717',
    f_times: 11,
    f_total_gas: 768,
    f_valve_state: '开启',
    f_hascard: '是',
    f_card_id: '9400002001',
  },
])

// 切换用户 - 现在跳转到新路由
function switchUser() {
  const query = {
    checkId: null,
    safeCheckType: '年度普查',
    userType: '民用',
    userinfoid: 96547,
    newDate: new Date().getTime(),
    isDraft: 'false', // 是否存在临时数据
    extData: 111,
  }
  router.push({
    name: 'SecurityCertificate',
    query,
  })
}
</script>

<template>
  <NormalDataLayout title="UserDetail 用户详情组件">
    <template #layout_content>
      <div class="demo-container">
        <!-- 基础使用说明 -->
        <div class="demo-section">
          <h3>基础使用</h3>
          <p>SecurityCertificate 组件用于展示用户的详细信息，支持动态配置记录入口和交互功能。</p>
        </div>

        <!-- 用户选择器 -->
        <div class="demo-section">
          <h3>点击用户查看详情</h3>
          <div class="user-selector">
            <VanButton
              size="small"
              @click="switchUser()"
            >
              {{ mockUsers[0].f_user_name }}
              <span class="user-status" :class="`status-${mockUsers[0].f_user_state}`">
                {{ mockUsers[0].f_user_state }}
              </span>
            </VanButton>
          </div>
        </div>

        <!-- 功能特性说明 -->
        <div class="demo-section">
          <h3>组件特性</h3>
          <ul class="feature-list">
            <li>📋 用户基本信息展示与折叠</li>
            <li>🔗 可配置的记录入口</li>
            <li>⏰ 支持显示最近业务时间</li>
            <li>🖨️ 内置打印功能</li>
            <li>⚙️ 自定义 API 接口</li>
            <li>🎨 多种用户状态样式</li>
          </ul>
        </div>

        <!-- Props 说明 -->
        <div class="demo-section">
          <h3>主要 Props</h3>
          <div class="props-table">
            <div class="props-row">
              <span class="prop-name">userInfoId</span>
              <span class="prop-type">string</span>
              <span class="prop-desc">用户ID（必传）</span>
            </div>
            <div class="props-row">
              <span class="prop-name">showRecentTime</span>
              <span class="prop-type">boolean</span>
              <span class="prop-desc">是否展示历史时间</span>
            </div>
            <div class="props-row">
              <span class="prop-name">recordEntries</span>
              <span class="prop-type">RecordEntry[]</span>
              <span class="prop-desc">记录入口配置</span>
            </div>
            <div class="props-row">
              <span class="prop-name">showBottomButtons</span>
              <span class="prop-type">boolean</span>
              <span class="prop-desc">是否显示底部按钮区域</span>
            </div>
            <div class="props-row">
              <span class="prop-name">showHeader</span>
              <span class="prop-type">boolean</span>
              <span class="prop-desc">是否显示头部导航栏</span>
            </div>
            <div class="props-row">
              <span class="prop-name">headerTitle</span>
              <span class="prop-type">string</span>
              <span class="prop-desc">头部标题文本</span>
            </div>
            <div class="props-row">
              <span class="prop-name">#bottom</span>
              <span class="prop-type">slot</span>
              <span class="prop-desc">底部插槽，可自定义按钮内容</span>
            </div>
          </div>
        </div>
      </div>
    </template>
  </NormalDataLayout>
</template>

<style scoped lang="less">
.demo-container {
  padding: 16px;
}

.demo-section {
  margin-bottom: 24px;

  h3 {
    margin: 0 0 12px 0;
    font-size: 16px;
    font-weight: 600;
    color: #323233;
  }

  p {
    margin: 0 0 12px 0;
    font-size: 14px;
    color: #646566;
    line-height: 1.5;
  }
}

.user-selector {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;

  .van-button {
    display: flex;
    align-items: center;
    gap: 6px;
  }

  .user-status {
    font-size: 12px;
    padding: 1px 6px;
    border-radius: 10px;

    &.status-正常 {
      background-color: #e6ffed;
      color: #52c41a;
    }

    &.status-欠费 {
      background-color: #fff1f0;
      color: #f5222d;
    }

    &.status-暂停 {
      background-color: #fff7e6;
      color: #fa8c16;
    }
  }
}

.feature-list {
  margin: 0;
  padding-left: 20px;

  li {
    margin-bottom: 8px;
    font-size: 14px;
    color: #646566;
    line-height: 1.5;
  }
}

.props-table {
  background-color: #f8f9fa;
  border-radius: 8px;
  padding: 12px;

  .props-row {
    display: flex;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid #ebedf0;

    &:last-child {
      border-bottom: none;
    }
  }

  .prop-name {
    flex: 0 0 120px;
    font-size: 13px;
    font-weight: 600;
    color: #1976d2;
    font-family: 'Monaco', 'Consolas', monospace;
  }

  .prop-type {
    flex: 0 0 80px;
    font-size: 12px;
    color: #e91e63;
    font-family: 'Monaco', 'Consolas', monospace;
  }

  .prop-desc {
    flex: 1;
    font-size: 13px;
    color: #646566;
  }
}
</style>
