<template>
  <view class="page-container">
    <view class="popup-content card">
      <view class="popup-title">资产详情</view>
      <view class="title-divider"></view>

      <view class="info-group">
        <view class="group-label">基础信息</view>
        <view class="popup-text">资产名称：{{ detailData.assetName }}</view>
        <view class="popup-text">设备序列号：{{ detailData.assetSn }}</view>
        <view class="popup-text">规格：{{ detailData.specifications }}</view>
        <view class="popup-text">型号：{{ detailData.model }}</view>
      </view>

      <view class="info-group">
        <view class="group-label">资产属性</view>
        <view class="popup-text">品牌：{{ detailData.assetBrand }}</view>
        <view class="popup-text">状态：
          <text class="status-tag" v-if="detailData.status === 1 || detailData.status === 0">使用中</text>
          <text class="status-tag" v-else-if="detailData.status === 2">报废</text>
          <text class="status-tag" v-else-if="detailData.status === 3">闲置</text>
          <text class="status-tag" v-else-if="detailData.status === 4">维修中</text>
          <text class="status-tag" v-else-if="detailData.status === 5">外借</text>
          <text class="status-tag" v-else>未知</text>
        </view>
        <view class="popup-text">制造商：{{ detailData.manufacturer }}</view>
        <view class="popup-text">保存位置：{{ detailData.location }}</view>
      </view>

      <view class="info-group">
        <view class="group-label">财务信息</view>
        <view class="popup-text">采购日期：{{ detailData.purchaseDate }}</view>
        <view class="popup-text">购买价格：{{ detailData.purchasePrice }}</view>
        <view class="popup-text">购买数量：{{ detailData.purchaseQuantity }}</view>
        <view class="popup-text">单位：{{ detailData.unit }}</view>
        <view class="popup-text">购买人：{{ detailData.purchaseManName }}</view>
        <view class="popup-text">现有价值：{{ detailData.value }}</view>
        <view class="popup-text">折旧率：{{ detailData.depreciationRate }}</view>
        <view class="popup-text">使用期限（单位年）：{{ detailData.usefullife }}</view>
      </view>

      <view class="info-group">
        <view class="group-label">使用信息</view>
        <view class="popup-text">使用人：{{ detailData.useManName }}</view>
        <view class="popup-text">使用部门：{{ detailData.departmentName }}</view>
        <view class="popup-text">负责人：{{ detailData.headerName }}</view>
        <view class="popup-text">是否处置：
          <text class="disposal-tag" v-if="detailData.isDisposal === 0">否</text>
          <text class="disposal-tag" v-else>是</text>
        </view>
        <view class="popup-text">处置日期：{{ detailData.disposaldate || '未处置' }}</view>
        <view class="popup-text">保修到期时间：{{ detailData.warrantyDate }}</view>
        <view class="popup-text">说明：{{ detailData.note || '无' }}</view>
      </view>

      <view class="info-group">
        <view class="group-label">登记信息</view>
        <view class="popup-text">登记人：{{ detailData.registrantName }}</view>
        <view class="popup-text">登记时间：{{ detailData.registrantDate }}</view>
      </view>

      <view class="image-viewer">
        <view class="image-label">设备照片</view>
        <view class="image-container" @tap="previewImage">
          <image class="image" :src="detailData.image || defaultImage" mode="aspectFit" />
          <view class="image-hint" v-if="detailData.image">点击预览大图</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
// @ts-ignore JS模块无类型声明
import { fetchAssetInfoById } from '@/pages/api/fixedAssets.js'

const detailData = ref<any>({})
const defaultImage = '/static/images/asset-default.png'

onLoad(async (options?: Record<string, any>) => {
  const sn = options?.assetSn || options?.sn
  if (sn) {
    await fetchBySn(sn)
    return
  }
  // 回退：使用 eventChannel 直接接收完整对象
  const pages = getCurrentPages()
  // @ts-ignore 小程序端API类型可能缺失
  const eventChannel = (pages[pages.length - 1] as any)?.getOpenerEventChannel?.()
  eventChannel?.on('sendData', (res: any) => { detailData.value = res?.data || {} })
})

async function fetchBySn(sn: string) {
  try {
    const data: any = await fetchAssetInfoById(sn)
    // 兼容多种返回结构
    const d = data?.data
    if (Array.isArray(d) && d.length > 0) {
      detailData.value = d[0]
      detailData.value.image = 'data:image/png;base64,' + detailData.value.image
    } else {
      detailData.value = {}
    }
  } catch (e) {
    console.error('获取资产详情失败', e)
    uni.showToast({ title: '获取详情失败', icon: 'none' })
  }
}

function previewImage() {
  if (detailData.value.image) {
    uni.previewImage({ urls: [detailData.value.image], current: detailData.value.image,
      fail: () => uni.showToast({ title: '预览失败，请稍后重试', icon: 'none' }) })
  } else {
    uni.showToast({ title: '暂无设备照片', icon: 'none' })
  }
}
</script>

<style scoped>
.page-container { padding: 24rpx; }
.card { background: #fff; border-radius: 20rpx; box-shadow: 0 8rpx 24rpx rgba(0,0,0,0.06); }
.popup-content { padding: 20rpx; }
.popup-title { font-size: 32rpx; font-weight: 600; color: #222; }
.title-divider { height: 2rpx; background: #f0f1f5; margin: 12rpx 0 20rpx; }
.info-group { margin-bottom: 16rpx; }
.group-label { font-size: 26rpx; color: #666; margin-bottom: 6rpx; }
.popup-text { font-size: 24rpx; color: #333; margin-top: 6rpx; }
.status-tag, .disposal-tag { color: #3a5ddd; }
.image-viewer { margin-top: 20rpx; }
.image-label { font-size: 26rpx; color: #666; margin-bottom: 8rpx; }
.image-container { background: #fafafa; border: 1rpx solid #eee; border-radius: 12rpx; display: flex; align-items: center; justify-content: center; padding: 12rpx; position: relative; }
.image { width: 100%; height: 360rpx; }
.image-hint { position: absolute; right: 12rpx; bottom: 12rpx; font-size: 22rpx; color: #9a9aa0; }
</style>
