<template>
	<div>
		<common @asynCallBack="asynCallBack"></common>
		<top-header :pageTitle="pageTitle" :rightLink="rightLink" :doRightLink="doRightLink"></top-header>

		<div class="mui-content vongi-cytx">
			<div v-if="timeList.length==0" class="mui-content-padded vongi-sqtpdat-name">
				<div class="vongi-center">
					<img src="~$project/assets/img/no.png" width="50%" />
					<h3>您还没有添加用药提醒</h3>
					<button @click="doRightLink" type="button" class="mui-btn mui-btn-pink ">
						<span class="mui-icon mui-icon-plusempty">添加提醒</span>
					</button>
				</div>
				<h3 class="vongi-examineInfo">
					设置完成后将通过微信消息提醒您
				</h3>
			</div>
			<div v-else>
				<div class="mui-content-padded vongi-cytx-time">
					<ul class="mui-table-view mui-grid-view mui-grid-9">
						<li class="mui-table-view-cell mui-media">
							<span>日</span>
						</li>
						<li class="mui-table-view-cell mui-media">
							<span>一</span>
						</li>
						<li class="mui-table-view-cell mui-media">
							<span>二</span>
						</li>
						<li class="mui-table-view-cell mui-media">
							<span>三</span>
						</li>
						<li class="mui-table-view-cell mui-media">
							<span>四</span>
						</li>
						<li class="mui-table-view-cell mui-media">
							<span>五</span>
						</li>
						<li class="mui-table-view-cell mui-media">
							<span>六</span>
						</li>
					</ul>
					<ul class="mui-table-view mui-grid-view mui-grid-9">
						<li v-for="(item,index) in weekDayList" class="mui-table-view-cell mui-media">
							<a :class="today==item?'mui-active':''">
								<span v-text="getDay(item)"></span>
								<div :class="'mui-media-body '+(titleStr(item)=='停药'?'color999':'')" v-text="titleStr(item)"></div>
							</a>
						</li>
					</ul>
				</div>
				<div class="mui-content-padded vongi-cytx-time vongi-qingjiadt">
					<h4 class="flew-items color666"><img src="~$project/assets/img/tixing.png" width="20" />今日用药计划</h4>
					<div v-if="timeList.length==0" class="mui-media-body">无</div>
					<form v-else class="mui-input-group">
						<div v-for="(item,index) in timeList" class="mui-input-row">
							<label class="pink" v-text="item.item.time"></label>
							<span v-text="item.detail.join(',')"></span>
						</div>
					</form>
				</div>
				<div class="mui-content-padded vongi-cytx-time vongi-qingjiadt">
					<h4>全部用药列表</h4>
					<ul class="mui-table-view vongi-cytx-with">
						<li v-for="(item,index) in allList" class="mui-table-view-cell">
							<div class="mui-slider-right mui-disabled">
								<a @click="del(item.id)" class="mui-btn mui-btn-red">删除</a>
							</div>
							<div class="mui-slider-handle flew-sp flew-items">
								<div class="mui-media-body" @click="goToEdit(item.id)">
									<div class="mui-col-xs-10 mui-ellipsis" v-text="item.medicationName"></div>
									<p class="flew-items"><i class="iconfont icon-circleyuanquan pink"></i>已使用{{item.hasUsedDays}}天，还需使用{{item.needUsedDays}}天</p>
								</div>
								<div @click="switchItem(item.id,item.needRemind)" :class="'mui-switch mui-switch-mini '+(item.needRemind?'mui-active':'') ">
									<div class="mui-switch-handle"></div>
								</div>
							</div>
						</li>
					</ul>
				</div>
			</div>
		</div>

		<loading :visible="isLoading"></loading>
	</div>
</template>

<script>
	import * as API_Drug from '@/apis/Master/drug'
	import Common from '$project/components/Common.vue'
	import Loading from '$project/components/Loading.vue'
	import TopHeader from '$project/components/TopHeader.vue'
	import {
		mapGetters,
		mapMutations
	} from 'vuex'
	import {
		getWeekTime,
		getDiffDate,
		currentTimeStamp,
		parseUnixTime,
		unixTimeStamp,
		inDateBetwen
	} from '$project/utils'
	export default {
		name: 'MasterDrug',
		components: {
			Common,
			Loading,
			TopHeader
		},
		data() {
			return {
				isLoading: false,

				pageTitle: '用药提醒',

				rightLink: {
					show: true,
					icon: 'icon-jia pink',
					style: 'color: #FF9474;font-size: 12px;',
					title: '添加提醒'
				},

				timeList: [],
				allList: [],

				monthList: []

			}
		},
		created() {},
		methods: {
			//获取计划信息
			getMedicationList() {
				this.isLoading = true;
				API_Drug.medicationList().then(response => {
					this.isLoading = false;

					if (response) {
						this.timeList = this.resetTimeList(response.timeList);
						this.allList = response.allList;
					}

				}).catch(error => {
					this.isLoading = false;
					mui.toast(error);
				})
			},
			//合并timeList
			resetTimeList(timeList) {
				var list = [];
				for (var i = 0; i < timeList.length; i++) {
					var index = this.searchHas(list, timeList[i]['time']);
					if (index > -1) {
						list[index]['detail'].push(timeList[i]['medicationName'] + ' ' + timeList[i]['usage']);
					} else {
						list.push({
							item: timeList[i],
							detail: [timeList[i]['medicationName'] + ' ' + timeList[i]['usage']]
						})
					}
				}
				return list;
			},
			searchHas(list, time) {
				for (var j = 0; j < list.length; j++) {
					if (time == list[j]['item']['time']) {
						return j;
					}
				}
				return -1;
			},
			//到添加页面
			doRightLink() {
				this.$router.push({
					name: 'MasterDrugAdd'
				})
			},
			//编辑
			goToEdit(id) {
				this.$router.push({
					name: 'MasterDrugAdd',
					query: {
						id: id
					}
				})
			},
			//删除
			del(id) {
				this.isLoading = true;
				API_Drug.medicationDelete(id).then(response => {
					this.isLoading = false;

					mui.toast('删除成功');
					this.getMedicationList();

				}).catch(error => {
					this.isLoading = false;
					mui.toast(error);
				})
			},
			//切换
			switchItem(id, needRemind) {
				this.isLoading = true;
				API_Drug.medicationRemindSwitch({
					id: id,
					status: !needRemind ? 1 : 0
				}).then(response => {
					this.isLoading = false;

					//mui.toast('处理成功');
					this.getMedicationList();

				}).catch(error => {
					this.isLoading = false;
					mui.toast(error);
				})
			},
			//获取日历计划信息
			getMedicationCalendar() {
				this.isLoading = true;
				API_Drug.medicationCalendar().then(response => {
					this.isLoading = false;

					this.monthList = response.list;

				}).catch(error => {
					this.isLoading = false;
					mui.toast(error);
				})
			},
			//获取日
			getDay(date) {
				return parseUnixTime(unixTimeStamp(date), '{d}');
			},
			//显示title
			titleStr(date) {
				var hasIndex = this.hasDayList.indexOf(date);
				if (hasIndex > -1) {
					return '用药' + this.monthList[hasIndex]['times'] + '次';
				} else if (inDateBetwen(date, this.monthList[0]['name'], this.monthList[this.monthList.length - 1]['name'])) {
					return '停药';
				} else {
					return '';
				}
			},
			asynCallBack() {

			},
		},
		mounted() {
			console.log(this.weekDayList)
			//获取日历计划信息
			this.getMedicationCalendar()
			//获取计划信息
			this.getMedicationList();
		},
		destroyed() {

		},
		computed: {
			weekDayList: {
				// getter
				get: function() {
					var start = getWeekTime('s')
					var end = getWeekTime('e')
					return getDiffDate(start, end);
				},
				// setter
				set: function(newValue) {
					console.log(newValue)
				}
			},
			today: {
				// getter
				get: function() {
					return parseUnixTime(currentTimeStamp(), '{y}-{m}-{d}');
				},
				// setter
				set: function(newValue) {
					console.log(newValue)
				}
			},
			hasDayList: {
				// getter
				get: function() {
					var list = [];
					for (var i = 0; i < this.monthList.length; i++) {
						list.push(this.monthList[i]['name']);
					}
					return list;
				},
				// setter
				set: function(newValue) {
					console.log(newValue)
				}
			},
			...mapGetters({
				openId: 'wx_openid',
				token: 'token',
				person_data: 'person_data',
				person_popedom: 'person_popedom',
			})
		}
	}
</script>


<style scoped src="$project/assets/css/pension.css"></style>
<style scoped src="$project/assets/css/xpwyfyy.css"></style>
<style src="$project/assets/css/iconfont.css"></style>
<style>
</style>
