<template>
  <view class="container">
    <view class="header">
      <text class="back-btn" @click="goBack">‹ 返回</text>
      <text class="title">物品详情</text>
    </view>
    
    <scroll-view scroll-y class="content" refresher-enabled @refresherrefresh="onRefresh" :refresher-triggered="refreshing">
      <!-- 加载状态 -->
      <view v-if="loading" class="loading">
        <text>加载中...</text>
      </view>
      
      <!-- 详情内容 -->
      <view v-else-if="item">
        <!-- 基本信息卡片 -->
        <view class="card">
          <view class="card-header">
            <text class="card-title">基本信息</text>
          </view>
          <view class="info-row">
            <text class="info-label">名称</text>
            <text class="info-value">{{ item.Name }}</text>
          </view>
          <view class="info-row" v-if="item.SerialNumber">
            <text class="info-label">编号</text>
            <text class="info-value">{{ item.SerialNumber }}</text>
          </view>
          <view class="info-row" v-if="item.Specification">
            <text class="info-label">规格</text>
            <text class="info-value">{{ item.Specification }}</text>
          </view>
          <view class="info-row" v-if="item.ContainerBreadcrumb">
            <text class="info-label">位置</text>
            <text class="info-value location">{{ item.ContainerBreadcrumb }}</text>
          </view>
          <view class="info-row" v-if="item.Remark">
            <text class="info-label">备注</text>
            <text class="info-value">{{ item.Remark }}</text>
          </view>
          <view class="info-row">
            <text class="info-label">创建时间</text>
            <text class="info-value">{{ formatDate(item.CreatedAt) }}</text>
          </view>
          <view class="info-row">
            <text class="info-label">更新时间</text>
            <text class="info-value">{{ formatDate(item.UpdatedAt) }}</text>
          </view>
        </view>
        
        <!-- 图片卡片 -->
        <view class="card" v-if="photos.length > 0">
          <view class="card-header">
            <text class="card-title">图片 ({{ photos.length }})</text>
          </view>
          <view class="photo-grid">
            <view 
              class="photo-item" 
              v-for="photo in photos" 
              :key="photo.ID"
            >
              <image 
                class="photo-img" 
                :src="getImageUrl(photo.Sha256)" 
                mode="aspectFill"
                @click="previewAllImages(photo.Sha256)"
              />
            </view>
          </view>
        </view>
        
        <!-- 移动历史 -->
        <view class="card" v-if="commits.length > 0">
          <view class="card-header">
            <text class="card-title">移动历史</text>
          </view>
          <view class="timeline">
            <view 
              class="timeline-item" 
              v-for="commit in commits" 
              :key="commit.ID"
            >
              <view class="timeline-dot"></view>
              <view class="timeline-content">
                <text class="timeline-text">
                  {{ commit.OldContainerBreadcrumb || '无' }} → {{ commit.NewContainerBreadcrumb || '已移除' }}
                </text>
                <text class="timeline-date">{{ formatDate(commit.CreatedAt) }}</text>
              </view>
            </view>
          </view>
        </view>
        
        <!-- 关联工单 -->
        <view class="card" v-if="workOrders.length > 0">
          <view class="card-header">
            <text class="card-title">关联工单</text>
          </view>
          <view 
            class="workorder-item" 
            v-for="wo in workOrders" 
            :key="wo.ID"
            @click="goToWorkOrder(wo.id)"
          >
            <text class="wo-id">#{{ wo.id }}</text>
            <text class="wo-title">{{ wo.title }}</text>
            <text class="wo-status" :class="wo.status">{{ getWorkOrderStatusText(wo.status) }}</text>
          </view>
        </view>
      </view>
      
      <!-- 空状态 -->
      <view v-else class="empty">
        <text>未找到物品信息</text>
      </view>
    </scroll-view>
    
    <!-- 底部操作栏 -->
    <view class="action-bar" v-if="item">
      <view class="action-btn workorder" @click="addWorkOrder">
        <text>+ 工单</text>
      </view>
      <view class="action-btn edit" @click="editItem">
        <text>编辑</text>
      </view>
      <view class="action-btn move" @click="openMoveModal">
        <text>移动</text>
      </view>
    </view>
    
    <!-- 移动弹窗 -->
    <view class="modal" v-if="moveModalVisible" @click="closeMoveModal">
      <view class="modal-content" @click.stop>
        <view class="modal-header">
          <text class="modal-title">移动物品</text>
          <text class="modal-close" @click="closeMoveModal">×</text>
        </view>
        <view class="modal-body">
          <view class="form-item">
            <text class="form-label">选择容器</text>
            <picker mode="selector" :range="containerOptions" range-key="Title" @change="onContainerChange">
              <view class="picker">
                {{ selectedContainer.Title || '请选择目标容器' }}
              </view>
            </picker>
          </view>
        </view>
        <view class="modal-footer">
          <text class="btn-cancel" @click="closeMoveModal">取消</text>
          <text class="btn-confirm" @click="confirmMove">确定</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { warehouseApi } from '@/api/warehouse.js'
import { useConfigStore } from '@/stores/config.js'

const configStore = useConfigStore()
const itemId = ref(0)
const loading = ref(false)
const item = ref(null)
const photos = ref([])
const commits = ref([])
const workOrders = ref([])
const canModify = ref(false)

// 移动相关
const moveModalVisible = ref(false)
const containerOptions = ref([])
const selectedContainer = ref({})
const refreshing = ref(false)

const workOrderStatusOptions = [
  { value: 'pending', label: '待处理' },
  { value: 'checked', label: '已检查' },
  { value: 'parts_ordered', label: '已下单零件' },
  { value: 'repaired', label: '已维修' },
  { value: 'returned', label: '已送还' },
  { value: 'unrepairable', label: '无法维修' }
]

function getWorkOrderStatusText(status) {
  const option = workOrderStatusOptions.find(s => s.value === status)
  return option ? option.label : status
}

function formatDate(dateStr) {
  if (!dateStr) return ''
  const date = new Date(dateStr)
  return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')} ${String(date.getHours()).padStart(2, '0')}:${String(date.getMinutes()).padStart(2, '0')}`
}

function getImageUrl(sha256) {
  const baseUrl = configStore.getFileBaseUrl()
  return `${baseUrl}/api/files/get/${sha256}`
}

function previewAllImages(currentSha) {
  const urls = photos.value.map(p => getImageUrl(p.Sha256))
  const currentIndex = photos.value.findIndex(p => p.Sha256 === currentSha)
  uni.previewImage({
    urls: urls,
    current: currentIndex >= 0 ? currentIndex : 0
  })
}

async function fetchDetail() {
  loading.value = true
  try {
    const res = await warehouseApi.getItem(itemId.value)
    if (res.errCode === 0 && res.data) {
      item.value = res.data.item
      photos.value = res.data.photos || []
      commits.value = res.data.commits || []
      workOrders.value = res.data.work_orders || []
      canModify.value = res.data.canModifyItem
    } else {
      uni.showToast({ title: '获取详情失败', icon: 'none' })
    }
  } catch (e) {
    console.error('获取物品详情失败', e)
    uni.showToast({ title: '获取详情失败', icon: 'none' })
  } finally {
    loading.value = false
  }
}

async function fetchContainers() {
  try {
    const res = await warehouseApi.listContainer({
      all_levels: true,
      entries: 5000,
      page: 1
    })
    if (res.errCode === 0 && res.data) {
      // 添加根目录选项，并格式化容器数据
      const containers = res.data.containers || []
      containerOptions.value = [
        { ID: 0, Title: '根目录' }
      ].concat(containers.map(c => ({
        ID: c.ID,
        Title: c.Title
      })))
    }
  } catch (e) {
    console.error('获取容器列表失败', e)
  }
}

function openMoveModal() {
  moveModalVisible.value = true
  fetchContainers()
}

function closeMoveModal() {
  moveModalVisible.value = false
  selectedContainer.value = {}
}

function onContainerChange(e) {
  selectedContainer.value = containerOptions.value[e.detail.value]
}

async function confirmMove() {
  try {
    uni.showLoading({ title: '移动中...' })
    // ID 为 0 表示移动到根目录
    const targetId = selectedContainer.value.ID === 0 ? null : selectedContainer.value.ID
    const res = await warehouseApi.moveItem(itemId.value, targetId)
    if (res.errCode === 0) {
      uni.showToast({ title: '移动成功', icon: 'success' })
      moveModalVisible.value = false
      selectedContainer.value = {}
      fetchDetail()
    } else {
      uni.showToast({ title: res.errMsg || '移动失败', icon: 'none' })
    }
  } catch (e) {
    console.error('移动失败', e)
    uni.showToast({ title: '移动失败', icon: 'none' })
  } finally {
    uni.hideLoading()
  }
}

function editItem() {
  uni.navigateTo({
    url: `/pages/warehouse/item-edit?id=${itemId.value}`
  })
}

function addWorkOrder() {
  // 存储预填数据到 storage（参考 web 端实现）
  const prefillData = {
    itemId: itemId.value,
    title: item.value.SerialNumber
      ? `${item.value.Name}-${item.value.SerialNumber}`
      : item.value.Name,
    description: item.value.Remark || '',
  }
  uni.setStorageSync('prefill_work_order', JSON.stringify(prefillData))
  uni.navigateTo({
    url: '/pages/workorder/add-workorder'
  })
}

function goToWorkOrder(id) {
  uni.navigateTo({
    url: `/pages/workorder/show-workorder?id=${id}`
  })
}

function goBack() {
  uni.navigateBack({ delta: 1 })
}

async function onRefresh() {
  refreshing.value = true
  await fetchDetail()
  refreshing.value = false
}

onMounted(() => {
  // 备用：在某些情况下 onLoad 可能未触发
})

// 使用 onLoad 获取页面参数（推荐方式）
import { onLoad, onShow } from '@dcloudio/uni-app'
onLoad((options) => {
  console.log('item-detail onLoad options:', options)
  if (options && options.id) {
    itemId.value = parseInt(options.id)
    fetchDetail()
  }
})

// 每次显示页面时刷新数据（从编辑页返回时自动更新）
onShow(() => {
  if (itemId.value > 0) {
    fetchDetail()
  }
})
</script>

<style scoped>
.container {
  min-height: 100vh;
  background-color: #f5f5f5;
  padding-bottom: 120rpx;
}

.header {
  background-color: #fff;
  padding: 30rpx;
  display: flex;
  align-items: center;
}

.back-btn {
  font-size: 32rpx;
  color: #007AFF;
  margin-right: 20rpx;
}

.title {
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
  flex: 1;
  text-align: center;
  padding-right: 60rpx;
}

.title {
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
}

.content {
  height: calc(100vh - 180rpx);
}

.loading, .empty {
  text-align: center;
  padding: 100rpx 0;
  color: #999;
}

.card {
  background-color: #fff;
  margin: 20rpx;
  border-radius: 12rpx;
  overflow: hidden;
}

.card-header {
  padding: 25rpx 30rpx;
  border-bottom: 1rpx solid #f0f0f0;
}

.card-title {
  font-size: 30rpx;
  font-weight: bold;
  color: #333;
}

.info-row {
  display: flex;
  padding: 20rpx 30rpx;
  border-bottom: 1rpx solid #f5f5f5;
}

.info-row:last-child {
  border-bottom: none;
}

.info-label {
  width: 150rpx;
  font-size: 28rpx;
  color: #666;
}

.info-value {
  flex: 1;
  font-size: 28rpx;
  color: #333;
}

.info-value.location {
  color: #007AFF;
}

.photo-grid {
  padding: 20rpx 30rpx;
  display: flex;
  flex-wrap: wrap;
  gap: 15rpx;
}

.photo-item {
  width: calc((100% - 30rpx) / 3);
  height: 200rpx;
  border-radius: 10rpx;
  overflow: hidden;
}

.photo-img {
  width: 100%;
  height: 100%;
}

.timeline {
  padding: 20rpx 30rpx;
}

.timeline-item {
  display: flex;
  padding: 15rpx 0;
}

.timeline-dot {
  width: 16rpx;
  height: 16rpx;
  background-color: #007AFF;
  border-radius: 50%;
  margin-right: 20rpx;
  margin-top: 8rpx;
}

.timeline-content {
  flex: 1;
}

.timeline-text {
  display: block;
  font-size: 28rpx;
  color: #333;
  margin-bottom: 8rpx;
}

.timeline-date {
  display: block;
  font-size: 24rpx;
  color: #999;
}

.workorder-item {
  display: flex;
  align-items: center;
  padding: 20rpx 30rpx;
  border-bottom: 1rpx solid #f5f5f5;
}

.workorder-item:last-child {
  border-bottom: none;
}

.wo-id {
  font-size: 28rpx;
  color: #007AFF;
  margin-right: 15rpx;
}

.wo-title {
  flex: 1;
  font-size: 28rpx;
  color: #333;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wo-status {
  font-size: 22rpx;
  padding: 6rpx 16rpx;
  border-radius: 20rpx;
  background-color: #f0f0f0;
  color: #666;
}

.wo-status.pending {
  background-color: #fff3e0;
  color: #ff9800;
}

.wo-status.checked {
  background-color: #e3f2fd;
  color: #2196f3;
}

.wo-status.parts_ordered {
  background-color: #e8f5e9;
  color: #4caf50;
}

.wo-status.repaired {
  background-color: #f3e5f5;
  color: #9c27b0;
}

.wo-status.returned {
  background-color: #e0f2f1;
  color: #009688;
}

.action-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  background-color: #fff;
  padding: 20rpx 30rpx;
  padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
  box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.1);
}

.action-btn {
  flex: 1;
  text-align: center;
  padding: 25rpx;
  border-radius: 10rpx;
  font-size: 30rpx;
}

.action-btn.workorder {
  background-color: #4CAF50;
  color: #fff;
  margin-right: 20rpx;
}

.action-btn.edit {
  background-color: #007AFF;
  color: #fff;
  margin-right: 20rpx;
}

.action-btn.move {
  background-color: #ff9800;
  color: #fff;
}

/* 弹窗样式 */
.modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.modal-content {
  width: 85%;
  background-color: #fff;
  border-radius: 16rpx;
  overflow: hidden;
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30rpx;
  border-bottom: 1rpx solid #f0f0f0;
}

.modal-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
}

.modal-close {
  font-size: 50rpx;
  color: #999;
}

.modal-body {
  padding: 30rpx;
}

.form-item {
  margin-bottom: 20rpx;
}

.form-label {
  display: block;
  font-size: 28rpx;
  color: #666;
  margin-bottom: 15rpx;
}

.picker {
  background-color: #f5f5f5;
  padding: 25rpx;
  border-radius: 10rpx;
  font-size: 28rpx;
}

.modal-footer {
  display: flex;
  border-top: 1rpx solid #f0f0f0;
}

.btn-cancel, .btn-confirm {
  flex: 1;
  text-align: center;
  padding: 30rpx;
  font-size: 30rpx;
}

.btn-cancel {
  color: #666;
  border-right: 1rpx solid #f0f0f0;
}

.btn-confirm {
  color: #007AFF;
}
</style>
