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

		<div class="mui-content margin60">
			<div class="vongi-yqsb flew-items">
				<i class="iconfont icon-mn_dunpai_fill pink"></i> 安全用药，请按说明书或在药师指导下使用
			</div>
			<div class="mui-content-padded vongi-qingjiadt vongi-editme">
				<form class="mui-input-group">
					<div class="mui-input-row">
						<label>药品名称</label>
						<input type="text" v-model="subForm.medicationName" class="mui-input-clear" placeholder="请填写药品名称">
					</div>
				</form>
			</div>
			<div class="mui-content-padded vongi-qingjiadt vongi-editme">
				<form class="mui-input-group">
					<div class="mui-input-row">
						<label>开始使用</label>
						<button @click="selectStartTime" class="mui-btn mui-btn-block mui-navigate-right mui-ellipsis" type='button'
						 style="width:65%">
							{{subForm.startTime}}
						</button>
					</div>
					<div class="mui-input-row">
						<label>用药天数</label>
						<input v-model="subForm.medicationDays" type="number" class="mui-input-clear" placeholder="请输入">
					</div>
					<div class="mui-input-row">
						<label>使用频次</label>
						<button @click="selectNextDays" class="mui-btn mui-btn-block mui-navigate-right mui-ellipsis" type='button' style="width:65%">
							{{jgName}}
						</button>
					</div>
					<div class="mui-input-row">
						<label>每次用量</label>
						<input v-model="subForm.usage" type="text" class="mui-input-clear" placeholder="请输入">
					</div>
				</form>
				<form v-show="remindTimeList.length" class="mui-input-group vongi-cytx-with">
					<h5>提醒时间</h5>
					<div v-for="(item,index) in remindTimeList" class="mui-input-row">
						<label style="width:40%"><i class="iconfont icon-circleyuanquan pink"></i>第{{index+1}}次:</label>
						<button @click="selectRemindTime(index)" class="mui-btn mui-btn-block mui-navigate-right mui-ellipsis" type='button'
						 style="width:60%">
							{{item?item:'待设置'}}
						</button>
					</div>
				</form>
			</div>
		</div>
		<div class="fyy-footer">
			<div class="bindfyy-btn"><button @click="submit" type="button" class="mui-btn mui-btn-pink ">确 定</button></div>
		</div>

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

<script>
	require('$project/assets/js/mui.picker.min.js');
	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 {
		currentTimeStamp,
		parseUnixTime
	} from '$project/utils'
	export default {
		name: 'MasterDrugAdd',
		components: {
			Common,
			Loading,
			TopHeader
		},
		data() {
			return {
				isLoading: false,

				pageTitle: '添加用药提醒',

				subForm: {
					id: this.$route.query.id,
					medicationName: '',
					startTime: '',
					medicationDays: '',
					nextDays: '',
					medicationFrequency: '',
					usage: '',
					remindTime: ''
				},

				remindTimeList: [],
			}
		},
		created() {
			this.subForm.startTime = parseUnixTime(currentTimeStamp(), '{y}-{m}-{d}');
		},
		methods: {
			//选择开始时间
			selectStartTime() {
				var _this = this;
				var picker = new mui.DtPicker({
					"type": "date",
					"beginYear": 2020,
					"endYear": 2040,
					"beginDate": new Date(),
					"value": _this.subForm.startTime
				});
				picker.show(function(rs) {
					_this.subForm.startTime = rs.text;
					picker.dispose();
				});
			},
			//选择频次
			selectNextDays() {
				var picker = new mui.PopPicker({
					layer: 2
				});
				var data = [{
					value: 0,
					text: '每天',
					children: [{
						value: 1,
						text: "1次"
					}, {
						value: 2,
						text: "2次"
					}, {
						value: 3,
						text: "3次"
					}]
				}, {
					value: 1,
					text: '隔天',
					children: [{
						value: 1,
						text: "1次"
					}, {
						value: 2,
						text: "2次"
					}, {
						value: 3,
						text: "3次"
					}]
				}];
				picker.setData(data);
				var _this = this;
				if (_this.subForm.medicationFrequency) {
					picker.pickers[0].setSelectedIndex(parseInt(_this.subForm.nextDays));
					picker.pickers[1].setSelectedIndex(parseInt(_this.subForm.medicationFrequency) - 1);
				}

				picker.show(function(selectItems) {
					_this.subForm.nextDays = selectItems[0].value;
					_this.subForm.medicationFrequency = selectItems[1].value;
					_this.resetRemindTimeList();
				})
			},
			//频次时间选择
			selectRemindTime(index) {
				var _this = this;
				var picker = new mui.DtPicker({
					"type": "time",
					//"value": _this.subForm.startTime
				});
				picker.show(function(rs) {
					_this.$set(_this.remindTimeList, index, rs.text)
					picker.dispose();
				});
			},
			//补始化设置选择具体频次时间
			resetRemindTimeList() {
				var list = [];
				for (var i = 0; i < this.subForm.medicationFrequency; i++) {
					list.push('');
				}
				this.remindTimeList = list;
			},
			//检测表单
			checkForm() {
				if (!this.subForm.medicationName) {
					mui.toast('请输入药品名称');
					return false;
				} else if (!this.subForm.startTime) {
					mui.toast('请选择开始使用日期');
					return false;
				} else if (!this.subForm.medicationDays) {
					mui.toast('请选择用药天数');
					return false;
				} else if (!this.subForm.medicationFrequency) {
					mui.toast('请选择使用频次');
					return false;
				} else if (!this.subForm.usage) {
					mui.toast('请输入每次用量');
					return false;
				} else if (!this.remindTimeListAllWrite) {
					mui.toast('请选择提醒时间');
					return false;
				} else {
					return true;
				}
			},
			//提交
			submit() {
				if (this.checkForm()) {
					this.subForm.remindTime = this.remindTimeList.join(',');
					this.isLoading = true;
					API_Drug.submitMedicationRemind(this.subForm).then(response => {
						this.isLoading = false;

						if (response.id) {
							mui.toast('提交成功');
							this.$router.push({
								name: 'MasterDrugAddSuccess',
								query: {
									id: response.id,
								}
							})
						} else {
							mui.toast('id数据错误');
						}

					}).catch(error => {
						this.isLoading = false;
						mui.toast(error);
					})
				}
			},
			//获取详情
			medicationDetail() {
				this.isLoading = true;
				API_Drug.medicationDetail(this.subForm.id).then(response => {
					this.isLoading = false;

					if (response) {
						this.subForm = response;
						this.remindTimeList = response.remindTime.split(',');
					} else {
						this.$router.push({
							name: 'MasterDrug'
						})
					}


				}).catch(error => {
					this.isLoading = false;
					mui.toast(error);
				})
			},
			asynCallBack() {

			},
		},
		mounted() {
			if (this.subForm.id) {
				//获取详情
				this.medicationDetail();
			}
		},
		destroyed() {

		},
		computed: {
			jgName: {
				// getter
				get: function() {
					if (this.subForm.medicationFrequency) {
						return (this.subForm.nextDays == 0 ? '每天' : '隔天') + (this.subForm.medicationFrequency + '次');
					} else {
						return '待设置';
					}
				},
				// setter
				set: function(newValue) {
					console.log(newValue)
				}
			},
			remindTimeListAllWrite: {
				// getter
				get: function() {
					for (var i = 0; i < this.remindTimeList.length; i++) {
						if (!this.remindTimeList[i]) {
							return false;
						}
					}
					return true;
				},
				// 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 src="$project/assets/css/mui.picker.min.css"></style>
<style>
</style>
