// 首页
import React from 'react';
// import store from "store";
// import { Link } from 'react-router-dom';
import { Card, Flex, Icon } from 'antd-mobile';
import './style/index.less';
import 'assets/less/common.less';
import { $http } from "containers/config/https";
import { Util } from 'tools';

import HospAndPatModal from "pages/common/component/HospAndPatModal.jsx";

import '../common/component/style/index.less';

import headHosp from 'assets/images/head-hosp.png';
import headPat from 'assets/images/head-pat.png';
import zhixun from 'assets/images/home-zhixun.png'; // 资讯

export default class Home extends React.Component {
	constructor({ history }) {
		super();
		let userData = localStorage.getItem("userData") ? JSON.parse(localStorage.getItem("userData")) : {};
		let weChatParams = sessionStorage.getItem("weChatParams") ? JSON.parse(sessionStorage.getItem("weChatParams")) : {};
		this.state = {
			weChatParams,
			userData,
			menuData: [], // 界面数据
			outpatientServiceKey: "1", // 门诊住院菜单切换
			admDataLength: 0
		};
		this.history = history;
		this.count = 0;
	}

	componentDidMount() {
		// 清除扫码进来储存的就诊人信息
		window.sessionStorage.setItem("admData", null);
		this.getMenuDate();
	}

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

	handleRef = (ref) => {
		this.hospAndPatRef = ref
	}

	// 获取菜单数据
	getMenuDate = () => {
		let weChatParams = sessionStorage.getItem("weChatParams") ? JSON.parse(sessionStorage.getItem("weChatParams")) : {};
		if (this.count > 10) {
			return;
		}
		if (!(weChatParams && weChatParams.openID)) { // 保证获取菜单数据时openID不能为空
			setTimeout(() => {
				this.count++;
				this.getMenuDate();
			}, 300);
			return;
		}
		let data = {
			params: []
		}
		$http.post("urlS", this, {
			code: "01030009",
			data: data,
			success: function (res) {
				if (+res.errorCode === 0) {
					this.setState({ menuData: res.rows });
				} else {
					this.setState({ menuData: [] });
				}
			}
		});
	}

	handleCompileDocumentTitle = (item) => {
		this.props.history.push(item.path);
	}

	// 跳转
	handleGoMenu = path => {
		if (path) {
			this.history.push(path)
		}
	}

	// 菜单渲染
	randerMenuDom = (childItem, childIndex) => {
		if (childItem.component.indexOf("http") !== -1) {
			return (<a key={childIndex} className="marginbottom15"
				href={childItem.component}
				style={{ width: "25%", display: childItem.display === 'Y' ? "inline-block" : 'none', textAlign: "center", cursor: "pointer" }}>
				<Flex direction="column">
					<Flex.Item className="marginbottom8"><i className={`iconfont ${childItem.icon} font16`} style={{ color: "#666666" }}></i></Flex.Item>
					<Flex.Item className="font12" style={{ color: "#666666" }}>{childItem.name}</Flex.Item>
				</Flex>
			</a>)
		} else {
			return (<span key={childIndex} className="marginbottom15"
				onClick={() => this.handleCompileDocumentTitle(childItem)}
				style={{ width: "25%", display: childItem.display === 'Y' ? "inline-block" : 'none', textAlign: "center", cursor: "pointer" }}>
				<Flex direction="column">
					<Flex.Item className="marginbottom8"><i className={`iconfont ${childItem.icon} font16`} style={{ color: "#666666" }}></i></Flex.Item>
					<Flex.Item className="font12" style={{ color: "#666666" }}>{childItem.name}</Flex.Item>
				</Flex>
			</span>)
		}
	}

	// 门诊住院菜单切换
	handleSwitch = (key) => {
		this.setState({ outpatientServiceKey: key })
	}

	// 过滤出相对应的菜单
	filterMenuBasedOnData = (menuData, code, type) => {
		let newArr = [];
		let domArr = [];
		for (var i = 0; i < menuData.length; i++) {
			if (menuData[i].code === code) {
				let childMenu = menuData[i] && menuData[i].childMenu ? menuData[i].childMenu : [];
				newArr = childMenu;
				break;
			}
		}
		if (type === "dataArr") {
			return newArr
		}
		let obj = {
			jiuzhenka: require("assets/images/home-jiuzhenka.png"), // 就诊卡
			shebaoka: require("assets/images/home-shebaoka.png"), // 社保卡
			zhanghu: require("assets/images/home-zhanghu.png"), // 账户
			jiaofei: require("assets/images/home-jiaofei.png"), // 缴费
			homePeisongdan: require("assets/images/home-peisongdan.png"), // 已支付订单
			peisongdan: require("assets/images/home-peisongdan.png"), // 配送单
			dizhiguanli: require("assets/images/home-dizhiguanli.png"), // 地址管理
			zhixun: require("assets/images/home-zhixun.png"), // 资讯
			paiduijindu: require("assets/images/home-paiduijindu.png"), // 排队进度
			wodeyuyue: require("assets/images/home-wodeyuyue.png"), // 我的预约
			yuyueguahao: require("assets/images/home-yuyueguahao.png"), // 预约挂号
			zhinengdaozhen: require("assets/images/home-zhinengdaozhen.png"), // 智能导诊
			zhiliaogongzuozhan: require("assets/images/home-zhiliaogongzuozhan.png"), // 治疗工作站
			feiyongmingxi: require("assets/images/home-feiyongmingxi.png"), // 费用明细
			chufangliuzhuan: require("assets/images/home-chufangliuzhuan.png"), // 处方流转
			zhuyuandengji: require("assets/images/home-zhuyuandengji.png"), // 住院登记
			zhuyuanjilu: require("assets/images/home-zhuyuanjilu.png"), // 住院记录
			yiyuanxinxi: require("assets/images/home-yiyuanxinxi.png"), // 医院信息
			keshijianjie: require("assets/images/home-keshijianjie.png"), // 科室简介
			yuanneidaohang: require("assets/images/home-yuanneidaohang.png"), // 院内导航
			yuyuetijian: require("assets/images/home-yuyuetijian.png"), // 预约体检
			zycpjsmx: require("assets/images/home-zhuyuanjilu.png"),
		}
		newArr.map((item, index) => {
			let renderListDom = item.routePath.slice(0, 4) === "http" ? (
				<a className="menu-external-links" href={item.component} key={index}>
					<img src={obj[item.icon]} alt="" />
					{item.name}
				</a>
			) : (
				<div key={index} onClick={item.routePath ? () => this.handleGoMenu(item.routePath) : null}>
					<img src={obj[item.icon]} alt="" />
					{item.name}
				</div>
			)
			return domArr.push(renderListDom)
		})
		return domArr;
	}

	// 获取就诊人数据
	getAdmData = (admData) => {
		let userData = localStorage.getItem("userData") ? JSON.parse(localStorage.getItem("userData")) : {};
		this.setState({ admDataLength: admData && admData.length ? admData.length : 0, userData });
	}

	// 更换或添加就诊人
	handleSelectAmdAndShowAmdModal = () => {
		let { admDataLength, userData } = this.state;
		if (admDataLength > 0) {
			if (this.hospAndPatRef && this.hospAndPatRef.handleShowAdmModal) {
				this.hospAndPatRef.handleShowAdmModal()
			}
		} else {
			switch (userData.hospID) {
				case "1":
					this.history.push({
						pathname: "/0001/00010004",
						state: "home"
					});
					break;
				default:
					this.history.push({
						pathname: "/0001/00010003",
						state: "home"
					});
					break;
			}
		}
	}

	render() {
		let { menuData, userData, outpatientServiceKey, admDataLength } = this.state;
		return (
			<div className="home" style={{ height: "100%", overflow: "auto" }}>
				<div className="new-home chronic-disease-management">
					<div style={{ height: "100%", overflow: "auto" }}>
						<div className="new-home-main-info">
							<div className="adm-hosp-head">
								<div><img src={headHosp} alt="" />{userData && userData.hospDesc ? userData.hospDesc : "请选择医院"}<span onClick={this.hospAndPatRef && this.hospAndPatRef.handleShowModal ? this.hospAndPatRef.handleShowModal : null}>更换医院</span></div>
								<div>
									<img src={headPat} alt="" />
									<div>
										<h1>{userData && userData.patDesc ? userData.patDesc : ""}<span onClick={this.handleSelectAmdAndShowAmdModal}>{admDataLength > 0 ? "更换就诊人" : "请先添加就诊人！"}</span></h1>
										<p>{userData && userData.idCardNo ? Util.identityCardEncryption(userData.idCardNo) : (admDataLength > 0 ? "请选择就诊人" : "添加就诊人会有更好的体验哟。")}</p>
										{/* <p>{Util.phoneAddGap("13113121231")}</p> */}
									</div>
								</div>
							</div>
							{/* <a href="https://mp.weixin.qq.com/mp/profile_ext?action=home&__biz=MzIyMzU1NTA3OA==&scene=124#wechat_redirect">测试关注跳转</a> */}
							<div className="adm-menu-list">
								{menuData && menuData.length > 0 && this.filterMenuBasedOnData(menuData, "0001", "dataArr").length > 0 ? <div className="adm-menu">
									{menuData && menuData.length > 0 ? this.filterMenuBasedOnData(menuData, "0001") : ""}
								</div> : ""}
								{menuData && menuData.length > 0 && this.filterMenuBasedOnData(menuData, "0002", "dataArr").length > 0 ? <div className="adm-menu adm-menu-child">
									{menuData && menuData.length > 0 ? this.filterMenuBasedOnData(menuData, "0002") : ""}
								</div> : ""}
							</div>
							<div style={{ height: "12px" }}></div>
							<div className="adm-information" style={{ display: "none" }}>
								<div>
									<img src={zhixun} alt="" />
									<span>我是消息推送</span>
								</div>
								<Icon type="right"></Icon>
							</div>
						</div>
						{menuData && menuData.length > 0 && (this.filterMenuBasedOnData(menuData, "0003", "dataArr").length > 0 || this.filterMenuBasedOnData(menuData, "0004", "dataArr").length > 0) ? <div className="h-outpatient-service">
							<div className="hos-select">
								<span onClick={() => this.handleSwitch("1")} className={outpatientServiceKey === "1" ? "active active-left" : ""}>门 诊</span>
								<span onClick={() => this.handleSwitch("2")} className={outpatientServiceKey === "2" ? "active active-right" : ""}>住 院</span>
							</div>
							<div className="hos-menu-list">
								<div className="adm-menu" style={{ display: outpatientServiceKey === "1" ? "flex" : "none" }}>
									{menuData && menuData.length > 0 ? this.filterMenuBasedOnData(menuData, "0003") : ""}
								</div>
								<div className="adm-menu" style={{ display: outpatientServiceKey === "2" ? "flex" : "none" }}>
									{menuData && menuData.length > 0 ? this.filterMenuBasedOnData(menuData, "0004") : ""}
								</div>
							</div>
						</div> : ""}
						{menuData && menuData.length > 0 && this.filterMenuBasedOnData(menuData, "0005", "dataArr").length > 0 ? <Card className="h-general-information">
							<Card.Header
								title={<div className="card-header-icon">
									<div></div>
									综合信息
								</div>}
							/>
							<Card.Body>
								<div className="adm-menu">
									{menuData && menuData.length > 0 ? this.filterMenuBasedOnData(menuData, "0005") : ""}
								</div>
							</Card.Body>
						</Card> : ""}
					</div>
				</div>
				<HospAndPatModal onRef={this.handleRef} home={'true'} getAdmData={this.getAdmData} />
			</div>
		)
	}
}
