<template>
  <el-dialog v-model="dialogShow" title="尾款详情" draggable width="860px" @close="handleClose">
    <!-- 合并指标区域为一行 -->
    <div class="metrics-sections">
      <div class="metrics-section">
        <div class="section-header">预计指标</div>
        <div class="metrics-cards">
          <div class="metric-card">
            <div class="metric-label">GMV(元)</div>
            <div class="metric-value">
              {{ formatAmount(detailData.orderGmv) }}
            </div>
          </div>
          <div class="metric-card">
            <div class="metric-label">播放量</div>
            <div class="metric-value">
              {{ detailData.orderPlayCount || 0 }}
            </div>
          </div>
        </div>
      </div>

      <div class="metrics-section">
        <div class="section-header">实际完成</div>
        <div class="metrics-cards">
          <div class="metric-card">
            <div class="metric-label">GMV(元)</div>
            <div class="metric-value">
              {{ formatAmount(detailData.actualGmv) }}
            </div>
          </div>
          <div class="metric-card">
            <div class="metric-label">播放量</div>
            <div class="metric-value">
              {{ detailData.actualPlayCount || 0 }}
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 详情展示区域 -->
    <div class="review-container">
      <div class="review-detail">
        <el-descriptions :column="2" border>
          <!-- 第一列：重要信息 -->
          <el-descriptions-item label="套餐名称">
            {{ detailData.name }}
          </el-descriptions-item>
          <el-descriptions-item label="订单编号">
            {{ detailData.orderNo }}
          </el-descriptions-item>
          <el-descriptions-item label="达人ID">
            {{ detailData.expertId }}
          </el-descriptions-item>
          <el-descriptions-item label="达人昵称">
            {{ detailData.userName }}
          </el-descriptions-item>
          <el-descriptions-item label="姓名">
            {{ detailData.realName }}
          </el-descriptions-item>
          <el-descriptions-item label="联系电话">
            {{ detailData.userPhone }}
          </el-descriptions-item>
          <el-descriptions-item label="身份证号码" :span="2">
            {{ detailData.idCard }}
          </el-descriptions-item>

          <!-- 第二列：财务信息 -->
          <el-descriptions-item label="订单金额(元)" :span="2">
            {{ formatAmount(detailData.orderMoney) }}
          </el-descriptions-item>
          <el-descriptions-item label="尾款比例"> {{ detailData.endPaymentRate || 0 }}% </el-descriptions-item>
          <el-descriptions-item label="尾款(元)">
            {{ formatAmount(detailData.endPayment) }}
          </el-descriptions-item>
          <el-descriptions-item label="预付款比例"> {{ detailData.advanceRate || 0 }}% </el-descriptions-item>
          <el-descriptions-item label="预付款(元)">
            {{ formatAmount(detailData.advance) }}
          </el-descriptions-item>
          <el-descriptions-item label="佣金比例"> {{ detailData.commissionRate || 0 }}% </el-descriptions-item>
          <el-descriptions-item label="佣金(元)">
            {{ formatAmount(detailData.commission) }}
          </el-descriptions-item>

          <!-- 底部重要信息 -->
          <el-descriptions-item label="推广模块" :span="2">
            <el-tag
              v-for="(item, index) in getPromoteTypes(detailData.promoteType)"
              :key="index"
              style="margin-right: 5px; margin-bottom: 5px"
            >
              {{ item }}
            </el-tag>
          </el-descriptions-item>

          <el-descriptions-item label="状态" :span="2">
            <el-tag v-if="detailData.advancePaymentStatus == 0" type="success"> 审核通过 </el-tag>
            <el-tag v-if="detailData.advancePaymentStatus == 1" type="success"> 待完成 </el-tag>
            <el-tag v-if="detailData.advancePaymentStatus == 2" type="primary"> 已完成 </el-tag>
          </el-descriptions-item>

          <el-descriptions-item label="下单时间">
            {{ detailData.orderTime || "--" }}
          </el-descriptions-item>
          <el-descriptions-item label="支付时间">
            {{ detailData.payTime || "--" }}
          </el-descriptions-item>
          <el-descriptions-item label="完成时间" v-if="detailData.completeTime">
            {{ detailData.completeTime || "--" }}
          </el-descriptions-item>
          <el-descriptions-item label="申请时间" v-if="detailData.endFundsTime">
            {{ detailData.endFundsTime || "--" }}
          </el-descriptions-item>
          <el-descriptions-item label="审核时间" v-if="detailData.endPaymentTime">
            {{ detailData.endPaymentTime }}
          </el-descriptions-item>
          <el-descriptions-item label="驳回原因" v-if="detailData.endPaymentRefusal">
            {{ detailData.endPaymentRefusal }}
          </el-descriptions-item>
        </el-descriptions>
      </div>
    </div>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref, defineExpose, defineEmits } from "vue";

// 定义弹窗状态
const dialogShow = ref(false);

// 详情数据
const detailData: any = ref({});
// 处理推广板块字符串
const getPromoteTypes = (promoteType: string) => {
  if (!promoteType) return [];
  return promoteType.split(",");
};

// 金额格式化
const formatAmount = (amount: number | string) => {
  const num = typeof amount === "string" ? parseFloat(amount) : amount;
  return isNaN(num) ? "¥0.00" : `¥${num.toFixed(2)}`;
};

// 事件触发
const emit = defineEmits(["close"]);

// 显示弹窗方法
const open = (data: any) => {
  detailData.value = {
    ...data
  };
  dialogShow.value = true;
};

// 关闭弹窗
const handleClose = () => {
  dialogShow.value = false;
  emit("close");
};

// 暴露给父组件的方法
defineExpose({
  open,
  close: handleClose
});
</script>

<style lang="scss" scoped>
.section-header {
  padding-left: 5px;
  margin: 10px 0 12px;
  font-size: 16px;
  font-weight: 600;
  color: #303133;
  border-left: 3px solid #409eff;
}
.metrics-sections {
  display: flex;
  gap: 20px;
  margin-bottom: 15px;

  /* 在小屏幕上自动堆叠 */
  @media (width <=600px) {
    flex-direction: column;
    gap: 10px;
  }
}
.metrics-section {
  flex: 1;
  min-width: 0;
  .section-header {
    padding-left: 5px;
    margin: 0 0 8px;
    font-size: 14px;
    font-weight: 600;
    color: #303133;
    border-left: 3px solid #409eff;
  }
}
.metrics-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.metric-card {
  padding: 8px 10px;
  background: #f8f9fa;
  border: 1px solid #ebeef5;
  border-radius: 6px;
  transition: all 0.2s ease;
  &:hover {
    background: #f0f7ff;
    border-color: #d6e4ff;
  }
}
.metric-label {
  margin-bottom: 4px;
  font-size: 12px;
  font-weight: 500;
  color: #606266;
}
.metric-value {
  font-size: 15px;
  font-weight: 600;
  color: #303133;
}
.review-container {
  margin-bottom: 15px;

  /* 滚动条样式优化 */
  &::-webkit-scrollbar {
    width: 6px;
  }
  &::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 3px;
  }
  &::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 3px;
  }
  &::-webkit-scrollbar-thumb:hover {
    background: #a8a8a8;
  }
}
.review-detail {
  .introduction {
    line-height: 1.5;
    word-break: break-word;
    white-space: pre-wrap;
  }
}

/* 隐藏预览时的操作栏 */
:deep(.el-image-viewer__btn) {
  display: none !important;
}

/* 或者更精确地隐藏操作栏区域 */
:deep(.el-image-viewer__actions) {
  display: none !important;
}
.image-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  gap: 8px;
}
.image-item {
  aspect-ratio: 1;
  overflow: hidden;
}
.gallery-image {
  width: 100%;
  height: 100%;
  cursor: pointer;
  object-fit: cover;
}

/* 调整描述项的间距 */
:deep(.el-descriptions__label) {
  font-weight: 600;
  background-color: #fafafa;
}
:deep(.el-descriptions__cell) {
  padding: 10px 20px;
}
</style>
