<template>
  <div class="table-box">
    <ProTable ref="proTable" :columns="columns" :request-api="getTableList" :data-callback="dataCallback">
      <template #processingStatus="scope">
        <el-tag v-if="getStatusMeta(scope.row.processingStatus)" :type="getStatusMeta(scope.row.processingStatus)?.tagType">
          {{ getStatusMeta(scope.row.processingStatus)?.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 type="primary" :icon="Setting" v-if="scope.row.processingStatus == 0" 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 { getViolationPage, violationApprove } 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: "danger" },
  { value: 2, label: "未违规", tagType: "success" }
] as const;

const violationTypeMeta = [
  { value: 1, label: "服务态度差" },
  { value: 2, label: "专业能力差" },
  { value: 3, label: "响应时间超过24小时" },
  { value: 4, label: "其他原因" }
] as const;

const getStatusMeta = (status?: number) => statusMeta.find(item => item.value == status);
const getViolationMeta = (type?: number | string) => violationTypeMeta.find(item => item.value == type);

const getViolationDisplay = (row: any) => {
  if (!row) return "--";
  if (row.violationReason == 4) return row.otherReasonContent || "其他原因";
  return getViolationMeta(row.violationReason)?.label || "--";
};

const columns = reactive<ColumnProps<any>[]>([
  {
    label: "序号",
    type: "index",
    width: 60,
    align: "center",
    fixed: "left" // 固定在左侧
  },
  {
    label: "订单编号",
    prop: "orderNumber",
    width: 220,
    fixed: "left", // 固定在左侧
    search: { el: "input" },
    showOverflowTooltip: true
  },
  {
    label: "律师姓名",
    prop: "reportedUserName",
    width: 140,
    search: { el: "input" },
    fixed: "left", // 固定在左侧
    showOverflowTooltip: true
  },
  {
    label: "律师电话",
    prop: "reportedPhone",
    search: { el: "input" },
    align: "center"
  },
  {
    label: "用户姓名",
    prop: "nickname",
    search: { el: "input" },
    width: 140,
    align: "center"
  },
  {
    label: "用户电话",
    prop: "phone",
    search: { el: "input" },
    align: "center"
  },
  {
    label: "举报类型",
    prop: "violationReason",
    showOverflowTooltip: true,
    search: {
      el: "select",
      props: { clearable: true }
    },
    enum: violationTypeMeta as any,
    render: scope => getViolationDisplay(scope.row)
  },
  {
    label: "处理说明",
    prop: "reportResult",
    width: 200,
    align: "center"
  },

  {
    label: "举报时间",
    prop: "createdTime",
    width: 200,
    align: "center"
  },
  {
    label: "当前状态",
    prop: "processingStatus",
    width: 100,
    search: {
      el: "select",
      props: { clearable: true }
    },
    enum: [
      { value: 0, label: "未处理" },
      { value: 1, label: "违规" },
      { value: 2, label: "未违规" }
    ],
    fieldNames: { label: "label", value: "value" }
  },
  {
    label: "举报时间",
    prop: "time",
    isShow: false, // 关键：不在表格中显示
    search: {
      el: "date-picker",
      props: {
        type: "datetimerange",
        valueFormat: "YYYY-MM-DD",
        rangeSeparator: "至",
        startPlaceholder: "开始时间",
        endPlaceholder: "结束时间"
      }
    }
  },
  {
    label: "操作",
    prop: "operation",
    width: 200,
    fixed: "right" // 固定在右侧
  }
]);

const getTableList = async (params: any) => {
  const newParams = {
    ...params,
    page: params.pageNum,
    size: params.pageSize
  };

  if (newParams.time) {
    newParams.startTime = newParams.time[0] + " 00:00:00";
    newParams.endTime = newParams.time[1] + " 23:59:59";
  }
  delete newParams.time;
  delete newParams.pageNum;
  delete newParams.pageSize;
  const res = await getViolationPage(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: { processingStatus: number; reportResult: string }) => {
  if (!currentRow.value) return;
  try {
    await violationApprove({
      id: currentRow.value.id,
      processingStatus: payload.processingStatus,
      reportResult: payload.reportResult
    });
    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>
