import React, { PureComponent } from 'react'
import { Modal, Row, Col } from 'antd'
import EnDash from '../EnDash'

import Style from './style.less'
import HotBlock from '../HotBlock'

const dataset = [
  {
    label: '(0)',
    value: 0,
  },
  {
    label: '(1)',
    value: 1,
  },
  {
    label: '(2)',
    value: 2,
  },
  {
    label: '(3)',
    value: 3,
  },
  {
    label: '(4)',
    value: 4,
  },
  {
    label: '(5)',
    value: 5,
  },
  {
    label: '(6~10)',
    value: 8,
  },
  {
    label: '(11~20)',
    value: 15,
  },
  {
    label: '(21~30)',
    value: 25,
  },
  {
    label: '(31~40)',
    value: 35,
  },
  {
    label: '(41~50)',
    value: 45,
  },
  {
    label: '(51~100)',
    value: 80,
  },
  {
    label: '(101~200)',
    value: 150,
  },
  {
    label: '(200以上)',
    value: 201,
  },
]

function Cell(props) {
  return (
    <Row type="flex" align="middle" gutter={20}>
      <Col span={2}>{props.left}</Col>
      <Col span={12}><EnDash /></Col>
      <Col span={6}>{props.right}</Col>
    </Row>
  )
}

export default function HelpDoc(props) {
  return (
    <Modal footer={null} title="相关说明" visible={props.visible} onCancel={props.onCancel} width={800}>
      <div className={Style.article}>
        <div className={Style.section}>
          <div className={Style.title}>1.图例解释：</div>
          <div>
            <Cell left="1号楼" right="楼栋/幢" />
            <Cell left="2单元" right="单元" />
            <Cell left="3楼" right="楼层" />
            <Cell left="301" right="房号" />
            <Cell left="1人" right="预选人数" />
            <Cell left="234万" right="价格" />
            <Cell left="A户型" right="户型名" />
          </div>
        </div>
        <div className={Style.section}>
          <div className={Style.title}>2.预选人数（热度）：</div>
          <div>每有一位客户预选此房源，热度自动增加1，热度越大说明想购买此房源的用户越多，认筹摇号购买难度越大。</div>
        </div>
        <div className={Style.section}>
          <div className={Style.title}>3.热度指标:</div>
          <div className={Style.subtitle}>颜色越深代表热度越高。黑底白字代表房源未发布,未发布房源用户不会看到。</div>
          <div className={Style.flex}>
            {
              dataset.map((block) => (<div className={Style['flex-item']} key={block.value}><HotBlock number={block.value}>{block.label}</HotBlock></div>))
            }
          </div>
        </div>
      </div>
    </Modal>
  );
}