FEV2 / fw-cms

import React, { useState } from "react";
import { Card, Radio, RadioChangeEvent, Row, Table } from "antd";
import { observer } from "mobx-react-lite";
import * as API from "../api";
import { OrderTaskApprovalType } from "../entity";
import useInitial from "@/hooks/useInitail";
import ModifiedTableCell from "./ModifiedTableCell";
import { ColumnsType } from "antd/es/table";

const RadioButton = Radio.Button;
const RadioGroup = Radio.Group;

// 预览任务入口弹框
interface EntryTaskPreviewProps {
  params: any; // API.PreviewTaskReq
  showAdviserModal: (
    record: API.TaskListItem,
    type: OrderTaskApprovalType
  ) => void;
  showSeriesModal: (
    record: API.TaskListItem,
    type: OrderTaskApprovalType
  ) => void;
}

const EntryTaskPreview = ({
  params,
  showAdviserModal,
  showSeriesModal,
}: EntryTaskPreviewProps) => {
  const [type, setType] = useState(OrderTaskApprovalType.门店维度);

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

  const handleChangeType = (e: RadioChangeEvent) => {
    const value = e.target.value;
    if (value === 99) {
      setType(OrderTaskApprovalType.新车一级管理维度);
      setParams(
        // @ts-ignore
        { orderTaskApprovalType: OrderTaskApprovalType.新车一级管理维度 },
        true
      );
      return;
    }
    setType(value);
    // @ts-ignore
    setParams({ orderTaskApprovalType: value }, true);
  };

  // 查看顾问任务
  const handlePreviewAdviserTask = (record: API.TaskListItem) => {
    if (record.dataId === -999) {
      return;
    }
    showAdviserModal(record, type);
  };

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

  const columns: ColumnsType<API.TaskListItem> = [
    {
      title: type === OrderTaskApprovalType.门店维度 ? "门店" : "姓名",
      width: type === OrderTaskApprovalType.门店维度 ? 150 : 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) => {
        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>;
      },
    },
  ];

  const extraColumns: ColumnsType<API.TaskListItem> = [
    {
      title: "销顾任务",
      render: (text: string, record: API.TaskListItem) => {
        if (record.dataId === -999) {
          return "-";
        }
        return <a onClick={() => handlePreviewAdviserTask(record)}>查看</a>;
      },
    },
  ];

  return (
    <Card
      title={
        <Row align="middle" justify="start">
          <RadioGroup onChange={handleChangeType} value={type}>
            <RadioButton value={OrderTaskApprovalType.门店维度}>
              门店
            </RadioButton>
            <RadioButton value={OrderTaskApprovalType.销售顾问维度}>
              销顾
            </RadioButton>
            <RadioButton value={99}>销售管理层</RadioButton>
          </RadioGroup>
          {type !== OrderTaskApprovalType.门店维度 &&
            type !== OrderTaskApprovalType.销售顾问维度 && (
              <RadioGroup
                onChange={handleChangeType}
                value={type}
                style={{ marginLeft: 20 }}
              >
                <RadioButton value={OrderTaskApprovalType.新车一级管理维度}>
                  销售一级管理
                </RadioButton>
                <RadioButton value={OrderTaskApprovalType.新车二级管理维度}>
                  销售二级管理
                </RadioButton>
                <RadioButton value={OrderTaskApprovalType.新车三级管理维度}>
                  销售三级管理
                </RadioButton>
              </RadioGroup>
            )}
        </Row>
      }
    >
      <Table
        bordered
        rowKey="dataId"
        columns={
          type === OrderTaskApprovalType.门店维度
            ? columns.concat(extraColumns)
            : columns
        }
        loading={loading}
        dataSource={data.taskList}
        pagination={false}
        scroll={{ y: 450 }}
      />
    </Card>
  );
};

export default observer(EntryTaskPreview);