import { Button, Form, Input, InputNumber, Modal, notification, Switch } from 'antd';
import React, { useState } from 'react';
import Select from '../../../components/select/select';
import { useUpdateMerchantType } from '../../../service/accouting';

const formItemLayout = {
    labelCol: {
        sm: {span: 6},
    },
    wrapperCol: {
        sm: {span: 16},
    },
};

const options= [
    {
        key:1,
        value:1,
        label:'普通客户'
    },
    {
        key:2,
        value:2,
        label:'预存款客户'
    },
    {
        key:3,
        value:3,
        label:'后结算客户'
    },
]

const MerchantSetModal: React.FC<any> = (props:any) => {
    const { record,form,refresh } = props
    const { getFieldDecorator,validateFieldsAndScroll,resetFields } = form
  const [isModalOpen, setIsModalOpen] = useState(false);
  const [state,updateMerchantType] = useUpdateMerchantType()

  const showModal = () => {
    setIsModalOpen(true);
  };

  const handleCancel = () => {
    setIsModalOpen(false);
    resetFields()
  };

  const handleSubmit = () => {
    validateFieldsAndScroll((error:any, values:any) => {
        const { is_notify } = values
        if (error) return;
        updateMerchantType({
          ...values,
          merchant_id:Number(record?.merchant_id),
          is_notify:is_notify? 1:0
        }).then(error=>{
            if(error){
            return notification.error({
                message:`修改商户类型失败!`,
                description:error,
              })
            }
            setIsModalOpen(false);
            refresh()
        })
    });
};

  return (
    <>
      <a onClick={showModal}>
        设置
      </a>
      <Modal title={`${record?.merchant_name}`} visible={isModalOpen} onOk={handleSubmit} cancelText='取消' okText='确认' onCancel={handleCancel}>
        <Form {...formItemLayout}>
            <Form.Item label='商户类型'>
            {getFieldDecorator('merchant_type', {
                        initialValue: record?.merchant_type,
                    })(<Select  options={options}/>)}
            </Form.Item>
            <Form.Item label='设置可欠费金额'>
            {getFieldDecorator('arrearage', {
                        initialValue: record?.arrearage,
                    })(<InputNumber min={0} precision={2}/>)}
            </Form.Item>
            <Form.Item label='账单是否通知'>
            {getFieldDecorator('is_notify', {
                        initialValue: record?.is_notify === 1? true:false,
                        valuePropName: 'checked',
                    })(<Switch />)}
            </Form.Item>
        </Form>
      </Modal>
    </>
  );
};

export default Form.create<any>()(MerchantSetModal);