<template>
  <div class="table-box">
    <ProTable ref="proTable" :columns="columns" :request-api="getTableList" :data-callback="dataCallback">
      <template #status="scope">
        <el-tag v-if="getStatusMetaInfo(scope.row)" :type="getStatusMetaInfo(scope.row)?.tagType">
          {{ getStatusMetaInfo(scope.row)?.label }}
        </el-tag>
        <span v-else> -- </span>
      </template>

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

    <ReviewDialog ref="reviewDialog" @submit="handleReviewSubmit" />
    <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 { 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";
import { getAppealPage, appealApprove } from "@/api/modules/lawyer";

const proTable = ref<ProTableInstance>();

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

const statusMeta = [
  { value: 0, label: "审核中", tagType: "info" },
  { value: 1, label: "已通过", tagType: "success" },
  { value: 2, label: "已驳回", tagType: "danger" }
] as const;

const resolveNumber = (value?: number | string | null) => {
  if (value === null || value === undefined || value === "") return undefined;
  return typeof value === "string" ? Number(value) : value;
};

const getStatusValue = (row?: any) => resolveNumber(row?.status ?? row?.processingStatus ?? row?.appealStatus);
const getStatusMeta = (status?: number) => statusMeta.find(item => item.value === status);
const getStatusMetaInfo = (row?: any) => getStatusMeta(getStatusValue(row));
const isPendingStatus = (row?: any) => getStatusValue(row) === 0;

const columns = reactive<ColumnProps<any>[]>([
  {
    label: "序号",
    type: "index",
    width: 60,
    align: "center",
    fixed: "left" // 固定在左侧
  },
  {
    label: "订单编号",
    prop: "orderNumber",
    fixed: "left",
    search: { el: "input" },
    showOverflowTooltip: true
  },
  {
    label: "用户名称",
    prop: "userName",
    width: 180,
    showOverflowTooltip: true,
    search: { el: "input" }
  },
  {
    label: "用户电话",
    prop: "userPhone",
    width: 180,
    showOverflowTooltip: true,
    search: { el: "input" }
  },
  {
    label: "律师姓名",
    prop: "lawyerName",
    width: 200,
    search: { el: "input" },
    showOverflowTooltip: true
  },
  {
    label: "律师电话",
    prop: "lawyerPhone",
    width: 180,
    showOverflowTooltip: true,
    search: { el: "input" }
  },
  {
    label: "状态",
    prop: "status",
    width: 120,
    search: {
      el: "select",
      props: { clearable: true }
    },
    enum: statusMeta as any,
    fieldNames: { label: "label", value: "value" }
  },
  {
    label: "举报时间",
    prop: "createdTime",
    width: 200,
    align: "center",
    search: {
      el: "date-picker",
      props: {
        type: "datetimerange",
        valueFormat: "YYYY-MM-DD",
        rangeSeparator: "至",
        startPlaceholder: "开始时间",
        endPlaceholder: "结束时间"
      }
    },
    showOverflowTooltip: true
  },
  {
    label: "操作",
    prop: "operation",
    width: 200,
    fixed: "right" // 固定在右侧
  }
]);

const getTableList = async (params: any) => {
  const newParams = {
    ...params
  };
  if (Array.isArray(newParams.createdTime) && newParams.createdTime.length === 2) {
    newParams.startTime = newParams.createdTime[0];
    newParams.endTime = newParams.createdTime[1];
  }
  delete newParams.createdTime;
  const res = await getAppealPage(newParams);
  return res;
};

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

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

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

const handleReviewSubmit = async (payload: { status: number; reviewReasons: string }) => {
  if (!currentRow.value) return;
  try {
    await appealApprove({
      id: currentRow.value.id,
      status: payload.status,
      reviewReasons: payload.reviewReasons?.trim()
    });
    ElMessage.success("审核结果已提交");
    reviewDialog.value?.close?.();
    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>
