// 就诊卡详情
import React from 'react';
import { Picker, InputItem, List, DatePicker, Button, Toast, Modal } from 'antd-mobile';
import { createForm } from 'rc-form';
import { $http } from "containers/config/https";
import Moment from 'moment';
import './style/index.less';
import { Util } from 'tools';
import store from "store";

import AddressSelectionControl from 'pages/common/component/AddressSelectionControl.jsx';

const alert = Modal.alert;

class VisitCardDetails extends React.Component {
  constructor({ history }) {
    super();
    let userData = localStorage.getItem("userData") ? JSON.parse(localStorage.getItem("userData")) : {};
    this.state = {
      userData,
      cardDetails: {},
      selectData: {},
      saveStatus: false,
      verificationLocation: false,
      nativeAddress: {},
      regAddress: {},
      locationAddress: {},
      birthAddress: {},
      eContactAddress: {}
    }
    this.history = history;
  }

  componentDidMount() {
    this.getSelectData();
    this.getCardDetails();
  }

  componentWillUnmount() {
    // 组件销毁前将静止让setState修改state的状态
    this.setState = (state, callback) => { return; }
  }

  // 获取绑卡界面下拉框数据
  getSelectData = () => {
    let data = {
      params: [{}]
    }
    $http.post("urlS", this, {
      code: "01030011",
      data: data,
      success: function (res) {
        if (+res.errorCode === 0) {
          this.setState({ selectData: res })
        }
      }
    });
  }

  // 查看就诊卡详情
  getCardDetails = () => {
    let paramsObj = this.props.match && this.props.match.params ? this.props.match.params : {}
    let data = {
      params: [{
        patID: paramsObj.id
      }]
    }
    $http.post("urlS", this, {
      code: "01030002",
      data: data,
      success: function (res) {
        if (+res.errorCode === 0) {
          res.result.data.eContacta = (res.result.data.eContactCityDesc ? (res.result.data.eContactProvinceDesc + "-") : res.result.data.eContactProvinceDesc) + (res.result.data.eContactAreaDesc ? (res.result.data.eContactCityDesc + "-") : res.result.data.eContactCityDesc) + (res.result.data.eContactVillageDesc ? (res.result.data.eContactVillageDesc + "-") : res.result.data.eContactAreaDesc) + res.result.data.eContactVillageDesc;
          res.result.data.native = (res.result.data.nativeCityDesc ? (res.result.data.nativeProvinceDesc + "-") : res.result.data.nativeProvinceDesc) + (res.result.data.nativeAreaDesc ? (res.result.data.nativeCityDesc + "-") : res.result.data.nativeCityDesc) + res.result.data.nativeAreaDesc;
          //res.result.data.native = (res.result.data.nativeCityDesc ? (res.result.data.nativeProvinceDesc + "-") : res.result.data.nativeProvinceDesc) + res.result.data.nativeCityDesc
          res.result.data.location = (res.result.data.cityDesc ? (res.result.data.provinceDesc + "-") : res.result.data.provinceDesc) + (res.result.data.areaDesc ? (res.result.data.cityDesc + "-") : res.result.data.cityDesc) + (res.result.data.villageDesc ? (res.result.data.areaDesc + "-") : res.result.data.areaDesc) + res.result.data.villageDesc;
          res.result.data.birth = (res.result.data.birthCityDesc ? (res.result.data.birthProvinceDesc + "-") : res.result.data.birthProvinceDesc) + (res.result.data.birthAreaDesc ? (res.result.data.birthCityDesc + "-") : res.result.data.birthCityDesc) + res.result.data.birthAreaDesc;
          //res.result.data.birth = (res.result.data.birthCityDesc ? (res.result.data.birthProvinceDesc + "-") : res.result.data.birthProvinceDesc) + (res.result.data.birthAreaDesc ? (res.result.data.birthCityDesc + "-") : res.result.data.birthCityDesc) + res.result.data.birthAreaDesc;
          res.result.data.reg = (res.result.data.regCityDesc ? (res.result.data.regProvinceDesc + "-") : res.result.data.regProvinceDesc) + (res.result.data.regAreaDesc ? (res.result.data.regCityDesc + "-") : res.result.data.regCityDesc) + (res.result.data.regVillageDesc ? (res.result.data.regVillageDesc + "-") : res.result.data.regAreaDesc) + res.result.data.regVillageDesc;
          this.setState({ cardDetails: res.result.data })
        }
      }
    });
  }

  // 保存
  handleSave = () => {
    let paramsObj = this.props.match && this.props.match.params ? this.props.match.params : {}
    let { cardDetails } = this.state;
    this.props.form.validateFields((error, values) => {
      if (!error) {
        this.setState({ errorData: {} })
        let obj = { ...values };

        obj.patEContactCredTypeIDNo = obj.EContactIDNo && obj.EContactIDNo.length > 0 ? obj.EContactIDNo : "";
        obj.patEContact = obj.EContact && obj.EContact.length > 0 ? obj.EContact : "";
        obj.eContactAddress = obj.eContactAddress && obj.eContactAddress.length > 0 ? obj.eContactAddress : "";
        obj.companyTel = obj.companyTel && obj.companyTel.length > 0 ? obj.companyTel : "";
        obj.company = obj.company && obj.company.length > 0 ? obj.company : "";
        obj.occupationID = obj.occupationID && obj.occupationID.length > 0 ? obj.occupationID[0] : "";
        obj.maritalID = obj.maritalID && obj.maritalID.length > 0 ? obj.maritalID[0] : "";
        obj.regAddress = obj.regAddress && obj.regAddress.length > 0 ? obj.regAddress : "";
        obj.nationID = obj.nationID && obj.nationID.length > 0 ? obj.nationID[0] : "";
        obj.countryID = obj.countryID && obj.countryID.length > 0 ? obj.countryID[0] : "";
        obj.relationID = obj.relationID && obj.relationID.length > 0 ? obj.relationID[0] : "";
        obj.sexID = obj.sexID && obj.sexID.length > 0 ? obj.sexID[0] : "";
        obj.patEContactCredTypeID = obj.EContactCredTypeID && obj.EContactCredTypeID.length > 0 ? obj.EContactCredTypeID[0] : "";
        obj.patName = cardDetails && cardDetails.patName ? cardDetails.patName : "";
        obj.idCardNo = cardDetails && cardDetails.idCardNo ? cardDetails.idCardNo : "";
        obj.mobile = cardDetails && cardDetails.mobile ? cardDetails.mobile : "";
        obj.patNo = cardDetails && cardDetails.patNo ? cardDetails.patNo : "";
        obj.patEContactMobile = obj.EContactMobile ? Util.removeSpacesFromString(obj.EContactMobile) : "";
        obj.provinceID = cardDetails && cardDetails.provID ? cardDetails.provID : (cardDetails && cardDetails.provinceID ? cardDetails.provinceID : "");
        obj.cityID = cardDetails && cardDetails.cityID ? cardDetails.cityID : "";
        obj.areaID = cardDetails && cardDetails.countryID ? cardDetails.countryID : (cardDetails && cardDetails.areaID ? cardDetails.areaID : "");
        obj.villageID = cardDetails && cardDetails.regionID ? cardDetails.regionID : (cardDetails && cardDetails.villageID ? cardDetails.villageID : "");
        obj.birthDate = obj.birthDate ? Moment(obj.birthDate).format("YYYY-MM-DD") : "";
        obj.patID = paramsObj.id;
        //籍贯
        obj.nativeProvinceID = cardDetails && cardDetails.nativeProvinceID ? cardDetails.nativeProvinceID : "";
        obj.nativeCityID = cardDetails && cardDetails.nativeCityID ? cardDetails.nativeCityID : "";
        obj.nativeAreaID = cardDetails && cardDetails.nativeAreaID ? cardDetails.nativeAreaID : "";
        //obj.nativeVillageID = cardDetails && cardDetails.nativeVillageID ? cardDetails.nativeVillageID : "";
        //出生地
        obj.birthProvinceID = cardDetails && cardDetails.birthProvinceID ? cardDetails.birthProvinceID : "";
        obj.birthCityID = cardDetails && cardDetails.birthCityID ? cardDetails.birthCityID : "";
        obj.birthAreaID = cardDetails && cardDetails.birthAreaID ? cardDetails.birthAreaID : "";
        //obj.birthVillageID = cardDetails && cardDetails.birthVillageID ? cardDetails.birthVillageID : "";
        //户口地址
        obj.regProvinceID = cardDetails && cardDetails.regProvinceID ? cardDetails.regProvinceID : "";
        obj.regCityID = cardDetails && cardDetails.regCityID ? cardDetails.regCityID : "";
        obj.regAreaID = cardDetails && cardDetails.regAreaID ? cardDetails.regAreaID : "";
        obj.regVillageID = cardDetails && cardDetails.regVillageID ? cardDetails.regVillageID : "";
        //紧急联系人地址
        obj.eContactProvinceID = cardDetails && cardDetails.eContactProvinceID ? cardDetails.eContactProvinceID : "";
        obj.eContactCityID = cardDetails && cardDetails.eContactCityID ? cardDetails.eContactCityID : "";
        obj.eContactAreaID = cardDetails && cardDetails.eContactAreaID ? cardDetails.eContactAreaID : "";
        obj.eContactVillageID = cardDetails && cardDetails.eContactVillageID ? cardDetails.eContactVillageID : "";
        let data = {
          params: [{
            ...obj
          }]
        }
        $http.post("urlS", this, {
          code: "01030005",
          data: data,
          success: function (res) {
            Toast.success(res.errorMessage, 3, () => { }, false);
            if (+res.errorCode === 0) {
              this.history.goBack();
            }
          }
        });
      } else {
        Toast.info(error, 3, () => { }, false)
      }
    });
  }

  // 删除
  deleteData = () => {
    let { userData } = this.state;
    let paramsObj = this.props.match && this.props.match.params ? this.props.match.params : {}
    let data = {
      params: [{
        patID: paramsObj.id
      }]
    }
    $http.post("urlS", this, {
      code: "01030006",
      data: data,
      success: function (res) {
        Toast.info(res.errorMessage, 3, () => { }, false);
        if (+res.errorCode === 0) {
          if (userData && userData.patID === paramsObj.id) {
            window.localStorage.setItem('userData', JSON.stringify({
              ...userData,
              patID: "",
              patDesc: "",
              idCardNo: "",
              hisPatNo: "",
              hisPatID: "",
              imUserID: ""
            }));
          }
          window.sessionStorage.setItem('admSelectData', []);
          store.dispatch({
            type: "isAddAdm",
            value: true
          });
          store.dispatch({
            type: "isReRenderHead",
            value: true
          });
          this.history.goBack();
        }
      },
      error: function (error) {
        Toast.info(error, 3, () => { }, false);
      }
    });
  }

  // 手机号验证
  handleVerificationMobile = (rule, value, callback) => {
    if (value && (/^1[3456789]\d{9}$/.test(value.replace(/\s*/g, '')))) {
      callback();
    } else {
      callback(new Error("手机号码有误，请重填"));
    }
  }

  // 验证表单信息
  handleVerification = () => {
    let { cardDetails } = this.state;
    setTimeout(() => {
      let obj = this.props.form.getFieldsValue();
      if (obj.address && obj.birthDate && typeof (obj.nationID) === "object" && typeof (obj.sexID) === "object") {
        this.setState({ saveStatus: false })
      } else {
        this.setState({ saveStatus: true });
      }
      if (cardDetails && (Util.calculateAge(cardDetails && cardDetails.idCardNo ? cardDetails.idCardNo : "") < 14)) {
        if (obj.EContact && typeof (obj.EContactCredTypeID) === "object" && obj.EContactIDNo && obj.EContactMobile && typeof (obj.relationID) === "object") {
          this.setState({ saveStatus: false })
        } else {
          this.setState({ saveStatus: true });
        }
      }
    })
  }

  // 点击显示错误信息
  onErrorClick = (e) => {
    e.stopPropagation();
    Toast.info("请完善所在地区。", 3, () => { }, false)
  }

  // 给地址选框赋值
  addressBoxAssignment = (selectType) => {
    // 获取城市描述
    let cityData = this.cityChild.exportCitySelectInfo("ID");
    let allCityData = this.cityChild.exportCitySelectInfo("");
    let { cardDetails } = this.state;
    if (selectType === 'location') {
      cardDetails.location = cityData && cityData.addressDesc ? cityData.addressDesc : "";
      this.setState({ locationAddress: allCityData, cardDetails: { ...cardDetails, ...cityData }, verificationLocation: false }, () => {
        this.cityChild.handleClose(); // 关闭城市弹窗
      })
    }
    else if (selectType === 'native') {
      cardDetails.native = cityData && cityData.addressDesc ? cityData.addressDesc : "";
      cardDetails.nativeProvinceID = cityData.provID;
      cardDetails.nativeCityID = cityData.cityID
      cardDetails.nativeAreaID = cityData.countryID;
      //cardDetails.nativeVillageID = cityData.regionID;
      this.setState({ nativeAddress: allCityData, cardDetails: { ...cardDetails }, verificationLocation: false }, () => {
        this.cityChild.handleClose(); // 关闭城市弹窗
      })
    }
    else if (selectType === 'reg') {
      cardDetails.regProvinceID = cityData.provID;
      cardDetails.regCityID = cityData.cityID;
      cardDetails.regAreaID = cityData.countryID;
      cardDetails.regVillageID = cityData.regionID;
      cardDetails.reg = cityData && cityData.addressDesc ? cityData.addressDesc : "";
      this.setState({ regAddress: allCityData, cardDetails: { ...cardDetails }, verificationLocation: false }, () => {
        this.cityChild.handleClose(); // 关闭城市弹窗
      })
    }
    else if (selectType === 'eContacta') {
      cardDetails.eContactProvinceID = cityData.provID;
      cardDetails.eContactCityID = cityData.cityID;
      cardDetails.eContactAreaID = cityData.countryID;
      cardDetails.eContactVillageID = cityData.regionID;
      cardDetails.eContacta = cityData && cityData.addressDesc ? cityData.addressDesc : "";
      this.setState({ eContactAddress: allCityData, cardDetails: { ...cardDetails }, verificationLocation: false }, () => {
        this.cityChild.handleClose(); // 关闭城市弹窗
      })
    }
    else if (selectType === 'birth') {
      cardDetails.birthProvinceID = cityData.provID;
      cardDetails.birthCityID = cityData.cityID;
      cardDetails.birthAreaID = cityData.countryID;
      //cardDetails.birtVillageID = cityData.regionID;
      cardDetails.birth = cityData && cityData.addressDesc ? cityData.addressDesc : "";
      this.setState({ birthAddress: allCityData, cardDetails: { ...cardDetails }, verificationLocation: false }, () => {
        this.cityChild.handleClose(); // 关闭城市弹窗
      })
    }


  }

  cityRef = ref => {
    this.cityChild = ref;
  }

  // 打开地址选择弹窗
  showAddressModal = (type) => {
    let { nativeAddress,
      regAddress,
      locationAddress,
      birthAddress,
      eContactAddress,
      cardDetails } = this.state
    let userInfo = {};
    if (type === "reg") {
      if (JSON.stringify(regAddress) !== "{}") {
        userInfo.provinceID = regAddress && regAddress.provData && regAddress.provData.value ? regAddress.provData.value : ''
        userInfo.provinceDesc = regAddress && regAddress.provData && regAddress.provData.label ? regAddress.provData.label : ''
        userInfo.cityID = regAddress && regAddress.cityData && regAddress.cityData.value ? regAddress.cityData.value : ''
        userInfo.cityDesc = regAddress && regAddress.cityData && regAddress.cityData.label ? regAddress.cityData.label : ''
        userInfo.areaID = regAddress && regAddress.countryData && regAddress.countryData.value ? regAddress.countryData.value : ''
        userInfo.areaDesc = regAddress && regAddress.countryData && regAddress.countryData.label ? regAddress.countryData.label : ''
        userInfo.villageID = regAddress && regAddress.regionData && regAddress.regionData.value ? regAddress.regionData.value : ''
        userInfo.villageDesc = regAddress && regAddress.regionData && regAddress.regionData.label ? regAddress.regionData.label : ''
      } else {
        if (cardDetails && cardDetails.regProvinceID) {
          userInfo.provinceID = cardDetails && cardDetails.regProvinceID ? cardDetails.regProvinceID : "";
          userInfo.provinceDesc = cardDetails && cardDetails.regProvinceDesc ? cardDetails.regProvinceDesc : "";
          userInfo.cityID = cardDetails && cardDetails.regCityID ? cardDetails.regCityID : "";
          userInfo.cityDesc = cardDetails && cardDetails.regCityDesc ? cardDetails.regCityDesc : "";
          userInfo.areaID = cardDetails && cardDetails.regAreaID ? cardDetails.regAreaID : "";
          userInfo.areaDesc = cardDetails && cardDetails.regAreaDesc ? cardDetails.regAreaDesc : "";
          userInfo.villageID = cardDetails && cardDetails.regVillageID ? cardDetails.regVillageID : "";
          userInfo.villageDesc = cardDetails && cardDetails.regVillageDesc ? cardDetails.regVillageDesc : "";
        } else {
          userInfo = {}
        }
      }

    } else if (type === "native") {
      if (JSON.stringify(nativeAddress) !== "{}") {
        userInfo.provinceID = nativeAddress && nativeAddress.provData && nativeAddress.provData.value ? nativeAddress.provData.value : ''
        userInfo.provinceDesc = nativeAddress && nativeAddress.provData && nativeAddress.provData.label ? nativeAddress.provData.label : ''
        userInfo.cityID = nativeAddress && nativeAddress.cityData && nativeAddress.cityData.value ? nativeAddress.cityData.value : ''
        userInfo.cityDesc = nativeAddress && nativeAddress.cityData && nativeAddress.cityData.label ? nativeAddress.cityData.label : ''
        userInfo.areaID = nativeAddress && nativeAddress.countryData && nativeAddress.countryData.value ? nativeAddress.countryData.value : ''
        userInfo.areaDesc = nativeAddress && nativeAddress.countryData && nativeAddress.countryData.label ? nativeAddress.countryData.label : ''
      } else {
        if (cardDetails && cardDetails.nativeProvinceID) {
          userInfo.provinceID = cardDetails && cardDetails.nativeProvinceID ? cardDetails.nativeProvinceID : "";
          userInfo.provinceDesc = cardDetails && cardDetails.nativeProvinceDesc ? cardDetails.nativeProvinceDesc : "";
          userInfo.cityID = cardDetails && cardDetails.nativeCityID ? cardDetails.nativeCityID : "";
          userInfo.cityDesc = cardDetails && cardDetails.nativeCityDesc ? cardDetails.nativeCityDesc : "";
          userInfo.areaID = cardDetails && cardDetails.nativeAreaID ? cardDetails.nativeAreaID : "";
          userInfo.areaDesc = cardDetails && cardDetails.nativeAreaDesc ? cardDetails.nativeAreaDesc : "";
        } else {
          userInfo = {}
        }
      }

    } else if (type === "birth") {
      if (JSON.stringify(birthAddress) !== "{}") {
        userInfo.provinceID = birthAddress && birthAddress.provData && birthAddress.provData.value ? birthAddress.provData.value : ''
        userInfo.provinceDesc = birthAddress && birthAddress.provData && birthAddress.provData.label ? birthAddress.provData.label : ''
        userInfo.cityID = birthAddress && birthAddress.cityData && birthAddress.cityData.value ? birthAddress.cityData.value : ''
        userInfo.cityDesc = birthAddress && birthAddress.cityData && birthAddress.cityData.label ? birthAddress.cityData.label : ''
        userInfo.areaID = birthAddress && birthAddress.countryData && birthAddress.countryData.value ? birthAddress.countryData.value : ''
        userInfo.areaDesc = birthAddress && birthAddress.countryData && birthAddress.countryData.label ? birthAddress.countryData.label : ''
      } else {
        if (cardDetails && cardDetails.birthProvinceID) {
          userInfo.provinceID = cardDetails && cardDetails.birthProvinceID ? cardDetails.birthProvinceID : "";
          userInfo.provinceDesc = cardDetails && cardDetails.birthProvinceDesc ? cardDetails.birthProvinceDesc : "";
          userInfo.cityID = cardDetails && cardDetails.birthCityID ? cardDetails.birthCityID : "";
          userInfo.cityDesc = cardDetails && cardDetails.birthCityDesc ? cardDetails.birthCityDesc : "";
          userInfo.areaID = cardDetails && cardDetails.birthAreaID ? cardDetails.birthAreaID : "";
          userInfo.areaDesc = cardDetails && cardDetails.birthAreaDesc ? cardDetails.birthAreaDesc : "";
        } else {
          userInfo = {}
        }
      }

    } else if (type === "location") {
      if (JSON.stringify(locationAddress) !== "{}") {
        userInfo.provinceID = locationAddress && locationAddress.provData && locationAddress.provData.value ? locationAddress.provData.value : ''
        userInfo.provinceDesc = locationAddress && locationAddress.provData && locationAddress.provData.label ? locationAddress.provData.label : ''
        userInfo.cityID = locationAddress && locationAddress.cityData && locationAddress.cityData.value ? locationAddress.cityData.value : ''
        userInfo.cityDesc = locationAddress && locationAddress.cityData && locationAddress.cityData.label ? locationAddress.cityData.label : ''
        userInfo.areaID = locationAddress && locationAddress.countryData && locationAddress.countryData.value ? locationAddress.countryData.value : ''
        userInfo.areaDesc = locationAddress && locationAddress.countryData && locationAddress.countryData.label ? locationAddress.countryData.label : ''
        userInfo.villageID = locationAddress && locationAddress.regionData && locationAddress.regionData.value ? locationAddress.regionData.value : ''
        userInfo.villageDesc = locationAddress && locationAddress.regionData && locationAddress.regionData.label ? locationAddress.regionData.label : ''
      } else {
        if (cardDetails && cardDetails.provinceID) {
          userInfo.provinceID = cardDetails && cardDetails.provinceID ? cardDetails.provinceID : "";
          userInfo.provinceDesc = cardDetails && cardDetails.provinceDesc ? cardDetails.provinceDesc : "";
          userInfo.cityID = cardDetails && cardDetails.cityID ? cardDetails.cityID : "";
          userInfo.cityDesc = cardDetails && cardDetails.cityDesc ? cardDetails.cityDesc : "";
          userInfo.areaID = cardDetails && cardDetails.areaID ? cardDetails.areaID : "";
          userInfo.areaDesc = cardDetails && cardDetails.areaDesc ? cardDetails.areaDesc : "";
          userInfo.villageID = cardDetails && cardDetails.villageID ? cardDetails.villageID : "";
          userInfo.villageDesc = cardDetails && cardDetails.villageDesc ? cardDetails.villageDesc : "";
        } else {
          userInfo = {}
        }
      }

    } else if (type === "eContacta") {
      if (JSON.stringify(eContactAddress) !== "{}") {
        userInfo.provinceID = eContactAddress && eContactAddress.provData && eContactAddress.provData.value ? eContactAddress.provData.value : ''
        userInfo.provinceDesc = eContactAddress && eContactAddress.provData && eContactAddress.provData.label ? eContactAddress.provData.label : ''
        userInfo.cityID = eContactAddress && eContactAddress.cityData && eContactAddress.cityData.value ? eContactAddress.cityData.value : ''
        userInfo.cityDesc = eContactAddress && eContactAddress.cityData && eContactAddress.cityData.label ? eContactAddress.cityData.label : ''
        userInfo.areaID = eContactAddress && eContactAddress.countryData && eContactAddress.countryData.value ? eContactAddress.countryData.value : ''
        userInfo.areaDesc = eContactAddress && eContactAddress.countryData && eContactAddress.countryData.label ? eContactAddress.countryData.label : ''
        userInfo.villageID = eContactAddress && eContactAddress.regionData && eContactAddress.regionData.value ? eContactAddress.regionData.value : ''
        userInfo.villageDesc = eContactAddress && eContactAddress.regionData && eContactAddress.regionData.label ? eContactAddress.regionData.label : ''
      } else {
        if (cardDetails && cardDetails.eContactProvinceID) {
          userInfo.provinceID = cardDetails && cardDetails.eContactProvinceID ? cardDetails.eContactProvinceID : "";
          userInfo.provinceDesc = cardDetails && cardDetails.eContactProvinceDesc ? cardDetails.eContactProvinceDesc : "";
          userInfo.cityID = cardDetails && cardDetails.eContactCityID ? cardDetails.eContactCityID : "";
          userInfo.cityDesc = cardDetails && cardDetails.eContactCityDesc ? cardDetails.eContactCityDesc : "";
          userInfo.areaID = cardDetails && cardDetails.eContactAreaID ? cardDetails.eContactAreaID : "";
          userInfo.areaDesc = cardDetails && cardDetails.eContactAreaDesc ? cardDetails.eContactAreaDesc : "";
          userInfo.villageID = cardDetails && cardDetails.eContactVillageID ? cardDetails.eContactVillageID : "";
          userInfo.villageDesc = cardDetails && cardDetails.eContactVillageDesc ? cardDetails.eContactVillageDesc : "";
        } else {
          userInfo = {}
        }
      }

    } else {
      userInfo = {};
    }

    this.cityChild.handleShowModal(userInfo, type);

  }

  render() {
    let { cardDetails, selectData, verificationLocation } = this.state;
    const { getFieldProps, getFieldError } = this.props.form;


    let OCCUList = selectData && selectData.OCCU ? selectData.OCCU : []; // 职业
    let maritalList = selectData && selectData.marital ? selectData.marital : []; // 婚否
    let countryList = selectData && selectData.country ? selectData.country : []; // 国家
    let nationList = selectData && selectData.nation ? selectData.nation : []; // 民族
    let sexData = selectData && selectData.sex ? selectData.sex : []; // 性别
    let cardType = selectData && selectData.cardType ? selectData.cardType : []; // 证件类型
    let relation = selectData && selectData.relation ? selectData.relation : []; // 关系

    return (
      <div className="electronic-health-card">
        <div className="basc-info">
          <div>
            <span>姓名</span>
            <span className="float-right">{cardDetails && cardDetails.patName ? cardDetails.patName : "--"}</span>
          </div>
          <div>
            <span>身份证号</span>
            <span className="float-right">{cardDetails && cardDetails.idCardNo ? Util.identityCardEncryption(cardDetails.idCardNo) : "--"}</span>
          </div>
          <div>
            <span>就诊卡</span>
            <span className="float-right">{cardDetails && cardDetails.healthCode ? cardDetails.healthCode : "--"}</span>
          </div>
          <div>
            <span>手机号</span>
            <span className="float-right">{cardDetails && cardDetails.mobile ? Util.phoneNumberEncryption(cardDetails.mobile) : "--"}</span>
          </div>
          <div>
            <span>社保卡</span>
            <span className="float-right span-bottom">立即开通</span>
          </div>
        </div>
        <form>
          <div className="margintop10">
            <List>


              <Picker data={sexData} cols={1}
                title="选择性别"
                {...getFieldProps('sexID', {
                  onChange: this.handleVerification,
                  initialValue: cardDetails.sexID ? [cardDetails.sexID] : undefined,
                  rules: [
                    { required: true, message: '请选择性别' },
                  ],
                })}
              >
                <List.Item arrow="horizontal">性别</List.Item>
              </Picker>



              <DatePicker
                mode="date"
                minDate={new Date(1900, 1, 1, 0, 0, 0)}
                {...getFieldProps('birthDate', {
                  initialValue: cardDetails.birthDate ? new Date(cardDetails.birthDate) : undefined,
                  onChange: this.handleVerification,
                  rules: [
                    { required: true, message: '请选择出生日期' },
                  ],
                })}
              >
                <List.Item arrow="horizontal">出生日期</List.Item>
              </DatePicker>
              <Picker data={countryList} cols={1}
                title="选择国籍"
                {...getFieldProps('countryID', {
                  onChange: this.handleVerification,
                  initialValue: cardDetails.countryID ? [cardDetails.countryID] : undefined,
                  rules: [
                    { required: true, message: '请选择国籍' },
                  ],
                })}
              >
                <List.Item arrow="horizontal">国籍</List.Item>
              </Picker>

              <Picker data={nationList} cols={1}
                title="选择民族"
                {...getFieldProps('nationID', {
                  onChange: this.handleVerification,
                  initialValue: cardDetails.nationID ? [cardDetails.nationID] : undefined,
                  rules: [
                    { required: true, message: '请选择民族' },
                  ],
                })}
              >
                <List.Item arrow="horizontal">民族</List.Item>
              </Picker>

              <List.Item onClick={() => this.showAddressModal("native")} className={verificationLocation ? "am-input-error list-address ellipsis" : "list-address ellipsis"} arrow="horizontal">
                <span className="am-input-label am-input-label-5" style={{ float: "left" }}>
                  籍贯
                </span>
                <span style={{ color: "#888" }}>{cardDetails && cardDetails.native ? cardDetails.native : ""}</span>
                <div className="am-input-error-extra" style={{ float: "right" }} onClick={(e) => this.onErrorClick(e)}></div>
              </List.Item>

              <List.Item onClick={() => this.showAddressModal("birth")} className={verificationLocation ? "am-input-error list-address ellipsis" : "list-address ellipsis"} arrow="horizontal">
                <span className="am-input-label am-input-label-5" style={{ float: "left" }}>
                  出生地
                </span>
                <span style={{ color: "#888" }}>{cardDetails && cardDetails.birth ? cardDetails.birth : ""}</span>
                <div className="am-input-error-extra" style={{ float: "right" }} onClick={(e) => this.onErrorClick(e)}></div>
              </List.Item>

              <List.Item onClick={() => this.showAddressModal("reg")} className={verificationLocation ? "am-input-error list-address ellipsis" : "list-address ellipsis"} arrow="horizontal">
                <span className="am-input-label am-input-label-5" style={{ float: "left" }}>
                  户口地址
                </span>
                <span style={{ color: "#888" }}>{cardDetails && cardDetails.reg ? cardDetails.reg : ""}</span>
                <div className="am-input-error-extra" style={{ float: "right" }} onClick={(e) => this.onErrorClick(e)}></div>
              </List.Item>

              <InputItem
                error={!!getFieldError('regAddress')}
                onErrorClick={() => {
                  Toast.info(getFieldError('regAddress').join('、'), 3, () => { }, false);
                }}
                {...getFieldProps('regAddress', {
                  onChange: this.handleVerification,
                  initialValue: cardDetails.regAddress ? cardDetails.regAddress : undefined,
                  rules: [
                    { required: true, message: '请输入户口详细地址' },
                  ],
                })}
              >户口详细地址</InputItem>


              <List.Item onClick={() => this.showAddressModal("location")} className={verificationLocation ? "am-input-error list-address ellipsis" : "list-address ellipsis"} arrow="horizontal">
                <span className="am-input-label am-input-label-5" style={{ float: "left" }}>
                  现住址
                </span>
                <span style={{ color: "#888" }}>{cardDetails && cardDetails.location ? cardDetails.location : ""}</span>
                <div className="am-input-error-extra" style={{ float: "right" }} onClick={(e) => this.onErrorClick(e)}></div>
              </List.Item>

              <InputItem
                error={!!getFieldError('address')}
                onErrorClick={() => {
                  Toast.info(getFieldError('address').join('、'), 3, () => { }, false);
                }}
                {...getFieldProps('address', {
                  onChange: this.handleVerification,
                  initialValue: cardDetails.address ? cardDetails.address : undefined,
                  rules: [
                    { required: true, message: '请输入现详细地址' },
                  ],
                })}
              >现住详细地址</InputItem>

              <Picker data={maritalList} cols={1}
                title="选择婚否"
                {...getFieldProps('maritalID', {
                  onChange: this.handleVerification,
                  initialValue: cardDetails.maritalID ? [cardDetails.maritalID] : undefined,
                  rules: [
                    { required: true, message: '请选择婚否' },
                  ],
                })}
              >
                <List.Item arrow="horizontal">婚否</List.Item>
              </Picker>

              <Picker data={OCCUList} cols={1}
                title="选择职业"
                {...getFieldProps('occupationID', {
                  onChange: this.handleVerification,
                  initialValue: cardDetails.occupationID ? [cardDetails.occupationID] : undefined,
                  rules: [
                    { required: true, message: '请选择职业' },
                  ],
                })}
              >
                <List.Item arrow="horizontal">职业</List.Item>
              </Picker>

              <InputItem
                error={!!getFieldError('company')}
                onErrorClick={() => {
                  Toast.info(getFieldError('company').join('、'), 3, () => { }, false);
                }}
                {...getFieldProps('company', {
                  onChange: this.handleVerification,
                  initialValue: cardDetails.company ? cardDetails.company : undefined,
                  rules: [
                    { required: true, message: '请输入工作单位名称' },
                  ],
                })}
              >工作单位名称</InputItem>

              <InputItem
                error={!!getFieldError('companyTel')}
                onErrorClick={() => {
                  Toast.info(getFieldError('companyTel').join('、'), 3, () => { }, false);
                }}
                {...getFieldProps('companyTel', {
                  onChange: this.handleVerification,
                  initialValue: cardDetails.companyTel ? cardDetails.companyTel : undefined,
                  rules: [
                    { required: true, message: '请输入工作单位电话' },
                  ],
                })}
              >工作单位电话</InputItem>

            </List>
          </div>
          {cardDetails &&
            <div className="margintop10">
              <List>
                <InputItem
                  error={!!getFieldError('EContact')}
                  onErrorClick={() => {
                    Toast.info(getFieldError('EContact').join('、'), 3, () => { }, false);
                  }}
                  {...getFieldProps('EContact', {
                    onChange: this.handleVerification,
                    initialValue: cardDetails.EContact ? cardDetails.EContact : undefined,
                    rules: [
                      { required: true, message: '请输入紧急联系人姓名' },
                    ],
                  })}
                >紧急联系人</InputItem>
                <Picker data={cardType} cols={1}
                  error={!!getFieldError('EContactCredTypeID')}
                  onErrorClick={() => {
                    Toast.info(getFieldError('EContactCredTypeID').join('、'), 3, () => { }, false);
                  }}
                  title="选择证件类型"
                  {...getFieldProps('EContactCredTypeID', {
                    onChange: this.handleVerification,
                    initialValue: cardDetails.EContactCredTypeID ? [cardDetails.EContactCredTypeID] : (cardType && cardType.length > 0 ? [cardType[0].value] : undefined),
                    rules: [
                      { required: true, message: '请选择证件类型' },
                    ],
                  })}
                >
                  <List.Item arrow="horizontal">证件类型</List.Item>
                </Picker>
                <InputItem
                  error={!!getFieldError('EContactIDNo')}
                  onErrorClick={() => {
                    Toast.info(getFieldError('EContactIDNo').join('、'), 3, () => { }, false);
                  }}
                  {...getFieldProps('EContactIDNo', {
                    onChange: this.handleVerification,
                    initialValue: cardDetails.EContactIDNo ? cardDetails.EContactIDNo : undefined,
                    rules: [
                      { required: true, message: '请输入证件号' },
                    ],
                  })}
                  // placeholder="0.00"
                  extra={<i className="iconfont icon-zhuyuanjilu"></i>}
                >证件号</InputItem>
                <InputItem
                  error={!!getFieldError('EContactMobile')}
                  onErrorClick={() => {
                    Toast.info(getFieldError('EContactMobile').join('、'), 3, () => { }, false);
                  }}
                  {...getFieldProps('EContactMobile', {
                    onChange: this.handleVerification,
                    initialValue: cardDetails.EContactMobile ? Util.phoneAddGap(cardDetails.EContactMobile) : undefined,
                    rules: [{ validator: this.handleVerificationMobile }],
                  })}
                  type="phone"
                >手机号码</InputItem>
                <Picker data={relation} cols={1}
                  title="选择关系"
                  error={!!getFieldError('relationID')}
                  onErrorClick={() => {
                    Toast.info(getFieldError('relationID').join('、'), 3, () => { }, false);
                  }}
                  {...getFieldProps('relationID', {
                    onChange: this.handleVerification,
                    initialValue: cardDetails.relationID ? [cardDetails.relationID] : undefined,
                    rules: [
                      { required: true, message: '请选择关系' },
                    ],
                  })}
                >
                  <List.Item arrow="horizontal">关系</List.Item>
                </Picker>


                <List.Item onClick={() => this.showAddressModal("eContacta")} className={verificationLocation ? "am-input-error list-address ellipsis" : "list-address ellipsis"} arrow="horizontal">
                  <span className="am-input-label am-input-label-5" style={{ float: "left" }}>
                    联系人地址
                  </span>
                  <span style={{ color: "#888" }}>{cardDetails && cardDetails.eContacta ? cardDetails.eContacta : ""}</span>
                  <div className="am-input-error-extra" style={{ float: "right" }} onClick={(e) => this.onErrorClick(e)}></div>
                </List.Item>

                <InputItem
                  error={!!getFieldError('eContactAddress')}
                  onErrorClick={() => {
                    Toast.info(getFieldError('eContactAddress').join('、'), 3, () => { }, false);
                  }}
                  {...getFieldProps('eContactAddress', {
                    onChange: this.handleVerification,
                    initialValue: cardDetails.eContactAddress ? cardDetails.eContactAddress : undefined,
                    rules: [
                      { required: true, message: '请输入详细地址' },
                    ],
                  })}
                >详细地址</InputItem>
              </List>
            </div>
          }
        </form>
        <div className="margintop24 operation-button">
          {/* <Button type="primary" onClick={this.handleSave} disabled={saveStatus}>保存</Button> */}
          {/* <WhiteSpace /> */}
          <Button type="warning" onClick={() =>
            alert('删除就诊卡', '删除后不可恢复确认删除吗???', [
              { text: '取消', onPress: () => console.log('cancel') },
              { text: '确定', onPress: () => this.deleteData() },
            ])
          }>删除</Button>
        </div>
        <AddressSelectionControl onRef={this.cityRef} addressBoxAssignment={this.addressBoxAssignment} />
      </div>
    )
  }
};
const VisitCardDetailsForm = createForm()(VisitCardDetails);
export default VisitCardDetailsForm;
