import React, { useEffect, useState } from 'react';
import { connect } from 'react-redux';
import { Modal, Input, Form, Tabs, Avatar, Checkbox, Button, Select } from 'antd';
import { PlusCircleOutlined, MinusCircleOutlined } from '@ant-design/icons';
const { TabPane } = Tabs;
const { TextArea } = Input;
const CheckboxGroup = Checkbox.Group;
const ReleaseModal = ({ actions, dispatch, onConfirm, onCancel, editData = {} }) => {

   const { metadataManagement } = actions;
   const [activeKey, setActiveKeyl] = useState("field")
   const [fieldList, setFiedList] = useState([])
   const [fieldData, setFiedData] = useState([])
   const [database, setDatabase] = useState({})
   const [fieldValue, setFiedValue] = useState([])
   const [indeterminate, setIndeterminate] = useState(false)
   const [fromData, setFromData] = useState([{ value1: '', value2: '', value3: '' }])
   const [sql, setSql] = useState()
   const [form] = Form.useForm();
   useEffect(() => {

      dispatch(metadataManagement.listStructuredData({ id: editData?.id, parent: editData?.parent })).then(res => {
         if (res.success) {
            setFiedData(res.payload.data?.field || [])
            setFiedList(res.payload.data?.field?.map(v => v.code) || [])
            setDatabase(res.payload.data?.database || {})
         }

      })
   }, []);



   let operator = [{ value: '=', label: '=' },
   { value: '!=', label: '!=' },
   { value: '>', label: '>' },
   { value: '<', label: '<' },
   { value: '>=', label: '>=' },
   { value: '<=', label: '<=' },
   { value: 'BETWEEN', label: 'BETWEEN' },
   { value: 'LIKE', label: 'LIKE' },
   { value: 'IN', label: 'IN' }]

   return (
      <Modal title={'发布REST服务'} open={true} destroyOnClose
         width={800}
         // onOk={() => handleOk(null)}
         onCancel={onCancel}
         footer={null}
      >
         <div style={{ width: '100%', display: 'flex', alignItems: 'center', justifyContent: 'space-around' }}>
            {[{ name: '选择字段', key: "field" },
            { name: '配置条件', key: "condition" },
            { name: '预览SQL', key: "SQL" },
            { name: '服务发布', key: "release" }].map((v, index) => {
               let title = []
               if (index > 0) {
                  title.push(<div style={{ width: '14%', border: '1px solid #0000004a' }}></div>)
               }
               title.push(<div style={{ width: '14%', color: activeKey == v.key ? '#1e6ee5' : "", }}>
                  <Avatar style={{
                     backgroundColor: activeKey == v.key ? "rgb(30 110 229 / 74%)" : 'rgb(200 192 185)'
                  }}
                     size="large" icon={index + 1} />
                  {v.name}
               </div>)
               return title
            })}
         </div>
         <Tabs activeKey={activeKey} onChange={v => {
            setActiveKeyl(v)
         }} >


            <TabPane key="field">
               <div style={{ fontSize: 20, fontWeight: 600 }}>选择字段</div>
               {/* <div style={{ marginLeft: 20 }}> */}
               <Checkbox indeterminate={indeterminate} style={{ margin: '20px 40px' }} onChange={e => {
                  setFiedValue(e.target.checked ? fieldList : []);
                  setIndeterminate(e.target.checked);
               }}>
                  全选
               </Checkbox>
               <div style={{ display: 'flex', marginLeft: 40 }}>
                  <div style={{ marginRight: 8 }}>字段:</div>
                  <CheckboxGroup options={fieldList} value={fieldValue} onChange={v => {
                     setFiedValue(v)
                     if (v?.length == fieldList?.length) {
                        setIndeterminate(true)
                     } else {
                        setIndeterminate(false)
                     }
                  }} />
               </div>
            </TabPane>


            <TabPane key="condition">
               <div style={{ fontSize: 20, margin: '20px 0', fontWeight: 600 }}>配置条件：</div>
               {fromData?.map((f, index) => {
                  return <div key={'key' + index} style={{ display: 'flex', marginBottom: 16 }}>
                     <Select
                        style={{ width: 200, marginRight: 10 }} value={f.value1 || null}
                        placeholder="请选择字段"
                        onChange={v => {
                           fromData?.splice(index, 1, { value1: v, value2: f.value2, value3: f.value3 })
                           setFromData([...fromData])
                        }}
                        options={fieldValue?.map(d => ({ value: d, label: d })) || []}
                        allowClear
                     />
                     <Select
                        style={{ width: 200, marginRight: 10 }} value={f.value2 || null}
                        placeholder="请选择条件"
                        onChange={v => {
                           fromData?.splice(index, 1, { value1: f.value1, value2: v, value3: f.value3 })
                           setFromData([...fromData])
                        }}
                        options={operator}
                        allowClear
                     />
                     <Input
                        style={{ width: 200, marginRight: 10 }} value={f.value3}
                        placeholder="请输入值"
                        onChange={v => {
                           fromData?.splice(index, 1, { value1: f.value1, value2: f.value2, value3: v?.target?.value })
                           setFromData([...fromData])
                        }}
                        allowClear
                     />
                     {index == 0 ?
                        <PlusCircleOutlined style={{ fontSize: 20, marginTop: 6 }} onClick={() => {
                           fromData?.splice(index, 0, { value1: '', value2: '', value3: '' })
                           setFromData([...fromData])
                        }} />
                        : <MinusCircleOutlined style={{ fontSize: 20, marginTop: 6 }} onClick={() => {
                           fromData?.splice(index, 1)
                           setFromData([...fromData])
                        }} />
                     }
                  </div>
               })}
            </TabPane>

            <TabPane key="SQL">
               <div style={{ fontSize: 20, marginBottom: 20, fontWeight: 600, display: 'flex', justifyContent: 'space-between' }}>预览SQL：<Button onClick={() => {

                  console.log(editData);
                  console.log(database);
                  console.log(fromData);
                  let whereOption = []
                  fromData.map(s => {
                     whereOption.push(`${editData?.code}.${s.value1} ${s.value2} ${s.value3}`);
                  })

                  let sqlData = `SELECT *  FROM ${editData?.code}  ${fromData.length ? 'WHERE ' + whereOption.join(' AND ') : ''}`

                  setSql(sqlData)
               }}>生成SQL</Button></div>
               <TextArea value={sql} autoSize={{ minRows: 5 }} disabled={true} />


            </TabPane>
            <TabPane key="release">
               <div style={{ fontSize: 20, marginBottom: 10, fontWeight: 600 }}>服务发布：</div>
               <div style={{ display: 'flex' }}>接口名称：<Input style={{ width: 180 }} placeholder='请输入' /></div>
               <div style={{ display: 'flex', margin: '10px 0 10px 30px' }}>URL： <Select
                  style={{ width: 200, marginRight: 10 }}
                  onChange={v => {

                  }}
                  defaultValue={"GET"}
                  options={[{ value: "GET", label: "GET" },
                  { value: "POST", label: "POST" },
                  { value: "PUT", label: "PUT" },
                  { value: "DEL", label: "DEL" },]}
                  allowClear
               />
                  <Input style={{ width: 180, marginLeft: 20 }} placeholder='请输入' />
               </div>
               <div style={{ display: 'flex', marginLeft: 20 }}>返回值：
                  <div style={{ display: 'flex', width: 310, flexDirection: 'column', alignItems: 'center' }}>
                     <div style={{ display: 'flex' }}>
                        <div style={{ width: 100, border: '1px solid #dcc', textAlign: 'center' }}>名称</div>
                        <div style={{ width: 100, border: '1px solid #dcc', textAlign: 'center' }}>意义</div>
                        <div style={{ width: 100, border: '1px solid #dcc', textAlign: 'center' }}>说明</div>
                     </div>
                     {fieldData?.map((s, index) => {
                        return <div key={'fieldData' + index} style={{ display: 'flex' }}>
                           <div style={{ width: 100, border: '1px solid #dcc', textAlign: 'center' }}>{s.code}</div>
                           <div style={{ width: 100, border: '1px solid #dcc', textAlign: 'center' }}>{s.name}</div>
                           <div style={{ width: 100, border: '1px solid #dcc', textAlign: 'center' }}>{s.type}</div>
                        </div>
                     })}
                  </div>
               </div>
            </TabPane>
         </Tabs >


         <div style={{ display: 'flex', justifyContent: 'flex-end', marginTop: 20 }}>
            {activeKey == 'condition' || activeKey == 'SQL' || activeKey == 'release' ? <Button type="primary" onClick={() => {
               if (activeKey == 'condition') {
                  setActiveKeyl('field')
               } else if (activeKey == 'SQL') {
                  setActiveKeyl('condition')
               } else if (activeKey == 'release') {
                  setActiveKeyl('SQL')
               }
            }}>上一步</Button> : ""}
            {activeKey == 'condition' || activeKey == 'SQL' || activeKey == 'field' ? <Button style={{ marginLeft: 10 }} type="primary" onClick={() => {
               if (activeKey == 'field') {
                  setActiveKeyl('condition')
               } else if (activeKey == 'condition') {
                  setActiveKeyl('SQL')
               } else if (activeKey == 'SQL') {
                  setActiveKeyl('release')
               }
            }}>下一步</Button> : ""}
            {activeKey == 'release' ? <Button type="primary" style={{ marginLeft: 10 }} onClick={() => {

            }}>完成  </Button> : ""}
            <Button style={{ marginLeft: 10 }} onClick={() => onCancel()}>取消</Button>
         </div>

      </Modal >
   )
}
function mapStateToProps (state) {
   const { global, auth, } = state;
   return {
      user: auth.user,
      actions: global.actions,
      clientHeight: global.clientHeight,
   };
}
export default connect(mapStateToProps)(ReleaseModal)