<template>
  <view class="page">
    <base-background />
    <!-- 使用自定义导航栏组件 -->
    <custom-navbar
        ref="customNavbar"
        title="往生供奉"/>
    <view class="container">
      <!-- 状态展示 -->
      <status-display
          v-if="loading"
          type="loading"
          loading-text="搜索中..."
      />
      
      <!-- 搜索框 -->
      <search-box
          v-model="searchName"
          :width="'682rpx'"
          :search-icon="CommonEnum.SEARCH"
          placeholder="请输入姓名进行查找"
          btn-text="搜索"
          @search="handleSearch"
      />
      <view class="body">
        <view class="center-files">
          <image :src="CommonEnum.CENTER_TILES" mode="aspectFit" class="files"></image>
        </view>
        <!-- 搜索结果 -->
        <view class="search-results" v-if="searchResults.length > 0">
          <view 
            class="result-card" 
            v-for="(item, index) in searchResults" 
            :key="index"
          >
            <!-- 卡片头部 -->
            <view class="card-header">
              <view class="header-info">
                <text class="label">牌位名称</text>
                <text class="label">编号(分区)</text>
              </view>
              <view class="view-details" @click="viewDetails(item)">
                <text class="details-text">查看详情 ></text>
              </view>
            </view>
            
            <!-- 姓名标签区域 -->
            <view class="names-section">
              <view 
                class="name-tag" 
                v-for="(name, nameIndex) in item.names" 
                :key="nameIndex"
                @click="selectName(item, name)"
              >
                <text class="name-text">{{ name }}</text>
              </view>
            </view>
          </view>
        </view>
        
        <!-- 空状态 -->
        <view class="empty-state" v-if="hasSearched && searchResults.length === 0">
          <text class="empty-text">未找到相关往生者信息</text>
        </view>
        
        <!-- 初始状态提示 -->
        <view class="initial-state" v-if="!hasSearched">
          <text class="initial-text">请输入姓名进行搜索</text>
        </view>
      </view> 
    </view>

    <view class="bottom-files">
      <image :src="CommonEnum.BOTTOM_TILES_2" mode="aspectFit" class="files"></image>
    </view>
  </view>
</template>

<script>
import {CommonEnum} from '@/enum/common.js'
import SearchBox from "../../components/search-box/search-box.vue"
import StatusDisplay from "../../components/status-display/status-display.vue"
import { searchDeceased } from '@/api/memorial/memorial.js'

export default {
  components: {
    SearchBox,
    StatusDisplay
  },
  data() {
    return {
      CommonEnum,
      searchName: '',
      loading: false,
      searchResults: [],
      hasSearched: false
    }
  },
  onLoad(options) {
    console.log('deceasedSearch页面接收到的参数:', options)
    
    // 从路由参数获取搜索关键词
    if (options.keyword) {
      this.searchName = decodeURIComponent(options.keyword)
      console.log('接收到搜索关键词:', this.searchName)
      
      // 自动执行搜索
      this.$nextTick(() => {
        this.handleSearch(this.searchName)
      })
    }
  },
  methods: {
    // 处理搜索
    async handleSearch(value) {
      if (!value || value.trim() === '') {
        uni.showToast({
          title: '请输入搜索内容',
          icon: 'none'
        })
        return
      }
      
      this.loading = true
      this.hasSearched = true
      
      try {
        const res = await searchDeceased({
          fullName: value.trim()
        })
        
        if (res.code === 200) {
          this.searchResults = res.data || []
          if (this.searchResults.length === 0) {
            uni.showToast({
              title: '未找到相关结果',
              icon: 'none'
            })
          }
        } else {
          throw new Error(res.msg || '搜索失败')
        }
      } catch (error) {
        console.error('搜索失败:', error)
        this.searchResults = []
        uni.showToast({
          title: error.message || '搜索失败',
          icon: 'none'
        })
      } finally {
        this.loading = false
      }
    },
    
    // 查看详情
    viewDetails(item) {
      console.log('查看详情:', item)
      // 跳转到详情页面
      uni.navigateTo({
        url: `/pages/memorial/enshrinedList?id=${item.id}`
      })
    },
    
    // 选择姓名
    selectName(item, name) {
      console.log('选择姓名:', name, '来自牌位:', item)
      // 可以跳转到该姓名的详情页面或执行其他操作
      uni.navigateTo({
        url: `/pages/memorial/enshrinedList?id=${item.id}&name=${encodeURIComponent(name)}`
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.page {
  width: 100%;
  min-height: 100vh;
}

.container {
  width: 100%;
  //min-height: 100vh;
  display: flex;
  align-items: center;
  flex-direction: column;
  padding-bottom: 180rpx;
  box-sizing: border-box;



  .body {
    border-radius: 18rpx;
    position: relative;
    height: 1400rpx;
    left: 0;
    top: 18rpx;
    background: #fff;

    .center-files {
      position: relative;
      width: 100%; // 确保占满宽度
      z-index: 10; // 防止被内容覆盖
      .files {
        width: 750rpx; // 图片宽度适配容器
        height: 47rpx; // 根据设计图调整高度
      }
    }
  }
}

// 搜索结果区域
.search-results {
  display: flex;
  width: 100%;
  margin-top: 20rpx;
  align-items: center;
  flex-direction: column;
  gap: 22rpx;

}

// 结果卡片
.result-card {
  padding: 40rpx;
  width: 676rpx;
  height: 248rpx;
  background: #FFFBF5;
  border-radius: 12rpx 12rpx 12rpx 12rpx;
  border: 1rpx solid #C7A26D;

}

// 卡片头部
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30rpx;
  //border:1px #13c2da solid;
  .header-info {
    display: flex;
    gap: 60rpx;
    //border:1px red solid;


    .label {
      //border:1px #11ff00 solid;
      font-weight: 500;
      font-size: 36rpx;
      color: #522510;
      line-height: 50rpx;
      text-align: center;

    }
  }
  
  .view-details {
    .details-text {
      cursor: pointer;
      //border:1px #11ff00 solid;
      font-weight: 400;
      font-size: 24rpx;
      color: #AD9B91;
      line-height: 32rpx;
      text-align: left;
      
      &:hover {
        color: #A24242;

      }
    }
  }
}

// 姓名标签区域
.names-section {
  display: flex;
  flex-wrap: wrap;
  gap: 20rpx 22rpx;

}

// 姓名标签
.name-tag {

  cursor: pointer;
  transition: all 0.3s ease;
  background: #FFF1DD;
  border-radius: 6rpx 6rpx 6rpx 6rpx;
  padding:7rpx 29rpx;

  
  &:hover {
    background: #FFD700;
    border-color: #DAA520;
  }
  
  .name-text {
    font-weight: 400;
    font-size: 24rpx;
    color: #695347;
    line-height: 32rpx;
    text-align: center;

  }
}

// 空状态
.empty-state {
  margin-top: 100rpx;
  text-align: center;
  
  .empty-text {
    font-size: 28rpx;
    color: #999;
  }
}

// 初始状态
.initial-state {
  margin-top: 100rpx;
  text-align: center;
  
  .initial-text {
    font-size: 28rpx;
    color: #666;
  }
}

.bottom-files {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  z-index: 10;
  background-color: #ffffff;
  
  .files {
    width: 750rpx;
    height: 90rpx;
  }
}
</style>