// checkbox列表公共组件
import React from 'react';
import { List, Checkbox } from 'antd-mobile';

const Item = List.Item;
const CheckboxItem = Checkbox.CheckboxItem;

export default class ListCheckboxItem extends React.Component {
  constructor() {
    super(); 
    let userData = localStorage.getItem("userData") ? JSON.parse(localStorage.getItem("userData")) : {};
    this.state = {
      userData
    }
  }

  // 选择需要确认的药品
  handleCheckboxChange = item => {
    let {listData} = this.props;
    for(let i = 0; i < listData.length; i++) {
      if (listData[i].id === item.id) {
        listData[i].checked = !listData[i].checked;
        break;
      }
    }
    this.props.getCheckboxData(listData);
  }

  // 跳转到处方详情
  goPrescriptionDetails = (routerPath, item) => {
    this.props.history.push({
      pathname: routerPath,
      state: {...item}
    })
  }
  
  render() {
    let {userData} = this.state;
    let {listData, takeMedicine, mode} = this.props;
    return (
      <div>
        {listData && listData.map((item, index) => (
          <CheckboxItem key={index} checked={item.checked} onChange={() => this.handleCheckboxChange(item)}>
            <div>
              <Item className="codt-top-item" extra={<span>{item.statusDesc}</span>}>{userData && userData.hospDesc ? userData.hospDesc + ' / ' : ""}{item.ordLocDesc} / {item.patName}</Item>
              <Item className="codt-center-item">
                <p className="ellipsis">
                  {item.drugList && item.drugList.map((drugItem, drugIndex) => {
                    return <span key={drugIndex}>{drugItem&& drugItem.durgDesc ? drugItem.durgDesc : ""}{(drugItem && drugItem.qty ? " (" + drugItem.qty : "") + (drugItem && drugItem.qtyUnitDesc ? drugItem.qtyUnitDesc + ")；" : "")}</span>
                  })}
                </p>
                <p className="odt-center-item-usage">{(item && item.useage ? item.useage : '')}</p>
              </Item>
              <Item className="codt-mode" style={{display: mode ? 'flex' : 'none'}} extra={<span>{item.logisticsFlag === 'Y' ? "物流配送" : "自提"}</span>}>取药方式</Item>
              <Item extra={<div className="codt-last-item-btn"><span onClick={() => this.goPrescriptionDetails('/0001/00020014', item)}>处方详情</span><span onClick={() => this.goPrescriptionDetails('/0001/00020013', item)} style={{display: takeMedicine ? 'inline-block' : 'none'}}>取药详情</span></div>} className="codt-last-item">开方时间：{item.prescDate}</Item>
            </div>
          </CheckboxItem>
        ))}
      </div>
    )
  }
}