import {
  MyButtons,
  MyColumns,
  MyProTableProps,
  MyTableActions,
  MyToolBarActions,
} from '@/common';
import { Apis } from '@/gen/Apis';
import {
  EmergencyEventsCompensationTypeEnum,
  EmergencyEventsStatusEnum,
} from '@/gen/Enums';
import { ProTable } from '@ant-design/pro-components';
import { useNavigate } from '@umijs/max';
import { Space } from 'antd';
import EventApplyClose from './modals/EventApplyClose';
import EventCreate from './modals/EventCreate';
import EventReview from './modals/EventReview';
import EventUpdate from './modals/EventUpdate';

export default function Index({ title = '突发事件' }) {
  const navigate = useNavigate();

  return (
    <ProTable
      {...MyProTableProps.props}
      request={async (params, sort) =>
        MyProTableProps.request(
          params,
          sort,
          Apis.Emergency.EmergencyEvents.List,
        )
      }
      headerTitle={`${title}列表`}
      toolBarRender={(action: any) => [
        <MyToolBarActions
          key="toolbar"
          actions={{
            create: (
              <EventCreate key="Create" reload={action?.reload} title={title} />
            ),
            teams: (
              <MyButtons.Default
                key="Teams"
                size="middle"
                onClick={() => {
                  navigate('/quality/emergency/teams');
                }}
                title="应急小组"
              />
            ),
            categories: (
              <MyButtons.Default
                key="Categories"
                size="middle"
                onClick={() => {
                  navigate('/quality/emergency/categories');
                }}
                title="事件分类"
              />
            ),
            levels: (
              <MyButtons.Default
                key="Levels"
                size="middle"
                onClick={() => {
                  navigate('/quality/emergency/levels');
                }}
                title="级别配置"
              />
            ),
          }}
        />,
      ]}
      columns={[
        MyColumns.ID({
          search: false,
        }),
        {
          title: '名称',
          dataIndex: 'name',
        },
        {
          title: '所属项目',
          dataIndex: ['asset_project', 'name'],
          search: false,
        },
        MyColumns.EnumTag({
          title: '状态',
          dataIndex: 'status',
          valueEnum: EmergencyEventsStatusEnum,
        }),
        MyColumns.EnumTag({
          title: '赔偿方',
          dataIndex: 'compensation_type',
          valueEnum: EmergencyEventsCompensationTypeEnum,
        }),
        {
          title: '赔偿事项',
          search: false,
          render: (_, item: any) => {
            return (
              <div>
                <div>赔偿比例：{item?.compensation_rate}%</div>
                <div>赔偿金额：{item?.compensation_amount}元</div>
                <div>已支付赔偿金额：{item?.compensation_paid_amount}元</div>
              </div>
            );
          },
        },
        {
          title: '分类',
          search: false,
          render: (_, item: any) => {
            return `${item?.one_emergency_categories_name} / ${item?.two_emergency_categories_name}`;
          },
        },
        {
          title: '等级',
          dataIndex: 'emergency_event_levels_name',
          search: false,
        },
        MyColumns.UpdatedAt(),
        MyColumns.CreatedAt(),
        MyColumns.Option({
          render: (_, item: any, index, action) => (
            <Space key={index}>
              <MyTableActions
                actions={{
                  show: (
                    <MyButtons.View
                      key="show"
                      title="查看"
                      to={`/quality/emergency/show/${item.id}`}
                    />
                  ),
                  close: (
                    <EventApplyClose
                      key="close"
                      item={item}
                      reload={action?.reload}
                    />
                  ),
                  update: (
                    <EventUpdate
                      key="update"
                      item={item}
                      reload={action?.reload}
                      title={title}
                    />
                  ),
                  audit: (
                    <EventReview
                      key="audit"
                      item={item}
                      reload={action?.reload}
                    />
                  ),
                  delete: (
                    <MyButtons.Delete
                      key="delete"
                      onConfirm={() =>
                        Apis.Emergency.EmergencyEvents.Delete({
                          id: item.id,
                        }).then(() => action?.reload())
                      }
                    />
                  ),
                }}
                maxVisible={3}
              />
            </Space>
          ),
        }),
      ]}
    />
  );
}