import React, { useState } from 'react';
import { PageHeaderWrapper } from '@ant-design/pro-layout';
import { Card, InputNumber, Button, message } from 'antd';
import useInitial from '@/hooks/useInitail';
import { getDetail, saveApi, Item} from './api';
import ConfirmBnt from '../components/ConfirmBnt';
import { DeleteOutlined } from '@ant-design/icons';

const Index = () => {
  const [disable, setDisable] = useState(false);
  const { data, setData, loading, setLoading } = useInitial<Item[], object>(getDetail, [{ startDays: 1, endDays: null, amount: null }, { startDays: null, endDays: null, amount: null }], {});

  const handleAdd = () => {
    setData([...data, { startDays: null, endDays: null, amount: null }]);
  };

  const handleInputChange = (index: number, p: any) => {
    let arr = data;
    if (p.endDays) {
      arr[index + 1].startDays = p.endDays + 1;
    }
    setData(arr.map((it, i) => {
      if (index == i) { 
        return { ...it, ...p};
      } else {
        return it;
      }
    }
    ));
  };

  const handleDel = (event: any, index: number) => {
    let arr = data;
    arr.splice(index, 1);
    arr[arr.length -1].startDays = arr[arr.length-2].endDays+1;
    setData(arr);
  };

  const svae = () => {
    saveApi({list: data}).then(() => {
      message.success('保存成功');
      setLoading(true);
      setDisable(false);
    }).catch(e => message.error(e.message));
  };

  return (
    <PageHeaderWrapper title="运费目标设置">
      <Card loading={loading}>
        {!!data?.length && data.map((it, index) => (
          index < data.length-1 ? (
            <div key={index} style={{ display: 'flex', alignItems: 'center', marginBottom: 10 }}>
              <span style={{ marginRight: 10 }}>{index + 1}、</span>
              <>
                缺件起始天数
                <InputNumber 
                  disabled 
                  min={index > 0 ? data[index - 1].endDays : 1} 
                  value={index > 0 ? data[index - 1].endDays+1 : 1} 
                  style={{ width: 100, marginLeft: 10, marginRight: 20 }}
                />
              </>
              <>
                缺件结束天数
                <InputNumber 
                  disabled={!disable} 
                  min={0} 
                  value={it.endDays} 
                  onChange={value => {
                    handleInputChange(index, { startDays: index > 0 ? data[index - 1].endDays + 1 : it.startDays, endDays: value });
                  }} 
                  style={{ width: 100, marginLeft: 10, marginRight: 20 }} 
                />
              </>
              <>
                运费统计增加
                <InputNumber 
                  disabled={!disable}
                  addonAfter="元"
                  value={it.amount} 
                  min={0} 
                  onChange={value => handleInputChange(index, { amount: value })} 
                  style={{ width: 100, marginLeft: 10, marginRight: 20 }} 
                />
              </>
              {(index == data.length - 2 && disable && index != 0) ? <Button onClick={(event: any) => handleDel(event, index)} shape="circle" icon={<DeleteOutlined />} /> : ''}
            </div>
        ) : 
            (
              <div style={{ display: 'flex', alignItems: 'center', marginBottom: 10 }}>
                <span style={{ marginRight: 10 }}>{data.length}、</span>
                <div style={{ marginRight: 20 }}>
                  <InputNumber disabled min={0} value={data[data.length - 2].endDays + 1} style={{ width: 100, marginRight: 10 }} />
                  天及以上
                </div>
                <>
                  运费统计增加
                  <InputNumber 
                    disabled={!disable} 
                    addonAfter="元"
                    value={it.amount} 
                    min={0} 
                    onChange={value => handleInputChange(data.length - 1, { startDays: index > 0 ? data[index - 1].endDays + 1 : it.startDays, endDays: null, amount: value })} 
                    style={{ width: 100, marginLeft: 10, marginRight: 20 }} 
                  />
                </>
              </div>
            )
        ))}
        <Button type="default" disabled={!disable} onClick={() => handleAdd()}>添加梯度</Button>
        <ConfirmBnt
          disable={disable}
          onOk={() => svae()}
          onCancel={() => { setDisable(false); setLoading(true); }}
          onEdit={() => {
            setDisable(true);
            setData(data);
          }}
        />
      </Card>
    </PageHeaderWrapper>
  );
};
export default Index;