<template>
  <MDialog
    :visible="visible"
    title="订单详情"
    widthType="1"
    :footer="false"
    @update:visible="handleVisibleChange"
  >
    <div v-loading="detailLoading">
      <v-card v-if="order" outlined>
        <v-card-text>
          <v-row>
            <v-col cols="12" md="6">
              <div class="detail-item">
                <span class="label">订单编号：</span>
                <span class="value">{{ order.order_no }}</span>
              </div>
            </v-col>
            <v-col cols="12" md="6">
              <div class="detail-item">
                <span class="label">状态：</span>
                <v-chip :color="getStatusColor(order.status)" small>{{ order.status_label }}</v-chip>
              </div>
            </v-col>
            <v-col cols="12">
              <div class="detail-item">
                <span class="label">标题：</span>
                <span class="value">{{ order.title }}</span>
              </div>
            </v-col>
            <v-col cols="12">
              <div class="detail-item">
                <span class="label">需求描述：</span>
                <div class="value description-text">{{ order.description }}</div>
              </div>
            </v-col>

            <!-- LLM 提取结果 -->
            <v-col v-if="order.extracted_domains && order.extracted_domains.length" cols="12">
              <div class="detail-item">
                <span class="label">提取的业务领域：</span>
                <div class="value">
                  <v-chip
                    v-for="domain in order.extracted_domains"
                    :key="domain"
                    small
                    class="mr-2 mb-2"
                  >
                    {{ domain }}
                  </v-chip>
                </div>
              </div>
            </v-col>
            <v-col v-if="order.extracted_fields && order.extracted_fields.length" cols="12">
              <div class="detail-item">
                <span class="label">提取的数据字段：</span>
                <div class="value">
                  <v-chip
                    v-for="field in order.extracted_fields"
                    :key="field"
                    small
                    color="info"
                    class="mr-2 mb-2"
                  >
                    {{ field }}
                  </v-chip>
                </div>
              </div>
            </v-col>
            <v-col v-if="order.extraction_purpose" cols="12">
              <div class="detail-item">
                <span class="label">数据用途：</span>
                <span class="value">{{ order.extraction_purpose }}</span>
              </div>
            </v-col>

            <!-- 连通性分析 -->
            <v-col cols="12">
              <div class="detail-item">
                <span class="label">图谱连通性：</span>
                <span class="value">
                  <v-chip v-if="order.can_connect === true" color="success" small>可连通</v-chip>
                  <v-chip v-else-if="order.can_connect === false" color="error" small>不可连通</v-chip>
                  <span v-else>未分析</span>
                </span>
              </div>
            </v-col>

            <!-- 驳回原因 -->
            <v-col v-if="order.reject_reason" cols="12">
              <v-alert type="error" dense>{{ order.reject_reason }}</v-alert>
            </v-col>

            <!-- 关联结果 -->
            <v-col v-if="order.result_product_id" cols="12" md="6">
              <div class="detail-item">
                <span class="label">生成的数据产品：</span>
                <v-btn
                  text
                  color="primary"
                  small
                  @click="goToProduct(order.result_product_id)"
                >
                  查看数据产品 #{{ order.result_product_id }}
                </v-btn>
              </div>
            </v-col>
            <v-col v-if="order.result_dataflow_id" cols="12" md="6">
              <div class="detail-item">
                <span class="label">生成的数据流：</span>
                <v-btn
                  text
                  color="primary"
                  small
                  @click="goToDataflow(order.result_dataflow_id)"
                >
                  查看数据流 #{{ order.result_dataflow_id }}
                </v-btn>
              </div>
            </v-col>

            <!-- 审计信息 -->
            <v-col cols="12" md="6">
              <div class="detail-item">
                <span class="label">创建人：</span>
                <span class="value">{{ order.created_by }}</span>
              </div>
            </v-col>
            <v-col cols="12" md="6">
              <div class="detail-item">
                <span class="label">创建时间：</span>
                <span class="value">{{ formatDateTime(order.created_at) }}</span>
              </div>
            </v-col>
            <v-col v-if="order.processed_by" cols="12" md="6">
              <div class="detail-item">
                <span class="label">处理人：</span>
                <span class="value">{{ order.processed_by }}</span>
              </div>
            </v-col>
            <v-col v-if="order.processed_at" cols="12" md="6">
              <div class="detail-item">
                <span class="label">处理时间：</span>
                <span class="value">{{ formatDateTime(order.processed_at) }}</span>
              </div>
            </v-col>
          </v-row>
        </v-card-text>
      </v-card>

      <!-- 操作按钮 -->
      <div v-if="order" class="mt-4 d-flex justify-end">
        <v-btn v-if="order.status === 'pending'" color="primary" @click="handleAnalyze">开始分析</v-btn>
        <v-btn v-if="order.status === 'manual_review'" color="success" class="ml-2" @click="handleApprove">审批通过</v-btn>
        <v-btn v-if="order.status === 'manual_review'" color="error" class="ml-2" @click="handleReject">驳回</v-btn>
      </div>
    </div>
  </MDialog>
</template>

<script>
import MDialog from '@/components/Dialog'
import { api } from '@/api/dataOrder'
import { formatDate } from '@/utils/date'

export default {
  name: 'OrderDetailDialog',
  components: {
    MDialog
  },
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    orderId: {
      type: Number,
      default: null
    },
    loading: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      order: null,
      detailLoading: false
    }
  },
  watch: {
    visible (val) {
      if (val && this.orderId) {
        this.fetchDetail()
      }
    },
    orderId (val) {
      if (val && this.visible) {
        this.fetchDetail()
      }
    }
  },
  methods: {
    handleVisibleChange (val) {
      this.$emit('update:visible', val)
    },
    async fetchDetail () {
      if (!this.orderId) return
      this.detailLoading = true
      try {
        const { data } = await api.getOrderDetail(this.orderId)
        this.order = data
      } catch (error) {
        this.$snackbar.error(error)
      } finally {
        this.detailLoading = false
      }
    },
    handleAnalyze () {
      this.$emit('analyze', this.orderId)
      this.handleVisibleChange(false)
    },
    handleApprove () {
      this.$emit('approve', this.orderId)
    },
    handleReject () {
      this.$emit('reject', this.orderId)
    },
    goToProduct (productId) {
      // TODO: 跳转到数据产品详情页
      this.$snackbar.info('跳转到数据产品详情页')
    },
    goToDataflow (dataflowId) {
      // TODO: 跳转到数据流详情页
      this.$snackbar.info('跳转到数据流详情页')
    },
    getStatusColor (status) {
      const colors = {
        pending: 'info',
        analyzing: 'warning',
        processing: 'primary',
        completed: 'success',
        rejected: 'error',
        need_supplement: 'warning',
        manual_review: 'warning',
        updated: 'info'
      }
      return colors[status] || 'info'
    },
    formatDateTime (dateStr) {
      return formatDate(dateStr)
    }
  }
}
</script>

<style scoped>
.detail-item {
  margin-bottom: 12px;
}

.label {
  font-weight: 600;
  color: #666;
  margin-right: 8px;
}

.value {
  color: #333;
}

.description-text {
  white-space: pre-wrap;
  word-break: break-word;
  line-height: 1.6;
}
</style>
