import React, { useEffect, useState } from 'react';
import { PageHeaderWrapper } from '@ant-design/pro-layout';
import { Card, Table, Button, Row, DatePicker, Col, InputNumber, message } from 'antd';
import { getTackMaunuaList, ListItem, autoAlloctionApi, ShopTaskList, save, saveParams } from './api';
import EModal from './component/Modal';
import moment from 'moment';
import ApproveModal from '@/pages/order3/Common/ApproveModal';

const { Column } = Table;

const day = new Date();
const month = day.getMonth() + 1;
const year = day.getFullYear();
const strtime = year + '-' + month;
let newDate = new Date(strtime);
const newDay = newDate.getTime();

export default function TacklingCarModels() {
  const [visible, setVisible] = useState<boolean>(false);
  const [loading, setLoading] = useState<boolean>(false);
  const [current, setCurrent] = useState<ShopTaskList>({});
  const [confirmLoading, setConfirmLoading] = useState<boolean>(false);
  const [saveLoading, setSaveLoading] = useState<boolean>(false);
  const [date, setDate] = useState<number>(1612346107410);
  const [edit, setEdit] = useState<boolean>(false);
  const [list, setList] = useState<ListItem>({});
  const [orginDara, setOrginDara] = useState<ListItem>({});
  const [approveOpen, setApproveOpen] = useState<boolean>(false);
  let index;

  useEffect(() => {
    getList(newDay);
  }, []);

  function setReset() {
    setList({ ...orginDara });
    setEdit(false);
  }

  //查询列表
  function getList(date: number) {
    const params = {
      taskDate: date.valueOf(),
      autoAssign: true,
    };
    getTackMaunuaList(params).then(res => {
      setLoading(false);
      const data = res.data;
      setOrginDara(data || {});
      setList(data || {});
      message.success('请求成功!');
    }).catch(e => {
      setLoading(false);
      message.warning(e.message);
    });
  }

  function _ChangeMoth(date: any) {
    setLoading(true);
    setDate(date.valueOf());
    getList(date);
  }
  function _onChange(e: number, index: number) {
    const data = list;
    data.shopTaskList![index].taskCount = e;
    setList({ ...data });
  }
  //保存
  function handleClick() {
    setLoading(true);
    const params = {
      id: list.id,
      shopTaskList: list.shopTaskList
    };
    autoAllocationSave(params);
  }
  //提交审批
  function saveClick(params?: any) {
    setLoading(true);
    setSaveLoading(true);
    save({...params, id: list.id}).then(() => {
      setSaveLoading(false);
      setLoading(false);
      setList({ ...list, canModified: false });
      message.success('提交成功！');
    }).catch(e => {
      setLoading(false);
      message.warning(e.message);
      setSaveLoading(false);
    });
  }
  //自动提交
  function autoAllocationSave(params: saveParams) {
    setConfirmLoading(true);
    setEdit(true);
    autoAlloctionApi(params).then(() => {
      setConfirmLoading(false);
      getList(date);
      setEdit(false);
    }).catch(e => {
      message.warning(`${e.message}`);
      setConfirmLoading(false);
      setLoading(false);
    });
  }

  function handleOpenApprove() {
    setApproveOpen(true);
  }

  return (
    <PageHeaderWrapper title="攻坚车任务">
      <Card>
        <Row style={{ marginTop: 20, marginBottom: 20 }}>
          <Col span={4}><DatePicker defaultValue={moment(newDay)} picker="month" onChange={_ChangeMoth} /></Col>
        </Row>
        <Table
          dataSource={list.shopTaskList}
          loading={loading}
          rowKey="shopId"
          pagination={false}
          summary={pageData => {
            let total = 0;
            pageData.forEach(({ taskCount }) => {
              total += taskCount || 0;
            });
            return (
              <>
                {total == 0 ? null : (
                  <Table.Summary.Row>
                    <Table.Summary.Cell index={1}><span style={{ display: 'block', textAlign: 'center' }}>合计</span></Table.Summary.Cell>
                    <Table.Summary.Cell index={2}>
                      <span style={{ display: 'block', textAlign: 'center' }}>{total}</span>
                    </Table.Summary.Cell>
                    <Table.Summary.Cell index={3} />
                  </Table.Summary.Row>
                )}
              </>
            );
          }}
        >
          <Column title="门店" dataIndex="shopName" width={400} align="center" />
          <Column
            title="攻坚车型任务(台)"
            dataIndex="taskCount"
            align="center"
            render={(value, record, index) => {
              if (edit) {
                return <InputNumber min={0} value={value} onChange={(e: any) => _onChange(e, index)} />;
              } else {
                return <span>{value}</span>;
              }
            }}
          />
          <Column
            title="操作"
            align="center"
            render={(value, record, _index) => (
              <>
                <Button type="link" onClick={() => { setVisible(true); setCurrent(value); index = _index; }}>销售顾问任务</Button>
              </>
            )}
          />
        </Table>
        <EModal setVisible={setVisible} visible={visible} current={current} index={index} setList={setList} list={list} setCurrent={setCurrent} isHandledit={edit} />
        <Row justify="center" style={{ marginTop: 15 }}>
          {list.canModified ? (
            <>
              {edit ?
                <Button style={{ width: 110 }} type="primary" onClick={handleClick} loading={confirmLoading}>确定</Button> :
                <Button style={{ width: 110 }} type="primary" onClick={handleOpenApprove} loading={saveLoading}>提交审批</Button>}
              {edit ? null :
              <Button style={{ width: 110, marginLeft: 15, backgroundColor: '#FFF' }} onClick={() => setEdit(true)} type="default">自动调整</Button>}
              {edit ?
                <Button style={{ width: 110, marginLeft: 15 }} type="default" onClick={setReset} loading={confirmLoading}>取消</Button> :
                null}
            </>
          ) : null}
        </Row>
      </Card>
      <ApproveModal callback={saveClick} open={approveOpen} setOpen={setApproveOpen} />
    </PageHeaderWrapper>
  );
}