import { BasicColumn } from '/@/components/Table';
import { FormSchema } from '/@/components/Table';
import { Switch } from 'ant-design-vue';
import { h, reactive } from 'vue';
import { saveOrUpdate } from '@/views/super/airag/airagbutton/AiragButton.api';
//列表数据
export const columns: BasicColumn[] = [
  {
    title: '序号',
    align: 'center',
    dataIndex: 'index',
    key: 'rowIndex',
    width: 60,
    // 这里只需简单的序号，实际计算在组件内完成
    customRender: ({ index }) => index + 1,
  },
  {
    title: '按钮名称',
    align: 'center',
    dataIndex: 'buttonName',
  },
  {
    title: '按钮开关',
    align: 'center',
    dataIndex: 'buttonSwitch',
    customRender: ({ text, record }) => {
      return h(Switch, {
        checked: text === 'Y',
        loading: switchLoading[record.id],
        onChange: (checked: boolean) => handleSwitchChange(checked, record),
      });
    },
  },
  {
    title: '发送内容',
    align: 'center',
    dataIndex: 'buttonValues',
  },
];
// 定义开关状态映射
const switchLoading = reactive<Record<string, boolean>>({});

// 处理开关状态变化
async function handleSwitchChange(checked: boolean, record: Recordable) {
  const newValue = checked ? 'Y' : 'N';
  const oldValue = record.buttonSwitch;

  // 立即更新本地状态
  record.buttonSwitch = newValue;
  switchLoading[record.id] = true;

  try {
    // 调用API更新后端
    await saveOrUpdate(
      {
        id: record.id,
        buttonSwitch: newValue,
      },
      true
    );
  } catch {
    // 出错时回滚状态
    record.buttonSwitch = oldValue;
  } finally {
    switchLoading[record.id] = false;
  }
}
//查询数据
export const searchFormSchema: FormSchema[] = [
  {
    label: '按钮名称',
    field: 'buttonName',
    component: 'JInput',
  },
  {
    label: '发送内容',
    field: 'buttonValues',
    component: 'JInput',
  },
];
//表单数据
export const formSchema: FormSchema[] = [
  {
    label: '按钮名称',
    field: 'buttonName',
    component: 'Input',
    required: true,
  },
  {
    label: '按钮开关',
    field: 'buttonSwitch',
    component: 'JSwitch',
    required: true,
    componentProps: {},
  },
  {
    label: '发送内容',
    field: 'buttonValues',
    component: 'InputTextArea', // 替换为文本域组件
    componentProps: {
      autoSize: {
        minRows: 1, // 最小行数
        maxRows: 6, // 最大行数
      },
      style: { width: '100%' }, // 宽度自适应
    },
    required: true,
  },
  // TODO 主键隐藏字段，目前写死为ID
  {
    label: '',
    field: 'id',
    component: 'Input',
    show: false,
  },
];

// 高级查询数据
export const superQuerySchema = {
  buttonName: { title: '按钮名称', order: 0, view: 'text', type: 'string' },
  buttonSwitch: { title: '按钮开关', order: 1, view: 'switch', type: 'string' },
  buttonValues: { title: '发送内容', order: 2, view: 'text', type: 'string' },
};

/**
 * 流程表单调用这个方法获取formSchema
 * @param param
 */
export function getBpmFormSchema(_formData): FormSchema[] {
  // 默认和原始表单保持一致 如果流程中配置了权限数据，这里需要单独处理formSchema
  return formSchema;
}