<template>
  <div class="order-evaluation-container">
    <PageTitle title="订单评价" />
    <StatusTabs v-model="activeMainTab" :tabs="mainTabs" type="line" />

    <div class="search-bar">
      <el-input v-model="queryParams.keyword" placeholder="搜索" style="width: 150px" clearable>
        <template #prefix><el-icon><Search /></el-icon></template>
      </el-input>
      <el-date-picker v-model="queryParams.dateRange" type="daterange" range-separator="—" start-placeholder="开始日期" end-placeholder="结束日期" style="width: 240px" />
    </div>

    <div class="filter-bar">
      <span class="filter-label">下单部门</span>
      <el-select v-model="queryParams.department" placeholder="请选择" style="width: 100px" clearable>
        <el-option label="某某部门" value="某某部门" />
      </el-select>
      <span class="filter-label">状态</span>
      <el-select v-model="queryParams.status" placeholder="请选择" style="width: 100px" clearable>
        <el-option label="已完成" value="completed" />
        <el-option label="待收货" value="pending" />
      </el-select>
      <span class="filter-label">支付方式</span>
      <el-select v-model="queryParams.payType" placeholder="请选择" style="width: 100px" clearable>
        <el-option label="微信支付" value="wechat" />
        <el-option label="支付宝" value="alipay" />
        <el-option label="账期支付" value="credit" />
      </el-select>
    </div>

    <div class="order-list">
      <div v-for="(order, orderIndex) in orderList" :key="orderIndex" class="order-card">
        <div class="order-header">
          <span class="order-time">{{ order.orderTime }}</span>
          <span class="order-no">订单号：{{ order.orderNo }}</span>
          <el-button type="primary" link class="detail-btn" @click="handleViewDetail(order)">订单详情 <el-icon><ArrowRight /></el-icon></el-button>
        </div>
        <div class="product-list">
          <div v-for="(product, productIndex) in order.products" :key="productIndex" class="product-row">
            <div class="product-cell product-info-cell">
              <div class="product-image">
                <el-image :src="product.image" fit="contain">
                  <template #error><div class="image-placeholder"><el-icon :size="30" color="#ccc"><Picture /></el-icon></div></template>
                </el-image>
              </div>
              <div class="product-detail">
                <div class="product-name">{{ product.name }}</div>
                <div class="product-spec">{{ product.spec1 }} {{ product.spec2 }}</div>
                <div class="product-price">¥{{ product.price }}</div>
              </div>
              <div class="product-quantity">x{{ product.quantity }}</div>
            </div>
            <div class="product-cell amount-cell" v-if="productIndex === 0">
              <div class="amount-info"><span class="label">支付款</span><span class="value highlight">¥{{ order.payAmount }}</span></div>
              <div class="amount-info"><span class="label">{{ order.payMethod }}</span></div>
            </div>
            <div class="product-cell status-cell" v-if="productIndex === 0"><span class="status-text success">{{ order.statusText }}</span></div>
            <div class="product-cell action-cell" v-if="productIndex === 0">
              <el-button v-if="activeMainTab === 'pending'" type="primary" link size="small" @click="handleEvaluate(order)">评价</el-button>
              <el-button v-if="activeMainTab === 'followUp'" type="primary" link size="small" @click="handleFollowUpEvaluate(order)">追评</el-button>
              <el-button v-if="activeMainTab === 'evaluated'" type="primary" link size="small" @click="handleViewEvaluation(order)">查看评价</el-button>
            </div>
          </div>
        </div>
      </div>
      <el-empty v-if="orderList.length === 0" description="暂无订单" />
    </div>

    <el-dialog v-model="evaluateDialogVisible" :title="evaluateDialogTitle" width="600px">
      <div class="evaluate-product">
        <div class="product-image">
          <el-image :src="currentProduct?.image" fit="contain">
            <template #error><div class="image-placeholder"><el-icon :size="30" color="#ccc"><Picture /></el-icon></div></template>
          </el-image>
        </div>
        <div class="product-info">
          <div class="product-name">{{ currentProduct?.name }}</div>
          <div class="product-spec">{{ currentProduct?.spec1 }} {{ currentProduct?.spec2 }}</div>
        </div>
      </div>
      <el-form ref="evaluateFormRef" :model="evaluateForm" :rules="evaluateRules" label-width="80px">
        <el-form-item label="商品评分" prop="rating">
          <el-rate v-model="evaluateForm.rating" :colors="['#e60012', '#e60012', '#e60012']" />
        </el-form-item>
        <el-form-item label="评价内容" prop="content">
          <el-input v-model="evaluateForm.content" type="textarea" :rows="4" placeholder="请输入评价内容" maxlength="200" show-word-limit />
        </el-form-item>
        <el-form-item label="上传图片">
          <el-upload action="#" list-type="picture-card" :auto-upload="false" :limit="5">
            <el-icon><Plus /></el-icon>
          </el-upload>
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="evaluateDialogVisible = false">取消</el-button>
        <el-button type="danger" @click="handleSubmitEvaluate">提交评价</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, computed } from 'vue'
import { useRouter } from 'vue-router'
import { Search, Edit, ChatDotRound, Document, ArrowRight, Picture, Plus } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
import { PageTitle, StatusTabs } from '@/components'

const router = useRouter()
const activeMainTab = ref('pending')
const evaluateDialogVisible = ref(false)
const evaluateDialogTitle = ref('商品评价')
const evaluateFormRef = ref()
const currentOrder = ref<any>(null)
const currentProduct = ref<any>(null)

const mainTabs = [
  { key: 'pending', label: '待评价', icon: Edit },
  { key: 'followUp', label: '待追评', icon: ChatDotRound },
  { key: 'evaluated', label: '已评价', icon: Document }
]

const queryParams = reactive({ keyword: '', dateRange: null, department: '', status: '', payType: '' })
const evaluateForm = reactive({ rating: 5, content: '' })
const evaluateRules = {
  rating: [{ required: true, message: '请选择评分', trigger: 'change' }],
  content: [{ required: true, message: '请输入评价内容', trigger: 'blur' }]
}

const pendingOrders = ref([
  { orderTime: '2025/12/05 16:15:06', orderNo: '489283929283298392', payAmount: '181', payMethod: '微信支付', statusText: '已完成', products: [{ id: 1, name: '清华同方超越E500台式机电脑(i3-6100/4G/1T/19.5寸)', spec1: '规格02', spec2: '规格01', price: '181', quantity: 1, image: '' }] },
  { orderTime: '2025/12/05 16:15:06', orderNo: '489283929283298393', payAmount: '181', payMethod: '微信支付', statusText: '已完成', products: [{ id: 1, name: '清华同方超越E500台式机电脑(i3-6100/4G/1T/19.5寸)', spec1: '规格02', spec2: '规格01', price: '181', quantity: 1, image: '' }] },
  { orderTime: '2025/12/05 16:15:06', orderNo: '489283929283298394', payAmount: '181', payMethod: '微信支付', statusText: '已完成', products: [{ id: 1, name: '清华同方超越E500台式机电脑(i3-6100/4G/1T/19.5寸)', spec1: '规格02', spec2: '规格01', price: '181', quantity: 1, image: '' }] }
])

const followUpOrders = ref([
  { orderTime: '2025/12/05 16:15:06', orderNo: '489283929283298395', payAmount: '181', payMethod: '微信支付', statusText: '已完成', products: [{ id: 1, name: '清华同方超越E500台式机电脑(i3-6100/4G/1T/19.5寸)', spec1: '规格02', spec2: '规格01', price: '181', quantity: 1, image: '' }] }
])

const evaluatedOrders = ref([
  { orderTime: '2025/12/05 16:15:06', orderNo: '489283929283298396', payAmount: '181', payMethod: '微信支付', statusText: '已完成', products: [{ id: 1, name: '清华同方超越E500台式机电脑(i3-6100/4G/1T/19.5寸)', spec1: '规格02', spec2: '规格01', price: '181', quantity: 1, image: '' }] }
])

const orderList = computed(() => {
  if (activeMainTab.value === 'pending') return pendingOrders.value
  else if (activeMainTab.value === 'followUp') return followUpOrders.value
  else return evaluatedOrders.value
})


const handleViewDetail = (order: any) => { router.push(`/trade/orderManage/detail/${order.orderNo}`) }
const handleEvaluate = (order: any) => { currentOrder.value = order; currentProduct.value = order.products[0]; evaluateDialogTitle.value = '商品评价'; evaluateForm.rating = 5; evaluateForm.content = ''; evaluateDialogVisible.value = true }
const handleFollowUpEvaluate = (order: any) => { currentOrder.value = order; currentProduct.value = order.products[0]; evaluateDialogTitle.value = '追加评价'; evaluateForm.rating = 5; evaluateForm.content = ''; evaluateDialogVisible.value = true }
const handleViewEvaluation = (order: any) => { ElMessage.info('查看评价详情') }
const handleSubmitEvaluate = async () => {
  const valid = await evaluateFormRef.value?.validate()
  if (!valid) return
  ElMessage.success('评价提交成功')
  evaluateDialogVisible.value = false
  if (activeMainTab.value === 'pending') {
    const index = pendingOrders.value.findIndex(o => o.orderNo === currentOrder.value.orderNo)
    if (index > -1) { pendingOrders.value.splice(index, 1); followUpOrders.value.push(currentOrder.value) }
  } else if (activeMainTab.value === 'followUp') {
    const index = followUpOrders.value.findIndex(o => o.orderNo === currentOrder.value.orderNo)
    if (index > -1) { followUpOrders.value.splice(index, 1); evaluatedOrders.value.push(currentOrder.value) }
  }
}
</script>

<style scoped lang="scss">
.order-evaluation-container { padding: 20px; background: #fff; min-height: 100%; }
.search-bar { display: flex; align-items: center; gap: 15px; margin-bottom: 15px; }
.filter-bar { display: flex; align-items: center; gap: 10px; margin-bottom: 20px; .filter-label { font-size: 14px; color: #666; } }
.order-list {
  .order-card { border: 1px solid #eee; border-radius: 4px; margin-bottom: 15px; overflow: hidden;
    .order-header { display: flex; align-items: center; gap: 15px; padding: 12px 15px; background: #f9f9f9; border-bottom: 1px solid #eee; font-size: 13px; color: #666;
      .order-time { color: #333; } .detail-btn { margin-left: auto; }
    }
    .product-list {
      .product-row { display: flex; border-bottom: 1px solid #f5f5f5; &:last-child { border-bottom: none; } }
      .product-cell { padding: 15px; display: flex; flex-direction: column; justify-content: center; }
      .product-info-cell { flex: 1; flex-direction: row; align-items: center; gap: 15px;
        .product-image { width: 80px; height: 80px; background: #f5f5f5; border-radius: 4px; overflow: hidden; flex-shrink: 0;
          .el-image { width: 100%; height: 100%; } .image-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }
        }
        .product-detail { flex: 1;
          .product-name { font-size: 14px; color: #333; margin-bottom: 5px; line-height: 1.4; }
          .product-spec { font-size: 12px; color: #999; margin-bottom: 5px; }
          .product-price { font-size: 16px; font-weight: bold; color: #e60012; }
        }
        .product-quantity { font-size: 13px; color: #666; }
      }
      .amount-cell { width: 120px; border-left: 1px solid #f5f5f5;
        .amount-info { margin-bottom: 5px; .label { font-size: 12px; color: #999; } .value { font-size: 14px; color: #333; &.highlight { font-size: 16px; font-weight: bold; color: #e60012; } } }
      }
      .status-cell { width: 80px; border-left: 1px solid #f5f5f5; align-items: center; .status-text { font-size: 13px; font-weight: 500; &.success { color: #e60012; } } }
      .action-cell { width: 80px; border-left: 1px solid #f5f5f5; align-items: center; }
    }
  }
}
.evaluate-product { display: flex; align-items: center; gap: 15px; padding: 15px; background: #f9f9f9; border-radius: 4px; margin-bottom: 20px;
  .product-image { width: 60px; height: 60px; background: #fff; border-radius: 4px; overflow: hidden; flex-shrink: 0;
    .el-image { width: 100%; height: 100%; } .image-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }
  }
  .product-info { .product-name { font-size: 14px; color: #333; margin-bottom: 5px; } .product-spec { font-size: 12px; color: #999; } }
}
</style>
