<template>
  <div class="app-container">
    <!-- 页面标题 -->
    <h2 class="page-title">结算单详情</h2>

    <!-- 查询区域 -->
    <div class="head-container">
      <div class="filter-container">
        <div class="filter-item">
          <span class="label">订单批次号：</span>
          <el-input
            v-model="query.batchNo"
            placeholder="请输入订单批次号"
            style="width: 200px"
            clearable
          />
        </div>
        <div class="filter-item">
          <span class="label">景区：</span>
          <el-select
            v-model="query.scenicArea"
            placeholder="请选择景区"
            clearable
            style="width: 200px"
          >
            <el-option
              v-for="item in scenicAreaOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </div>
        <div class="filter-item">
          <span class="label">日期：</span>
          <el-date-picker
            v-model="query.dateRange"
            type="daterange"
            range-separator="~"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :default-time="['00:00:00', '23:59:59']"
            :default-value="defaultDateRange"
            style="width: 350px"
          />
        </div>
      </div>
    </div>

    <!-- 订单列表区域 -->
    <div class="order-list-container">
      <div class="list-header">
        <span class="list-title">订单列表：</span>
      </div>

      <!-- 表格 -->
      <el-table
        ref="table"
        v-loading="loading"
        :data="tableData"
        style="width: 100%"
      >
        <el-table-column prop="customerName" label="客户名称" align="center" />
        <el-table-column prop="phoneNumber" label="手机号码" align="center" />
        <el-table-column
          prop="orderTime"
          label="下单时间"
          align="center"
          width="180"
        />
        <el-table-column prop="orderAmount" label="下单费用" align="center" />
        <el-table-column prop="scenicArea" label="景区" align="center" />
        <el-table-column prop="route" label="路线" align="center" />
        <el-table-column prop="initiator" label="订单发起人" align="center" />
        <el-table-column prop="orderType" label="订单类型" align="center" />
        <el-table-column prop="orderStatus" label="订单状态" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.orderStatus }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="settlementStatus"
          label="结算状态"
          align="center"
        >
          <template slot-scope="scope">
            <span :class="getSettlementStatusClass(scope.row.settlementStatus)">
              {{ scope.row.settlementStatus }}
            </span>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <div class="pagination-container">
        <el-pagination
          :current-page.sync="page.current"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="page.size"
          :total="page.total"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>

    <!-- 操作按钮 -->
    <div class="action-buttons">
      <el-button
        type="primary"
        @click="handleCancelSettlement"
        :disabled="settlementStatus !== '结算中'"
      >
        取消结算
      </el-button>
      <el-button type="primary" @click="handlePrint"> 打印结算单 </el-button>
    </div>
  </div>
</template>

<script>
export default {
  name: "orderDetail",
  data() {
    const defaultStartDate = new Date("2015-10-02");
    const defaultEndDate = new Date("2015-10-10");
    return {
      loading: false,
      settlementStatus: "结算中", // 当前结算单状态
      scenicAreaOptions: [
        { value: "baiYunShan", label: "白云山" },
        { value: "huangShan", label: "黄山" },
        { value: "taiShan", label: "泰山" },
      ],
      query: {
        batchNo: "",
        scenicArea: "",
        dateRange: [defaultStartDate, defaultEndDate],
      },
      defaultDateRange: [defaultStartDate, defaultEndDate],
      page: {
        current: 1,
        size: 10,
        total: 3,
      },
      tableData: [
        {
          customerName: "小明",
          phoneNumber: "12345678",
          orderTime: "2024-01-01 00:00:00",
          orderAmount: "100.00",
          scenicArea: "白云山",
          route: "a-b",
          initiator: "小红",
          orderType: "载物飞行",
          orderStatus: "已完成",
          settlementStatus: "未结算",
        },
        {
          customerName: "小明",
          phoneNumber: "12345678",
          orderTime: "2024-01-01 00:00:00",
          orderAmount: "100.00",
          scenicArea: "白云山",
          route: "a-b",
          initiator: "小红",
          orderType: "载物飞行",
          orderStatus: "进行中",
          settlementStatus: "结算中",
        },
        {
          customerName: "小明",
          phoneNumber: "12345678",
          orderTime: "2024-01-01 00:00:00",
          orderAmount: "100.00",
          scenicArea: "白云山",
          route: "a-b",
          initiator: "小红",
          orderType: "载物飞行",
          orderStatus: "已完成",
          settlementStatus: "结算完成",
        },
      ],
      selection: [],
    };
  },
  methods: {
    handleSearch() {
      // 实现搜索逻辑
      console.log("搜索条件:", this.query);
    },
    getSettlementStatusClass(status) {
      return {
        "status-red": ["未结算", "结算中"].includes(status),
      };
    },

    handleCancelSettlement() {
      if (this.settlementStatus === "结算中") {
        // 更新所有订单的结算状态为未结算
        this.tableData.forEach((order) => {
          order.settlementStatus = "未结算";
        });
        this.settlementStatus = "未结算";
        this.$message.success("已取消结算");
      }
    },
    handleSizeChange(val) {
      this.page.size = val;
      // 重新加载数据
    },
    handleCurrentChange(val) {
      this.page.current = val;
      // 重新加载数据
    },
    handleDetail(row) {
      // 查看详情
      console.log("查看详情:", row);
    },
    handlePrint() {
      // 根据当前状态流转到下一个状态
      switch (this.settlementStatus) {
        case "结算中":
          this.settlementStatus = "已确认";
          this.$message.success("结算单状态已更新为：已确认");
          break;
        case "已确认":
          this.settlementStatus = "已完成";
          this.$message.success("结算单状态已更新为：已完成");
          break;
        case "已完成":
          // 执行打印逻辑
          console.log("打印结算单");
          break;
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.app-container {
  padding: 20px;
}

.page-title {
  margin-bottom: 20px;
  font-size: 22px;
  font-weight: bold;
  color: #303133;
}

.filter-container {
  background-color: #fff;
  margin-bottom: 20px;

  .filter-item {
    display: inline-flex;
    align-items: center;
    margin-right: 20px;

    .label {
      color: #606266;
      margin-right: 8px;
    }
  }
}

.order-list-container {
  background-color: #fff;

  .list-header {
    margin-bottom: 20px;

    .list-title {
      font-size: 16px;
      font-weight: bold;
      color: #303133;
    }
  }
}

.action-buttons {
  text-align: center;
  margin: 20px 0;
  padding: 20px 0;

  .el-button {
    margin: 0 10px;
  }
}

.status-red {
  color: #f56c6c;
}

// .pagination-container {
//   position: fixed;
//   bottom: 0;
//   left: 200px;
//   right: 0;
//   height: 60px;
//   background: white;
//   padding: 10px;
//   text-align: left;
//   box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.08);
//   z-index: 1000;
// }

// .el-pagination {
//   padding: 10px 20px;
// }

.el-table {
  margin-bottom: 70px;
}

.el-button--text {
  color: #409eff;
  &:hover {
    color: #66b1ff;
  }
}

.el-table {
  margin-top: 20px;
  ::v-deep .el-table__body-wrapper {
    overflow-x: auto;
  }
}
</style>
