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

import { inject, unref } from 'vue';

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 stepValidate = async () => {
  return true;
};

const [Form, { setValues, getValues }] = useVbenForm({
  showDefaultActions: false,
  commonConfig: {
    componentProps: {
      class: 'w-full',
    },
  },
  schema: [
    {
      component: 'Input',
      componentProps: {
        placeholder: '请输入名称',
      },
      fieldName: 'fieldName',
      label: '字段',
      rules: 'required',
      disabled: true,
    },
    {
      component: 'Input',
      componentProps: {
        placeholder: '请输入名称',
      },
      fieldName: 'label',
      label: '名称',
      rules: 'required',
    },
    {
      component: 'Input',
      componentProps: {
        placeholder: '请输入占位提示',
      },
      fieldName: 'componentProps.placeholder',
      label: '占位提示',
      rules: 'required',
      dependencies: {
        triggerFields: ['label'],
        trigger(values, form) {
          form.setFieldValue(
            'componentProps.placeholder',
            `请输入${values.label || ''}`,
          );
        },
      },
    },
    {
      component: 'Select',
      componentProps: {
        placeholder: '请输入类型',
        options: [
          { label: '文本', value: 'Input' },
          { label: '下拉框', value: 'Select' },
          { label: '多选框', value: 'Checkbox' },
          { label: '日期', value: 'DatePicker' },
          { label: '时间', value: 'TimePicker' },
        ],
      },
      fieldName: 'component',
      label: '类型',
      rules: 'required',
    },
    {
      component: 'Input',
      componentProps: {
        placeholder: '请输入日期格式',
      },
      fieldName: 'componentProps.format',
      label: '日期格式',
      dependencies: {
        triggerFields: ['component'],
        show: (values) =>
          values.component === 'DatePicker' ||
          values.component === 'TimePicker',
      },
    },
  ],
  wrapperClass: 'grid-cols-1',
});

const gridEvents: VxeGridListeners<QueryApi.Column> = {
  currentChange: async ({
    newValue,
    oldValue,
  }: {
    newValue: any;
    oldValue: any;
  }) => {
    if (oldValue !== null) {
      const updateData = await getValues();
      Object.assign(oldValue.schema, updateData);
    }
    setValues(newValue.schema 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: 'label', title: '显示名称' },
      {
        align: 'left',
        field: 'queryType',
        title: '查询类型',
        width: 200,
        editRender: {
          name: 'select',
          options: [
            { label: '等于', value: 0 },
            { label: '包含', value: 1 },
            { label: '大于', value: 2 },
            { label: '大于等于', value: 3 },
            { label: '小于', value: 4 },
            { label: '小于等于', value: 5 },
            { label: 'In', value: 6 },
            { label: 'Not In', value: 7 },
            { label: '左包含', value: 8 },
            { label: '右包含', value: 9 },
            { label: '不等于', value: 10 },
            { label: '不等于空', value: 11 },
            { label: 'IsNot', value: 12 },
            { label: '不包含', value: 13 },
            { label: '为空', value: 14 },
            { label: 'In Like', value: 15 },
            { label: 'Range', value: 16 },
          ],
        },
      },
    ],
    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 search = data && data.config?.search;
  const checkedRows: Record<string, any>[] = [];
  unref(columns).forEach((item: any) => {
    const values = {
      field: item.alias,
      label: item.remark,
      queryType: 0,
      schema: {
        label: item.remark,
        fieldName: item.alias,
        component: 'Input',
        componentProps: { placeholder: `请输入${item.remark || ''}` },
      },
    };
    if (search) {
      const find = search.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) {
    gridApi.grid.setCheckboxRow(checkedRows, true);
  }
};

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

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>
