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

export default function Index() {
  const { data, setData, setLoading, loading } = useInitail<Item, { type: number }>(getDetail, {}, { type: 2 });
  const [disable, setDisable] = useState(false);

  function handleSave() {
    saveApi({ ...data, type: 2 }).then(() => {
      message.success("操作成功");
      setLoading(true);
      setDisable(false);
    }).catch((e: any) => {
      message.error(e.message);
    });
  }

  function handleCancel() {
    setData(data);
    setDisable(false);
  }

  return (
    <PageHeaderWrapper title="调拨设置">
      <Card loading={loading}>
        <div style={{ display: "flex", flexDirection: "column", fontSize: 16, padding: 20, }}>
          <span style={{ marginBottom: 20 }}>1、调运起步价格：
            <InputNumber
              disabled={!disable}
              size="small"
              style={{ width: 80 }}
              bordered={disable}
              value={data.startingPrice}
              onChange={(value: any) => setData({ ...data, startingPrice: value })}
            />
            &nbsp;&nbsp;元/次
          </span>
          <span style={{ marginBottom: 20 }}>2、调运起步距离：
            <InputNumber
              disabled={!disable}
              size="small"
              style={{ width: 80 }}
              bordered={disable}
              value={data.startingDistance}
              onChange={(value: any) => setData({ ...data, startingDistance: value })}
            />
            &nbsp;&nbsp;公里
          </span>
          <span style={{ marginBottom: 20 }}>3、员工调运费用：
            <InputNumber
              disabled={!disable}
              size="small"
              style={{ width: 80 }}
              bordered={disable}
              value={data.transferAmount}
              onChange={(value: any) => setData({ ...data, transferAmount: value })}
            />
            &nbsp;&nbsp;元/公里
          </span>
          <ConfirmBnt
            disable={disable}
            onOk={handleSave}
            onCancel={handleCancel}
            onEdit={() => {
              setDisable(true);
              setData(data);
            }}
          />
        </div>
      </Card>
    </PageHeaderWrapper>
  );
}