import React from 'react';
import { ProTable, ProTableColumnProps } from '@teamix/pro';
/**
 * 会污染样式，需要时可取消注释
 */
// import '@alicloudfe/components/dist/hybridcloud.min.css'; // 引入基础组件库样式
// import '@teamix/pro/dist/pro.min.css'; // 引入 teamixpro 样式

const columns: ProTableColumnProps[] = [
  {
    dataIndex: 'instanceName',
    title: '实例ID/实例名称',
    tooltip: '我是实例ID的说明',
    width: 250,
    render: {
      icon: 'task-fill',
      iconColor: 'B20',
      description: '{{record.rsId}}',
      descriptionRows: 2,
      link: 'https://teamixpro.dg.aliyun-inc.com/?rsId={{rsId}}',
      linkTarget: '_blank',
    },
    // columnFiltersDisabled: true,
  },
  {
    dataIndex: 'multiHeader',
    title: '多表头',
    children: [
      {
        dataIndex: '',
        tooltip: '我是标签的说明，我没有 dataIndex',
        title: '标签',
        render: {
          icon: 'label-line',
          iconColor: 'var(--color-text1-8, #848484)',
        },
      },
      {
        dataIndex: 'organizationName',
        title: '组织',
        sortable: true,
        width: '15%',
        tooltip: '我这一列是可以被复制的～',
        render: {
          copy: true,
        },
        // hidden: true,
        // columnFilters: false,
      },
    ],
  },

  {
    dataIndex: 'cost',
    title: '费用',
    valueType: 'money',
  },
  {
    dataIndex: 'ip',
    title: 'IP 地址',
    filters: [
      { label: 'ip1', value: '0.0.0.0' },
      { label: 'ip2', value: '8.8.8.8' },
    ],
    render: {
      type: 'ip',
    },
  },
  {
    dataIndex: 'status',
    title: '使用状态',
    filters: true,
    filterMode: 'multiple',
    dataSource: [
      { label: '进行中', value: 'process', color: 'process' },
      { label: '成功', value: 'success', color: 'success' },
      { label: '失败', value: 'fail', color: 'fail' },
      { label: '提醒', value: 'warning', color: 'warning' },
      { label: '暂停', value: 'pause', color: 'pause' },
      { label: '启动中', value: 'loading', color: 'loading' },
    ],
    render: {
      type: 'statusIconTag',
    },
  },
  {
    dataIndex: 'gmtCreated',
    sortable: true,
    title: '创建时间',
    valueType: 'dateTime',
    width: '10%',
  },
  {
    title: '操作',
    width: '10%',
    actionSchema: {
      actions: [
        {
          key: 'action',
          children: '二次确认',
          config: {
            type: 'confirm',
            onOk: (context: any) => {
              console.log('onOk', context);
            },
            onCancel: (context: any) => {
              console.log('onCancel', context);
            },
            title: 'Test',
            content: 'xxxxxx',
            // url:
            //   'https://query.aliyun-inc.com/rest/teamix-pro.page-header-detail',
            // successMsg: '666{{index}}{{res.title}}{{location.href}}',
          },
        },
      ],
    },
  },
];
const dataFilterSchema = [
  {
    name: 'status',
    component: 'Select',
    title: '状态',
    dataSource: [
      { label: '全部状态', value: 'all' },
      { label: '成功', value: 'success' },
      { label: '失败', value: 'fail' },
    ],
    props: {
      placeholder: '全部状态',
    },
  },
  {
    name: 'dateRange',
    component: 'DateRangePicker',
    title: '起止时间',
  },
];

export default () => {
  return (
    <ProTable
      data-teamix-spm="test-protable"
      header={{
        title: '高级表格',
        description: '高级表格描述描述',
      }}
      mainAction={{
        actions: [
          {
            key: 'action1',
            children: '数据请求',
            icon: 'add-line',
            config: {
              type: 'request',
              url: 'https://query.aliyun-inc.com/rest/teamix-pro.page-header-detail',
              successMsg: '666{{res.title}}{{location.href}}',
            },
          },
          {
            key: 'action2',
            children: '二次确认',
            type: 'normal',
            config: {
              type: 'confirm',
              title: 'Test',
              content: 'xxxxxx',
              url: 'https://query.aliyun-inc.com/rest/teamix-pro.page-header-detail',
              successMsg: '666{{res.title}}{{location.href}}',
            },
          },
        ],
      }}
      extra={{
        children: '编辑',
        config: {
          type: 'request',
          url: 'https://query.aliyun-inc.com/rest/teamix-pro.page-header-detail',
          successMsg: '666{{res.title}}{{location.href}}',
        },
      }}
      dataFilter={{
        schema: dataFilterSchema,
        initialValues: {
          status: 'all',
        },
      }}
      hasBorder
      pageSize={5}
      columns={columns}
      url="https://oneapi.alibaba-inc.com/mock/teamix-pro/api/getTableResource"
      params={{
        // mock接口限制，默认 pageSize=5
        _tag: 'default5',
      }}
      formatResult={{
        data: 'data',
        total: 'pageInfo.total',
      }}
    />
  );
};