import { mount } from '@vue/test-utils'
import { beforeEach, describe, expect, it, vi } from 'vitest'
import { createPinia, setActivePinia } from 'pinia'
import { nextTick } from 'vue'
import { registerFeature, useAreaSelection } from 'stk-table-vue'

registerFeature(useAreaSelection)

vi.mock('vue-router', () => ({
  useRoute: () => ({ path: '/module/i18n-type', meta: {} }),
}))

const querySchema = {
  schemaVersion: 1,
  quick: ['b_name'],
  groups: [{ logic: 'and', conditions: [{ field: 'b_name', operator: 'like' }] }],
}

vi.mock('@/services/api', () => ({
  loadDataApi: vi.fn(async (viewName) => {
    if (viewName === 's_module') {
      return {
        data: [
          {
            b_id: 's_i18n_type',
            b_module_type: 'data',
            b_canuse: 1,
            b_view_table: 's_i18n_type',
            b_save_table: 's_i18n_type',
            b_key_field: 'b_id',
          },
        ],
      }
    }
    if (viewName === 's_field') {
      return {
        data: [
          { b_field: 'b_id', b_name: '语言编码', b_type: 'input', b_canuse: 1, b_i18n: null },
          { b_field: 'b_name', b_name: '语言名称', b_type: 'input', b_canuse: 1, b_i18n: null },
          { b_field: 'b_status', b_name: '状态', b_type: 'select', b_canuse: 1, b_i18n: null },
        ],
      }
    }
    if (viewName === 's_module_schema') {
      return {
        data: [
          {
            b_module_id: 's_i18n_type',
            b_schema_type: 'view',
            b_schema_json: JSON.stringify({
              schemaVersion: 1,
              columns: [{ field: 'b_id', width: 120 }, { field: 'b_name', width: 180 }],
            }),
          },
          {
            b_module_id: 's_i18n_type',
            b_schema_type: 'query',
            b_schema_json: JSON.stringify(querySchema),
          },
        ],
      }
    }
    return { data: [] }
  }),
  pageDataApi: vi.fn(async () => ({ data: { rows: [], total: 0 } })),
  saveObjectApi: vi.fn(async () => ({})),
  nextIdApi: vi.fn(async () => ({ data: '1' })),
  loadDataBySqlApi: vi.fn(async () => ({ data: [] })),
}))

import FmsModuleListPage from '@/components/fms-module-list/FmsModuleListPage.vue'

describe('repro page typing freeze', () => {
  beforeEach(() => {
    setActivePinia(createPinia())
    Object.defineProperty(HTMLElement.prototype, 'clientWidth', {
      configurable: true,
      get() {
        return 5000
      },
    })
  })

  it('apply advanced then reopen and type char by char', async () => {
    const wrapper = mount(FmsModuleListPage, {
      props: { dataCode: 's_i18n_type' },
      attachTo: document.body,
    })
    await new Promise((r) => setTimeout(r, 60))
    await nextTick()

    const buttons = () => wrapper.findAll('button')
    const panelButtonOf = (text) =>
      wrapper.findAll('.filter-drawer button').find((b) => b.text().trim() === text)

    // 打开高级查询，加条件，选字段，填值，应用
    await buttons().find((b) => b.text().includes('高级查询')).trigger('click')
    await nextTick()
    await panelButtonOf('条件').trigger('click')
    await nextTick()
    await wrapper.findComponent('.filter-row__field').vm.$emit('update:modelValue', 'b_name')
    await nextTick()
    await wrapper.find('.filter-row__value input').setValue('x')
    await panelButtonOf('应用').trigger('click')
    await new Promise((r) => setTimeout(r, 20))

    // 编辑重开抽屉，逐字符输入
    await buttons().find((b) => b.text().trim() === '编辑').trigger('click')
    await nextTick()
    for (const ch of ['y', 'z', '1', '2']) {
      const input = wrapper.find('.filter-row__value input')
      await input.setValue(String(input.element.value) + ch)
      await nextTick()
    }
    expect(wrapper.find('.filter-drawer').exists()).toBe(true)
    wrapper.unmount()
  })

  it('money field typing', async () => {
    const wrapper = mount(FmsModuleListPage, {
      props: { dataCode: 's_i18n_type' },
      attachTo: document.body,
    })
    await new Promise((r) => setTimeout(r, 60))
    await nextTick()

    const buttons = () => wrapper.findAll('button')
    const panelButtonOf = (text) =>
      wrapper.findAll('.filter-drawer button').find((b) => b.text().trim() === text)

    await buttons().find((b) => b.text().includes('高级查询')).trigger('click')
    await nextTick()
    await panelButtonOf('条件').trigger('click')
    await nextTick()
    // 模拟选一个 money 字段
    await wrapper.findComponent('.filter-row__field').vm.$emit('update:modelValue', 'b_amount')
    await nextTick()
    const input = wrapper.find('.filter-row__value input')
    for (const ch of ['1', '.', '5', '0']) {
      await input.setValue(String(input.element.value) + ch)
      await nextTick()
    }
    expect(wrapper.find('.filter-drawer').exists()).toBe(true)
    wrapper.unmount()
  })

  it('date field typing', async () => {
    const wrapper = mount(FmsModuleListPage, {
      props: { dataCode: 's_i18n_type' },
      attachTo: document.body,
    })
    await new Promise((r) => setTimeout(r, 60))
    await nextTick()

    const buttons = () => wrapper.findAll('button')
    const panelButtonOf = (text) =>
      wrapper.findAll('.filter-drawer button').find((b) => b.text().trim() === text)

    await buttons().find((b) => b.text().includes('高级查询')).trigger('click')
    await nextTick()
    await panelButtonOf('条件').trigger('click')
    await nextTick()
    await wrapper.findComponent('.filter-row__field').vm.$emit('update:modelValue', 'b_date')
    await nextTick()
    expect(wrapper.find('.filter-drawer').exists()).toBe(true)
    wrapper.unmount()
  })
})