<template>
  <view class="device-detail-page">
    <!-- 顶部导航 -->
    <view class="nav-bar">
      <button class="back-btn" @click="goBack">← 返回</button>
      <text class="nav-title">设备详情</text>
      <button class="save-btn" @click="saveDevice">保存</button>
    </view>

    <!-- 基础信息编辑区 -->
    <view class="base-info">
      <text class="section-title">基础信息</text>
      
      <!-- 设备图片编辑 -->
      <view class="info-item">
        <text class="label">设备图片：</text>
        <view class="img-upload">
          <image class="device-img" :src="currentDevice.image" mode="aspectFill"></image>
          <button class="change-img-btn" @click="chooseImage">更换图片</button>
        </view>
      </view>

      <!-- 设备名称编辑 -->
      <view class="info-item">
        <text class="label">设备名称：</text>
        <input 
          class="input" 
          v-model="currentDevice.name" 
          placeholder="请输入设备名称"
        />
      </view>

      <!-- SN码（不可编辑） -->
      <view class="info-item">
        <text class="label">SN码：</text>
        <text class="sn-text">{{ currentDevice.sn }}</text>
      </view>

      <!-- 设备类型（不可编辑） -->
      <view class="info-item">
        <text class="label">设备类型：</text>
        <text class="type-text">
          {{ deviceTabs.find(item => item.type === currentDevice.type).name || '未知类型' }}
        </text>
      </view>
    </view>

    <!-- 使用者/团队管理区 -->
    <view class="manager-info">
      <text class="section-title">归属管理</text>
      
      <!-- 使用者选择 -->
      <view class="info-item">
        <text class="label">使用者：</text>
        <picker 
          mode="selector" 
          :range="userList" 
          @change="selectUser"
        >
          <view class="picker">
            {{ currentDevice.user || '请选择使用者' }}
          </view>
        </picker>
      </view>

      <!-- 所属团队选择 -->
      <view class="info-item">
        <text class="label">所属团队：</text>
        <picker 
          mode="selector" 
          :range="teamList" 
          @change="selectTeam"
        >
          <view class="picker">
            {{ currentDevice.team || '请选择所属团队' }}
          </view>
        </picker>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      currentDevice: {}, // 当前编辑的设备信息
      deviceTabs: [
        { name: '全部设备', type: '' },
        { name: '智能硬件', type: 'hardware' },
        { name: '传感器', type: 'sensor' },
        { name: '控制器', type: 'controller' }
      ],
      // 模拟使用者列表
      userList: ['张三', '李四', '王五', '赵六'],
      // 模拟团队列表
      teamList: ['研发部', '测试部', '运维部', '市场部']
    }
  },
  onLoad(options) {
    // 获取设备ID并从列表中匹配设备信息
    const deviceId = Number(options.id);
    // 从全局/本地存储获取设备列表（实际项目建议用vuex/本地存储）
    const deviceList = getApp().globalData.deviceList || [];
    this.currentDevice = JSON.parse(JSON.stringify(deviceList.find(item => item.id === deviceId)));
    // 若未找到设备，返回上一页
    if (!this.currentDevice) {
      uni.showToast({ title: '设备不存在', icon: 'none' });
      setTimeout(() => this.goBack(), 1500);
    }
  },
  onShow() {
    // 初始化全局设备列表（方便跨页面共享）
    if (!getApp().globalData.deviceList) {
      getApp().globalData.deviceList = [
        {
          id: 1,
          name: '温湿度传感器',
          sn: 'SN20260210001',
          type: 'sensor',
          image: '/static/device/sensor.png',
          user: '张三',
          team: '研发部'
        },
        {
          id: 2,
          name: '智能控制器',
          sn: 'SN20260210002',
          type: 'controller',
          image: '/static/device/controller.png',
          user: '李四',
          team: '测试部'
        }
      ];
    }
  },
  methods: {
    // 返回上一页
    goBack() {
      uni.navigateBack();
    },
    // 选择设备图片（uniapp上传图片API）
    async chooseImage() {
      try {
        const res = await uni.chooseImage({
          count: 1, // 仅选1张
          sizeType: ['original', 'compressed'],
          sourceType: ['album', 'camera'] // 相册/相机
        });
        // 模拟上传图片（实际项目需上传到服务器，替换为返回的图片URL）
        this.currentDevice.image = res.tempFilePaths[0];
      } catch (err) {
        console.error('选择图片失败：', err);
        uni.showToast({ title: '选择图片失败', icon: 'none' });
      }
    },
    // 选择使用者
    selectUser(e) {
      this.currentDevice.user = this.userList[e.detail.value];
    },
    // 选择所属团队
    selectTeam(e) {
      this.currentDevice.team = this.teamList[e.detail.value];
    },
    // 保存设备信息
    saveDevice() {
      // 更新全局设备列表
      const deviceList = getApp().globalData.deviceList;
      const index = deviceList.findIndex(item => item.id === this.currentDevice.id);
      if (index > -1) {
        deviceList[index] = this.currentDevice;
        getApp().globalData.deviceList = deviceList;
      }
      uni.showToast({ title: '保存成功', icon: 'success' });
      setTimeout(() => this.goBack(), 1000);
    }
  }
};
</script>

<style scoped>
/* 页面整体样式 */
.device-detail-page {
  background-color: #f5f5f5;
  min-height: 100vh;
}

/* 导航栏 */
.nav-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 15px 20px;
  background-color: #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
.back-btn, .save-btn {
  background-color: transparent;
  border: none;
  font-size: 14px;
}
.back-btn {
  color: #666;
}
.save-btn {
  color: #409eff;
}
.nav-title {
  font-size: 18px;
  font-weight: 600;
  color: #333;
}

/* 信息区块 */
.base-info, .manager-info {
  background-color: #fff;
  margin: 10px;
  padding: 15px;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}
.section-title {
  display: block;
  font-size: 16px;
  font-weight: 600;
  color: #333;
  margin-bottom: 15px;
  padding-bottom: 5px;
  border-bottom: 1px solid #f0f0f0;
}

/* 信息项 */
.info-item {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
}
.label {
  width: 80px;
  font-size: 14px;
  color: #666;
}
.input, .picker, .sn-text, .type-text {
  flex: 1;
  padding: 8px 10px;
  font-size: 14px;
}
.input {
  border: 1px solid #e5e5e5;
  border-radius: 4px;
}
.sn-text, .type-text {
  color: #999;
}

/* 图片上传区 */
.img-upload {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 10px;
}
.device-img {
  width: 60px;
  height: 60px;
  border-radius: 8px;
}
.change-img-btn {
  background-color: #e5e5e5;
  color: #666;
  border: none;
  border-radius: 4px;
  padding: 5px 10px;
  font-size: 12px;
}
</style>