import React, { useEffect, useState, useRef } from 'react';
import { Switch, Button, Message, Spin, Modal } from 'antd';
// import axios from 'axios';

import BaseForm from '@/components/BaseForm/index';
import { getApkNameAndDate, SaveMobileApk } from '@/services/appConfig/api';
import { getMobileFiles } from '@/services/mobileConfig/api';

import styles from './otherConfig.less';

// const JSON_BASE = `${
//   location.origin
// }/cityinterface/rest/services/filedownload.svc/download/BufFile/Mobile/APK/`;

export default props => {
  console.log(props);
  const { clientName } = props;
  const items = [
    {
      label: '更新描述',
      dataIndex: 'describe',
      rules: [
        {
          required: true,
          message: '请输入apk的更新描述',
        },
      ],
      formType: 'INPUT',
    },
    {
      label: '强制更新',
      dataIndex: 'forceUpdate',
      initialValue: 1,
      rules: [
        {
          required: true,
          message: '请选择是否强制更新',
        },
      ],
      options: [
        {
          children: '是',
          value: 1,
        },
        {
          children: '否',
          value: 0,
        },
      ],
      formType: 'SINGLE_RADIO',
    },
  ];

  const formEntity = useRef(null);
  const fileEntity = useRef(null);
  const [loading, setLoading] = useState(false); // 显示请求的loading
  const [showModal, setShowModal] = useState(false); // 显示更新的modal
  const [fileData, setFileData] = useState({}); // 获取到的包名和更新时间
  const [file, setFile] = useState({}); // 上传的文件
  const [fileSuccess, setFileSuccess] = useState(false); // 本地文件是否成功
  const [progress, setProgress] = useState(false); // 是否正在保存
  const [upFlag, setUpFlag] = useState(1);

  // const uploadProps = {
  //   name: 'file',
  //   action: `${window.location.origin}${PUBLISH_SERVICE}/FileCenter/UploadSingleFile`,
  //   headers: {
  //     Authorization: 'Bearer ' + localStorage.getItem('token') || '',
  //   },
  //   onChange(info) {
  //     console.log(info)
  //     setFile(info.file);
  //   },
  // };

  const submitForm = () => {
    console.log(formEntity);
    const { validateFields } = formEntity.current;
    validateFields()
      .then(values => {
        const { describe, forceUpdate } = values;
        const formData = new FormData();
        formData.set('description', describe);
        formData.set('isRefresh', !!forceUpdate);
        formData.set('file', file);
        formData.set('client', clientName);
        setProgress(true);
        SaveMobileApk(formData).then(res => {
          console.log(res);
          setProgress(false);
          if (Number(res.code) === 0) {
            Message.success('更新成功');
            setUpFlag(upFlag + 1);
            setShowModal(false);
            init();
          } else {
            // Message.error(res.msg);
          }
        });
      })
      .catch(res => {
        const { errorFields, values } = res;
        console.log(errorFields, values);
      });
  };

  const handleGetForm = form => {
    formEntity.current = form;
  };

  const handleFileChange = e => {
    console.log(e.target.files);
    setFile(e.target.files[0]);
    setFileSuccess(true);
  };

  const handleUpload = () => {
    fileEntity.current.click();
  };

  const init = () => {
    // getApkNameAndDate({})
    //   .then(res => {
    //     const message = res.ResultMessage || '';
    //     const [fileName = '', updateTime] = message.split(',');
    //     setFileData({
    //       fileName,
    //       updateTime,
    //     });
    //     setLoading(false);
    //     // const index = fileName.lastIndexOf('.');
    //     // axios
    //     //   .get(`${JSON_BASE}${fileName.slice(0, index)}.json`, {})
    //     //   .then(res => {
    //     //     console.log(res);
    //     //   });
    //   })
    //   .catch(err => {
    //     Message.error(err);
    //     setLoading(false);
    //   });
  };

  useEffect(() => {
    init();
  }, []);
  useEffect(() => {
    const hurl = window.location.origin;
    getMobileFiles({ client: clientName }).then(res => {
      if (res.code === 0) {
        const { data } = res;
        let fileName =
          data.apkPath.split('\\')[data.apkPath.split('\\').length - 1] || '';
        let apkUrl = `${hurl}/${data.apkPath.replace(/\\/g, '/')}` || '';
        setFileData({
          ...data,
          fileName,
          apkUrl,
        });
      }
    });
  }, [upFlag]);
  return (
    <div className={loading ? styles.loadingContainer : styles.VersionPublish}>
      {loading ? (
        <Spin />
      ) : (
        <>
          <div className={styles.apkbox}>
            <p className={styles.title}>apk版本管理：</p>
            <div className={styles.row}>
              <div className={styles.label}>当前包名：</div>
              <div className="value">
                {fileData.fileName || '未找到对应的包名'}
              </div>
            </div>
            <div className={styles.row}>
              <div className={styles.label}>更新时间：</div>
              <div className="value">{fileData.updateTime}</div>
            </div>
            <div className={styles.row}>
              <div className={styles.label}>下载地址：</div>
              <div className="value">
                <a href={fileData.apkUrl} target="_blank">
                  {fileData.apkUrl}
                </a>
              </div>
            </div>
            <div className={styles.row}>
              <div className={styles.label}>更新描述：</div>
              <div className="value">{fileData.description}</div>
            </div>
            <div className={styles.row}>
              <div className={styles.label}>强制更新：</div>
              <div className="value">
                <Switch checked={fileData.isRefresh} disabled />
              </div>
            </div>
            <Button
              style={{ marginLeft: '115px', marginTop: '20px' }}
              type="primary"
              onClick={() => setShowModal(true)}
            >
              更新
            </Button>
          </div>
        </>
      )}
      {showModal && (
        <Modal
          visible={showModal}
          closable={false}
          maskClosable={false}
          onCancel={() => setShowModal(false)}
          onOk={submitForm}
          confirmLoading={progress}
        >
          <Spin spinning={progress} tip="loading...">
            <BaseForm items={items} getForm={handleGetForm} />
            <div className={styles.row}>
              <div className={`${styles.label2} ${styles.required}`}>
                apk文件：
              </div>
              <input
                ref={f => {
                  fileEntity.current = f;
                }}
                className={styles['file-item']}
                type="file"
                onChange={handleFileChange}
              />
              <Button type="primary" onClick={handleUpload}>
                {fileSuccess ? '上传成功' : '开始上传'}
              </Button>
            </div>
          </Spin>
        </Modal>
      )}
    </div>
  );
};
