<template>
  <div class="martial-order-container">
    <el-card shadow="hover">
      <div class="page-header">
        <h2 class="page-title">订单管理</h2>
      </div>
      <el-form :inline="true" :model="searchForm" class="search-form">
        <el-form-item>
          <el-input
            v-model="searchForm.keyword"
            placeholder="搜索订单号/用户"
            clearable
            size="small"
            style="width: 240px"
          >
            <i slot="prefix" class="el-input__icon el-icon-search"></i>
          </el-input>
        </el-form-item>
        <el-form-item>
          <el-input
            v-model="searchForm.status"
            placeholder="状态"
            clearable
            size="small"
            style="width: 180px"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" size="small" @click="handleSearch">查询</el-button>
        </el-form-item>
      </el-form>

      <el-table
        v-loading="loading"
        :data="tableData"
        border
        stripe
        size="small"
        style="width: 100%"
      >
        <el-table-column type="index" label="序号" width="60" align="center"></el-table-column>
        <el-table-column prop="orderNo" label="订单号" min-width="150" show-overflow-tooltip></el-table-column>
        <el-table-column prop="userName" label="用户" width="100"></el-table-column>
        <el-table-column prop="competitionName" label="赛事" min-width="180" show-overflow-tooltip></el-table-column>
        <el-table-column prop="amount" label="金额" width="100" align="center">
          <template #default="scope">
            <span class="amount-text">¥{{ scope.row.amount }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="status" label="状态" width="90" align="center">
          <template #default="scope">
            <el-tag :type="getStatusType(scope.row.status)" size="small">
              {{ getStatusText(scope.row.status) }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="createTime" label="创建时间" width="160"></el-table-column>
        <el-table-column label="操作" width="320" align="center" fixed="right">
          <template #default="scope">
            <el-button type="primary" size="small" @click="handleRegistrationDetail(scope.row)">报名详情</el-button>
            <el-button type="success" size="small" @click="handleSchedule(scope.row)" :disabled="!scope.row.canSchedule">编排</el-button>
            <el-button type="warning" size="small" @click="handleDispatch(scope.row)" :disabled="!scope.row.canDispatch">调度</el-button>
          </template>
        </el-table-column>
      </el-table>

      <el-pagination
        class="pagination"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pagination.current"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="pagination.size"
        layout="total, sizes, prev, pager, next"
        :total="pagination.total"
        small
      ></el-pagination>
    </el-card>
  </div>
</template>

<script>
export default {
  name: 'MartialOrderList',
  data() {
    return {
      loading: false,
      searchForm: {
        keyword: '',
        status: null
      },
      // 使用静态数据，方便演示功能
      allTableData: [
        {
          id: 1,
          orderNo: 'ORD20251127001',
          userName: '张三',
          competitionName: '第三十届武术大赛',
          amount: 999.00,
          status: 1,
          createTime: '2025-11-27 10:30:00',
          canSchedule: true,  // 可以编排
          canDispatch: false   // 未完成编排，不可调度
        },
        {
          id: 2,
          orderNo: 'ORD20251127002',
          userName: '李四',
          competitionName: '第三十届武术大赛',
          amount: 1245.00,
          status: 1,
          createTime: '2025-11-27 11:00:00',
          canSchedule: true,
          canDispatch: true  // 已完成编排，可以调度
        },
        {
          id: 3,
          orderNo: 'ORD20251127003',
          userName: '王五',
          competitionName: '青少年武术锦标赛',
          amount: 1580.00,
          status: 1,
          createTime: '2025-11-27 14:20:00',
          canSchedule: true,
          canDispatch: false
        },
        {
          id: 4,
          orderNo: 'ORD20251126001',
          userName: '赵六',
          competitionName: '第三十届武术大赛',
          amount: 2300.00,
          status: 0,
          createTime: '2025-11-26 09:15:00',
          canSchedule: false,
          canDispatch: false
        },
        {
          id: 5,
          orderNo: 'ORD20251126002',
          userName: '孙七',
          competitionName: '全国武术公开赛',
          amount: 1850.00,
          status: 1,
          createTime: '2025-11-26 16:45:00',
          canSchedule: true,
          canDispatch: false
        }
      ],
      tableData: [],
      pagination: {
        current: 1,
        size: 10,
        total: 0
      }
    }
  },
  mounted() {
    // 初始化时直接加载数据
    this.fetchData()
  },
  methods: {
    fetchData() {
      this.loading = true

      // 模拟API请求延迟
      setTimeout(() => {
        // 过滤数据
        let filteredData = [...this.allTableData]

        // 搜索过滤
        if (this.searchForm.keyword) {
          const keyword = this.searchForm.keyword.toLowerCase()
          filteredData = filteredData.filter(item =>
            item.orderNo.toLowerCase().includes(keyword) ||
            item.userName.toLowerCase().includes(keyword) ||
            item.competitionName.toLowerCase().includes(keyword)
          )
        }

        // 状态过滤
        if (this.searchForm.status !== null && this.searchForm.status !== '') {
          filteredData = filteredData.filter(item =>
            item.status === parseInt(this.searchForm.status)
          )
        }

        this.pagination.total = filteredData.length

        // 分页处理
        const start = (this.pagination.current - 1) * this.pagination.size
        const end = start + this.pagination.size
        this.tableData = filteredData.slice(start, end)

        this.loading = false
      }, 300)
    },
    handleSearch() {
      this.pagination.current = 1
      this.fetchData()
    },
    handleSizeChange(size) {
      this.pagination.size = size
      this.fetchData()
    },
    handleCurrentChange(current) {
      this.pagination.current = current
      this.fetchData()
    },
    // 查看报名详情
    handleRegistrationDetail(row) {
      this.$router.push({
        path: '/martial/registration/detail',
        query: { orderId: row.id }
      })
    },
    // 编排
    handleSchedule(row) {
      if (!row.canSchedule) {
        this.$message.warning('该订单暂不可编排')
        return
      }
      this.$router.push({
        path: '/martial/schedule/list',
        query: { orderId: row.id }
      })
    },
    // 调度
    handleDispatch(row) {
      if (!row.canDispatch) {
        this.$message.warning('请先完成编排')
        return
      }
      this.$router.push({
        path: '/martial/dispatch/list',
        query: { orderId: row.id }
      })
    },
    getStatusType(status) {
      const statusMap = {
        0: 'warning',
        1: 'success',
        2: 'info',
        3: 'danger'
      }
      return statusMap[status] || 'info'
    },
    getStatusText(status) {
      const statusMap = {
        0: '待支付',
        1: '已支付',
        2: '已取消',
        3: '已退款'
      }
      return statusMap[status] || '未知'
    }
  }
}
</script>

<style lang="scss" scoped>
.martial-order-container {
  min-height: 100%;
  padding: 15px;
  background: #fff;

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

    .page-title {
      margin: 0;
      font-size: 18px;
      font-weight: 600;
      color: #2c3e50;
    }
  }

  .tip-message {
    display: flex;
    gap: 12px;
    padding: 10px 14px;
    margin-bottom: 15px;
    background: linear-gradient(90deg, #ffd54f 0%, #ffecb3 100%);
    border: 1px solid #ffc107;
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(255, 193, 7, 0.2);

    .tip-header {
      flex-shrink: 0;

      .tip-number {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 18px;
        height: 18px;
        background: #ff9800;
        color: #fff;
        font-size: 11px;
        font-weight: bold;
        border-radius: 50%;
      }
    }

    .tip-content {
      flex: 1;
      color: #5d4037;
      font-size: 12px;
      line-height: 1.5;

      .tip-subtitle {
        margin-top: 3px;
        color: #6d4c41;
        font-size: 11px;
        font-style: italic;
      }
    }
  }

  .search-form {
    margin-bottom: 15px;
  }

  .amount-text {
    color: #e6a23c;
    font-weight: 600;
    font-size: 14px;
  }

  .pagination {
    margin-top: 15px;
    text-align: right;
  }
}
</style>
