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

  function handleSave() {
    saveApi({ ...data, type: 1 }).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、当库存为零，本月有出库，但90天月均出库量{'<'}1，动态库销比指定为：&nbsp;&nbsp;
            <InputNumber
              min={0}
              max={10000}
              disabled={!disable}
              bordered={disable}
              size="small"
              style={{ width: 80 }}
              value={data.ratio} 
              onChange={(value: any) => setData({ ...data, ratio: value })}
            />
          </span>
          <span style={{ marginBottom: 20 }}>2、配件外采价格管控：小于加权成本价 * &nbsp;&nbsp;
            <InputNumber
              min={0}
              max={10}
              disabled={!disable}
              bordered={disable}
              size="small"
              style={{ width: 80 }}
              value={data.limit}
              onChange={(value: any) => setData({ ...data, limit: value })}
            />
          </span>
          <span style={{ marginBottom: 20 }}>3、低于库销比：
            <InputNumber
              min={0}
              max={10}
              disabled={!disable}
              bordered={disable}
              size="small"
              style={{ width: 80 }}
              value={data.noApprovalRatio}
              onChange={(value: any) => setData({ ...data, noApprovalRatio: value })}
            />
            &nbsp;&nbsp;，配件计划不审批
          </span>
          <ConfirmBnt
            disable={disable}
            onOk={handleSave}
            onCancel={handleCancel}
            onEdit={() => {
              setDisable(true);
              setData(data);
            }}
          />
        </div>
      </Card>
    </PageHeaderWrapper>
  );
}