import { BasicColumn, FormSchema } from '/@/components/Table';
import { h } from 'vue';
import { Tag } from 'ant-design-vue';
import { listProcessCategory } from '/@/api/platform/workflow/extension/controller/processCategory';

export const columns: BasicColumn[] = [
  {
    title: '流程名称',
    dataIndex: 'name',
    width: 200,
  },
  {
    title: '流程KEY',
    dataIndex: 'key',
    width: 200,
  },
  {
    title: '流程分类',
    dataIndex: 'category',
    width: 150,
    customRender: ({ record }) => {
      const category = record.category;
      return h(Tag, { color: 'processing' }, () => String(record.category).split(',')[1] || '未分类');
    }
  },
  {
    title: '流程版本',
    dataIndex: 'version',
    width: 150,
    customRender: ({ record }) => {
      const version = record.version;
      return h(Tag, { color: version ? 'success' : 'warning' }, () => version || '版本未发布');
    }
  },
  {
    title: '上次发布时间',
    dataIndex: 'deploymentTime',
    width: 200
  }
];

export const searchFormSchema: FormSchema[] = [
  {
    field: 'categoryId',
    label: '流程分类',
    component: 'ApiTreeSelect',
    componentProps: {
      placeholder: '请选择流程分类',
      fieldNames:{
        label: 'name',
        key: 'id',
        value: 'id'
      },
      api: listProcessCategory,
      listToTree: true
    },
    colProps: { span: 8 }
  },
  {
    field: 'name',
    label: '流程名称',
    component: 'Input',
    componentProps: {
      placeholder: '请输入流程名称'
    },
    colProps: { span: 8 }
  }
];

export const applyColumns: BasicColumn[] = [
  {
    title: '流程标题',
    dataIndex: ['vars', 'title'],
    width: 200,
  },
  {
    title: '流程名称',
    dataIndex: 'processDefName',
    width: 200,
  },
  {
    title: '当前节点',
    dataIndex:  'taskName',
    width: 200,
  },
  {
    title: '流程状态',
    dataIndex:  'mesName',
    width: 150,
    customRender: ({ record }) => {
      return h(Tag, { color: 'processing' }, () =>  record.mesName);
    }
  },
  {
    title: '发起时间 / 结束时间',
    dataIndex: 'startTime',
    width: 200,
    customRender: ({ record }) => {
      return [
        <div>
          <p style={{ margin: '0', padding: '0' }}>
            { record.startTime || '--' }
          </p>
          <p style={{ margin: '0', padding: '0', color: '#999' }}>
            { record.endTime || '--' }
          </p>
        </div>
      ];
    }
  }
];

export const searchApplyFormSchema: FormSchema[] = [
  {
    field: 'title',
    label: '流程标题',
    component: 'Input',
    componentProps: {
      placeholder: '请输入流程标题',
    },
    colProps: { span: 8 }
  },
  {
    field: 'dateRange',
    label: '创建时间',
    component: 'RangePicker',
    componentProps: {
      style: { width:'100%' },
      valueFormat: 'YYYY-MM-DD',
      placeholder: ['开始日期','结束日期']
    },
    colProps: { span: 8 }
  }
];

export const historyColumns: BasicColumn[] = [
  {
    title: '实例名称',
    dataIndex: ['vars', 'title'],
    width: 200,
  },
  {
    title: '流程名称',
    dataIndex: 'processDefName',
    width: 200,
  },
  {
    title: '流程发起人',
    dataIndex: ['vars', 'userName'],
    width: 200,
  },
  {
    title: '流程状态',
    dataIndex:  'mesName',
    width: 150,
    customRender: ({ record }) => {
      return h(Tag, { color: 'processing' }, () =>  record.mesName);
    }
  },
  {
    title: '发起时间 / 结束时间',
    dataIndex: 'startTime',
    width: 200,
    customRender: ({ record }) => {
      return [
        <div>
          <p style={{ margin: '0', padding: '0' }}>
            { record.startTime || '--' }
          </p>
          <p style={{ margin: '0', padding: '0', color: '#999' }}>
            { record.endTime || '--' }
          </p>
        </div>
      ];
    }
  }
];

export const runColumns: BasicColumn[] = [
  {
    title: '标题',
    dataIndex: ['vars', 'title'],
    width: 200,
  },
  {
    title: '流程名称',
    dataIndex: 'processDefName',
    width: 200,
  },
  {
    title: '当前节点',
    dataIndex:  'taskName',
    width: 150,
    customRender: ({ record }) => {
      return h(Tag, { color: 'processing' }, () =>  record.taskName);
    }
  },
  {
    title: '流程状态',
    dataIndex:  'mesName',
    width: 150,
    customRender: ({ record }) => {
      return h(Tag, { color: 'processing' }, () =>  record.mesName);
    }
  },
  {
    title: '流程发起人',
    dataIndex: ['vars', 'userName'],
    width: 200,
  },
];