import { mount } from '@vue/test-utils';

import { describe, expect, it } from 'vitest';

import AnalysisOptionPopup from '../AnalysisOptionPopup.vue';

const options = [
  { code: 'CJ', key: 'category-finished', name: '成品' },
  { code: 'YL', key: 'category-material', name: '原料' },
];

const columns = [
  { dataIndex: 'code', key: 'code', title: '分类编码', width: 180 },
  { dataIndex: 'name', key: 'name', title: '分类名称' },
];

function mountPopup(mode: 'multiple' | 'single', value: string | string[]) {
  return mount(AnalysisOptionPopup, {
    global: {
      stubs: {
        AModal: {
          name: 'AModal',
          props: ['bodyStyle', 'destroyOnClose', 'open', 'width'],
          template: '<div><slot /></div>',
        },
        'a-input': {
          name: 'AInput',
          props: ['value'],
          template: '<div class="input-stub" @click="$emit(\'click\')"><slot name="prefix"/><slot name="suffix"/></div>',
        },
        'a-table': {
          name: 'ATable',
          props: ['columns', 'customRow', 'dataSource', 'pagination', 'rowKey', 'rowSelection'],
          template: '<div />',
        },
      },
    },
    props: { columns, mode, options, popupTitle: '选择分类', value },
  });
}

describe('stability analysis option popup', () => {
  it('uses a radio column and keeps row-click selection in sync', async () => {
    const wrapper = mountPopup('single', 'category-finished');
    await wrapper.find('.input-stub').trigger('click');
    const modal = wrapper.findComponent({ name: 'AModal' });
    const table = wrapper.findComponent({ name: 'ATable' });

    expect(modal.props('bodyStyle')).toEqual({ padding: '16px' });
    expect(modal.props('destroyOnClose')).toBe(true);
    expect(table.props('rowKey')).toBe('key');
    expect(table.props('rowSelection')).toMatchObject({
      preserveSelectedRowKeys: true,
      selectedRowKeys: ['category-finished'],
      type: 'radio',
    });
    expect(table.props('pagination')).toMatchObject({ pageSize: 25, showSizeChanger: true });

    table.props('rowSelection').onChange(['category-material']);
    await modal.vm.$emit('ok');

    expect(wrapper.emitted('update:value')?.at(-1)).toEqual(['category-material']);
    expect(wrapper.emitted('change')?.at(-1)).toEqual(['category-material']);
  });

  it('preserves and confirms multiple selected keys', async () => {
    const wrapper = mountPopup('multiple', ['category-finished']);
    await wrapper.find('.input-stub').trigger('click');
    const table = wrapper.findComponent({ name: 'ATable' });
    const selection = table.props('rowSelection');

    expect(selection).toMatchObject({ preserveSelectedRowKeys: true, selectedRowKeys: ['category-finished'] });
    selection.onChange(['category-finished', 'category-material']);
    await wrapper.findComponent({ name: 'AModal' }).vm.$emit('ok');

    expect(wrapper.emitted('update:value')?.at(-1)).toEqual([['category-finished', 'category-material']]);
  });

  it('does not submit the draft selection when cancelled', async () => {
    const wrapper = mountPopup('multiple', ['category-finished']);
    await wrapper.find('.input-stub').trigger('click');
    wrapper.findComponent({ name: 'ATable' }).props('rowSelection').onChange(['category-material']);
    await wrapper.findComponent({ name: 'AModal' }).vm.$emit('cancel');

    expect(wrapper.emitted('update:value')).toBeUndefined();
  });
});