import React, { Component } from 'react'
import './index.scss'
import CardWrapper from '@/component/CardWrapper'
import InfoHeader from '@/component/InfoHeader'
import LabelInput from '@/ui-component/LabelInput'
import { Row, Col, Select, Input } from 'antd'
import addressData from '@/data/cityData'
const Option = Select.Option
const provinces = Object.keys(addressData)
export default class AddressInfo extends Component {
  render () {
    return (
      <div className="address-info">
        <InfoHeader title="地址信息" />
        <CardWrapper>
          <Row>
            <Col span={24}>
              <LabelInput>现住址</LabelInput>
              <Select
                defaultValue={provinces[0]}
                placeholder="请选择省"
              >
                {provinces.map((item, index) => (
                  <Option key={index} value={item}>
                    {item}
                  </Option>
                ))}
              </Select>

              <Select defaultValue="北京" placeholder="请选择市">
                <Option value="北京">北京</Option>
              </Select>

              <Select defaultValue="Test" placeholder="请选择区">
                <Option value="Test">Test</Option>
              </Select>

              <Input placeholder="从区/县后开始填写，并详细至门牌号" />
            </Col>
          </Row>

          <Row>
            <Col span={24}>
              <LabelInput>身份证地址</LabelInput>
              <Select
                defaultValue={provinces[0]}
                placeholder="请选择省"
              >
                {provinces.map((item, index) => (
                  <Option key={index} value={item}>
                    {item}
                  </Option>
                ))}
              </Select>

              <Select defaultValue="北京" placeholder="请选择市">
                <Option value="北京">北京</Option>
              </Select>

              <Select defaultValue="Test" placeholder="请选择区">
                <Option value="Test">Test</Option>
              </Select>

              <Input placeholder="从区/县后开始填写，并详细至门牌号" />
            </Col>
          </Row>
        </CardWrapper>
      </div>
    )
  }
}
