import React, { useEffect, useState } from 'react';
import { Button, Card, ConfigProvider, Form, InputNumber, message, Row, Switch, Space } from 'antd';
import zhCN from 'antd/lib/locale-provider/zh_CN';
import { PageHeaderWrapper } from '@ant-design/pro-layout';
import { getInfoApi, saveInfoApi, Result } from './api';
import './style.less';
import { history } from 'umi';
import { debounce } from 'lodash';

export default function CollectionFollowSetting() {
  const [edit, setEdit] = useState(false);
  const [loading, setLoading] = useState<boolean>(true);
  const [confirmLoading, setConfirmLoading]= useState<boolean>(false);
  const [form] = Form.useForm();
  const [stageMinAssignCount, setStageMinAssignCount] = useState<number>(0);
  const [dailyMinAssignCount, setDailyMinAssignCount] = useState<number>(0);
  const [increaseCount, setIncreaseCount] = useState<number>(0);
  const [checked, setChecked] = useState<boolean>(false);

  useEffect(() => {
    getInfo();
  }, []);

  const getInfo = () => {
    getInfoApi().then(res => {
      if (res.data) {
        form.setFieldsValue({...res.data});
        setDailyMinAssignCount(res.data?.dailyMinAssignCount || 0);
        setStageMinAssignCount(res.data?.stageMinAssignCount || 0);
        setIncreaseCount(res.data?.increaseCount || 0);
        setChecked(res.data.onlineSaleShopAssignClue || false);
      }
      setLoading(false);
    }).catch(error => {
      message.error(error.message);
      setLoading(false);
    });
  };

  const onCancle = () => {
    getInfo();
    setEdit(false);
  };

  const onOk = async () => {
    const params: any = await form.validateFields();
    const _params: Result = {
      exclusiveClueConvertRate: params.exclusiveClueConvertRate,
      stageMinAssignCount,
      dailyMinAssignCount,
      increaseCount,
      onlineSaleShopAssignClue: checked,
    };
    setConfirmLoading(true);
    saveInfoApi(_params).then(res => {
      message.success(res.result);
      setEdit(false);
      setConfirmLoading(false);
      history.goBack();
    }).catch(error => {
      message.error(error.message);
      setConfirmLoading(false);
    });
  };

  return (
    <PageHeaderWrapper title="暂停区域线索站岗分配资格">
      <ConfigProvider locale={zhCN}>
        <Card style={{paddingLeft: "60px", justifyContent: 'center'}} bordered={false} loading={loading}>
          {/* <Spin> */}
          <Form
            labelCol={{ span: 2 }}
            wrapperCol={{ span: 18 }} 
            form={form}
          >
            <Form.Item labelCol={{offset: 0}} label="区域站岗分配线索转化率标准" name="exclusiveClueConvertRate" labelAlign="right" rules={[{ required: true, message: '请输入' }]}>
              <InputNumber
                style={{width: '100%'}}
                controls={false}
                min={0}
                max={100}
                formatter={value => `${value}%`}
                precision={2}
                disabled={!edit}
                parser={value => value?.replace('%', '')}
              />
            </Form.Item>

            <Form.Item labelCol={{offset: 2}} label=" " name="stageMinAssignCount" colon={false} labelAlign="right">
              <span>{`(1)每阶段滚动判定，低于"区域站岗分配线索转化率标准"，下一阶段线索每日仅分配`}</span>
              <InputNumber
                controls={false}
                min={0}
                disabled={!edit}
                value={stageMinAssignCount}
                onChange={(e) => setStageMinAssignCount(e || 0)}
                formatter={value => `${value}个`}
                precision={0}
                parser={value => value?.replace('个', '')}
              />
              <br />
              <span style={{color: "#F4333C"}}>（最低要求）；阶段：1～10号；11～20号；21～月末</span>
            </Form.Item>

            <Form.Item labelCol={{offset: 2}} className="feewee-settings-form-closeClue" label=" " colon={false}>
              <Form.Item colon={false} name="dailyMinAssignCount">
                <span>(2)从</span>
                <InputNumber
                  controls={false}
                  value={dailyMinAssignCount}
                  onChange={(e) => setDailyMinAssignCount(e || 0)}
                  min={0}
                  disabled={!edit}
                  formatter={value => `${value}个`}
                  precision={0}
                  parser={value => value?.replace('个', '')}
                />
                <span>线索起，当天区域站岗分配线索跟进数每增加</span>
              </Form.Item>
              <Form.Item colon={false} name="increaseCount">
                <InputNumber
                  controls={false}
                  min={0}
                  value={increaseCount}
                  onChange={(e) => setIncreaseCount(e || 0)}
                  formatter={value => `${value}个`}
                  precision={0}
                  disabled={!edit}
                  parser={value => value?.replace('个', '')}
                />
                <span>，低于{`"区域站岗分配线索转化率标准"`}，暂停当天资格；</span>
              </Form.Item>
            </Form.Item>
            <Form.Item labelCol={{offset: 0}} label="网销门店是否参与区域线索站岗分配" name="onlineSaleShopAssignClue" labelAlign="right">
              <Switch
                disabled={!edit}
                checked={checked}
                checkedChildren="是"
                unCheckedChildren="否"
                size="default"
                onChange={(e) => setChecked(e)}
              />
            </Form.Item>
 
          </Form>
          <Row justify="space-around" align="middle">
            <Space>
              {
                !edit ? <Button disabled={confirmLoading} type="default" onClick={() => setEdit(true)}>编辑</Button> : <Button disabled={confirmLoading} type="default" onClick={onCancle}>取消</Button>
              }
              <Button disabled={confirmLoading} loading={confirmLoading} type="primary" onClick={debounce(onOk, 380)}>确认</Button>
              <Button disabled={confirmLoading} type="link" onClick={() => { history.goBack(); }}>返回上一级</Button>
            </Space>
          </Row>
          {/* </Spin> */}
        </Card>
      </ConfigProvider>
    </PageHeaderWrapper>
  );
}