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

import { Card } 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: 'Select',
      componentProps: {
        placeholder: '请输入按钮位置',
        options: [
          { label: '头部', value: 'main' },
          { label: '行', value: 'item' },
        ],
      },
      fieldName: 'position',
      label: '按钮位置',
    },
    {
      component: 'Input',
      componentProps: {
        placeholder: '请输入名称',
      },
      fieldName: 'label',
      label: '名称',
    },
    {
      component: 'Input',
      componentProps: {
        placeholder: '请输入权限',
      },
      fieldName: 'access',
      label: '权限',
    },
    {
      component: 'Select',
      componentProps: {
        placeholder: '请输入接口类型',
        options: [
          { label: '多选', value: 'checkbox' },
          { label: '单选', value: 'radio' },
        ],
      },
      fieldName: 'api.type',
      label: '接口类型',
    },
    {
      component: 'Input',
      componentProps: {
        placeholder: '请输入接口地址',
      },
      fieldName: 'api.url',
      label: '接口地址',
    },
    {
      component: 'Input',
      componentProps: {
        placeholder: '请输入接口参数',
      },
      fieldName: 'api.params',
      label: '接口参数',
    },
    {
      component: 'Input',
      componentProps: {
        placeholder: '请输入请求方式',
      },
      fieldName: 'api.method',
      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: 'name',
    },
    rowConfig: {
      isCurrent: true,
      isHover: true,
    },
    columns: [
      { title: '序号', type: 'seq', width: 50 },
      {
        align: 'left',
        field: 'lable',
        title: '名称',
        width: 200,
        type: 'checkbox',
      },
      { align: 'left', field: 'position', title: '按钮位置', width: 200 },
      { align: 'left', field: 'access', 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 buttons = data && data.config?.buttons;
  if (buttons) {
    buttons.forEach((item: any) => {
      tableColumns.push({ ...item });
    });
  } else {
    const values = {
      lable: '添加',
      position: 'main',
      access: 'add',
    };
    tableColumns.push(values);
  }

  gridApi.setGridOptions({ data: tableColumns });
};

const stepGetValues = async () => {
  const buttomConfig = gridApi.grid.getData();
  return buttomConfig;
};

const stepValidate = async () => {
  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" ttitle="属性配置">
      <Form />
    </Card>
  </div>
</template>
