<template>
  <div class="container">
    <Breadcrumb :items="['充值账户管理', '预拉取订单日志']" />

    <a-card class="general-card" :title="cardTitle">
      <template #extra>
        <a-radio-group v-model="activeView" type="button" size="small">
          <a-radio value="logs">预拉取订单日志</a-radio>
          <a-radio value="orders">预拉取订单列表</a-radio>
        </a-radio-group>
      </template>

      <!-- 预拉取订单日志内容 -->
      <div v-show="activeView === 'logs'">
        <!-- 搜索表单区域 -->
        <a-row>
          <a-col :flex="1">
            <a-form
              :model="logFormModel"
              :label-col-props="{ span: 6 }"
              :wrapper-col-props="{ span: 18 }"
              label-align="left"
            >
              <a-row :gutter="16">
                <a-col :span="8">
                  <a-form-item field="startTime" label="开始时间">
                    <a-date-picker
                      v-model="logFormModel.startTime"
                      style="width: 100%"
                      format="YYYY-MM-DD HH:mm:ss"
                      show-time
                      placeholder="请选择开始时间"
                    />
                  </a-form-item>
                </a-col>
                <a-col :span="8">
                  <a-form-item field="endTime" label="结束时间">
                    <a-date-picker
                      v-model="logFormModel.endTime"
                      style="width: 100%"
                      format="YYYY-MM-DD HH:mm:ss"
                      show-time
                      placeholder="请选择结束时间"
                    />
                  </a-form-item>
                </a-col>
              </a-row>
            </a-form>
          </a-col>
          <a-divider style="height: 42px" direction="vertical" />
          <a-col flex="180px" style="text-align: right">
            <a-space direction="horizontal" :size="18">
              <a-button type="primary" @click="searchLogs">
                <template #icon>
                  <icon-search />
                </template>
                搜索
              </a-button>
              <a-button @click="resetLogs">
                <template #icon>
                  <icon-refresh />
                </template>
                重置
              </a-button>
            </a-space>
          </a-col>
        </a-row>
        <a-divider style="margin-top: 0" />

        <!-- 表格操作按钮 -->
        <div class="table-actions">
          <a-button @click="showSettingsModal">
            <template #icon>
              <icon-settings />
            </template>
            设置
          </a-button>
        </div>

        <!-- 日志数据文本区域 -->
        <div class="log-container">
          <div class="log-header">
            <a-space>
              <a-button size="small" @click="copyLogs">
                <template #icon>
                  <icon-copy />
                </template>
                复制日志
              </a-button>
              <a-button size="small" @click="clearLogs">
                <template #icon>
                  <icon-delete />
                </template>
                清空日志
              </a-button>
            </a-space>
          </div>
          <div ref="logContentRef" class="log-content">
            <div v-if="logsLoading" class="log-loading">
              <a-spin />
              <span>加载日志中...</span>
            </div>
            <div v-else-if="logsRenderData.length === 0" class="log-empty">
              暂无日志数据
            </div>
            <div v-else class="log-entries">
              <div
                v-for="(log, index) in logsRenderData"
                :key="log.timestamp || index"
                class="log-entry"
              >
                <div class="log-time">
                  {{ formatDateTime(log.timestamp) }}
                </div>
                <div class="log-response">
                  <div class="log-response-header">
                    <span>响应数据:</span>
                  </div>
                  <div class="log-response-content">
                    {{ log.responseData || '无响应数据' }}
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 预拉取订单列表内容 -->
      <div v-show="activeView === 'orders'">
        <!-- 搜索表单区域 -->
        <a-row>
          <a-col :flex="1">
            <a-form
              :model="orderFormModel"
              :label-col-props="{ span: 6 }"
              :wrapper-col-props="{ span: 18 }"
              label-align="left"
            >
              <a-row :gutter="16">
                <a-col :span="6">
                  <a-form-item field="accountName" label="账号名称">
                    <a-input
                      v-model="orderFormModel.accountName"
                      placeholder="请输入账号名称"
                      allow-clear
                    />
                  </a-form-item>
                </a-col>
                <a-col :span="6">
                  <a-form-item field="platformOrderNo" label="平台订单号">
                    <a-input
                      v-model="orderFormModel.platformOrderNo"
                      placeholder="请输入平台订单号"
                      allow-clear
                    />
                  </a-form-item>
                </a-col>
                <a-col :span="6">
                  <a-form-item field="amount" label="订单金额">
                    <a-input-number
                      v-model="orderFormModel.amount"
                      placeholder="请输入订单金额"
                      style="width: 100%"
                      :min="0"
                      :precision="2"
                    />
                  </a-form-item>
                </a-col>
                <a-col :span="6">
                  <a-form-item field="status" label="状态">
                    <a-select
                      v-model="orderFormModel.status"
                      placeholder="请选择状态"
                      allow-clear
                    >
                      <a-option :value="1">待匹配</a-option>
                      <a-option :value="2">已匹配</a-option>
                      <a-option :value="3">已过期</a-option>
                      <a-option :value="4">已失效</a-option>
                    </a-select>
                  </a-form-item>
                </a-col>
              </a-row>
              <a-row :gutter="16">
                <a-col :span="8">
                  <a-form-item field="dateRange" label="创建时间">
                    <a-range-picker
                      v-model="orderFormModel.dateRange"
                      style="width: 100%"
                      format="YYYY-MM-DD"
                      value-format="YYYY-MM-DD"
                      :placeholder="['开始日期', '结束日期']"
                    />
                  </a-form-item>
                </a-col>
              </a-row>
            </a-form>
          </a-col>
          <a-divider style="height: 42px" direction="vertical" />
          <a-col flex="180px" style="text-align: right">
            <a-space direction="horizontal" :size="18">
              <a-button type="primary" @click="searchOrders">
                <template #icon>
                  <icon-search />
                </template>
                搜索
              </a-button>
              <a-button @click="resetOrders">
                <template #icon>
                  <icon-refresh />
                </template>
                重置
              </a-button>
            </a-space>
          </a-col>
        </a-row>
        <a-divider style="margin-top: 0" />

        <!-- 订单数据表格区域 -->
        <a-table
          :loading="ordersLoading"
          :data="ordersRenderData"
          :columns="orderColumns"
          :scroll="{ x: 1600 }"
          :pagination="{
            current: ordersPagination.current,
            pageSize: ordersPagination.pageSize,
            total: ordersPagination.total,
            pageSizeOptions: [10, 20, 50, 100],
            showPageSize: true
          }"
          row-key="id"
          @page-change="onOrdersPageChange"
          @page-size-change="onOrdersPageSizeChange"
        >
          <!-- 订单金额列模板 -->
          <template #orderAmount="{ record }">
            <span v-if="record.amount">¥{{ record.amount.toFixed(2) }}</span>
            <span v-else>-</span>
          </template>

          <!-- 状态列模板 -->
          <template #orderStatus="{ record }">
            <a-tag v-if="record.status" :color="getStatusColor(record.status)">
              {{ record.statusText || getStatusText(record.status) }}
            </a-tag>
            <span v-else>-</span>
          </template>

          <!-- 创建时间列模板 -->
          <template #createdAt="{ record }">
            <span v-if="record.createdAt">
              {{ formatDateTime(record.createdAt) }}
            </span>
            <span v-else>-</span>
          </template>

          <!-- 匹配时间列模板 -->
          <template #matchedAt="{ record }">
            <span v-if="record.matchedAt">
              {{ formatDateTime(record.matchedAt) }}
            </span>
            <span v-else>-</span>
          </template>

          <!-- 过期时间列模板 -->
          <template #expireAt="{ record }">
            <span v-if="record.expireAt">
              {{ formatDateTime(record.expireAt) }}
            </span>
            <span v-else>-</span>
          </template>
        </a-table>
      </div>
    </a-card>

    <!-- 设置配置弹窗 -->
    <a-modal
      v-model:visible="state.settingsModalVisible"
      title="预拉取设置配置"
      width="1000px"
      :footer="false"
      @cancel="state.settingsModalVisible = false"
    >
      <settings-form />
    </a-modal>
  </div>
</template>

<script lang="ts" setup>
import useLoading from '@/hooks/loading';
import { Pagination } from '@/types/global';
import { onMounted, reactive, ref, computed, watch } from 'vue';
import { Notification, Message } from '@arco-design/web-vue';
import SettingsForm from './components/settings-form.vue';
import type {
  KamiApiCamelOilV1PrefetchOrderLogItem,
  KamiApiCamelOilV1PrefetchOrderListItem
} from '@/api/generated/index.ts';
import { jdV2PrefetchClient } from '@/api/index.ts';
import dayjs from 'dayjs';

// 当前活跃视图
const activeView = ref('logs');

// 动态卡片标题
const cardTitle = computed(() => {
  return activeView.value === 'logs' ? '预拉取订单日志' : '预拉取订单列表';
});

// 订单列表相关状态
const baseOrdersPagination: Pagination = {
  current: 1,
  pageSize: 20
};
const ordersPagination = reactive({
  ...baseOrdersPagination
});

const generateLogFormModel = () => {
  const now = dayjs();
  return {
    startTime: now.subtract(1, 'day').toDate(),
    endTime: now.toDate()
  };
};

const { loading: logsLoading, setLoading: setLogsLoading } = useLoading(false);
const logsRenderData = ref<KamiApiCamelOilV1PrefetchOrderLogItem[]>([]);
const logFormModel = ref(generateLogFormModel());

const { loading: ordersLoading, setLoading: setOrdersLoading } =
  useLoading(false);
const ordersRenderData = ref<KamiApiCamelOilV1PrefetchOrderListItem[]>([]);

const generateOrderFormModel = () => {
  return {
    accountName: '',
    platformOrderNo: '',
    amount: undefined,
    status: undefined,
    dateRange: undefined as Array<string> | undefined
  };
};

const orderFormModel = ref(generateOrderFormModel());

const orderColumns = [
  {
    title: '序号',
    dataIndex: 'index',
    width: 80,
    render: ({ rowIndex }) => {
      return (
        rowIndex +
        1 +
        (ordersPagination.current - 1) * ordersPagination.pageSize
      );
    }
  },
  {
    title: '账号名称',
    dataIndex: 'accountName',
    width: 120,
    ellipsis: true,
    tooltip: true
  },
  {
    title: '平台订单号',
    dataIndex: 'platformOrderNo',
    width: 180,
    ellipsis: true,
    tooltip: true
  },
  {
    title: '订单金额',
    dataIndex: 'amount',
    slotName: 'orderAmount',
    width: 100
  },
  {
    title: '状态',
    dataIndex: 'status',
    slotName: 'orderStatus',
    width: 100
  },
  {
    title: '匹配订单号',
    dataIndex: 'orderNo',
    width: 150,
    ellipsis: true,
    tooltip: true
  },
  {
    title: '创建时间',
    dataIndex: 'createdAt',
    slotName: 'createdAt',
    width: 160
  },
  {
    title: '匹配时间',
    dataIndex: 'matchedAt',
    slotName: 'matchedAt',
    width: 160
  },
  {
    title: '过期时间',
    dataIndex: 'expireAt',
    slotName: 'expireAt',
    width: 160
  },
  {
    title: '失败原因',
    dataIndex: 'failureReason',
    width: 120,
    ellipsis: true,
    tooltip: true
  },
  {
    title: '备注',
    dataIndex: 'remark',
    width: 120,
    ellipsis: true,
    tooltip: true
  }
];

const state = reactive({
  settingsModalVisible: false
});

// 日志相关方法
const fetchLogs = async () => {
  if (!logFormModel.value.startTime || !logFormModel.value.endTime) {
    Notification.warning({
      content: '请选择开始时间和结束时间',
      closable: true
    });
    setLogsLoading(false);
    return;
  }

  setLogsLoading(true);
  try {
    const { data } = await jdV2PrefetchClient.apiJdV2PrefetchLogsGet({
      startTime: dayjs(logFormModel.value.startTime).format(
        'YYYY-MM-DD HH:mm:ss'
      ),
      endTime: dayjs(logFormModel.value.endTime).format('YYYY-MM-DD HH:mm:ss')
    });

    // 直接使用API返回的全部日志数据
    logsRenderData.value = data.logs || [];
  } catch (err) {
    console.error('获取预拉取订单日志失败:', err);
    Notification.error({
      content: '获取预拉取订单日志失败',
      closable: true
    });
  } finally {
    setLogsLoading(false);
  }
};

const searchLogs = () => {
  fetchLogs();
};

const resetLogs = () => {
  logFormModel.value = generateLogFormModel();
  searchLogs();
};

const copyLogs = async () => {
  try {
    const logText = logsRenderData.value
      .map(log => {
        const time = formatDateTime(log.timestamp);
        const data = log.responseData || '无响应数据';
        return `[${time}] ${data}`;
      })
      .join('\n\n');

    await navigator.clipboard.writeText(logText);
    Message.success({
      content: '日志复制成功',
      duration: 2000
    });
  } catch (err) {
    console.error('复制日志失败:', err);
    Message.error({
      content: '复制日志失败',
      duration: 2000
    });
  }
};

const clearLogs = () => {
  logsRenderData.value = [];
  Message.info({
    content: '日志已清空',
    duration: 2000
  });
};

const showSettingsModal = () => {
  state.settingsModalVisible = true;
};

const formatDateTime = (dateTime: string | undefined): string => {
  if (!dateTime) return '-';
  return dayjs(dateTime).format('YYYY-MM-DD HH:mm:ss');
};

// 订单列表相关方法
const fetchOrders = async (params: any = { current: 1, pageSize: 20 }) => {
  setOrdersLoading(true);
  try {
    const requestParams: any = {
      current: params.current,
      pageSize: params.pageSize
    };

    // 添加搜索条件
    if (orderFormModel.value.accountName) {
      requestParams.accountName = orderFormModel.value.accountName;
    }
    if (orderFormModel.value.platformOrderNo) {
      requestParams.platformOrderNo = orderFormModel.value.platformOrderNo;
    }
    if (orderFormModel.value.amount) {
      requestParams.amount = orderFormModel.value.amount;
    }
    if (orderFormModel.value.status) {
      requestParams.status = orderFormModel.value.status;
    }
    if (
      orderFormModel.value.dateRange &&
      orderFormModel.value.dateRange.length === 2
    ) {
      requestParams.dateRange = orderFormModel.value.dateRange;
    }

    const { data } =
      await jdV2PrefetchClient.apiJdV2PrefetchOrdersGet(requestParams);

    ordersRenderData.value = data.list || [];
    ordersPagination.current = params.current;
    ordersPagination.pageSize = params.pageSize;
    ordersPagination.total = data.total || 0;
  } catch (err) {
    console.error('获取预拉取订单列表失败:', err);
    Notification.error({
      content: '获取预拉取订单列表失败',
      closable: true
    });
  } finally {
    setOrdersLoading(false);
  }
};

const onOrdersPageChange = (current: number) => {
  fetchOrders({ ...ordersPagination, current });
};

const onOrdersPageSizeChange = (pageSize: number) => {
  fetchOrders({ ...ordersPagination, pageSize, current: 1 });
};

const searchOrders = () => {
  fetchOrders({
    ...baseOrdersPagination
  });
};

const resetOrders = () => {
  orderFormModel.value = generateOrderFormModel();
  searchOrders();
};

// 状态相关方法
const getStatusText = (status: number): string => {
  const statusMap: Record<number, string> = {
    1: '待匹配',
    2: '已匹配',
    3: '已过期',
    4: '已失效'
  };
  return statusMap[status] || '未知';
};

const getStatusColor = (status: number): string => {
  const colorMap: Record<number, string> = {
    1: 'blue', // 待匹配
    2: 'green', // 已匹配
    3: 'orange', // 已过期
    4: 'red' // 已失效
  };
  return colorMap[status] || 'gray';
};

// 视图切换处理
watch(activeView, newValue => {
  if (newValue === 'orders' && ordersRenderData.value.length === 0) {
    // 首次切换到订单列表视图时加载数据
    fetchOrders();
  }
});

onMounted(() => {
  // 页面加载时默认加载日志数据
  fetchLogs();
});
</script>

<style scoped>
.container {
  padding: 0 20px 20px;
}

.general-card {
  min-height: calc(100vh - 200px);
}

.table-actions {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 16px;
}

/* 日志容器样式 */
.log-container {
  border: 1px solid var(--color-border-2);
  border-radius: var(--border-radius-medium);
  overflow: hidden;
}

.log-header {
  padding: 12px 16px;
  background-color: var(--color-fill-1);
  border-bottom: 1px solid var(--color-border-2);
  display: flex;
  justify-content: flex-end;
}

.log-content {
  max-height: 600px;
  overflow-y: auto;
  background-color: var(--color-bg-2);
}

.log-loading,
.log-empty {
  padding: 40px;
  text-align: center;
  color: var(--color-text-3);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.log-entries {
  padding: 16px;
}

.log-entry {
  margin-bottom: 16px;
  padding: 12px;
  background-color: var(--color-bg-1);
  border: 1px solid var(--color-border-2);
  border-radius: var(--border-radius-small);
}

.log-entry:last-child {
  margin-bottom: 0;
}

.log-time {
  font-size: 12px;
  color: var(--color-text-3);
  margin-bottom: 8px;
  font-family: Monaco, Menlo, 'Ubuntu Mono', monospace;
}

.log-response-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.log-response-header span {
  font-size: 13px;
  font-weight: 500;
  color: var(--color-text-1);
}

.log-response-content {
  font-size: 12px;
  color: var(--color-text-2);
  line-height: 1.5;
  word-break: break-all;
  background-color: var(--color-fill-1);
  padding: 8px;
  border-radius: var(--border-radius-small);
  max-height: 200px;
  overflow-y: auto;
}
</style>
