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: 4 });
  const [disable, setDisable] = useState(false);

  function handleSave() {
    saveApi({ ...data, type: 4 }).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、库销比≥&nbsp;
            <InputNumber
              disabled={!disable}
              bordered={disable}
              size="small"
              controls={false}
              style={{width: 60}}
              value={data.ratioMorax1}
              onChange={(value: any) => setData({ ...data, ratioMorax1: value })}
            />
            &nbsp;时每增加&nbsp;
            <InputNumber
              disabled={!disable}
              bordered={disable}
              size="small"
              controls={false}
              style={{ width: 60 }}
              value={data.ratioMorax2}
              onChange={(value: any) => setData({ ...data, ratioMorax2: value })}
            />
            &nbsp;扣&nbsp;
            <InputNumber
              disabled={!disable}
              bordered={disable}
              size="small"
              controls={false}
              style={{ width: 60 }}
              value={data.ratioMorax3}
              onChange={(value: any) => setData({ ...data, ratioMorax3: value })}
            />
            &nbsp;&nbsp;%
          </span>
          <ConfirmBnt
            disable={disable}
            onOk={handleSave}
            onCancel={handleCancel}
            onEdit={() => {
              setDisable(true);
              setData(data);
            }}
          />
        </div>
      </Card>
    </PageHeaderWrapper>
  );
}