<script setup lang="ts">
import { ref, computed, h } from 'vue';
import { Avatar, Image, Radio, Button, Input } from 'ant-design-vue';
import { VxeUI } from 'vxe-pc-ui';
import Negotiations from './Negotiations.vue';
import LogisticsDetails from './LogisticsDetails.vue';
const props = defineProps<{
  data?: any;
}>();

const emit = defineEmits<{
  'submit': [status: string, reason: string];
  'close': [];
}>();

// 是否收起协商历史
const isNegotiationCollapsed = ref(false);

// 审核决策: 'agree' | 'reject'
const reviewStatus = ref('agree');
// 理由
const reviewReason = ref('');

// 模拟顶部的商品数据
const productInfo = computed(() => {
  return {
    name: props.data?.productName || '肝血虚穴位贴',
    price: 30,
    qty: 8,
    totalPrice: 240,
    specs: '10贴',
    imageUrl: 'https://img.yzcdn.cn/vant/cat.jpeg'
  };
});

// 处理提交
function handleConfirm() {
  emit('submit', reviewStatus.value, reviewReason.value);
}

// 查看物流
function viewLogistics() {
  VxeUI.modal.open({
    title: '物流详情',
    height: 900,
    width: 1000,
    escClosable: true,
    destroyOnClose: true,
    id: 'logistics-modal',
    slots: {
      default() {
        return h(LogisticsDetails, {
          data: props.data
        });
      }
    }
  });
}

// 处理取消
function handleCancel() {
  emit('close');
}
</script>

<template>
  <div class="review-page-container">
    <!-- 商品信息头部 -->
    <div class="product-info-section">
      <div class="product-card">
        <Image :src="productInfo.imageUrl" :width="70" :height="70" class="product-image" />
        <div class="product-details">
          <div class="detail-row header-row">
            <span class="product-name">{{ productInfo.name }}</span>
            <span class="product-price">¥{{ productInfo.price }}</span>
          </div>
          <div class="detail-row sub-row">
            <span class="product-specs">{{ productInfo.specs }}</span>
            <span class="product-qty">x{{ productInfo.qty }}</span>
          </div>
          <div class="product-total">
            <span>商品总价：</span>
            <span class="price-val">¥{{ productInfo.totalPrice }}</span>
          </div>
        </div>
      </div>
    </div>

    <div class="content-divider"></div>

    <!-- 中部内容分栏 -->
    <div class="middle-columns">
      <!-- 左侧：申请信息 -->
      <div class="refund-info-column">
        <div class="info-list">
          <div class="info-item">
            <span class="label">申请时间：</span>
            <span class="value">2025-02-19 14:30:27</span>
          </div>
          <div class="info-item">
            <span class="label">商品状态：</span>
            <span class="value">未收货</span>
          </div>
          <div class="info-item methods-item">
            <span class="label">发货方式：</span>
            <span class="value">线下取货</span>
            <span class="label method-label">发货方式：</span>
            <span class="value">配送</span>
            <a href="javascript:;" class="shipping-link" @click="viewLogistics">运输中</a>
          </div>
          <div class="info-item">
            <span class="label">退款类型：</span>
            <span class="value">退款</span>
          </div>
          <div class="info-item">
            <span class="label">退款金额：</span>
            <span class="value amount-value">¥240.00</span>
          </div>
          <div class="info-item">
            <span class="label">退款原因：</span>
            <span class="value">少件（含缺少配件）</span>
          </div>
          <div class="info-item">
            <span class="label">退款说明：</span>
            <span class="value">uudksjj</span>
          </div>
        </div>

        <!-- 凭证图片 -->
        <div class="proof-images">
          <div v-for="i in 5" :key="i" class="image-wrapper">
            <Image src="https://img.yzcdn.cn/vant/cat.jpeg" :width="40" :height="40" />
          </div>
        </div>
      </div>

      <!-- 中间竖向分割线 -->
      <div class="vertical-divider"></div>

      <!-- 右侧：协商历史 -->
      <div class="negotiation-column">
        <div class="column-header">
          <span class="title">协商历史</span>
          <a href="javascript:;" class="collapse-toggle" @click="isNegotiationCollapsed = !isNegotiationCollapsed">
            {{ isNegotiationCollapsed ? '展开' : '收起' }}
          </a>
        </div>
        <div class="negotiation-content" v-show="!isNegotiationCollapsed">
          <Negotiations />
        </div>
      </div>
    </div>

    <div class="content-divider" style="margin-top: 0;"></div>

    <!-- 底部：审核区 -->
    <div class="review-action-section">
      <div class="action-title">审核</div>
      <div class="review-form">
        <div class="radio-row">
          <Radio.Group v-model:value="reviewStatus">
            <Radio value="agree">同意</Radio>
            <Radio value="reject">拒绝</Radio>
          </Radio.Group>
        </div>
        <div class="reason-row" v-if="reviewStatus === 'reject'">
          <div class="reason-label">拒绝理由</div>
          <Input.TextArea 
            v-model:value="reviewReason" 
            placeholder="请输入拒绝退款的理由" 
            :rows="4" />
        </div>
      </div>
      <div class="action-buttons">
        <Button @click="handleCancel">取消</Button>
        <Button type="primary" @click="handleConfirm" class="confirm-btn">确定</Button>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.review-page-container {
  background: #fff;
  display: flex;
  flex-direction: column;
  color: #333;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  overflow: hidden;
}

.product-info-section {
  padding: 16px 20px;

  .product-card {
    display: flex;
    gap: 16px;

    .product-image {
      border: 1px solid #f0f0f0;
      border-radius: 4px;
    }

    .product-details {
      flex: 1;

      .detail-row {
        display: flex;
        justify-content: space-between;
        margin-bottom: 4px;
        width: 20%;
        
        &.header-row {
          .product-name {
            font-size: 14px;
            font-weight: bold;
          }
          .product-price {
            font-size: 14px;
            color: #333;
          }
        }

        &.sub-row {
          .product-specs {
            color: #999;
            font-size: 12px;
          }
          .product-qty {
            color: #666;
            font-size: 13px;
          }
        }
      }

      .product-total {
        margin-top: 8px;
        text-align: left;
        font-size: 14px;
        .price-val {
          font-size: 20px;
          font-weight: bold;
          color: #333;
        }
      }
    }
  }
}

.content-divider {
  height: 1px;
  background-color: #f0f0f0;
  margin: 0 20px;
}

.middle-columns {
  display: flex;
  padding: 20px;
  min-height: 380px;

  .refund-info-column {
    flex: 1;
    padding-right: 20px;

    .info-list {
      display: flex;
      flex-direction: column;
      gap: 8px;

      .info-item {
        font-size: 13px;
        display: flex;
        align-items: baseline;

        .label {
          color: #333;
          width: 70px;
          flex-shrink: 0;
        }

        .value {
          color: #333;
        }

        &.methods-item {
          .method-label {
            margin-left: 20px;
          }
          .shipping-link {
            color: #1890ff;
            margin-left: 12px;
            text-decoration: none;
            &:hover {
              text-decoration: underline;
            }
          }
        }

        .amount-value {
          color: #ff4d4f;
          font-size: 18px;
          font-weight: bold;
        }
      }
    }

    .proof-images {
      display: flex;
      gap: 10px;
      margin-top: 20px;

      .image-wrapper {
        border: 1px solid #f0f0f0;
        border-radius: 4px;
        overflow: hidden;
        background: #fafafa;
        width: 40px;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }
  }

  .vertical-divider {
    width: 1px;
    background-color: #f0f0f0;
    margin: 0 10px;
  }

  .negotiation-column {
    flex: 1;
    padding-left: 20px;
    display: flex;
    flex-direction: column;

    .column-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 12px;

      .title {
        font-weight: bold;
        font-size: 14px;
      }

      .collapse-toggle {
        font-size: 13px;
        color: #1890ff;
        cursor: pointer;
        text-decoration: none;
      }
    }

    .negotiation-content {
      flex: 1;
      overflow-y: auto;
      max-height: 340px;
      
      :deep(.negotiations-container) {
        padding: 5px 0;
      }
    }
  }
}

.review-action-section {
  padding: 24px 20px;
  border-top: 1px solid #f0f0f0;
  background: #fff;

  .action-title {
    font-weight: bold;
    font-size: 16px;
    margin-bottom: 20px;
  }

  .review-form {
    .radio-row {
      margin-bottom: 16px;
    }

    .reason-row {
      .reason-label {
        font-size: 14px;
        margin-bottom: 12px;
        font-weight: 500;
      }
    }
  }

  .action-buttons {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 24px;

    .confirm-btn {
      min-width: 80px;
    }
  }
}
</style>
