import {
  MyColumns,
  MyPageContainer,
  MyProTableProps,
  MyTableActions,
} from '@/common';
import { Apis } from '@/gen/Apis';
import {
  HouseWorkOrdersLocationEnum,
  HouseWorkOrdersStatusEnum,
  HouseWorkOrdersTypeEnum,
} from '@/gen/Enums';
import { ProTable } from '@ant-design/pro-components';
import { useSearchParams } from '@umijs/max';
import { Space } from 'antd';
import WorkOrderShow from '../list/modals/WorkOrderShow';

export default function Index({ title = '客户评价' }) {
  const [searchParams] = useSearchParams();

  return (
    <MyPageContainer
      title={title}
      enableTabs={true}
      tabKey="workorders"
      tabLabel={title}
    >
      <ProTable<Record<any, any>>
        {...MyProTableProps.props}
        request={async (params, sort) =>
          MyProTableProps.request(
            {
              ...params,
              type: [
                HouseWorkOrdersTypeEnum.Repair.value,
                HouseWorkOrdersTypeEnum.Incident.value,
                HouseWorkOrdersTypeEnum.Complaint.value,
              ],
              is_evaluated: true,
              status: HouseWorkOrdersStatusEnum.Completed.value,
            },
            sort,
            Apis.WorkOrder.HouseWorkOrders.List,
          )
        }
        headerTitle="评价列表"
        search={false}
        columns={[
          MyColumns.ID({
            search: false,
          }),
          MyColumns.EnumTag({
            title: '工单状态',
            dataIndex: 'status',
            valueEnum: HouseWorkOrdersStatusEnum,
            search: false,
          }),
          MyColumns.EnumTag({
            title: '工单类型',
            dataIndex: 'type',
            valueEnum: HouseWorkOrdersTypeEnum,
            search: false,
          }),
          MyColumns.EnumTag({
            title: '报修位置',
            dataIndex: 'location',
            valueEnum: HouseWorkOrdersLocationEnum,
          }),

          {
            title: '位置信息',
            dataIndex: ['asset_house', 'full_name'],
            render: (_, record) => {
              return (
                <Space>
                  {record?.asset_house?.full_name
                    ? record?.asset_house?.full_name
                    : record?.asset_project?.name}
                </Space>
              );
            },
            search: {
              transform: (value) => {
                return { house_name: value };
              },
            },
          },
          {
            title: '工单描述',
            dataIndex: 'content',
            search: false,
            width: 120,
            render: (text) => (
              <div
                style={{
                  width: '100%',
                  overflow: 'hidden',
                  textOverflow: 'ellipsis',
                  display: '-webkit-box',
                  WebkitBoxOrient: 'vertical',
                  WebkitLineClamp: 1,
                }}
              >
                {text}
              </div>
            ),
          },
          {
            title: '评价星级',
            dataIndex: 'evaluation_score',
            search: false,
            render: (dom: React.ReactNode) => {
              const score = Number(dom);
              const validScore = Math.max(
                0,
                Math.min(5, isNaN(score) ? 0 : score),
              );
              return (
                <div style={{ color: '#ffd700' }}>
                  {Array(validScore)
                    .fill(0)
                    .map((_, index) => (
                      <span key={index}>★</span>
                    ))}
                  {Array(5 - validScore)
                    .fill(0)
                    .map((_, index) => (
                      <span key={index} style={{ color: '#d9d9d9' }}>
                        ☆
                      </span>
                    ))}
                  <span style={{ marginLeft: '8px', color: '#666' }}>
                    {validScore}星
                  </span>
                </div>
              );
            },
          },
          MyColumns.Option({
            render: (_, item: any, __, action) => (
              <MyTableActions
                actions={{
                  show: (
                    <WorkOrderShow
                      item={item}
                      title="详情"
                      reload={action?.reload}
                    />
                  ),
                }}
              />
            ),
          }),
        ]}
      />
    </MyPageContainer>
  );
}
