import {
  MyButtons,
  MyColumns,
  MyPageContainer,
  MyProTableProps,
  MyTableActions,
  MyToolBarActions,
} from '@/common';
import { Apis } from '@/gen/Apis';
import {
  HouseWorkOrdersAssignStatusEnum,
  HouseWorkOrdersLevelEnum,
  HouseWorkOrdersTypeEnum,
} from '@/gen/Enums';
import { ProTable } from '@ant-design/pro-components';
import { Tooltip } from 'antd';

import Assign from './modals/Assign';
import ComplaintShow from './modals/ComplaintShow';
import Create from './modals/Create';
import Update from './modals/Update';

export const ComplaintOrdersStatusEnum = {
  Pending: { text: '待处理', color: '#FFA500', value: 'Pending' },
  Processing: { text: '处理中', color: '#1E90FF', value: 'Processing' },
  PendingAcceptance: {
    text: '待验收',
    color: '#17A2B8',
    value: 'PendingAcceptance',
  },
  Completed: { text: '已完成', color: '#28A745', value: 'Completed' },
  Closed: { text: '已关闭', color: '#6C757D', value: 'Closed' },
};

export default function Index({ title = '客户投诉' }) {
  return (
    <MyPageContainer
      title={title}
      enableTabs={true}
      tabKey="complaint"
      tabLabel={title}
    >
      <ProTable<Record<any, any>>
        {...MyProTableProps.props}
        headerTitle="工单列表"
        request={async (params, sort) =>
          MyProTableProps.request(
            {
              ...params,
              type: [HouseWorkOrdersTypeEnum.Complaint.value],
            },
            sort,
            Apis.WorkOrder.HouseWorkOrders.List,
          )
        }
        toolBarRender={(action) => [
          <MyToolBarActions
            key="toolbar"
            actions={{
              create: (
                <Create key="Create" reload={action?.reload} title={title} />
              ),
            }}
          />,
        ]}
        columns={[
          MyColumns.ID({ search: false }),
          MyColumns.EnumTag({
            title: '状态',
            dataIndex: 'status',
            valueEnum: ComplaintOrdersStatusEnum,
          }),
          {
            title: '工单描述',
            dataIndex: 'content',
            search: false,
            width: 200,
            render: (text) => (
              <Tooltip title={text} placement="topLeft">
                <div
                  style={{
                    width: '100%',
                    overflow: 'hidden',
                    textOverflow: 'ellipsis',
                    display: '-webkit-box',
                    WebkitBoxOrient: 'vertical',
                    WebkitLineClamp: 1,
                    cursor: 'help',
                  }}
                >
                  {text}
                </div>
              </Tooltip>
            ),
          },

          MyColumns.EnumTag({
            title: '分配状态',
            dataIndex: 'assign_status',
            valueEnum: HouseWorkOrdersAssignStatusEnum,
          }),
          MyColumns.EnumTag({
            title: '优先级',
            dataIndex: 'level',
            valueEnum: HouseWorkOrdersLevelEnum,
          }),
          {
            title: '时间要求',
            dataIndex: 'predict_complete_at',
            render: (_, record) => {
              return record?.predict_complete_at?.substring(0, 10) || '-';
            },
            search: false,
          },
          {
            title: '处理人',
            dataIndex: ['assign_employee', 'name'],
            search: false,
            render: (_, record) => {
              return `${record?.assign_employee?.name || ''}-${
                record?.assign_employee?.phone || ''
              }`;
            },
          },
          MyColumns.CreatedAt(),
          MyColumns.Option({
            render: (_, item: any, __, action) => (
              <MyTableActions
                actions={{
                  show: (
                    <ComplaintShow
                      item={item}
                      title="详情"
                      reload={action?.reload}
                    />
                  ),
                  update:
                    item.status === 'Pending' ? (
                      <Update
                        item={item}
                        reload={action?.reload}
                        title={title}
                      />
                    ) : null,
                  assign:
                    item.assign_status === 'Unassigned' ? (
                      <Assign
                        item={item}
                        reload={action?.reload}
                        title="指派"
                      />
                    ) : null,
                  visit:
                    item.status === 'Completed' && item.is_visited === 0 ? (
                      <ComplaintShow
                        item={item}
                        title="回访"
                        reload={action?.reload}
                      />
                    ) : null,
                  delete: (
                    <MyButtons.Delete
                      onConfirm={() =>
                        Apis.WorkOrder.HouseWorkOrders.SoftDelete({
                          id: item.id,
                        }).then(() => action?.reload())
                      }
                    />
                  ),
                }}
              />
            ),
          }),
        ]}
      />
    </MyPageContainer>
  );
}
