import { Modal,Input, Form,Button,Select,message,Switch,Divider,Space,progress,percent} from 'antd';
import { BetaSchemaForm, ProFormSelect,ProFormDependency } from '@ant-design/pro-form';
import React, { useState,useEffect } from 'react';
import { PlusOutlined } from '@ant-design/icons';
const CreateAction = (props) => {
  const [form] = Form.useForm();
  const formRef = React.useRef(null);
  const [valueType, setValueType] = useState('text');
  const [layoutType, setLayoutType] = useState('Form');
  const [optionitem,setoptionitem]=useState([])
  const [modalVisit, setModalVisit] = useState(false);
  const [shuUpdate, setshuUpdate] = useState(false);
  useEffect(() => {
    formRef.current?.setFieldsValue(props.values);
    if(props.createModalVisible){
      if(props.values.actionType==null){
        formRef.current?.setFieldsValue({
          actionType: 'text',
        });
        props.values.actionType="text";
        setValueType("text");
        setLayoutType('Form');
        setoptionitem([]);
      }else{
        formRef.current?.setFieldsValue({
          actionType: props.values.actionType,
        });
        setValueType(props.values.actionType)
        if(props.values.actionType=="select"){
          setLayoutType('ModalForm');
          let ary=[];
          let op=JSON.parse(props.values.actionValue)
          for (let t = 0; t < op.length; t++) {
            ary.push({actionValueName:op[t].actionValueName})
          }
          setoptionitem(ary);
        }else{
          setValueType(props.values.actionType);
          setLayoutType('Form');
          setoptionitem([]);
        }
      }
      
    }
}, [props.createModalVisible]);
const handleChange=(value)=>{
  console.log(JSON.stringify(value))
  if(value){
    formRef.current?.setFieldsValue({
      actionValue:JSON.stringify(value)
    })
  }
  setModalVisit(false);
  message.success("保存成功")
}
  const options = [
      {value:'text',label: `文本框`},
      { value: `select`, label: `下拉框`},
        // { value: `money`, label: `金额输入`},
      { value: `textarea`, label: `文本域`},
        // { value: `date`, label: `日期`},
        // { value: `dateTime`, label: `日期时间`},
        // { value: `radio`, label: `单选框`},
        // { value: `radioButton`, label: `按钮单选框`},
      { value: `digit`, label: `数字输入框`},
      { value: `switch`, label: `开关`},
      ]
  const columns=[
      {
        dataIndex: 'actionValue',
        valueType:'dependency',
        name: ['valueType'],
        columns: ({ actionType }) => {
          console.log(valueType)
          switch(valueType)
          {
            case 'select':
              return [
                {
                  dataIndex: 'list',
                  valueType: 'formList',
                  initialValue:optionitem,
                  columns: [
                    {
                      valueType: 'group',
                      columns: [
                        {
                          title: '选项名称',
                          dataIndex: 'actionValueName',
                          width: 'md',
                          disabled:true,
                          formItemProps: {
                            rules: [
                              {
                                required: true,
                                message: '此项为必填项',
                              },
                            ],
                            
                          },
                        }
                      ]
                    }
                  ],
                },
                {
                  renderFormItem: (schema,config,form) => {
                    return [
                      <div style={{float:'right'}}>
                      {/* <Button
                      type="primary"
                      style={{'margin-left':'5px'}}
                      onClick={() => {
                        handleChange(form?.formRef?.current?.getFieldValue("list"));
                        return true; 
                      }}>
                        保存
                      </Button> */}
                      </div>
                    ];
                  },
                }
              ];
            case 'text':
              return [
                {
                  dataIndex: 'actionValue',
                  valueType: 'text',
                  renderFormItem: () => <Input placeholder="输入类型值" disabled />
                },
              ];
            default:
              return [{
                dataIndex: 'actionValue',
                valueType: valueType,
                fieldProps:{
                  disabled:true
                }
              }];
          }
        }
      },
    ]
   
    // const handleChange=(value)=>{

    // }
    // const onNameChange = (event) => {
    //   settypename(event.target.value);
    // };
    // const addItem = async (e) => {
    //   e.preventDefault();
    //   setItems([...items, {label:typename,value:index++} || `New item ${index++}`]);
    //   settypename('');
    //   setTimeout(() => {
    //     inputRef.current?.focus();
    //   }, 0);
    //   console.log(items)
    // }
    return (
        <>
    <Modal
      title={'动作配置'}
      width={640}
      ref={formRef}
      visible={props?.createModalVisible}
      bodyStyle={{ padding: '32px 40px 1px 48px' }}
      footer={null}
      onCancel={() => { 
        props?.onCancel();
      }}
      destroyOnClose
      maskClosable={false}
    >
         <Form
        layout="vertical"
        preserve={false}
        // form={form}
        initialValues={props?.values}
        onFinish={props?.onFinish}
        ref={formRef}
      >
         <Form.Item name="id" hidden={true}>
          <Input />
        </Form.Item>
       
        <Form.Item>
        <Form.Item name="actionName" label="模型名称"   rules={[{ required: true, max: 64, whitespace: true }]}>
          <Input placeholder="请输入模型名称" disabled />
        </Form.Item>
        <Form.Item name="actionType" label="输入类型" rules={[{ required: true, max: 64, whitespace: true }]}>
            <ProFormSelect options={options} disabled  fieldProps={{
            value: valueType,
            onChange: (e) => {
              if(e=='select'){
                setLayoutType('ModalForm');
              }else{
                setLayoutType('Form')
                
              }
              setValueType(e);
            },
          }}/>
        </Form.Item>
        <Form.Item name="actionValue" label="输入类型控件">
          <BetaSchemaForm 
           trigger={<a onClick={()=>setModalVisit(true)}>查看选项</a>}
           columns={columns}
           layoutType={layoutType}
           visible={modalVisit}
           modalProps={{
            forceRender: true,//切换显示模式后强制渲染其他模式表单
            onCancel:()=>setModalVisit(false)
           }}
           onVisibleChange={(vis)=>{
            setshuUpdate(vis)
           }}
           width={420}
           shouldUpdate={shuUpdate}
           submitter={false}
           style={{padding:'40px 10px 1px 10px;' }}
          />
        </Form.Item>
        
        {/* <Form.Item name="unit" label="单位">
          <Input placeholder="请输入单位" />
        </Form.Item>
        <Form.Item name="isBatch" label="是否绑定物料" valuePropName="checked">
            <Switch checkedChildren="是" unCheckedChildren="否"/>
        </Form.Item> */}
        <Form.Item name="sort" label="排序">
          <Input placeholder="请输入排序" disabled />
        </Form.Item>
        {/* <Button  htmlType="button" style={{float:'right',left:10}} onClick={props.onCancel} >
                        取消
                    </Button>
                    <Button type="primary" htmlType="submit" style={{float:'right'}} >
                        保存
                    </Button> */}
        </Form.Item>
      </Form>
    </Modal>
    </>
    )
}
export default CreateAction;