<template>
  <view class="followup-detail-page">
    <!-- 自定义导航栏 -->
    <view class="custom-navbar">
      <view class="navbar-content">
        <text class="nav-btn" @click="handleBack">‹</text>
        <text class="nav-title">跟进详情</text>
        <text class="nav-btn" style="opacity: 0;">占位</text>
      </view>
    </view>

    <!-- 内容区域 -->
    <scroll-view class="content-scroll" scroll-y v-if="!loading">
      <view style="padding: 16px">
      <!-- 跟进人信息卡片 -->
      <view class="info-card">
        <view class="card-header">
          <image 
            class="user-avatar" 
            :src="followupDetail.userAvatar || '/static/default-avatar.png'"
            mode="aspectFill"
          />
          <view class="user-info">
            <text class="user-name">{{ followupDetail.userName || '--' }}</text>
            <text class="user-role">销售经理</text>
          </view>

        </view>
      </view>

      <!-- 客户信息 -->
      <view class="info-card" v-if="followupDetail.customerName">
        <view class="card-title">客户信息</view>
        <view class="info-row">
          <text class="info-label">客户名称</text>
          <text class="info-value">{{ followupDetail.customerName }}</text>
        </view>
        <view class="info-row" v-if="followupDetail.customerId">
          <text class="info-label">客户ID</text>
          <text class="info-value">{{ followupDetail.customerId }}</text>
        </view>
      </view>

      <!-- 跟进内容 -->
      <view class="info-card">
        <view class="card-title">跟进内容</view>
        <view class="content-text">{{ followupDetail.content || '暂无内容' }}</view>
        <!-- 图片展示（一行最多三个） -->
        <view class="followup-images-wrapper" v-if="followupImages && followupImages.length > 0">
          <view 
            class="followup-image-item" 
            v-for="(imageUrl, imgIndex) in followupImages" 
            :key="imgIndex"
            @click="previewFollowupImages(followupImages, imgIndex)"
          >
            <image 
              :src="imageUrl" 
              mode="aspectFill" 
              class="followup-image"
            />
          </view>
        </view>
      </view>

      <!-- 下次跟进 -->
      <view class="info-card" v-if="followupDetail.nextFollowTime">
        <view class="card-title">时间信息</view>
        <view class="info-row">
          <text class="info-label">跟进时间</text>
          <text class="info-value">{{ formatDateTime(followupDetail.followTime) }}</text>
        </view>
        <view class="info-row">
          <text class="info-label">下次跟进</text>
          <text class="info-value">{{ formatDateTime(followupDetail.nextFollowTime) }}</text>
        </view>
        <view class="info-row" v-if="followupDetail.createTime">
          <text class="info-label">创建时间</text>
          <text class="info-value">{{ followupDetail.createTime }}</text>
        </view>
      </view>

      <!-- 客户状态信息 -->
      <view class="info-card" v-if="followupDetail.status || followupDetail.customerStatus">
        <view class="card-title">状态信息</view>
        <view class="info-row" v-if="followupDetail.status">
          <text class="info-label">跟进状态</text>
          <view class="status-badge" :class="getStatusClass(followupDetail.status)">
            <text>{{ getStatusText(followupDetail.status) }}</text>
          </view>
        </view>
        <view class="info-row" v-if="followupDetail.customerStatus">
          <text class="info-label">客户状态</text>
          <view class="status-badge" :class="getCustomerStatusClass(followupDetail.customerStatus)">
            <text>{{ getCustomerStatusText(followupDetail.customerStatus) }}</text>
          </view>
        </view>
        <view class="info-row" v-if="followupDetail.intentLevel">
          <text class="info-label">意向强度</text>
          <text class="info-value">{{ getIntentStrengthText(followupDetail.intentLevel) }}</text>
        </view>
        <view class="info-row" v-if="followupDetail.customerIntentLevel">
          <text class="info-label">客户意向强度</text>
          <text class="info-value">{{ getIntentStrengthText(followupDetail.customerIntentLevel) }}</text>
        </view>
        <view class="info-row" v-if="followupDetail.intents">
          <text class="info-label">客户意向</text>
          <text class="info-value">{{ formatIntents(followupDetail.intents) }}</text>
        </view>
        <view class="info-row" v-if="followupDetail.followType || followupDetail.followMethod || followupDetail.type">
          <text class="info-label">跟进方式</text>
          <text class="info-value">{{ getFollowTypeText(followupDetail.followType || followupDetail.followMethod || followupDetail.type) }}</text>
        </view>
      </view>

      <!-- 备注信息 -->
      <view class="info-card" v-if="followupDetail.remark">
        <view class="card-title">备注</view>
        <view class="content-text">{{ followupDetail.remark }}</view>
      </view>

      <!-- 客户分析 -->
      <view class="info-card" v-if="hasAnalysis">
        <view class="card-title">客户分析</view>
        <view class="info-row" v-if="followupDetail.concern">
          <text class="info-label">顾虑点</text>
          <text class="info-value">{{ followupDetail.concern }}</text>
        </view>
        <view class="info-row" v-if="followupDetail.pain">
          <text class="info-label">痛点</text>
          <text class="info-value">{{ followupDetail.pain }}</text>
        </view>
        <view class="info-row" v-if="followupDetail.attention">
          <text class="info-label">关注点</text>
          <text class="info-value">{{ followupDetail.attention }}</text>
        </view>
        <view class="info-row" v-if="followupDetail.demand">
          <text class="info-label">需求点</text>
          <text class="info-value">{{ followupDetail.demand }}</text>
        </view>
      </view>


      </view>
    </scroll-view>

    <!-- 加载状态 -->
    <view class="loading-container" v-if="loading">
      <text class="loading-text">加载中...</text>
    </view>

    <!-- 错误状态 -->
    <view class="error-container" v-if="error">
      <text class="error-text">{{ error }}</text>
      <view class="retry-btn" @click="loadFollowupDetail">
        <text>重试</text>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import { getFollowupDetail, getCustomerFollowTypeDict } from '@/common/api/customer';

// 页面参数
const followId = ref('');
const followupDetail = ref({});
const loading = ref(false);
const error = ref('');

// 跟进方式字典数据
const followTypeOptions = ref([]);

// 计算是否有客户分析信息
const hasAnalysis = computed(() => {
  return followupDetail.value.concern || 
         followupDetail.value.pain || 
         followupDetail.value.attention || 
         followupDetail.value.demand;
});

// 计算图片列表（支持多种字段名和格式）
const followupImages = computed(() => {
  const detail = followupDetail.value;
  
  // 处理 picture 字段（字符串格式，逗号分隔）
  if (detail.picture && typeof detail.picture === 'string' && detail.picture.trim()) {
    const images = detail.picture.split(',').map(url => url.trim()).filter(url => url);
    if (images.length > 0) {
      return images;
    }
  }
  
  // 支持数组格式的图片字段
  if (detail.pictures && Array.isArray(detail.pictures) && detail.pictures.length > 0) {
    return detail.pictures;
  }
  if (detail.images && Array.isArray(detail.images) && detail.images.length > 0) {
    return detail.images;
  }
  if (detail.imageAttachments && Array.isArray(detail.imageAttachments) && detail.imageAttachments.length > 0) {
    return detail.imageAttachments;
  }
  
  return [];
});

// 获取页面参数
onLoad((options) => {
  if (options && options.followId) {
    followupDetail.value.followId = options.followId;
    followId.value = options.followId;
    loadFollowupDetail();
  } else if (options && options.id) {
    // 兼容 id 参数
    followupDetail.value.followId = options.id;
    followId.value = options.id;
    loadFollowupDetail();
  } else {
    error.value = '缺少跟进ID参数';
  }
});

// 加载跟进方式字典数据
const loadFollowTypeDict = async () => {
  try {
    const res = await getCustomerFollowTypeDict();
    if (res && Array.isArray(res)) {
      followTypeOptions.value = res;
    }
  } catch (err) {
    console.error('加载跟进方式字典失败:', err);
  }
};

// 加载跟进详情
const loadFollowupDetail = async () => {
  if (!followId.value) return;
  
  loading.value = true;
  error.value = '';
  
  try {
    // 并行加载跟进详情和字典数据
    const [res] = await Promise.all([
      getFollowupDetail(followId.value),
      loadFollowTypeDict()
    ]);
    
    if (res) {
      followupDetail.value = res;
    } else {
      error.value = '获取跟进详情失败';
    }
  } catch (err) {
    console.error('加载跟进详情失败:', err);
    error.value = err?.message || '加载跟进详情失败，请重试';
    uni.$uv.toast(error.value);
  } finally {
    loading.value = false;
  }
};

// 格式化日期时间
const formatDateTime = (dateTime) => {
  if (!dateTime) return '--';
  try {
    const date = new Date(dateTime);
    const year = date.getFullYear();
    const month = String(date.getMonth() + 1).padStart(2, '0');
    const day = String(date.getDate()).padStart(2, '0');
    const hours = String(date.getHours()).padStart(2, '0');
    const minutes = String(date.getMinutes()).padStart(2, '0');
    return `${year}-${month}-${day} ${hours}:${minutes}`;
  } catch (e) {
    return dateTime;
  }
};

// 格式化客户意向
const formatIntents = (intents) => {
  if (!intents) return '--';
  if (Array.isArray(intents)) {
    return intents.length > 0 ? intents.join('、') : '--';
  }
  if (typeof intents === 'string') {
    return intents || '--';
  }
  return '--';
};

// 获取状态样式类
const getStatusClass = (status) => {
  return {
    'status-potential': status === '1',  // 潜在
    'status-intent': status === '2',      // 意向
    'status-deal': status === '3',        // 成交
    'status-invalid': status === '4'     // 失效
  };
};

// 获取状态文本
const getStatusText = (status) => {
  const statusMap = {
    '1': '潜在',
    '2': '意向',
    '3': '成交',
    '4': '失效'
  };
  return statusMap[status] || '未知';
};

// 获取客户状态样式类
const getCustomerStatusClass = (status) => {
  return {
    'status-potential': status === '1',  // 潜在
    'status-intent': status === '2',      // 意向
    'status-deal': status === '3',        // 成交
    'status-invalid': status === '4'     // 失效
  };
};

// 获取客户状态文本
const getCustomerStatusText = (status) => {
  const statusMap = {
    '1': '潜在',
    '2': '意向',
    '3': '成交',
    '4': '失效'
  };
  return statusMap[status] || '未知';
};

// 获取意向强度文本
const getIntentStrengthText = (intentLevel) => {
  const levelMap = {
    '1': '高',
    '2': '中',
    '3': '低'
  };
  return levelMap[intentLevel] || '--';
};

// 获取跟进方式文本
const getFollowTypeText = (followTypeValue) => {
  if (!followTypeValue) return '--';
  
  // 从字典数据中查找对应的标签
  const option = followTypeOptions.value.find(item => item.dictValue === String(followTypeValue));
  return option ? option.dictLabel : '--';
};

// 预览图片
const previewFollowupImages = (images, currentIndex) => {
  if (!images || images.length === 0) return;
  uni.previewImage({
    urls: images,
    current: currentIndex
  });
};

// 返回
const handleBack = () => {
  uni.navigateBack();
};

// 组件挂载
onMounted(() => {
  // 数据已在 onLoad 中加载
});
</script>

<style lang="scss" scoped>
.followup-detail-page {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background-color: #f5f5f5;
}

.custom-navbar {
  background-color: #fff;
  padding-top: var(--status-bar-height, 0);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  position: relative;
  z-index: 100;
}

.navbar-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 44px;
  padding: 0 16px;
}

.nav-btn {
  font-size: 24px;
  color: #333;
  font-weight: bold;
  min-width: 44px;
  text-align: center;
}

.nav-title {
  font-size: 18px;
  font-weight: 600;
  color: #333;
  flex: 1;
  text-align: center;
}

.content-scroll {
  flex: 1;
  overflow-y: auto;

}

.info-card {
  background-color: #fff;
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.card-header {
  display: flex;
  align-items: center;
  margin-bottom: 16px;
}

.user-avatar {
  width: 48px;
  height: 48px;
  border-radius: 24px;
  margin-right: 12px;
  background-color: #e0e0e0;
  border: 2px solid #f5f5f5;
}

.user-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.user-name {
  font-size: 16px;
  color: #333;
  font-weight: 600;
}

.user-role {
  font-size: 12px;
  color: #999;
}

.follow-time {
  display: flex;
  align-items: center;
}

.time-text {
  font-size: 12px;
  color: #999;
}

.card-title {
  font-size: 16px;
  font-weight: 600;
  color: #333;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid #f0f0f0;
}

.info-row {
  display: flex;
  align-items: flex-start;
  margin-bottom: 12px;
  
  &:last-child {
    margin-bottom: 0;
  }
}

.info-label {
  font-size: 14px;
  color: #999;
  min-width: 80px;
  margin-right: 12px;
}

.info-value {
  flex: 1;
  font-size: 14px;
  color: #333;
  word-break: break-word;
}

.content-text {
  font-size: 15px;
  color: #555;
  line-height: 1.7;
  word-break: break-word;
  white-space: pre-wrap;
  margin-bottom: 12px;
}

/* 图片展示（一行最多三个） */
.followup-images-wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.followup-image-item {
  /* 一行三个：每个图片宽度 = (100% - 2个gap) / 3 */
  width: calc((100% - 16px) / 3);
  aspect-ratio: 1;
  border-radius: 4px;
  overflow: hidden;
  background-color: #e0e0e0;
  flex-shrink: 0;
}

.followup-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.status-badge {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 4px;
  font-size: 12px;
  
  &.status-potential {
    background-color: #fdf6ec;
    color: #e6a23c;
  }
  
  &.status-intent {
    background-color: #ecf5ff;
    color: #409eff;
  }
  
  &.status-deal {
    background-color: #f0f9ff;
    color: #67c23a;
  }
  
  &.status-invalid {
    background-color: #fef0f0;
    color: #f56c6c;
  }
}

.loading-container {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.loading-text {
  font-size: 14px;
  color: #999;
}

.error-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
}

.error-text {
  font-size: 14px;
  color: #f56c6c;
  margin-bottom: 20px;
  text-align: center;
}

.retry-btn {
  padding: 8px 24px;
  background-color: #1976d2;
  color: #fff;
  border-radius: 4px;
  font-size: 14px;
  
  &:active {
    opacity: 0.8;
  }
}
</style>

