const { faker } = require('@faker-js/faker');
const { test, expect } = require('./fixture/common');
const { Customer } = require('./pom/customerPage');

test(`demo`, async ({ zhbPage, customerPage }, workerInfo) => {
  const $area = zhbPage
    .locator('.area')
    .filter({ has: zhbPage.locator('.area-name', { hasText: '二楼' }) });
  const $$room = $area.locator('.room-list .room');

  const customer = new Customer();
  await test.step('创建顾客', async () => {
    await zhbPage.locator('#tab_main li').filter({ hasText: '顾客' }).click();
    await customerPage.createCustomer(customer);
  });

  let useRoomName;
  await test.step('购买商品', async () => {
    await zhbPage.locator('#tab_main li').filter({ hasText: '营业' }).click();
    const $emptyRoom = $$room
      .filter({ has: zhbPage.getByText('空房') })
      .nth(workerInfo.workerIndex % 3);
    useRoomName = await $emptyRoom.locator('.roomName').innerText();
    expect(useRoomName).not.toBeNull();
    await $emptyRoom.click();
    await expect(async () => {
      if (await zhbPage.locator('.close > .iconfont').first().isVisible()) {
        await zhbPage.locator('.close > .iconfont').first().click();
      }
      await zhbPage.getByRole('button', { name: '选择顾客' }).click({ timeout: 3000 });
      await expect(zhbPage.locator('#page_searchMember').getByText('创建会员')).toBeVisible();
    }).toPass();
    await zhbPage
      .getByRole('textbox', { name: '输入会员手机号或姓名或卡号搜索' })
      .fill(customer.phone, { delay: 100 });
    await zhbPage.locator('#page_searchMember svg').click();

    const $customerTr = zhbPage
      .locator('.list-warp')
      .filter({ has: zhbPage.locator('.name', { hasText: customer.name }) });
    await $customerTr.locator('.list-body').first().click();

    await zhbPage.getByText('项目开单').click();
    await expect(zhbPage.locator('#page_roomDetail').getByText('服务项目')).toBeVisible();
    await zhbPage.getByText('选择', { exact: true }).nth(1).click();
    await expect(zhbPage.locator('#serviceSelector').getByText('项目选择')).toBeVisible();
    await zhbPage
      .locator('.goods-content-item')
      .nth(faker.number.int({ min: 0, max: 14 }))
      .click();
    await zhbPage.locator('#serviceSelector').getByText('确认').click();
    await zhbPage
      .locator('div')
      .filter({ hasText: /^明星足浴$/ })
      .locator('span')
      .first()
      .click();
    await zhbPage.getByRole('button', { name: '完成开单' }).click();
    await expect(zhbPage.getByRole('button', { name: '结账' })).toBeVisible({ timeout: 30_000 });
    await zhbPage.getByRole('button', { name: '结账' }).click();
    await zhbPage.locator('#page_footBathPay').getByText('结算签字').click();

    await expect(async () => {
      await zhbPage.locator('#page_footBathPay li').filter({ hasText: '现金' }).click();
      await expect(zhbPage.locator('#page_footBathPay li').filter({ hasText: '现金' })).toHaveClass(
        /selected/
      );
      await zhbPage
        .locator('#page_footBathPay span')
        .filter({ hasText: /结\s算/ })
        .click();
      await expect(zhbPage.getByText('顾客满意度点评')).toBeVisible({ timeout: 2000 });
    }).toPass();

    await zhbPage.getByText('不想评价').click();
    await zhbPage.locator('#page_footBathPay').getByText('立即返回').click();
  });

  await test.step('起钟下钟，清理房间', async () => {
    const $cleanRoom = $$room.filter({
      has: zhbPage.locator('.roomName', { hasText: new RegExp(`^${useRoomName}$`) }),
    });
    await expect($cleanRoom).toContainText('已结清');
    await $cleanRoom.click();
    await zhbPage.getByText('技师操作').click();
    await zhbPage.getByText('起钟', { exact: true }).click();
    await zhbPage.getByText('起钟成功!').click();
    await zhbPage.getByText('技师操作').click();
    await zhbPage.getByText('下钟', { exact: true }).click();
    await zhbPage
      .locator('div')
      .filter({ hasText: /^确认返回$/ })
      .locator('div')
      .first()
      .click();
    await zhbPage.getByRole('button', { name: '不需要' }).click();

    await expect($cleanRoom).toContainText('打扫');
    await $cleanRoom.click();
    await zhbPage
      .locator('div')
      .filter({ hasText: /^确定取消$/ })
      .locator('div')
      .first()
      .click();
    await expect($cleanRoom).toContainText('空房');
  });
});

test.skip('h5 demo', async ({
  zhbAdminPage,
  //  zhbPage,
  h5Page,
  h5LoginPage,
  //  customerPage
}) => {
  // const customer = new Customer();
  // await test.step('创建顾客', async () => {
  //   await zhbPage.locator('#tab_main li').filter({ hasText: '顾客' }).click();
  //   await customerPage.createCustomer(customer);
  // });

  // await test.step('搜索顾客进行开卡', async () => {
  //   await zhbPage.getByRole('textbox', { name: '输入会员手机号或姓名搜索' }).fill(customer.phone);
  //   await zhbPage.locator('#page_member svg').click();
  //   await zhbPage
  //     .locator('.searchresultBox tbody tr')
  //     .first()
  //     .locator('#page_member')
  //     .getByText('详情')
  //     .click();
  //   await expect(zhbPage.getByText('会员卡 点击卡片即可用卡进行结算哦~')).toBeVisible();
  //   await zhbPage
  //     .locator('p')
  //     .filter({ hasText: '会员卡 点击卡片即可用卡进行结算哦~' })
  //     .locator('span')
  //     .nth(2)
  //     .click();
  //   await zhbPage.locator('#page_memberCard').getByText('5000元储值卡', { exact: true }).click();

  //   await expect(zhbPage.locator('#page_memberCard .cashierBox tbody tr').first()).toBeVisible();
  //   await zhbPage
  //     .locator('#page_memberCard')
  //     .getByText(/结\s算/)
  //     .click();

  //   await expect(async () => {
  //     const $signature = zhbPage.locator('#page_pay').getByText('结算签字');
  //     await $signature.click();
  //     await expect($signature).not.toHaveClass(/checked/, { timeout: 2000 });
  //   }).toPass();

  //   await expect(async () => {
  //     const $cashBtn = zhbPage.locator('#page_pay .pay_cash');
  //     await $cashBtn.click();
  //     await expect(zhbPage.locator('#page_pay .pay_cash.selected')).toBeVisible();
  //     await zhbPage
  //       .locator('#page_pay span')
  //       .filter({ hasText: /结\s算/ })
  //       .click();
  //     await expect(zhbPage.locator('#payConfirm').getByText('立即返回')).not.toBeVisible({
  //       timeout: 2000,
  //     });
  //   }).toPass();
  // });

  const $smsCodeInput = h5Page.getByRole('textbox', { name: '验证码', exact: true });
  await test.step('获取手机验证码', async () => {
    const graphCode = await h5LoginPage.sendSmsCode('17770898274');
    await h5Page.getByRole('textbox', { name: '请输入图形验证码' }).fill(graphCode);
    await h5Page.locator('#setup_loginForm').getByText('获取验证码').nth(1).first().tap();
    await expect(h5Page.getByText('重新发送')).toBeVisible();
  });

  let smsCode;
  await test.step('获取短信验证码', async () => {
    await zhbAdminPage
      .locator('a')
      .filter({ hasText: /^管理$/ })
      .click();
    await zhbAdminPage.locator('.menu-item').getByText('短信发送记录', { exact: true }).click();
    const $smsCodeTr = zhbAdminPage
      .locator('#routerView iframe')
      .contentFrame()
      .locator('.table-responsive tbody tr')
      .filter({ hasText: '17770898274' })
      .first()
      .locator('td')
      .nth(2);
    await expect($smsCodeTr).toBeVisible();
    const text = await $smsCodeTr.innerText();
    smsCode = text.match(/验证码是(\d{4})/)[1];
  });
  expect(smsCode).not.toBeUndefined();

  await test.step('使用短信验证码登录h5', async () => {
    await h5Page.getByRole('textbox', { name: '验证码', exact: true }).fill(smsCode);
    await h5Page.locator('#setup_loginForm span').first().tap();
    await h5Page.getByText('绑定', { exact: true }).tap();
    await h5Page.waitForTimeout(5000);
  });
});