<script lang="ts" setup>
import type { QueryApi } from '#/api';

import { inject, unref } from 'vue';

import { Card, message } from 'ant-design-vue';

import { useVbenForm } from '#/adapter/form';
import { useVbenVxeGrid, type VxeGridListeners } from '#/adapter/vxe-table';

const columns = inject<QueryApi.Column[]>('page-columns') as QueryApi.Column[];

const [Form, { setValues, getValues }] = useVbenForm({
  showDefaultActions: false,
  commonConfig: {
    componentProps: {
      class: 'w-full',
    },
  },
  schema: [
    {
      component: 'Input',
      componentProps: {
        placeholder: '请输入显示名称',
      },
      fieldName: 'title',
      label: '显示名称',
    },
    {
      component: 'Select',
      componentProps: {
        placeholder: '请输入对齐方式',
        options: [
          { label: '左对齐', value: 'left' },
          { label: '居中对齐', value: 'center' },
          { label: '右对齐', value: 'right' },
        ],
      },
      fieldName: 'align',
      label: '对齐方式',
    },
    {
      component: 'Switch',
      componentProps: {
        placeholder: '请输入宽度',
        class: 'w-auto',
      },
      fieldName: 'autoWidth',
      label: '自动宽度',
    },
    {
      component: 'Input',
      componentProps: {
        placeholder: '请输入宽度',
      },
      fieldName: 'width',
      label: '宽度',
      dependencies: {
        triggerFields: ['autoWidth'],
        show: (values) => values.autoWidth === false,
      },
    },
    {
      component: 'Select',
      componentProps: {
        placeholder: '请输入选择类型',
        options: [
          { label: '多选', value: 'checkbox' },
          { label: '单选', value: 'radio' },
        ],
      },
      fieldName: 'selectType',
      label: '选择类型',
    },
  ],
  wrapperClass: 'grid-cols-1',
});

const gridEvents: VxeGridListeners<QueryApi.Column> = {
  currentChange: async ({
    newValue,
    oldValue,
  }: {
    newValue: any;
    oldValue: any;
  }) => {
    // console.log('rowIndex', newValue, oldValue);
    if (oldValue !== null) {
      const updateData = await getValues();
      Object.assign(oldValue, updateData);
    }
    setValues(newValue as any);
  },
};

const [Grid, gridApi] = useVbenVxeGrid({
  gridEvents,
  gridOptions: {
    checkboxConfig: {
      highlight: true,
      labelField: 'field',
    },
    rowConfig: {
      isCurrent: true,
      isHover: true,
      keyField: 'field',
    },
    columns: [
      { title: '序号', type: 'seq', width: 50 },
      {
        align: 'left',
        field: 'field',
        title: '字段名称',
        width: 200,
        type: 'checkbox',
      },
      { align: 'left', field: 'title', title: '显示名称' },
    ],
    editConfig: {
      mode: 'cell',
      trigger: 'click',
    },
    height: 'auto',
    keepSource: true,
    pagerConfig: {
      enabled: false,
    },
  },
});

const stepSetValues = async (data: Record<string, any>) => {
  const tableColumns: Record<string, any>[] = [];

  const _columns = data && data.config?.columns;
  const checkedRows: Record<string, any>[] = [];
  unref(columns).forEach((item: any) => {
    const values = {
      title: item.remark,
      field: item.alias,
      align: 'left',
      width: 100,
      autoWidth: false,
    };

    if (_columns) {
      const find = _columns.find((row: any) => row.field === values.field);
      if (find) {
        Object.assign(values, find);
        checkedRows.push({ ...values });
      }
    }
    tableColumns.push(values);
  });

  gridApi.setGridOptions({ data: tableColumns });

  if (checkedRows.length > 0) {
    // console.log('checkedRows', checkedRows);
    gridApi.grid.setCheckboxRow(checkedRows, true);
  }
};

const stepGetValues = async () => {
  const columnConfig = gridApi.grid.getCheckboxRecords();
  return columnConfig;
};

const stepValidate = async () => {
  const selectedColumns = gridApi.grid.getCheckboxRecords();
  if (selectedColumns.length === 0) {
    message.warning('请选择显示的列');
    return false;
  }
  return true;
};

defineExpose({ stepSetValues, stepValidate, stepGetValues });
</script>
<template>
  <div class="flex h-full">
    <Grid class="w-3/5" table-title="显示列表" />
    <Card class="ml-4 w-2/5" title="属性配置">
      <Form />
    </Card>
  </div>
</template>
