import React, { useState } from 'react';
import { Row, Modal, Table, Button, InputNumber, message } from 'antd';
import Column from 'antd/lib/table/Column';
import { ShopTaskList, ListItem } from '../api';
import { isNil } from 'lodash';

interface Props {
  setVisible: any,
  visible: boolean,
  current: ShopTaskList,
  index?: number,
  setList: (value: any) => any,
  list: ListItem,
  setCurrent: (value: any) => any,
  isHandledit: boolean
}

export default function EModal({ setVisible, visible, current = {}, index, setList, list = {}, setCurrent, isHandledit }: Props) {
  const [editable, setEditable] = useState<boolean>(false);

  function _onChange(e: number, innerIndex: number) {
    //改变整体外层数据
    const data = JSON.parse(JSON.stringify(list));
    const currentData = JSON.parse(JSON.stringify(current));
    if (!isNil(index)) {
      data.shopTaskList![index].staffTaskList![innerIndex].taskCount = e || 0;
      data.shopTaskList![index].staffTaskList![innerIndex].clueDealTaskCount = Math.ceil((data.shopTaskList![index].clueDealTaskRate || 0)/100 *(e || 0));
      currentData.staffTaskList![innerIndex].taskCount = e || 0;
      currentData.staffTaskList![innerIndex].clueDealTaskCount = Math.ceil((data.shopTaskList![index].clueDealTaskRate || 0)/100 *(e || 0));
    }
    setList({ ...data });
    //回显改变数据
    setCurrent({ ...currentData });
  }

  /**
   * 修改零售任务
   * @param e 
   * @param innerIndex 
   */
  function hanldeChangeClue(e: number, innerIndex: number) {
    //改变整体外层数据
    const data = JSON.parse(JSON.stringify(list));
    const currentData = JSON.parse(JSON.stringify(current));
    if (!isNil(index) && data.shopTaskList![index].staffTaskList[innerIndex].taskCount < e) {
      message.error("线索到店零售台数不能大于零售任务！");
      return;
    }
    if (!isNil(index)) {
      data.shopTaskList![index].staffTaskList![innerIndex].clueDealTaskCount = e || 0;
      currentData.staffTaskList![innerIndex].clueDealTaskCount = e || 0;
    }
    setList({ ...data });
    //回显改变数据
    setCurrent({ ...currentData });
  }

  function handleClick() {
    setVisible(false);
    setEditable(false);
  }

  return (
    <Modal
      visible={visible}
      onCancel={() => setVisible(false)}
      maskClosable={false}
      width={600}
      footer={null}
    >
      <Table
        style={{ marginTop: 20 }}
        dataSource={current.staffTaskList}
        rowKey="staffId"
        pagination={false}
      >
        <Column 
          title="销售顾问" 
          align="center"
          render={(value: any) => {
            if (value.regularMonth) {
              return <span>{value.staffName}(转正第{value.regularMonth}个月)</span>;
            } else {
              return <span>{value.staffName}</span>;
            }
          }}
        />
        <Column 
          title="零售任务(台)" 
          dataIndex="taskCount" 
          align="center"
          render={(value, record, index) => {
            if (editable) {
              return <InputNumber min={0} value={value} onChange={(e: any) => _onChange(e, index)} />;
            } else {
              return <span>{value}</span>;
            }
          }}
        />
        <Column 
          title="线索到店零售台数"
          dataIndex="clueDealTaskCount" 
          align="center"
          render={(value, record, index) => {
            if (editable) {
              return <InputNumber min={0} value={value} onChange={(e: any) => hanldeChangeClue(e, index)} />;
            } else {
              return <span>{value}</span>;
            }
          }}
        />
      </Table>
      <Row justify="center" style={{ marginTop: 20 }}>
        {isHandledit ? (
          <>
            <Button type="primary" style={{ marginRight: 15, width: 110 }} onClick={handleClick}>确定</Button>
            <Button type="default" style={{ width: 110 }} onClick={() => setEditable(!editable)}>手动编辑</Button>
          </>
        ) : null}
      </Row>
    </Modal>
  );
}