<template>
 <view class="order-detail-container">
    <!-- <view class="page-title">查看详细信息</view> -->

    <!-- 基础信息区域 -->
    <view class="info-section">
      <uni-row class="info-grid">
		  <uni-col >
          <view class="label">商业公司: 重庆制药 </view>
		</uni-col>
		
		</uni-row>
		<uni-row class="info-grid">
			<uni-col :span="12">
			  <view class="label">制单日期:{{ compensationAmount }}</view>
			</uni-col>
			<uni-col :span="12">
			  <view class="label">合同编号:{{ compensationAmount }}</view>
			</uni-col>
          </uni-row>
		  <uni-row class="info-grid">
		  	<uni-col :span="12">
		  	  <view class="label">订单金额:{{ compensationAmount }}</view>
		  	</uni-col>
		  	<uni-col :span="12">
		  	  <view class="label">补差金额:{{ compensationAmount }}</view>
		  	</uni-col>
		    </uni-row>

			  <uni-row class="info-grid">
			  	<uni-col :span="12">
			  	  <view class="label">本月商务额度:{{ compensationAmount }}</view>
			  	</uni-col>
			  	<uni-col :span="12">
			  	  <view class="label">本月商务可用:{{ compensationAmount }}</view>
			  	</uni-col>
			    </uni-row>
				<uni-row class="info-grid">
					<uni-col :span="12">
					  <view class="label">本月大区额度:{{ compensationAmount }}</view>
					</uni-col>
					<uni-col :span="12">
					  <view class="label">本月大区可用:{{ compensationAmount }}</view>
					</uni-col>
				  </uni-row>
				  <uni-row class="info-grid">
				  	<uni-col :span="12">
				  	  <view class="label required">*执行月份:</view>
				  	  <view class="select-container">
				  	    <uni-data-select
				  	      v-model="executionMonth"
				  	      :localdata="monthOptions"
				  	      popup-class="month-popup"
				  	    ></uni-data-select>
				  	  </view>
				  	</uni-col>
				  	<uni-col :span="12">
				  	  <view class="label">折后订单金额:{{ compensationAmount }}</view>
				  	</uni-col>
				    </uni-row>
		
	     
      
    </view>

    <!-- 商品信息区域 -->
    <view class="goods-section">
      <view class="section-title">商品信息</view>
      
      <view v-if="goodsList.length === 0" class="no-data">
        暂无商品数据
      </view>

      <view v-else class="goods-double-column">
        <view 
          v-for="(goods, index) in goodsList" 
          :key="index" 
          class="goods-item"
        >
          <view class="goods-header">
            <text class="serial-number">{{ index + 1 }}</text>
            <text class="goods-name">{{ goods.name }}</text>
          </view>
          
          <view class="goods-content">
            <!-- 件装数和供应参考价在一行 -->
            <uni-row class="info-row">
              <uni-col :span="12" class="info-pair">
                <view class="label">件装数:{{  goods.packCount }}</view>
                <!-- <view class="value">{{ goods.packCount }}</view> -->
              </uni-col>
              <uni-col :span="12" class="info-pair">
                <view class="label">供应参考价:{{  goods.referencePrice }}</view>
                <!-- <view class="value">{{ goods.referencePrice }}</view> -->
              </uni-col>
            </uni-row>

            <!-- 前三月平均数和采购数量在一行 -->
            <uni-row class="info-row">
              <uni-col :span="12" class="info-pair">
                <view class="label">前三月平均数:{{ goods.average }}</view>
                <!-- <view class="value">{{ goods.average }}</view> -->
              </uni-col>
              <uni-col :span="12" class="info-pair">
                <view class="label">采购数量:{{ goods.quantity }}</view>
                <!-- <view class="value quantity">{{ goods.quantity }}</view> -->
              </uni-col>
            </uni-row>

            <!-- 小计和使用票扣在一行 -->
            <uni-row class="info-row">
              <uni-col :span="12" class="info-pair">
                <view class="label">小计:{{ goods.subtotal }}</view>
                <!-- <view class="value total">{{ goods.subtotal }}</view> -->
              </uni-col>
              <uni-col :span="12" class="info-pair">
                <view class="label">使用票扣:{{ goods.ticketDeduction }}</view>
                <!-- <view class="value">{{ goods.ticketDeduction }}</view> -->
              </uni-col>
            </uni-row>

            <!-- 税率单独一行 -->
            <uni-row class="info-row">
              <uni-col :span="12" class="info-pair">
                <view class="label">税率:{{ goods.taxRate }}</view>
                <!-- <view class="value">{{ goods.taxRate }}</view> -->
              </uni-col>
              <uni-col :span="12" class="info-pair empty"></uni-col>
            </uni-row>
          </view>
        </view>
      </view>
    </view>

    <!-- 操作按钮 -->
    <view class="action-buttons">
      <button @click="goBack" class="btn btn-secondary">回退</button>
      <button @click="review" class="btn btn-primary">审核</button>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue'

// 基础信息
const creationDate = ref('2025-07-08')
const contractId = ref('G-SC-40861')
const orderAmount = ref('109,296.00')
const compensationAmount = ref('0.00')
const executionMonth = ref(1)

const monthOptions = ref([
  { value: 0, text: '本月执行' },
  { value: 1, text: '下月执行' }
])

// 商品列表数据
const goodsList = ref([
  {
    name: '商品A',
    packCount: '12',
    referencePrice: '88.00',
    average: '150',
    quantity: '1000',
    subtotal: '88,000.00',
    ticketDeduction: '是',
    taxRate: '13%'
  },
  {
    name: '商品B',
    packCount: '24',
    referencePrice: '18.00',
    average: '800',
    quantity: '1200',
    subtotal: '21,600.00',
    ticketDeduction: '否',
    taxRate: '13%'
  }
])

// 操作方法
const goBack = () => {
  console.log("回退操作")
}

const review = () => {
  console.log("审核操作")
}

const cancel = () => {
  console.log("取消操作")
}
</script>

<style lang="scss" scoped>
.order-detail-container {
  padding: 16px;
  background-color: #f5f5f5;
  min-height: 100vh;
}

.page-title {
  text-align: center;
  margin-bottom: 24px;
  color: #333;
  font-size: 18px;
  font-weight: 600;
  padding: 12px 0;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

/* 基础信息网格布局 */
.info-section {
  background: #fff;
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 20px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.info-grid {
  :deep(.uni-row) {
    display: flex;
    flex-wrap: wrap;
	
  }
  .info-value {
    font-size: 15px;
    color: #333;
    font-weight: 500;
     display: flex;
     justify-content: flex-end;
    
  }
  
  margin-bottom: 20rpx;
  margin-top: 20rpx;
}

.info-item {
  margin-bottom: 12px;
}

.label {
  font-size: 14px;
  color: #666;
  margin-bottom: 4px;
  font-weight: 500;
}

.required::after {
  content: '*';
  color: #f56c6c;
  margin-left: 2px;
}

// .info-value {
//   font-size: 15px;
//   color: #333;
//   font-weight: 500;
//   display: flex;
//   justify-content: flex-end;
  
// }

.amount {
  color: #f56c6c;
  font-weight: 600;
}

.select-container {
  width: 100%;
}

:deep(.uni-data-select__text) {
  padding: 8px 12px;
  border: 1px solid #ddd;
  border-radius: 8px;
  background-color: #fff;
}

:deep(.month-popup) {
  min-width: 120px;
}

/* 商品信息区域 */
.goods-section {
  background: #fff;
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 20px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.section-title {
  font-size: 16px;
  color: #333;
  margin: 0 0 16px 0;
  padding-bottom: 8px;
  border-bottom: 1px solid #eee;
  font-weight: 600;
}

.no-data {
  text-align: center;
  color: #999;
  padding: 40px 0;
  font-size: 14px;
}

/* 商品双栏布局 */
.goods-double-column {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.goods-item {
  border: 1px solid #eee;
  border-radius: 12px;
  overflow: hidden;
  background: #fafafa;
}

.goods-header {
  background: #409eff;
  color: white;
  padding: 10px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.serial-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  background: rgba(255,255,255,0.2);
  border-radius: 50%;
  font-size: 12px;
  font-weight: 600;
}

.goods-name {
  font-size: 15px;
  font-weight: 600;
  flex: 1;
}

/* 商品内容区域 */
.goods-content {
  padding: 12px 16px;
}

.info-row {
  display: flex;
  margin-bottom: 8px;
}

.info-pair {
  flex: 1;
  padding: 0 8px;
}

.info-pair .label {
  font-size: 14px;
  color: #666;
  margin-bottom: 2px;
}

.info-pair .value {
  font-size: 14px;
  color: #333;
  font-weight: 500;
  text-align: right;
}

.quantity {
  color: #409eff;
  font-weight: 600;
}

.total {
  color: #f56c6c;
  font-weight: 600;
}

.empty {
  visibility: hidden;
}

/* 操作按钮 */
.action-buttons {
  display: flex;
  justify-content: center;
  gap: 12px;
  padding: 16px 0;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.btn {
  padding: 12px 24px;
  border: none;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  min-width: 80px;
  text-align: center;
  flex: 1;
}

.btn-primary {
  background: #409eff;
  color: white;
}

.btn-secondary {
  background: #67c23a;
  color: white;
}

.btn-outline {
  background: #fff;
  color: #333;
  border: 1px solid #ddd;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .order-detail-container {
    padding: 12px;
  }

  .info-item {
    margin-bottom: 10px;
  }

  .info-pair {
    padding: 0 4px;
  }

  .action-buttons {
    flex-direction: column;
  }

  .btn {
    width: 100%;
    margin-bottom: 8px;
  }

  .btn:last-child {
    margin-bottom: 0;
  }
}
</style>