// 预约挂号---确认预约
import React from 'react';
import {List, Radio} from 'antd-mobile';
import './style/index.less';
import 'assets/less/common.less';

const RadioItem = Radio.RadioItem;

export default class ConfirmAppointment extends React.Component {
  constructor({history}) {
    super();
    this.state = {
      adminStatus: true,
      visible: false,
      admID: "2",
      radioAction: "1",
      typesOfFeeActive: "1"
    }
    this.history=history;
  }

  componentDidMount() {
    
  }

  // 选择实际就诊人
  handleRadioItemChange = item => {
    this.setState({radioAction: item.value})
  }

  // 费用类型
  handleTypesOfFeeDataChange = item => {
    this.setState({typesOfFeeActive: item.value})
  }

  // 跳转到添加就诊人
  handleGoAddAdm = () => {
    this.history.push("/0002/00030005")
  }

  render() {
    let {radioAction, typesOfFeeActive} = this.state;
    let data = [
      {
        value: "1",
        label: "shizi"
      },
      {
        value: "2",
        label: "want"
      }
    ];

    let typesOfFeeData = [
      {
        value: "1",
        label: "自费"
      },
      {
        value: "2",
        label: "普通市医保"
      }
    ]
    return (
      <div className="electronic-health-card">
        <div className="confirm-appointment-content">
          <div style={{height: "98%", overflow: "auto"}} className="confirm-appointment paddingtop10">
            <div className="header-userinfo">
              <div className="header-userinfo-content">
                <i className="iconfont icon-yonghutouxiang"></i>
                <span>是指标</span>
                副主任医师
              </div>
              <div className="list-baseinfo header-userinfo-list">
                <div>
                  <span>科室</span>
                  <span className="float-right">呼吸内科</span>
                </div>
                <div>
                  <span>时间</span>
                  <span className="float-right list-date-time">11-25 (周一) 下午15:00~16:00</span>
                </div>
              </div>
            </div>
            <List renderHeader={() => <div>选择实际就诊人</div>}>
              {data.map((item, index) => (
                <RadioItem key={index} checked={radioAction === item.value} onChange={() => this.handleRadioItemChange(item)}>
                  {item.label}
                </RadioItem>
              ))}
              <p className="add-user-adm" onClick={this.handleGoAddAdm}><i className="iconfont icon-tianjia"></i>添加就诊人</p>
            </List>
            <List renderHeader={() => <div>费用类型</div>}>
              {typesOfFeeData.map((item, index) => (
                <RadioItem key={index} checked={typesOfFeeActive === item.value} onChange={() => this.handleTypesOfFeeDataChange(item)}>
                  {item.label}
                </RadioItem>
              ))}
            </List>
          </div>
          <div className="to-pay" >
            <span>需交费：<i>¥400.00</i></span>
            <span>去结算</span>
          </div>
        </div>
      </div>
    )
  }
}