<script lang="ts" setup>
import type { ComplaintApi } from '#/api/complaint';

interface Props {
  /**
   * 外层抽屉通过 connectedComponent 传入的详情数据
   */
  data?: ComplaintApi.ComplaintDetail;
}

const props = defineProps<Props>();

/**
 * 投诉状态字典映射
 * 通用状态：pending=待处理，processing=处理中，resolved=已解决，closed=已关闭
 * 支付宝状态：WAIT_PROCESS=待处理 等（优先使用 status_description，如果没有则映射）
 */
function getStatusText(status: string): string {
  if (!status) return '-';

  // 通用状态映射
  const statusMap: Record<string, string> = {
    pending: '待处理',
    processing: '处理中',
    resolved: '已解决',
    closed: '已关闭',
    // 支付宝常见状态（如果后端返回的是支付宝状态值）
    WAIT_PROCESS: '待处理',
    PROCESSING: '处理中',
    RESOLVED: '已解决',
    CLOSED: '已关闭',
  };

  return statusMap[status] || status;
}

</script>

<template>
  <!-- 作为 connectedComponent 的内容组件，只负责渲染，不再自己创建 Drawer -->
  <div v-if="props.data" class="complaint-detail">
    <!-- 基础信息 -->
    <section class="block">
      <h3 class="block-title">基础信息</h3>
      <div class="row">
        <span class="label">投诉ID</span>
        <span class="value">{{ props.data.id }}</span>
      </div>
      <div class="row">
        <span class="label">投诉类型</span>
        <span class="value">
          {{ props.data.type === 'alipay' ? '支付宝投诉' : '主动投诉' }}
        </span>
      </div>
      <div class="row">
        <span class="label">投诉人姓名</span>
        <span class="value">{{ props.data.name || '-' }}</span>
      </div>
      <div class="row">
        <span class="label">联系方式</span>
        <span class="value">{{ props.data.contact || '-' }}</span>
      </div>
      <div class="row">
        <span class="label">投诉内容</span>
        <span class="value">{{ props.data.content || '-' }}</span>
      </div>
      <div class="row">
        <span class="label">投诉状态</span>
        <span class="value">
          {{ getStatusText(props.data.status) }}
        </span>
      </div>
      <div class="row">
        <span class="label">状态描述</span>
        <span class="value">{{ props.data.status_description || '-' }}</span>
      </div>
      <div class="row">
        <span class="label">处理备注</span>
        <span class="value">{{ props.data.remark || '-' }}</span>
      </div>
      <div class="row">
        <span class="label">关联订单ID</span>
        <span class="value">{{ props.data.order_id || '-' }}</span>
      </div>
      <div class="row">
        <span class="label">创建时间</span>
        <span class="value">{{ props.data.create_time }}</span>
      </div>
      <div class="row">
        <span class="label">处理时间</span>
        <span class="value">{{ props.data.handle_time || '-' }}</span>
      </div>
      <div class="row">
        <span class="label">更新时间</span>
        <span class="value">{{ props.data.update_time }}</span>
      </div>
    </section>

    <!-- 支付宝投诉详情 -->
    <section v-if="props.data.type === 'alipay' && props.data.alipay_complaint" class="block">
      <h3 class="block-title">支付宝投诉详情</h3>
      <div class="row">
        <span class="label">投诉单号</span>
        <span class="value">{{ props.data.alipay_complaint.task_id }}</span>
      </div>
      <div class="row">
        <span class="label">支付宝ID</span>
        <span class="value">{{ props.data.alipay_complaint.alipay_id }}</span>
      </div>
      <div class="row">
        <span class="label">被投诉人PID</span>
        <span class="value">{{ props.data.alipay_complaint.opposite_pid || '-' }}</span>
      </div>
      <div class="row">
        <span class="label">被投诉方名称</span>
        <span class="value">{{ props.data.alipay_complaint.opposite_name || '-' }}</span>
      </div>
      <div class="row">
        <span class="label">投诉金额</span>
        <span class="value">
          ¥{{ parseFloat(props.data.alipay_complaint.complain_amount || '0').toFixed(2) }}
        </span>
      </div>
      <div class="row">
        <span class="label">交易单号</span>
        <span class="value">{{ props.data.alipay_complaint.trade_no || '-' }}</span>
      </div>
      <div class="row">
        <span class="label">投诉时间</span>
        <span class="value">{{ props.data.alipay_complaint.gmt_complain || '-' }}</span>
      </div>
      <div class="row">
        <span class="label">处理时间</span>
        <span class="value">{{ props.data.alipay_complaint.gmt_process || '-' }}</span>
      </div>
      <div class="row">
        <span class="label">投诉网址</span>
        <span class="value">
          <a v-if="props.data.alipay_complaint.complain_url" :href="props.data.alipay_complaint.complain_url"
            target="_blank">
            {{ props.data.alipay_complaint.complain_url }}
          </a>
          <span v-else>-</span>
        </span>
      </div>

      <!-- 交易信息列表 -->
      <div v-if="props.data.alipay_complaint.trade_info_list?.length" class="trade-table">
        <div class="table-title">交易信息</div>
        <table>
          <thead>
            <tr>
              <th>交易单号</th>
              <th>商家订单号</th>
              <th>交易时间</th>
              <th>退款时间</th>
              <th>金额</th>
              <th>状态</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="item in props.data.alipay_complaint.trade_info_list" :key="item.id">
              <td>{{ item.trade_no }}</td>
              <td>{{ item.out_no }}</td>
              <td>{{ item.gmt_trade }}</td>
              <td>{{ item.gmt_refund }}</td>
              <td>{{ item.amount }}</td>
              <td>{{ item.status }}</td>
            </tr>
          </tbody>
        </table>
      </div>
    </section>

    <!-- 主动投诉详情 -->
    <section v-if="props.data.type === 'manual' && props.data.manual_complaint" class="block">
      <h3 class="block-title">主动投诉详情</h3>
      <div class="row">
        <span class="label">投诉主题</span>
        <span class="value">{{ props.data.manual_complaint.subject || '-' }}</span>
      </div>
      <div class="row">
        <span class="label">优先级</span>
        <span class="value">
          {{
            props.data.manual_complaint.priority === 'urgent'
              ? '紧急'
              : props.data.manual_complaint.priority === 'high'
                ? '高'
                : props.data.manual_complaint.priority === 'medium'
                  ? '中'
                  : '低'
          }}
        </span>
      </div>
      <div class="row">
        <span class="label">投诉来源</span>
        <span class="value">
          {{
            props.data.manual_complaint.source === 'web'
              ? '网站'
              : props.data.manual_complaint.source === 'phone'
                ? '电话'
                : props.data.manual_complaint.source === 'email'
                  ? '邮件'
                  : '其他'
          }}
        </span>
      </div>
      <div class="row">
        <span class="label">用户ID</span>
        <span class="value">{{ props.data.manual_complaint.user_id || '-' }}</span>
      </div>
      <div class="row">
        <span class="label">附件</span>
        <span class="value">
          <template v-if="props.data.manual_complaint.attachment_urls?.length">
            <a v-for="(url, index) in props.data.manual_complaint.attachment_urls" :key="index" :href="url"
              target="_blank" class="mr-2">
              附件{{ index + 1 }}
            </a>
          </template>
          <span v-else>-</span>
        </span>
      </div>
    </section>
  </div>
</template>

<style scoped>
.complaint-detail {
  padding: 16px;
}

.block {
  margin-bottom: 16px;
  padding: 12px 16px;
  border: 1px solid #f0f0f0;
  border-radius: 4px;
  background-color: #fff;
}

.block-title {
  margin: 0 0 8px;
  font-size: 14px;
  font-weight: 600;
}

.row {
  display: flex;
  margin-bottom: 4px;
  font-size: 13px;
}

.label {
  flex: 0 0 90px;
  color: #888;
}

.value {
  flex: 1;
  color: #333;
  word-break: break-all;
}

.trade-table {
  margin-top: 8px;
}

.trade-table .table-title {
  margin-bottom: 4px;
  font-size: 13px;
  font-weight: 500;
}

.trade-table table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}

.trade-table th,
.trade-table td {
  border: 1px solid #f0f0f0;
  padding: 4px 6px;
  text-align: left;
}

</style>
