<template>
  <div class="table-box">
    <ProTable ref="proTable" :columns="columns" :request-api="getTableList" :data-callback="dataCallback">
      <template #endFundsButton="scope">
        <el-tag v-if="scope.row.endFundsButton == 1" type="success"> 审核中 </el-tag>
        <el-tag v-if="scope.row.endFundsButton == 2" type="success"> 已通过 </el-tag>
        <el-tag v-if="scope.row.endFundsButton == 3" type="primary"> 已驳回 </el-tag>
      </template>
      <template #promoteType="scope">
        <el-tag v-for="(item, index) in getPromoteTypes(scope.row.promoteType)" :key="index">
          {{ item }}
        </el-tag>
      </template>

      <template #operation="scope">
        <el-button type="primary" :icon="Search" link @click="handleDetail(scope.row)"> 查看详情 </el-button>
        <el-button type="primary" :icon="Setting" v-if="scope.row.endFundsButton == 1" link @click="handleReview(scope.row)">
          审核
        </el-button>
      </template>
    </ProTable>

    <ReviewDialog ref="reviewDialog" @approve="handleApprove" @reject="handleReject" />
    <DetailDialog ref="detailDialog" />
  </div>
</template>

<script setup lang="ts">
import ReviewDialog from "./reviewDialog.vue";
import DetailDialog from "./detailDialog.vue";
import { ref, reactive, onActivated } from "vue";
import type { Course } from "@/api/interface";
import { ElMessage } from "element-plus";
import ProTable from "@/components/ProTable/index.vue";
import type { ProTableInstance, ColumnProps } from "@/components/ProTable/interface";
import { Search, Setting } from "@element-plus/icons-vue";

const proTable = ref<ProTableInstance>();

const reviewDialog = ref<any>(null);
const detailDialog = ref<any>(null);

const columns = reactive<ColumnProps<Course.ReqCourseParams>[]>([
  {
    label: "序号",
    type: "index",
    width: 60,
    align: "center",
    fixed: "left" // 固定在左侧
  },
  {
    label: "订单编号",
    prop: "orderNo",
    width: 240,
    search: { el: "input", tooltip: "请输入订单编号" },
    fixed: "left", // 固定在左侧
    showOverflowTooltip: true
  },
  {
    label: "姓名",
    prop: "realName",
    width: 160,
    search: { el: "input", tooltip: "请输入姓名" },
    showOverflowTooltip: true
  },
  {
    label: "订单金额(元)",
    prop: "orderMoney",
    width: 200,
    align: "right"
  },
  {
    label: "状态",
    prop: "endFundsButton",
    width: 100,
    search: {
      el: "select",
      tooltip: "请选择状态",
      props: { clearable: true }
    },
    enum: [
      { value: 1, label: "审核中" },
      { value: 2, label: "已通过" },
      { value: 3, label: "已驳回" }
    ],
    fieldNames: { label: "label", value: "value" }
  },
  {
    label: "下单时间",
    prop: "orderTime"
  },
  {
    label: "申请时间",
    prop: "endFundsTime"
  },
  {
    label: "下单时间",
    prop: "time1",
    isShow: false, // 关键：不在表格中显示
    search: {
      el: "date-picker",
      props: {
        type: "datetimerange",
        valueFormat: "YYYY-MM-DD HH:mm:ss",
        rangeSeparator: "至",
        startPlaceholder: "开始时间",
        endPlaceholder: "结束时间"
      }
    }
  },
  {
    label: "申请时间",
    prop: "time4",
    isShow: false, // 关键：不在表格中显示
    search: {
      el: "date-picker",
      props: {
        type: "datetimerange",
        valueFormat: "YYYY-MM-DD HH:mm:ss",
        rangeSeparator: "至",
        startPlaceholder: "开始时间",
        endPlaceholder: "结束时间"
      }
    }
  },
  {
    label: "操作",
    prop: "operation",
    width: 200,
    fixed: "right" // 固定在右侧
  }
]);

const getTableList = async (params: any) => {
  let tempParams = JSON.parse(JSON.stringify(params));
  delete tempParams.time1;
  delete tempParams.time2;
  delete tempParams.time3;
  delete tempParams.time4;
  // 深拷贝原始参数
  let newParams = JSON.parse(JSON.stringify(tempParams));
  newParams.page = newParams.pageNum;
  newParams.size = newParams.pageSize;
  delete newParams.pageNum;
  delete newParams.pageSize;
  if (params.time1) {
    newParams.orderCreatedTime = params.time1[0];
    newParams.orderEndTime = params.time1[1];
  }
  // todo  后端 现在下单时间和支付时间是一个字段，后续调整 在改动
  if (params.time2) {
    newParams.payCreatedTime = params.time2[0];
    newParams.payEndTime = params.time2[1];
  }
  if (params.time3) {
    newParams.firstCompleteTime = params.time3[0];
    newParams.endCompleteTime = params.time3[1];
  }
  if (params.time4) {
    newParams.createdEndPaymentTime = params.time4[0];
    newParams.endEndPaymentTime = params.time4[1];
  }
  const res = await getFinalPaymentList(newParams);
  return res;
};

const dataCallback = (data: any) => {
  return {
    list: data.records,
    total: data.total
  };
};

// 处理推广板块字符串
const getPromoteTypes = (promoteType: string) => {
  if (!promoteType) return [];
  return promoteType.split(",");
};

//详情
const handleDetail = row => {
  detailDialog.value?.open(row);
};

// 审核
const handleReview = (row: any) => {
  reviewDialog.value?.open(row);
};

// 处理同意操作 endFundsButton: 2
const handleApprove = async (payload: {
  id: number;
  name: string;
  orderMoney: number;
  orderNo: string;
  storeTel: string;
  userPhone: string;
  endPaymentRefusal: string;
  endPayment: number | string;
}) => {
  try {
    const res: any = await getFinalPaymentReview({
      ...payload,
      endFundsButton: 2
    });
    if (res.data.status == 0) {
      ElMessage.success(res.msg);
    }
    if (res.data.status == 1) {
      ElMessage.error(res.data.codeMsg);
    }
    proTable.value?.getTableList();
  } catch (error) {
    console.error("审核通过失败:", error);
    ElMessage.error("审核通过失败");
  }
};

// 处理驳回操作 endFundsButton: 3
const handleReject = async (payload: {
  id: number;
  name: string;
  orderMoney: number;
  orderNo: string;
  storeTel: string;
  userPhone: string;
  endPaymentRefusal: string;
  endPayment: number | string;
}) => {
  try {
    const res: any = await getFinalPaymentReview({
      ...payload,
      endFundsButton: 3
    });
    if (res.data.status == 0) {
      ElMessage.success(res.msg);
    }
    if (res.data.status == 1) {
      ElMessage.error(res.data.codeMsg);
    }
    proTable.value?.getTableList();
  } catch (error) {
    console.error("审核驳回失败:", error);
    ElMessage.error("审核驳回失败");
  }
};

onActivated(() => {
  proTable.value?.getTableList();
});
</script>

<style scoped lang="scss">
/* 操作列按钮间距优化 */
:deep(.operation-column .cell) {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
  .el-button {
    height: auto;
    padding: 5px 10px;
    &.is-link {
      min-width: auto;
      padding: 0;
    }
  }
}

/* 金额列高亮显示 */
:deep(.financial-column .cell) {
  font-weight: 600;
  color: #e6a23c; // Element Plus 橙色
  text-align: center;
}

/* 表格行悬停效果增强 */
:deep(.el-table--enable-row-hover .el-table__body tr:hover > td) {
  background-color: #f5f9ff !important;
  transition: background-color 0.3s;
}

/* 表头样式优化 */
:deep(.el-table__header-wrapper th) {
  padding: 10px 0;
  font-weight: 600;
  color: #303133;
  background-color: #f8f9fa;
  .cell {
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

/* 单元格内边距优化 */
:deep(.el-table__cell) {
  padding: 8px 0;
}
</style>
