import React from "react";
import { Table } from "antd";
import { observer } from "mobx-react-lite";
import * as API from "../api";
import useInitial from "@/hooks/useInitail";
import ModifiedTableCell from "./ModifiedTableCell";
import { ColumnsType } from "antd/es/table";

// 查看销顾任务弹框
interface AdviserTaskPreviewProps {
  params: any; // API.PreviewTaskReq
  showSeriesModal: (record: API.TaskListItem) => void;
}

const AdviserTaskPreview = ({
  params,
  showSeriesModal,
}: AdviserTaskPreviewProps) => {
  const { data, loading } = useInitial<API.PreviewTaskRes, API.PreviewTaskReq>(
    API.previewTask,
    {} as API.PreviewTaskRes,
    params
  );

  // 查看车系任务
  const handlePreviewSeriesTask = (record: API.TaskListItem) => {
    if (record.seriesTaskCount === 0) {
      return;
    }
    showSeriesModal(record);
  };

  const columns: ColumnsType<API.TaskListItem> = [
    {
      title: "姓名",
      width: 100,
      dataIndex: "dataName",
      filterSearch: true,
      onFilter: (
        value: string | number | boolean,
        record: API.TaskListItem
      ) => {
        return record.dataName.startsWith(value.toString());
      },
    },
    {
      title: "零售任务(台)",
      children: [
        {
          title: "合计",
          dataIndex: "taskCount",
          key: "taskCount",
          render: (text: string, record: API.TaskListItem) => {
            return ModifiedTableCell(record, "taskCount");
          },
        },
        {
          title: "新能源车",
          dataIndex: "newEnergyTaskCount",
          key: "newEnergyTaskCount",
          render: (text: string, record: API.TaskListItem) => {
            return ModifiedTableCell(record, "newEnergyTaskCount");
          },
        },
        {
          title: "传统燃油车",
          dataIndex: "fuelVehicleTaskCount",
          key: "fuelVehicleTaskCount",
          render: (text: string, record: API.TaskListItem) => {
            return ModifiedTableCell(record, "fuelVehicleTaskCount");
          },
        },
      ],
    },
    {
      title: "单车毛利任务(元)",
      dataIndex: "vehicleGrossProfitTask",
      render: (text: string, record: API.TaskListItem) => {
        if (record.dataId === -999) {
          return <div style={{ textAlign: "center" }}>-</div>;
        }
        return ModifiedTableCell(record, "vehicleGrossProfitTask");
      },
    },
    {
      title: "线索到店成交(台)",
      width: 100,
      dataIndex: "clueDealTaskCount",
      render: (text: string, record: API.TaskListItem) => {
        return ModifiedTableCell(record, "clueDealTaskCount");
      },
    },
    {
      title: "首客试驾成交(台)",
      width: 100,
      dataIndex: "testDriveTaskCount",
      render: (text: string, record: API.TaskListItem) => {
        return ModifiedTableCell(record, "testDriveTaskCount");
      },
    },
    {
      title: "攻坚车任务(台)",
      width: 100,
      dataIndex: "tackCarTaskCount",
      render: (text: string, record: API.TaskListItem) => {
        return ModifiedTableCell(record, "tackCarTaskCount");
      },
    },
    {
      title: "车系任务(台)",
      width: 100,
      dataIndex: "seriesTaskCount",
      render: (text: string, record: API.TaskListItem) => {
        if (record.dataId === -999) return text;
        return <a onClick={() => handlePreviewSeriesTask(record)}>{text}</a>;
      },
    },
  ];

  return (
    <Table
      bordered
      rowKey="dataId"
      loading={loading}
      columns={columns}
      dataSource={data.taskList}
      pagination={false}
      scroll={{ y: 450 }}
    />
  );
};

export default observer(AdviserTaskPreview);