import React from "react";
import { Drawer, Input, Tree, Form, Button, Card, FormReadOnly } from "kts-xui";
import { Icon, message } from "kts-components-antd-x3"; 
import './index.less'; 
export interface TaxClassificationProps {

    /** 是否开启 */
    open?: boolean;

    /** 数据 */
    list?: any[];

    /** 点击了取消 */
    onCancel?: () => void;

    /** 点击了选择 */
    onSelect?: (key: any, info: any) => void;

    /** 点击了提交 */
    onSubmit?: (key: any, info: any) => void;

    /** 点击了加载 */
    onLoad: (value: any) => Promise<any[]>;

    /** 点击了搜索 */
    onSearch?: (value?: any) => void; 

    info?: any;
}

export default function TaxClassificationModal(props: TaxClassificationProps) {
    const [form] = Form.useForm<any>();

  const searchTax = React.useCallback(async (value?: any) => {
    if(!value?.target?.value) {
      form.resetFields();
    }
    props.onSearch && props.onSearch(value);
    }, [props.onSearch, form]);

    React.useEffect(() => {
      if (!props.open) {
        setTimeout(()=> {
          form.resetFields();
        }, 500)
      }
    }, [form, props.open]);

    // const [childrenDrawer, setChildrenDrawer] = React.useState(false);

    const showChildrenDrawer = (key: any, info: any) => {
      if(props.onSelect){ 
        props.onSelect(key, info);
      }
      // setChildrenDrawer(true);
    };
    const onChildrenDrawerClose = () => {
      // setChildrenDrawer(false);
      if(props.onCancel){
        props.onCancel();
      }
    };

    const layout = {
      labelCol: { span: 8 },
      wrapperCol: { span: 16 },
    };

    const sureTaxCodeSubmit = () => {
      form.validateFields().then(values => { 
        // if(!values.taxCategoryCode){
        //   message.warn('请选择税收分类编码');
        //   return; 
        // }  
        onChildrenDrawerClose();
        props.onSubmit && props.onSubmit(props.info?.key, {...props.info,...values});
      }).catch(errorInfo => {
        console.log('errorInfo', errorInfo);
      }); 
    }  
    React.useEffect(() => {
      form.setFieldsValue({
        ...form.getFieldsValue(),
        taxCategoryCode: props?.info?.taxCategoryCode,
        productName: props?.info?.productName,
        shorthand: props?.info?.shorthand,
        taxDesc: props?.info?.taxDesc, 
      })
    },[props?.info?.key])
    return (
      <Drawer
        title="商品和服务税收分类编码"
        placement="right"
        open={props.open}
        width={743}
        onClose={props.onCancel} 
        footer={
          <div
              style={{
                  textAlign: 'right',
              }}
          >
              <Button onClick={onChildrenDrawerClose} style={{ marginRight: 8 }}>
                  取消
              </Button>
              <Button onClick={sureTaxCodeSubmit} type="primary">
                  确定
              </Button>
          </div>
      }
      >
        <div className="taxdetailsbox">
          <Form
            style={{width: 330}}
            form={form}
          >
            <Form.Item name='search'>
              <Input
                placeholder="请输入税收分类编码、税收分类名称进行检索"
                onChange={searchTax}
              />
            </Form.Item>
            <Form.Item name='tree'>
              <Tree
                onSelect={(key: any, info: any)=>{showChildrenDrawer(key, info)}}
                loadData={props.onLoad}
                treeData={props.list}
                switcherIcon={<Icon type="down" />}
              />
            </Form.Item>
          </Form>  
          <Card className="taxrightbox">  
            <Form form={form} {...layout} initialValues={props.info} >
              <Form.Item name={"taxCategoryCode"} label="编码">
                  <FormReadOnly />
                </Form.Item>
                <Form.Item name={"productName"} label="货物和劳务名称">
                  <FormReadOnly />
                </Form.Item>
                <Form.Item name={"shorthand"} label="简称">
                  <FormReadOnly />
                </Form.Item> 
                <Form.Item name={"taxDesc"} className="taxdesc" label="说明">
                  <FormReadOnly />
                </Form.Item> 
              </Form> 
          </Card>
        </div> 
      </Drawer>
    )
}