import { useEffect, useState } from 'react';
import styles from './index.less';
import { history } from 'umi'
import { Button, ConfigProvider, Form, Input, Modal, Radio, message } from 'antd';
import ButtonComp from '@/components/ButtonComp';
import theme from '@/styles/antd.theme';
import { getPlugCordResult } from '@/services/api';
import { validateNumber } from '@/utils/validate';
import ClearInfoDialog from '@/components/ClearInfoDialog';

// 首页(目前无用了)
export default function IndexPage() {
  // 是否认证通过
  const [isAuth, setIsAuth] = useState(true);
  const [visibility, setVisibility] = useState<boolean>(true);
  const [form] = Form.useForm();
  const [loading, setLoading] = useState(false);
  const [tishiDialog, setTishiDialog] = useState(false);

  const list = [
    { name: '01MMD049安装.exe', img: '', url: '/installExe/offLine' },
    { name: '初装系统', img: '', url: '/initialSystem' },
    { name: '核心管理系统', img: '', url: '/coreSystemEntrance/hx1' },
    { name: '需要导出的文件', img: '', url: null },
    { name: '生成导出的文件', img: '', url: null },
  ]

  useEffect(() => {
    // let is_auth: any = localStorage.getItem('is_auth');
    // if (is_auth) {
    //   setIsAuth(true)
    // } else {
    //   initForm();
    //   setVisibility(true);
    // }
  }, [])


  const initForm = () => {
    form.setFieldsValue({
      sysType: 49,
      workbenchNumber: ''
    })
  }

  const onFinish = async (data: any) => {
    setLoading(true)
    await getPlugCordResult(data).then(res => {
      // if (res?.result == 'success' && JSON.parse(res?.data[0]).data) {
      //   setIsAuth(true)
      //   localStorage.setItem('is_auth', JSON.stringify(true));
      //   message.success("系统连接检测成功!")
      // } else if (!JSON.parse(res?.data[0]).data) {
      //   message.error("系统连接检测失败!")
      // }
      if (res?.result == 'success') {
        setIsAuth(true)
        localStorage.setItem('is_auth', JSON.stringify(true));
        message.success("系统连接检测成功!")
      } else if (!JSON.parse(res?.data[0]).data) {
        message.error("系统连接检测失败!")
      }
    })
    setLoading(false)
  };

  return (
    <ConfigProvider theme={theme}>
      <div className={styles.index_con}>
        {
          isAuth ?
            list.map((item, index) => {
              return (
                <div className={styles.item_warp} key={index} onClick={() => {
                  if (item.url) {
                    history.push(item.url)
                  } else if (item.name == '需要导出的文件') {

                  } else if (item.name == '生成导出的文件') {

                  }
                }}>
                  <div className={styles.img}></div>
                  <div>{item.name}</div>
                </div>
              )
            }) :
            <Modal
              title={'系统连接检测'}
              open={visibility}
              centered
              width={500}
              closeIcon={false}
              footer={null}
              maskClosable={false}
            >
              <Form form={form} layout={'inline'} onFinish={onFinish}>
                <Form.Item name="sysType" label="系统类型" style={{ marginBottom: 15 }} rules={[
                  { required: true, message: '请选择系统类型' }
                ]}>
                  <Radio.Group style={{}}>
                    <Radio value={49} style={{ margin: "0 20px 0 5px" }}> 49 </Radio>
                    <Radio value={52}> 52 </Radio>
                  </Radio.Group>
                </Form.Item>
                <Form.Item name="workbenchNumber" label="工作台编号" rules={[
                  { required: true, message: '请输入工作台编号' },
                  { validator: validateNumber }
                ]}>
                  <Input style={{ width: 260, marginLeft: 5 }} placeholder="请输入工作台编号" />
                </Form.Item>
              </Form>
              <div className='flex_jE mt20'>
                <ButtonComp text={'连接检测'} loading={loading} onClick={() => form.submit()} />
              </div>
            </Modal>
        }
      </div>
    </ConfigProvider>
  );
}
