<template>
  <view class="tab-content">
    <view class="info-section">
      <view class="section-title">
        <view class="title-line"></view>
        <text>基础信息</text>
      </view>
      <view class="info-item">
        <text class="info-label">客户名称</text>
        <text class="info-value">{{ customerDetail.name || '--' }}</text>
      </view>
      <view class="info-item">
        <text class="info-label">联系电话</text>
        <text class="info-value">{{ customerDetail.mobile || '--' }}</text>
      </view>
      <view class="info-item">
        <text class="info-label">微信号</text>
        <text class="info-value">{{ customerDetail.wechat || '--' }}</text>
      </view>
      <view class="info-item">
        <text class="info-label">客户来源</text>
        <text class="info-value">{{ customerDetail.source || '--' }}</text>
      </view>
      <view class="info-item">
        <text class="info-label">客户意向</text>
        <text class="info-value">{{ formatIntents(customerDetail.intents) }}</text>
      </view>
      <view class="info-item">
        <text class="info-label">意向强度</text>
        <text class="info-value">{{ getIntentStrengthText(customerDetail.intentLevel) }}</text>
      </view>
      <view class="info-item">
        <text class="info-label">客户地区</text>
        <text class="info-value">{{ customerDetail.regionName || '--' }}</text>
      </view>
      <view class="info-item">
        <text class="info-label">微信好友</text>
        <text class="info-value">{{ customerDetail.wechatId || '--' }}</text>
      </view>
    </view>

    <view class="info-section">
      <view class="section-title">
        <view class="title-line"></view>
        <text>其他信息</text>
      </view>
      <view class="info-item">
        <text class="info-label">备注</text>
        <text class="info-value">{{ customerDetail.remark || '--' }}</text>
      </view>
      <view class="info-item">
        <text class="info-label">顾虑点</text>
        <text class="info-value">{{ customerDetail.concern || '--' }}</text>
      </view>
      <view class="info-item">
        <text class="info-label">痛点</text>
        <text class="info-value">{{ customerDetail.pain || '--' }}</text>
      </view>
      <view class="info-item">
        <text class="info-label">关注点</text>
        <text class="info-value">{{ customerDetail.attention || '--' }}</text>
      </view>
      <view class="info-item">
        <text class="info-label">需求点</text>
        <text class="info-value">{{ customerDetail.demand || '--' }}</text>
      </view>
    </view>
  </view>
</template>

<script setup>
import { getIntentLevelText } from '@/utils/customerMappings';

const props = defineProps({
  customerDetail: {
    type: Object,
    default: () => ({})
  }
});

// 格式化客户意向（数组转字符串）
const formatIntents = (intents) => {
  if (!intents || !Array.isArray(intents) || intents.length === 0) return '--';
  return intents.join('、');
};

// 使用统一映射函数
const getIntentStrengthText = getIntentLevelText;
</script>

<style lang="scss" scoped>
.tab-content {
  padding: 16px;
}

// 客户信息样式
.info-section {
  background-color: #fff;
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 12px;
}

.section-title {
  display: flex;
  align-items: center;
  margin-bottom: 16px;
}

.title-line {
  width: 3px;
  height: 16px;
  background-color: #1976d2;
  margin-right: 8px;
}

.section-title text {
  font-size: 16px;
  font-weight: 600;
  color: #333;
}

.info-item {
  display: flex;
  padding: 12px 0;
  border-bottom: 1px solid #f5f5f5;
  
  &:last-child {
    border-bottom: none;
  }
}

.info-label {
  width: 100px;
  font-size: 14px;
  color: #666;
  flex-shrink: 0;
}

.info-value {
  flex: 1;
  font-size: 14px;
  color: #333;
  text-align: right;
}
</style>

