<template>
  <el-dialog v-model="visible" title="履约者订单详情" width="1100px" top="6vh" custom-class="rider-orders-dialog">
    <div class="dialog-content">
      <!-- 1. Rider Summary Info -->
      <div class="rider-summary" v-if="riderInfo">
        <div class="summary-item">
          <span class="lbl">姓名：</span>
          <span class="val bold">{{ riderInfo.name }}</span>
        </div>
        <div class="summary-item">
          <span class="lbl">手机号：</span>
          <span class="val">{{ riderInfo.maskPhone }}</span>
        </div>
        <div class="summary-item">
          <span class="lbl">所属区域：</span>
          <span class="val">{{ riderInfo.station }}</span>
        </div>
        <div class="summary-item">
          <span class="lbl">工作类型：</span>
          <span class="val">{{ riderInfo.workType }}</span>
        </div>
        <div class="summary-item" style="flex: 1">
          <span class="lbl">服务类目：</span>
          <el-tag v-for="tag in riderInfo.categories" :key="tag" size="small" effect="plain" style="margin-right: 4px">{{ tag }}</el-tag>
        </div>
      </div>

      <!-- 2. Orders Table -->
      <div class="rider-orders-list">
        <el-table :data="orders" stripe style="width: 100%" :header-cell-style="{ background: '#f5f7fa', color: '#606266' }">
          <el-table-column prop="orderNo" label="订单号" width="150" />
          <el-table-column prop="serviceName" label="服务项目" width="120" show-overflow-tooltip />
          <el-table-column prop="petName" label="服务宠物" width="100" />
          <el-table-column prop="customerName" label="客户" width="100" />
          <el-table-column prop="address" label="服务详细地址" min-width="200" show-overflow-tooltip />
          <el-table-column prop="time" label="预约时间" width="160" />
          <el-table-column label="状态" width="100">
            <template #default="{ row }">
              <el-tag v-if="row.status === 'pending_accept'" type="warning" size="small">待接单</el-tag>
              <el-tag v-else-if="row.status === 'pending_service'" type="primary" size="small">待服务</el-tag>
              <el-tag v-else type="info" size="small">{{ row.status }}</el-tag>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </el-dialog>
</template>

<script setup>
import { computed } from 'vue';

const props = defineProps({
  modelValue: {
    type: Boolean,
    default: false
  },
  riderInfo: {
    type: Object,
    default: () => null
  },
  orders: {
    type: Array,
    default: () => []
  }
});

const emit = defineEmits(['update:modelValue']);

const visible = computed({
  get: () => props.modelValue,
  set: (val) => emit('update:modelValue', val)
});
</script>

<style scoped>
.rider-summary {
  display: flex;
  align-items: center;
  gap: 24px;
  background: #fdfdfd;
  border: 1px solid #ebeef5;
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 24px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
  flex-wrap: nowrap;
  overflow-x: auto;
}
.summary-item {
  display: flex;
  align-items: center;
  font-size: 14px;
  color: #606266;
  white-space: nowrap;
  flex-shrink: 0;
}
.summary-item .lbl {
  color: #909399;
  margin-right: 6px;
}
.summary-item .val {
  color: #303133;
  font-weight: 500;
}
.summary-item .val.bold {
  font-weight: bold;
  font-size: 16px;
  color: #303133;
}

.rider-orders-list {
  border: 1px solid #ebeef5;
  border-radius: 8px;
  overflow: hidden; /* Hide potential scrollbars from container */
}
</style>
