const assert = require("assert");
const fs = require("fs");
const path = require("path");

const componentPath = path.resolve(
  __dirname,
  "../../src/views/ccdiProject/components/detail/DetailQuery.vue"
);
const source = fs.readFileSync(componentPath, "utf8");

[
  ["对方名称", "queryParams.counterpartyNameEmpty"],
  ["摘要", "queryParams.userMemoEmpty"],
  ["对方账户", "queryParams.counterpartyAccountEmpty"],
].forEach(([label, model]) => {
  const inlineTogglePattern = new RegExp(
    `<el-form-item>[\\s\\S]*?<div class="filter-item-header">[\\s\\S]*?<span class="filter-item-label">${label}</span>[\\s\\S]*?<el-checkbox[\\s\\S]*?v-model="${model}"[\\s\\S]*?class="empty-checkbox"[\\s\\S]*?>[\\s\\S]*?匹配空值[\\s\\S]*?</el-checkbox>[\\s\\S]*?</div>`,
    "m"
  );

  assert(
    inlineTogglePattern.test(source),
    `${label}筛选项应将匹配空值放到标题同一行`
  );
});

const filterOrder = [
  'label="交易时间"',
  'label="本方主体"',
  'label="本方银行"',
  'label="本方账号"',
  'label="金额区间"',
  '<span class="filter-item-label">对方名称</span>',
  '<span class="filter-item-label">对方账户</span>',
  '<span class="filter-item-label">摘要</span>',
];

let lastIndex = -1;
filterOrder.forEach((token) => {
  const currentIndex = source.indexOf(token);
  assert.notStrictEqual(currentIndex, -1, `未找到筛选项标识: ${token}`);
  assert(
    currentIndex > lastIndex,
    `筛选项顺序不正确，${token} 应出现在前一项之后`
  );
  lastIndex = currentIndex;
});

assert(
  !source.includes('placeholder="请输入交易类型"'),
  "筛选栏不应再显示交易类型输入框"
);

assert(
  !source.includes("queryParams.transactionType"),
  "筛选逻辑中不应再保留交易类型参数"
);

assert(
  !source.includes("queryParams.transactionTypeEmpty"),
  "筛选逻辑中不应再保留交易类型空值匹配参数"
);

assert(
  /\.filter-item-header\s*\{[\s\S]*display:\s*flex;[\s\S]*justify-content:\s*space-between;[\s\S]*margin-bottom:\s*6px;/m.test(
    source
  ),
  "筛选项标题行应使用紧凑的横向布局"
);

assert(
  /\.filter-form\s*\{[\s\S]*margin-top:\s*12px;[\s\S]*:deep\(.el-form-item\)\s*\{[\s\S]*margin-bottom:\s*14px;/m.test(
    source
  ),
  "筛选表单应压缩顶部和表单项间距"
);

console.log("detail-query-filter-layout test passed");
