ht80/sheji(1)/pages/xingchengxiangqing/xingchengxiangqing.js

const app = getApp()

Page({
  data: {
    plan: {},
    isLoading: true,
    showCheckinModal: false,
    currentCheckins: [],
    currentCheckinIndex: 0,
    currentSpotId: null,
    currentPlanId: null,
    spotImages: {},
    showMapModal: false,
    mapData: {
      longitude: 117.070218, // 默认济南中心点
      latitude: 36.666316,
      scale: 14,
      markers: [],
      polylines: [],
      includePoints: []
    },
    allSpots: []
  },

  onLoad(options) {
    if (options.id) {
      this.loadPlanDetail(options.id)
    } else {
      wx.showToast({
        title: '缺少行程ID',
        icon: 'none'
      })
      setTimeout(() => {
        wx.navigateBack()
      }, 1500)
    }
  },

  // 加载行程详情
  loadPlanDetail(planId) {
    wx.showLoading({
      title: '加载中...',
    })
    
    wx.request({
      url: app.globalData.apiBaseUrl + '/api/user/plans/' + planId + '/',
      method: 'GET',
      header: {
        'Authorization': 'Token ' + app.globalData.token
      },
      success: (res) => {
        if (res.statusCode === 200 && res.data.status === 'success') {
          const plan = res.data.data.plan;
          this.setData({
            plan: plan,
            isLoading: false
          });
          
          // 立即设置现有图片，然后异步获取更好的图片
          this.initSpotImages(plan);
          // 检查所有景点是否需要获取图片
          this.checkAndFetchSpotImages(plan);
        } else {
          this.handleError(res);
        }
      },
      fail: (err) => {
        wx.showToast({
          title: '网络错误',
          icon: 'none'
        });
        console.error('加载行程详情失败:', err);
      },
      complete: () => {
        wx.hideLoading();
      }
    });
  },

  // 初始化景点图片
  initSpotImages(plan) {
    if (!plan.day_plans) return;
    
    const spotImages = {...this.data.spotImages};
    
    // 遍历所有景点，设置初始图片
    plan.day_plans.forEach(dayPlan => {
      if (dayPlan.spots) {
        dayPlan.spots.forEach(spot => {
          // 如果景点已有图片，直接使用
          if (spot.image && !spot.image.includes('default')) {
            spotImages[spot.id] = spot.image;
          }
        });
      }
    });
    
    this.setData({ spotImages });
  },

  // 检查并获取景点图片
  checkAndFetchSpotImages(plan) {
    if (!plan.day_plans) return;
    
    const spotImages = {...this.data.spotImages};
    
    // 遍历所有景点
    plan.day_plans.forEach(dayPlan => {
      if (dayPlan.spots) {
        dayPlan.spots.forEach(spot => {
          // 如果景点没有图片或使用默认图片，尝试获取更好的图片
          if (!spot.image || spot.image.includes('default')) {
            this.fetchSpotImage(spot.id, spot.name, plan.cities);
          }
        });
      }
    });
  },

  // 获取景点图片
  fetchSpotImage(spotId, spotName, cities) {
    // 尝试从城市信息中提取城市名
    let cityName = '';
    if (cities && cities.length > 0) {
      cityName = cities[0].name;
    }
    
    wx.request({
      url: `${app.globalData.apiBaseUrl}/api/attractions/image/`,
      method: 'GET',
      data: {
        name: spotName,
        city: cityName
      },
      success: (res) => {
        if (res.statusCode === 200 && res.data.status === 'success') {
          // 更新单个图片
          this.setData({
            [`spotImages.${spotId}`]: res.data.image_url
          });
        }
        // 即使API返回错误，也保持现有图片不变
      },
      fail: (err) => {
        console.error('获取景点图片失败:', spotName, err);
        // 失败时保持现有图片不变
      }
    });
  },

  // 处理错误
  handleError(res) {
    let errorMsg = '加载失败'
    if (res.data && res.data.message) {
      errorMsg = res.data.message
    }
    
    wx.showToast({
      title: errorMsg,
      icon: 'none'
    })
    
    setTimeout(() => {
      wx.navigateBack()
    }, 1500)
  },

  // 返回上一页
  navigateBack() {
    wx.navigateBack()
  },

  // 分享行程
  sharePlan() {
    wx.showShareMenu({
      withShareTicket: true
    })
  },

  onShareAppMessage() {
    return {
      title: this.data.plan.title || '红色旅游行程',
      path: `/pages/xingchengxiangqing/xingchengxiangqing?id=${this.data.plan.id}`,
      imageUrl: this.data.plan.day_plans && this.data.plan.day_plans[0] && this.data.plan.day_plans[0].spots && this.data.plan.day_plans[0].spots[0] ? 
        this.data.plan.day_plans[0].spots[0].image : '/images/share-default.jpg'
    }
  },

  // 查看打卡记录
  viewCheckins: function(e) {
    const spotId = e.currentTarget.dataset.spotId;
    const planId = e.currentTarget.dataset.planId;
    
    this.setData({
      isLoading: true
    });
    
    // 获取打卡记录
    wx.request({
      url: `${app.globalData.apiBaseUrl}/api/user/spot-checkins/`,
      method: 'GET',
      data: {
        spot_id: spotId,
        plan_id: planId
      },
      header: {
        'Authorization': 'Token ' + app.globalData.token
      },
      success: (res) => {
        if (res.statusCode === 200 && res.data.status === 'success') {
          const checkins = res.data.data.checkins;
          
          if (checkins.length === 0) {
            wx.showToast({
              title: '暂无打卡记录',
              icon: 'none'
            });
            return;
          }
          
          // 格式化时间
          const formattedCheckins = checkins.map(item => {
            return {
              ...item,
              check_in_time: this.formatTime(item.check_in_time)
            };
          });
          
          this.setData({
            currentCheckins: formattedCheckins,
            currentCheckinIndex: 0,
            currentSpotId: spotId,
            currentPlanId: planId,
            showCheckinModal: true,
            isLoading: false
          });
        } else {
          this.handleError(res);
        }
      },
      fail: (err) => {
        wx.showToast({
          title: '获取打卡记录失败',
          icon: 'none'
        });
        console.error('获取打卡记录失败:', err);
        this.setData({
          isLoading: false
        });
      }
    });
  },

  // 格式化时间
  formatTime: function(timeString) {
    const date = new Date(timeString);
    const year = date.getFullYear();
    const month = (date.getMonth() + 1).toString().padStart(2, '0');
    const day = date.getDate().toString().padStart(2, '0');
    const hours = date.getHours().toString().padStart(2, '0');
    const minutes = date.getMinutes().toString().padStart(2, '0');
    
    return `${year}-${month}-${day} ${hours}:${minutes}`;
  },

  // 关闭弹窗
  closeCheckinModal: function() {
    this.setData({
      showCheckinModal: false,
      currentCheckins: [],
      currentCheckinIndex: 0
    });
  },

  // 滑动切换
  swiperChange: function(e) {
    this.setData({
      currentCheckinIndex: e.detail.current
    });
  },


  // 查看地图
viewOnMap: function() {
  this.prepareMapData();
  this.setData({
    showMapModal: true
  });
},

// 准备地图数据
prepareMapData: function() {
  const plan = this.data.plan;
  if (!plan.day_plans || plan.day_plans.length === 0) return;
  
  const markers = [];
  const polylines = [];
  const includePoints = [];
  const allSpots = []; // 收集所有景点
  
  // 收集所有景点的坐标
  plan.day_plans.forEach(dayPlan => {
    if (!dayPlan.spots) return;
    
    const dayColor = ['#e54d42','#f37b1d','#1cbbb4','#0081ff','#6739b6','#9c26b0','#e03997'][dayPlan.day_number - 1];
    const points = [];
    
    dayPlan.spots.forEach((spot, index) => {
      if (spot.longitude && spot.latitude) {
        // 添加标记点（添加callout内容）
        markers.push({
          id: spot.id,
          longitude: parseFloat(spot.longitude),
          latitude: parseFloat(spot.latitude),
          iconPath: '/images/marker-red-star.png',
          width: 30,
          height: 30,
          callout: {
            content: spot.name,
            color: '#333',
            fontSize: 12,
            borderRadius: 4,
            bgColor: '#ffffff',
            padding: 4,
            display: 'ALWAYS'
          },
          day: dayPlan.day_number,
          index: index
        });
        
        // 收集坐标点
        points.push({
          longitude: parseFloat(spot.longitude),
          latitude: parseFloat(spot.latitude)
        });
        
        includePoints.push({
          longitude: parseFloat(spot.longitude),
          latitude: parseFloat(spot.latitude)
        });
        
        // 添加到所有景点列表
        allSpots.push({
          id: spot.id,
          name: spot.name,
          day_number: dayPlan.day_number,
          longitude: parseFloat(spot.longitude),
          latitude: parseFloat(spot.latitude)
        });
      }
    });
    
    // 添加路线
    if (points.length > 1) {
      polylines.push({
        points: points,
        color: dayColor,
        width: 6,
        dottedLine: false
      });
    }
  });
  
  // 设置地图中心点为第一个景点或默认值
  let centerLongitude = 116.397428;
  let centerLatitude = 39.90923;
  
  if (includePoints.length > 0) {
    centerLongitude = includePoints[0].longitude;
    centerLatitude = includePoints[0].latitude;
  }
  
  this.setData({
    mapData: {
      longitude: centerLongitude,
      latitude: centerLatitude,
      scale: 14,
      markers: markers,
      polylines: polylines,
      includePoints: includePoints
    },
    allSpots: allSpots // 设置所有景点列表
  });
},

// 关闭地图弹窗
closeMapModal: function() {
  this.setData({
    showMapModal: false
  });
},
// 聚焦到指定标记点
focusOnMarker: function(e) {
  const markerId = e.currentTarget.dataset.markerId;
  const marker = this.data.mapData.markers.find(m => m.id === markerId);
  
  if (marker) {
    this.setData({
      'mapData.longitude': marker.longitude,
      'mapData.latitude': marker.latitude,
      'mapData.scale': 16
    });
  }
},


// 放大地图
  handleZoomIn: function() {
    if (this.data.mapData.scale < 18) {
      this.setData({
        'mapData.scale': this.data.mapData.scale + 1
      });
    }
  },
  
  // 缩小地图
  handleZoomOut: function() {
    if (this.data.mapData.scale > 3) {
      this.setData({
        'mapData.scale': this.data.mapData.scale - 1
      });
    }
  },
  
  // 重置视图以显示所有景点
  resetToAllAttractions: function() {
    const mapData = this.data.mapData;
    this.setData({
      'mapData.longitude': mapData.initialLongitude || 116.397428,
      'mapData.latitude': mapData.initialLatitude || 39.90923,
      'mapData.scale': mapData.initialScale || 14
    });
  }


})