<template>
  <div class="app-container">
    <div class="detail-container">
      <el-card class="box-card" shadow="hover">
        <!-- 标题和操作按钮 -->
        <div class="card-header">
          <div class="header-title">
            <span class="title">订单详情</span>
            <dict-tag :options="dict.type.ss_order_status" :value="order.status"/>
          </div>
          <div class="operation-buttons">
            <el-button
              type="primary"
              icon="el-icon-card"
              size="small"
              @click="handleRefund"
              v-has-permi="['system:room:refund']"
            >退款</el-button>
            <el-button
              type="danger"
              icon="el-icon-close"
              size="small"
              @click="handleClose"
              v-has-permi="['system:room:close']"
            >结束订单</el-button>
          </div>
        </div>

        <!-- 左侧详情信息 -->
        <el-row :span="24">
          <el-col :span="20">
            <div class="detail-left">
              <!-- 所有info-section -->
              <div class="info-sections">
                <!-- 基本信息 -->
                <div class="info-section">
                  <h3>
                    <i class="el-icon-info"></i>
                    基本信息
                  </h3>
                  <el-descriptions :column="3" border>
                    <el-descriptions-item label="订单号">{{ order.orderNo }}</el-descriptions-item>
                    <el-descriptions-item label="用户">
                      <router-link :to="`/user/detail/${order.userId}`" class="link-type">
                        {{ order.userName }}
                      </router-link>
                    </el-descriptions-item>
                    <el-descriptions-item label="预约时间">
                      <template v-if="order.reserveStartTime && order.reserveEndTime">
                        {{ parseTime(order.reserveStartTime) }} 至 {{ parseTime(order.reserveEndTime) }}
                      </template>
                      <template v-else>
                        --
                      </template>
                    </el-descriptions-item>
                    <el-descriptions-item label="房间/设施">
                      <router-link :to="`/system/roomDetail/index/${order.roomId}`" class="link-type">
                        {{ order.roomName }}
                      </router-link>
                    </el-descriptions-item>
                    <el-descriptions-item label="店铺">
                      <router-link :to="`/system/storeDetail/index/${order.storeId}`" class="link-type">
                        {{ order.storeName }}
                      </router-link>
                    </el-descriptions-item>
                    <el-descriptions-item label="大门">
                      <router-link
                        v-if="order.gateSn"
                        :to="`/system/deviceDetail/index/${order.gateId}`"
                        class="link-type">
                        {{ order.gateSn }}
                      </router-link>
                    </el-descriptions-item>
                  </el-descriptions>
                </div>

                <!-- 套餐信息 -->
                <div class="info-section">
                  <h3>
                    <i class="el-icon-goods"></i>
                    套餐信息
                  </h3>
                  <el-descriptions :column="3" border>
                    <el-descriptions-item label="收费模式">
                      <dict-tag :options="dict.type.ss_fee_rule_mode" :value="order.mode"/>
                    </el-descriptions-item>
                    <el-descriptions-item label="套餐名称">{{ order.ruleName }}</el-descriptions-item>
                    <el-descriptions-item label="套餐时长">{{ order.duration }} 小时</el-descriptions-item>
                  </el-descriptions>
                </div>

                <!-- 商户信息 -->
                <div class="info-section">
                  <h3>
                    <i class="el-icon-office-building"></i>
                    商户信息
                  </h3>
                  <el-descriptions :column="3" border>
                    <el-descriptions-item label="商户名称">
                      <router-link :to="`/user/detail/${order.merchantId}`" class="link-type">
                        {{ order.merchantName }}
                      </router-link>
                    </el-descriptions-item>
                    <el-descriptions-item label="商户ID">{{ order.merchantId }}</el-descriptions-item>
                  </el-descriptions>
                </div>

                <!-- 支付信息 -->
                <div class="info-section">
                  <h3>
                    <i class="el-icon-money"></i>
                    支付信息
                  </h3>
                  <el-descriptions :column="3" border>
                    <el-descriptions-item label="支付方式">
                      <dict-tag :options="dict.type.ss_pay_type" :value="order.payType"/>
                    </el-descriptions-item>
                    <el-descriptions-item label="支付状态">
                      <dict-tag :options="dict.type.et_order_pay_status" :value="order.paid"/>
                    </el-descriptions-item>
                    <el-descriptions-item label="支付时间">
                      {{ parseTime(order.payTime) }}
                    </el-descriptions-item>
                    <el-descriptions-item label="订单金额">{{ order.totalFee | dv }} 元</el-descriptions-item>
                    <el-descriptions-item label="实付金额">{{ order.payFee | dv }} 元</el-descriptions-item>
                    <el-descriptions-item label="手续费">{{ order.handlingCharge | dv }} 元</el-descriptions-item>
                    <el-descriptions-item label="平台服务费">{{ order.platformServiceFee | dv }} 元</el-descriptions-item>
                    <el-descriptions-item label="押金扣除">{{ order.depositDeduction | dv }} 元</el-descriptions-item>
                    <el-descriptions-item label="扣除金额">{{ order.deductionAmount | dv }} 元</el-descriptions-item>
                  </el-descriptions>
                </div>
              </div>
            </div>
          </el-col>
          <el-col :span="4">
            <!-- 右侧操作履历 -->
            <div class="detail-right">
              <div class="info-sections history-section">
                <h3>
                  <i class="el-icon-time" style="color: #E6A23C;"></i>
                  操作履历
                </h3>
                <el-timeline class="padding0">
                  <el-timeline-item
                    v-for="activity in order.orderOpers"
                    :key="activity.operId"
                    :type="getTimelineItemType(activity.operType)"
                    :timestamp="activity.createTime"
                    :color="getTimelineItemColor(activity.operType)"
                  >
                    <div class="timeline-content">
                      <span class="operation-type" :style="{ color: getTimelineItemColor(activity.operType) }">
                        {{ dict.type.ss_order_oper_type[activity.operType].label }}
                      </span>
                      <el-tooltip placement="right" effect="light" popper-class="operation-tooltip">
                        <div slot="content">
                          <div>{{ activity.details }}</div>
                          <div v-if="activity.beforeAmount !== activity.afterAmount">
                            金额变更: {{ activity.beforeAmount }}元 -> {{ activity.afterAmount }}元
                          </div>
                          <div>操作人: {{ activity.operPhone }}</div>
                        </div>
                        <i
                          class="el-icon-info tooltip-icon"
                          :style="{ color: getTimelineItemColor(activity.operType) }"
                        ></i>
                      </el-tooltip>
                    </div>
                  </el-timeline-item>
                </el-timeline>
              </div>
            </div>
          </el-col>
        </el-row>

      </el-card>

      <!-- 分账明细标签页 -->
      <el-card class="box-card detail-tabs" shadow="hover">
        <el-tabs v-model="activeTab">
          <el-tab-pane label="分账明细" name="detail" :lazy="true">
            <detail v-if="order.orderNo != null"
              :query="{
                orderNo: order.orderNo
              }"
            />
          </el-tab-pane>
        </el-tabs>
      </el-card>
      </div>
    <!-- 退款弹窗 -->
    <refund-dialog :show.sync="showRefund" :pay-id="order.payId" :amount="order.payFee" @success="getDetail(orderId)" />
  </div>
</template>

<script>
import { getOrder } from "@/api/system/order";
import { parseTime } from '@/utils/ruoyi'
import Detail from '@/views/system/detail/index.vue'
import RefundDialog from './components/RefundDialog'
import Log from "@/views/system/commandLog/index.vue";

export default {
  name: "OrderDetail",
  dicts: ['ss_order_status', 'ss_pay_type', 'et_order_pay_status', 'ss_fee_rule_mode', 'ss_order_oper_type'],
  components: {
    Log,
    RefundDialog,
    Detail
  },
  data() {
    return {
      // 订单信息
      order: {},
      // 退款弹窗显示状态
      showRefund: false,
      // 当前激活的标签页
      activeTab: 'detail',
      // 订单ID
      orderId: null,

      // 域名
      domain: '',
    }
  },
  created() {
    this.orderId = this.$route.params.orderId;
    this.getDetail(this.orderId);
  },
  methods: {
    /** 获取订单详情 */
    async getDetail(orderId) {
      try {
        const response = await getOrder(orderId);
        this.order = response.data;
      } catch (error) {
        console.error('获取订单详情失败:', error);
        this.$message.error('获取订单详情失败');
      }
    },

    /** 处理退款 */
    handleRefund() {
      this.showRefund = true;
    },

    /** 处理结束订单 */
    handleClose() {
      this.$confirm(`确定结束订单【${this.order.orderNo}】吗？`, {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // closeBill({billId: this.order.billId}).then(res => {
        //   if (res.code === 200) {
        //     this.$message.success("操作成功");
        //     this.getDetail(this.order.orderId);
        //   }
        // })
      }).catch(() => {})
    },

    /** 获取时间轴节点的类型 */
    getTimelineItemType(operType) {
      const typeMap = {
        '1': 'primary',   // 下单
        '2': 'success',   // 支付
        '3': 'warning',   // 更换包间
        '4': 'info',      // 结束订单
        '6': 'warning',   // 退款
        '7': 'danger',    // 用户取消
        '8': 'danger'     // 系统自动取消
      };
      return typeMap[operType] || 'info';
    },

    /** 获取时间轴节点的颜色 */
    getTimelineItemColor(operType) {
      const colorMap = {
        '1': '#409EFF',   // 下单 - 蓝色
        '2': '#67C23A',   // 支付 - 绿色
        '3': '#E6A23C',   // 更换包间 - 黄色
        '4': '#909399',   // 结束订单 - 灰色
        '6': '#E6A23C',   // 退款 - 黄色
        '7': '#F56C6C',   // 用户取消 - 红色
        '8': '#F56C6C'    // 系统自动取消 - 红色
      };
      return colorMap[operType] || '#909399';
    },

    /** 获取操作图标 */
    getOperationIcon(operType) {
      const iconMap = {
        '1': 'el-icon-plus',          // 下单 - 加号图标
        '2': 'el-icon-check',         // 支付 - 对勾图标
        '3': 'el-icon-refresh',       // 更换包间 - 刷新图标
        '4': 'el-icon-circle-close',  // 结束订单 - 关闭圆圈图标
        '6': 'el-icon-back',          // 退款 - 返回图标
        '7': 'el-icon-close',         // 用户取消 - 关闭图标
        '8': 'el-icon-warning'        // 系统自动取消 - 警告图标
      };
      return iconMap[operType] || 'el-icon-info';
    },

    /** 获取提示内容 */
    getTooltipContent(activity) {
      let content = [];

      // 添加操作详情
      if (activity.details) {
        content.push(activity.details);
      }

      // 添加金额变更信息
      if (activity.beforeAmount !== activity.afterAmount) {
        content.push(`金额变更: ${activity.beforeAmount}元 -> ${activity.afterAmount}元`);
      }

      // 添加操作人信息
      if (activity.operPhone) {
        content.push(`操作人: ${activity.operPhone}`);
      }

      return content.join('\n');
    }
  }
}
</script>

<style lang="scss" scoped>
.app-container {
  padding: 24px;
  background-color: #f5f7fa;
  min-height: calc(100vh - 84px);

  .box-card {
    margin-bottom: 24px;
    background-color: #fff;
    border-radius: 4px;
    box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);
  }
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
  border-bottom: 1px solid #ebeef5;

  .header-title {
    display: flex;
    align-items: center;
    gap: 12px;

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

.operation-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.info-sections {
  padding: 0 20px;
  background-color: #fff;
  border-radius: 4px;
}

.info-section {
  padding: 20px 0;
  background-color: #fff;
  border-radius: 4px;

  & + .info-section {
    border-top: 1px solid #ebeef5;
  }

  h3 {
    margin: 0 0 16px;
    color: #303133;
    font-size: 16px;
    font-weight: 500;
    display: flex;
    align-items: center;

    i {
      margin-right: 8px;
      font-size: 18px;
      color: #409EFF;
    }
  }
}

.detail-tabs {
  margin-top: 24px;
}

.link-type {
  color: #1890ff;
  font-size: 14px;
  font-weight: 500;

  &:hover {
    text-decoration: underline;
  }
}

:deep(.el-descriptions) {
  .el-descriptions-item__label {
    background-color: #f5f7fa;
    font-weight: 500;
    min-width: 90px;
  }

  .el-descriptions-item__content {
    padding: 12px 16px;
  }
}

.detail-container {
  width: 100%;
  min-height: calc(100vh - 132px);
}

.detail-left {
  .box-card {
    margin-bottom: 0;
  }
}

.detail-right {

  .history-section {
    h3 {
      margin-bottom: 20px;
    }
  }
}
.padding0{
  padding: 0 !important;
}
.history-section {
  background-color: #fff;
  border-radius: 4px;

  :deep(.el-timeline) {
    padding: 20px;
    margin: 0 -20px;

    .el-timeline-item__content {
      .timeline-content {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 4px;
      }

      .operation-type {
        font-size: 14px;
        font-weight: 500;
      }

      .tooltip-icon {
        font-size: 16px;
        cursor: help;
        opacity: 0.8;
        transition: opacity 0.2s;
        display: inline-block;
        width: 16px;
        height: 16px;
        line-height: 16px;
        text-align: center;

        &:hover {
          opacity: 1;
        }
      }
    }

    .el-timeline-item__timestamp {
      color: #909399;
      font-size: 12px;
      line-height: 1.4;
      padding-top: 4px;
    }

    .el-timeline-item__node {
      background-color: #fff;
      border: 2px solid currentColor;
    }

    .el-timeline-item__tail {
      border-left: 2px solid #e4e7ed;
    }
  }
}

/* 添加全局样式 */
:deep(.operation-tooltip) {
  .el-tooltip__popper {
    max-width: 300px;
    line-height: 1.5;

    div {
      margin: 4px 0;

      &:first-child {
        margin-top: 0;
      }

      &:last-child {
        margin-bottom: 0;
      }
    }
  }
}
</style>
