text: import { Menu, Message, SplitButton } from '@alifd/next';
  import React, { useState } from 'react';
  import styles from './index.module.scss';
  
  const descriptor = {
    'darwin-x64-prod': {
      download: 'For MacOS',
      env: 'macOS 10.9 及以上',
    },
    'win-x64-prod': {
      download: 'For Windows X64',
      env: '64位，Win 7 及以上',
    },
  };
  
  export default function ReleaseIntro() {
    const [osType, setOsType] = useState('darwin-x64-prod');
    const [loading] = useState(false);
    const [data] = useState({
      'darwin-x64-prod': {
        name: 'iceworks',
        description: 'ICE Desktop Application.',
        install:
          'http://iceworks.oss-cn-hangzhou.aliyuncs.com/mac/Iceworks-1.6.2.dmg',
        version: '1.6.2',
        releaseDate: '2018-04-23',
      },
      'win-x64-prod': {
        name: 'iceworks',
        description: 'ICE Desktop Application.',
        install:
          'http://iceworks.oss-cn-hangzhou.aliyuncs.com/win/Iceworks-setup-1.6.2.exe',
        version: '1.6.2',
        releaseDate: '2018-04-23',
      },
    });
  
    const changeSelectMenu = (select) => {
      setOsType(select);
    };
  
    const download = () => {
      if (loading) {
        Message.success('请稍等');
      } else {
        // 开始下载
        location.href = data[osType].install;
      }
    };
  
    const menu = (
      <Menu>
        <Menu.Item
          onClick={() => changeSelectMenu('darwin-x64-prod')}
          key="darwin-x64-prod"
        >
          For MacOS 版本
        </Menu.Item>
        <Menu.Item
          onClick={() => changeSelectMenu('win-x64-prod')}
          key="win-x64-prod"
        >
          For Windows 版本(64位)
        </Menu.Item>
      </Menu>
    );
    const ver = loading ? '0' : data[osType].version;
    const subTitle = ver[0] === '0' ? 'Beta' : '';
  
    return (
      <div className={styles.wrapperContainer}>
        <div className={styles.bgImage2} />
        <div className={styles.wrapper}>
          <div className={styles.bgImage}>
            <div className={styles.bgImageMask} />
          </div>
          <div className={styles.wrapperBody}>
            <div className={styles.softwareIntro}>
              <div className={styles.title}>
                Iceworks <span className={styles.subtitle}>{subTitle}</span>
              </div>
              <div className={styles.slogan}>让前端工程变的轻松便捷</div>
              <div className={styles.box}>
                <SplitButton
                  menu={menu}
                  onClick={download}
                  size="large"
                  className="iceworks-download-btn">
                  立即下载
                  <span className={styles.boxspan1}>
                    {descriptor[osType].download}
                  </span>
                </SplitButton>
              </div>
              {loading ? null : (
                <div className={styles.softwareDetail}>
                  <div className={styles.version}>
                    <span className={styles.boxspan2}>
                      {data[osType].version}
                    </span>
                    <span className={styles.boxspan3}>
                      当前版本
                    </span>
                  </div>
  
                  <div className={styles.separator} />
                  <div className={styles.history}>
                    <span className={styles.soana}>
                      {data[osType].releaseDate}
                    </span>
                    <span className={styles.boxspan4}>
                      发布日期
                    </span>
                  </div>
                </div>
              )}
              <div className={styles.box2}>
                <div className={styles.box3}>
                  运行环境：{descriptor[osType].env}
                </div>
              </div>
              <div className={styles.box2}>
                <a className={styles.box2a} href="#get-started">
                  立即开始
                </a>
              </div>
            </div>
            <div className={styles.software} />
          </div>
        </div>
      </div>
    );
  }
  