import React, { Component } from 'react';
import { Button } from '@icedesign/base';
import { Link } from 'react-router';
import './PriceCard.scss';

export default class PriceCard extends Component {
  static displayName = 'PriceCard';

  static propTypes = {};

  static defaultProps = {};

  constructor(props) {
    super(props);
    this.state = {};
  }

  // ICE: React Component 的生命周期
  // http://ice.alibaba-inc.com/docs/guide/intro-react#React-组件的生命周期
  componentWillMount() {}

  componentDidMount() {}

  componentWillReceiveProps(nextProps, nextContext) {}

  shouldComponentUpdate(nextProps, nextState) {
    return true;
  }

  componentWillUnmount() {}

  render() {
    const iceworks = this.props.iceworks;

    return (
      <div className="price-card">
        <div style={styles.container}>
          <div style={styles.items}>
            <div style={styles.item}>
              <div style={styles.head}>
                <h3 style={styles.title}>无需配置 下载即用</h3>
                <p style={styles.description}>
                  我们已经将淘宝前端工程最佳实践浓缩到一个客户端里，无需配置任何
                  node、npm、webpack 等，点击鼠标即可快速开始开发。
                </p>
              </div>
              <div style={styles.link}>
                <Button
                  shape="text"
                  onClick={() => {
                    window.location = iceworks['darwin-x64-prod'].install;
                  }}
                >
                  马上下载 iceworks{' '}
                </Button>
              </div>
            </div>
            <div style={styles.item}>
              <div style={styles.head}>
                <h3 style={styles.title}>高效代码复用</h3>
                <p style={styles.description}>
                  在淘宝使用超过一年的高质量、稳定组件，附带数百个淘宝前端开发的可复用代码片段，可视化的组装成你的页面辅助你二次开发。
                </p>
              </div>
              <div style={styles.link}>
                <Link to="/docs/best-practice">
                  <Button shape="text">了解最佳开发流程</Button>
                </Link>
              </div>
            </div>
            <div style={{ ...styles.item, ...styles.rowLastItem }}>
              <div style={styles.head}>
                <h3 style={styles.title}>ICE Design</h3>
                <p style={styles.description}>
                  唯有打破才能突破。ICE
                  Design，这是淘宝设计师对于中后台领域的设计风格定义，为您带来独特的中后台用户体验。
                </p>
              </div>
              <div style={styles.link}>
                <Link to="/docs/ice-design">
                  <Button shape="text">了解 ICE Design</Button>
                </Link>
              </div>
            </div>
          </div>
        </div>
      </div>
    );
  }
}

const styles = {
  container: {
    background:
      'url(https://img.alicdn.com/tfs/TB1JGoDi3vD8KJjy0FlXXagBFXa-5040-2811.png)',
    backgroundSize: 'cover',
  },
  items: {
    display: 'flex',
    flexWrap: 'wrap',
    padding: '120px 0',
    width: '1080px',
    margin: '0 auto',
  },
  item: {
    width: '28%',
    marginRight: '8%',
    background: '#FAFAFA',
    borderRadius: '6px',
    paddingBottom: '50px',
  },
  rowLastItem: {
    marginRight: 0,
  },
  head: {
    padding: '30px 0',
    textAlign: 'center',
    borderRadius: '6px 6px 0 0',
  },
  title: {
    margin: '0 0 5px',
    fontWeight: 'bold',
    fontSize: '20px',
  },
  price: {
    margin: '0',
    fontWeight: 'bold',
    fontSize: '22px',
  },
  info: {
    display: 'flex',
    flexDirection: 'column',
    alignItems: 'center',
  },
  description: {
    margin: '20px auto',
    lineHeight: '22px',
    textAlign: 'center',
    width: '60%',
    color: '#999',
  },
  link: {
    textAlign: 'center',
  },
};