// 关联电子健康卡
import React from 'react';
import { List, Button, WhiteSpace, Modal, Toast } from 'antd-mobile';
import { $http } from "containers/config/https";
import './style/index.less';

const Item = List.Item;
const Brief = Item.Brief;
const alert = Modal.alert;

export default class AssociatedCard extends React.Component {
  constructor({ history }) {
    super();
    this.state = {
      adminStatus: true,
      UserData: [], //我的健康卡数据

    }
    this.history = history;
  }

  componentDidMount() {
    this.getAssociatedHealthCard()
  }

  // 查询已关联的健康卡
  getAssociatedHealthCard = () => {
    let data = {
      params: [{

      }]
    }
    $http.post("urlS", this, {
      code: "01030003",
      data: data,
      success: function (res) {
        if (+res.errorCode === 0) {
          this.setState({ UserData: res.rows })
        }
      }
    });
  }

  // 删除已关联的健康卡
  deleteAssociatedHealthCard = (v) => {
    let data = {
      params: [{
        patID: v.patID
      }]
    }
    $http.post("urlS", this, {
      code: "01030007",
      data: data,
      success: function (res) {
        if (+res.errorCode === 0) {
          this.getAssociatedHealthCard();
          Toast.info(res.errorMessage, 3, () => {}, false)
        }
      }
    });
  };

  // 跳转到绑定电子健康卡界面
  handleGoBindingCard = () => {
    this.history.push("/0001/00010003");
  };

  handleAdministration = () => {
    this.setState({ adminStatus: !this.state.adminStatus })
  };

  onClickDetail = (v) => {
    this.history.push({
      pathname: '/0001/00010003',
      query: v,
    });
  }

  handleAddCard = () => {
    // store.dispatch({
    //   type: "isAddAdm",
    //   value: true
    // });
    Toast.info("开发中……", 3, () => {}, false)
  }

  // 返回首页
  handleGoHome = () => {
    this.history.push("/0001/00000001");
  }

  render() {
    let { adminStatus, UserData } = this.state;
    return (
      <div className="electronic-health-card">
        <div className="cssociated-card">
          <div className="mine-card">
            我的健康卡
            <span onClick={this.handleAdministration}>{adminStatus ? "管理" : "完成"}</span>
          </div>
          {UserData instanceof Array&&UserData.length > 0 ? <List>
            {UserData.map((item, index) => {
              return <Item key={index} className="margintop10" extra={<div className="list-item-extra">
                {adminStatus ? <span onClick={() => this.onClickDetail(item)}>选择<i className="iconfont icon-arrow-right font12"></i></span> : <span style={{ color: "#FA5C7C" }}
                  onClick={() => alert('删除后不可恢复', '确认删除吗?', [
                    { text: '取消', onPress: () => console.log('cancel') },
                    { text: '确认', onPress: () => this.deleteAssociatedHealthCard(item) },
                  ])}>删除</span>}
              </div>
              } multipleLine>
                <span className="list-title">{item.patName}</span><Brief>身份证：{item.IDCardNo.slice(0, 4) + '******' + item.IDCardNo.slice(-4)}</Brief>
              </Item>
            })}
          </List> : <div className="no-card">暂无可关联的健康卡。<br />（您可以选择添加就诊人或者回到首页）</div>}
          <div className="margintop24 padding0-18">
            <Button type="primary" onClick={this.handleGoBindingCard}>添加就诊人</Button>
            {/* <WhiteSpace />
            <Button type="ghost" onClick={this.handleAddCard}>添加社保卡</Button> */}
            <WhiteSpace />
            <Button type="ghost" onClick={this.handleGoHome}>返回首页</Button>
          </div>
        </div>
      </div>
    )
  }
}
