// 电子健康卡 / 卡信息
import React from 'react';
import './style/index.less';
import { Tabs, Button, WhiteSpace, Modal } from 'antd-mobile';

const alert = Modal.alert;

export default class CardInformation extends React.Component {
  constructor({history}) {
    super();
    this.history=history;
  }

  // 解绑电子健康卡
  handleUntieCard = (data) => {
    console.log(data)
  }

  render() {
    const tabs = [
      { title: '静态二维码', sub: '1' },
      { title: '动态二维码', sub: '2' },
    ];
    return (
      <div className="electronic-health-card paddingtop10" style={{border: "1px solid #f3f3f3"}}>
        <div>
          <Tabs tabs={tabs}
            initialPage={'1'}
          >
            <div className="tab-content">
              <img alt="静态二维码" src="http://120.24.248.188/protype//penghaifeng/Axure/%E6%99%BA%E6%85%A7%E5%8C%BB%E9%99%A2/images/2_1_1-%E7%94%B5%E5%AD%90%E5%81%A5%E5%BA%B7%E5%8D%A1%E8%AF%A6%E6%83%85/u450.png" />
              <p>就诊时出示此二维码</p>
            </div>
            <div className="tab-content">
              <img alt="动态二维码" src="http://120.24.248.188/protype//penghaifeng/Axure/%E6%99%BA%E6%85%A7%E5%8C%BB%E9%99%A2/images/2_1_1-%E7%94%B5%E5%AD%90%E5%81%A5%E5%BA%B7%E5%8D%A1%E8%AF%A6%E6%83%85/u450.png" />
              <p>就诊时出示此二维码</p>
            </div>
          </Tabs>
        </div>
        <div className="basc-info">
          <div>
            <span>姓名</span>
            <span className="float-right">柿子</span>
          </div>
          <div>
            <span>身份证号</span>
            <span className="float-right">12371923619639162</span>
          </div>
          <div>
            <span>社保卡</span>
            <span className="float-right span-bottom">立即开通</span>
          </div>
          <div>
            <span>就诊卡</span>
            <span className="float-right">0000012312</span>
          </div>
        </div>
        <div className="more-info">
          <span>更多个人信息</span>
          <span className="float-right">手机号、地址等<i className="iconfont icon-arrow-right font12"></i></span>
        </div>
        <div className="padding0-18 margintop24">
          <Button type="primary">进入卡包</Button>
          <WhiteSpace />
          <p className="font14 lineheight24" style={{textAlign: "center", color: "#999"}}><span style={{cursor: "pointer"}} onClick={
            () => alert('删除后不可恢复', '确认删除吗?', [
              { text: '取消', onPress: () => console.log('cancel') },
              { text: '确认', onPress: () => this.handleUntieCard('ok') },
            ])
          }>解绑电子健康卡</span></p>
        </div>
      </div>
    )
  }
}
