<template>
	<view>
		<topnav :title='pageTitle' @tohome='tohome'></topnav>
		<view class="selectBox" v-if="selectItems.length>0&&urlfrom!='single'">
			<view class="selectBoxTitle">已选子订单</view>
			<view class="selectBoxTagBox">
				<block v-for="(item,index) in selectItems">
					<view class="selectBoxTag" @click="binddelete" :data-index='index'>
						<text class="selectBoxTagD">{{item.service_date}}</text>
						<text class="iconfont icon-close"></text>
					</view>
				</block>
			</view>
		</view>
		<view class="content">
			<view class="listBox mp-20">
				<view class="listBoxItem" style="display: none;">
					<view class="listBoxItemLeft" @click="bindChange" data-type="area">
						<text class="iconfont icon-check" :class="checkArea?'icon-check-on':''"></text>
						病区
					</view>
					<picker @change="bindMultiPickerChange" :disabled="!checkArea" :value="multiIndex" :range-key='name'
						:range="multiArray">
						<view class="listBoxItemRight">
							<text>{{selectArea==""?"请选择病区/楼层":selectArea}}</text>
							<text class="iconfont icon-Icons_ToolBar_ArrowRight"></text>
						</view>
					</picker>
				</view>
				
				<view class="listBoxItem">
					<view class="listBoxItemLeft" @click="bindChange" data-type="area">
						<text class="iconfont icon-check" :class="checkArea?'icon-check-on':''"></text>
						病区
					</view>
					<view class="listBoxItemRight">
						<uni-data-picker :localdata="multiItems"  :clear-icon=false v-model="selectItem"
							style="width: 360rpx;" popup-title="病区/楼层" orderby="value desc"
							@nodeclick="bindMultiItemChange"></uni-data-picker>
					</view>
				</view>
				
				
				<view class="listBoxline"></view>
				<view class="listBoxItem">
					<view class="listBoxItemLeft" @click="bindChange" data-type="bed">
						<text class="iconfont icon-check" :class="checkBed?'icon-check-on':''"></text>
						病床
					</view>
					<picker @change="bindPickerChange" :disabled="!checkBed" :value="index" :range="array">
						<view class="listBoxItemRight">
							<text>{{selectbed==""?"请选择病床":selectbed}}</text>
							<text class="iconfont icon-Icons_ToolBar_ArrowRight"></text>
						</view>
					</picker>
				</view>
				<view class="listBoxline"></view>
				<view class="listBoxItem">
					<view class="listBoxItemLeft" @click="bindChange" data-type="carer">
						<text class="iconfont icon-check" :class="checkCarer?'icon-check-on':''"></text>
						选择护工
					</view>
					<view class="listBoxItemRight" @click="bindSelectCarer">
						<text>{{selectCarer==""?"请选择":selectCarer}}</text>
						<text class="iconfont icon-Icons_ToolBar_ArrowRight"></text>
					</view>
				</view>
				<view class="listBoxline"></view>
				<view class="listBoxItem">
					<view class="listBoxItemLeft" @click="bindChange" data-type="price">
						<text class="iconfont icon-check" :class="checkPrice?'icon-check-on':''"></text>
						价格
					</view>
					<view class="listBoxItemRight">
						<input type="number" class="listBoxItemInput" placeholder-class="listBoxItemInputPlaceholder"
							placeholder="请输入协商价格" :disabled="!checkPrice" @input='bindCaculate' :value="salePrice" />
					</view>
				</view>
			</view>



		</view>
		<view class="bottom">
			<view class="btnBox">
				<view class="line-btn" @click="bindBack">
					<text class="line-btn-txt">取消</text>
				</view>
				<view class="line-btn line-btn-green" @click="bindconfirm">
					<text class="line-btn-txt line-btn-txt-green">确定</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	var util = require("../../../../utils/util.js");
	export default {
		data() {
			return {
				selectItem: "",
				multiItems: [],
				pageTitle: "编辑",
				checkArea: false,
				checkBed: false,
				checkCarer: false,
				checkPrice: false,
				multiArray: [],
				showMuti: [],
				objectMultiArray: [],
				multiIndex: [0, 0],
				selectArea: "",
				selectAreaID: "",
				objectArray: [],
				selectCarer: "",
				selectCarerID: '',
				array: [],
				index: 0,
				selectbedID: "",
				selectbed: "",
				currentProject: null,
				salePrice: 0,
				selectItems: [],
				orderitem: {},
				urlfrom: "",
				oid: "",
				pageFrom:"order"
			}
		},
		onReady() {},
		onLoad(option) {
			var that = this;
			var currentProject = uni.getStorageSync('currentProject');
			this.currentProject = currentProject;
			this.selectItems = JSON.parse(option.d);
			this.urlfrom = option.from;
			this.pageFrom = option.page;
			this.loadAreas();
			this.oid = option.oid;
			if (option.from == 'single') {
				this.pageTitle = "编辑" + JSON.parse(option.d)[0].service_date;
			} else {
				this.pageTitle = "批量编辑";
			}

			util.getOrderItemInfo(that.selectItems[0].id, function(r) {
				console.log(r)
				that.orderitem = r;
				that.selectArea = that.orderitem.bed.building_name + "-" + that.orderitem.bed.area_name;
				that.selectAreaID = that.orderitem.bed.area_id;
				that.selectbed = that.orderitem.bed.room_name + "-" + that.orderitem.bed.name;
				that.selectbedID = that.orderitem.bed.id;
				that.selectCarer = that.orderitem.paramedic.name;
				that.selectCarerID = that.orderitem.paramedic.id;
				that.salePrice = that.orderitem.total;
				that.selectItem=that.orderitem.bed.area_id;
				that.loadBeds(that.orderitem.bed.area_id)
			}, function(r) {

			});
		},
		onShow: function() {
			var carer = uni.getStorageSync("selectCarer");
			if (carer != null && !util.isNull(carer)) {
				this.selectCarer = carer.name;
				this.selectCarerID = carer.id;
			}
		},
		onUnload: function() {
			uni.removeStorageSync('selectCarer');

		},
		onHide: function() {
			uni.removeStorageSync('selectCarer');
		},
		methods: {
			tohome:function(){
				uni.navigateTo({
					url:"../../../../pages/index/index"
				})
			},
			bindCaculate: function(e) {
				this.salePrice = e.detail.value;
			},
			bindconfirm: function(e) {
				var that = this;
				var data = {};

				if (that.checkBed || that.checkArea) {
					if (util.isNull(that.selectbedID)) {
						util.alert("请选择病床");
						return false;
					} else {
						data.bed_id = that.selectbedID;
					}
					console.log(1)
				}

				if (that.checkCarer) {
					if (util.isNull(that.selectCarerID)) {
						util.alert("请选择护工")
						return false;
					} else {
						data.paramedic_id = that.selectCarerID;
					}
					console.log(2)
				}

				if (that.checkPrice) {
					if (util.isNull(that.salePrice)) {
						util.alert("请输入价格");
						return false;
					} else {
						data.price = that.salePrice;
					}
					console.log(3)
				}
				if (that.selectItems.length == 0) {
					util.alert("未选择子订单");
					return false;
				} else {
					console.log(4);
					console.log(that.selectItems)
					var ids = [];

					for (var m of that.selectItems) {
						ids.push(m.id);
					}
					data.ids = ids.join(",");

				}


				if (!that.checkArea && !that.checkBed && !that.checkCarer && !that.checkPrice) {
					util.alert("请选择需要修改的项目");
					return false;
				}



				uni.showModal({
					title: '提示',
					content: "确认修改？",
					confirmText: "确认",
					confirmColor: "#000",
					cancelColor: "#eee",
					success(res) {
						if (res.confirm) {
							that.doedit(data);
						}
					}
				});
			},
			doedit: function(data) {
				var that = this;

				console.log(data);
				util.request({
					bindThis: that,
					method: 'POST',
					customLoading: false,
					api: 'manager/update-order-items',
					data: data,
					utilSuccess: function(res) {
						console.log('3：提交成功返回' + res);
						if (res.has_warnings) {
							var newdata = {
								...data,
								"skip_warnings": 1
							}
							uni.showModal({
								title: '提示',
								content: res.errormsg+",确认修改？",
								confirmText: "确认",
								confirmColor: "#000",
								cancelColor: "#eee",
								success(res) {
									if (res.confirm) {
										that.doedit(newdata);
									}
								}
							});
						} else {
							uni.showModal({
								title: "更新成功",
								success: function() {
									var _backurl= that.pageFrom=='fin'?"../finishorder/finishorder":"../orderinfo/orderinfo";
									uni.navigateTo({
										url: _backurl+"?id=" + that.oid
									})
								}
							})
						}
					},
					utilFail: function(res) {
						console.log('4：提交失败' + res);
						util.alert(res);
					}
				});
			},
			bindSelectCarer: function() {
				uni.navigateTo({
					url: "../../../packagecarer/pages/selectcarer/selectcarer?from=createOrder"
				})
			},
			bindBack: function(e) {
				uni.navigateBack({

				})
			},
			bindChange: function(e) {
				var that = this;
				var type = e.currentTarget.dataset.type;
				switch (type) {
					case "area":
					case "bed":
						that.checkArea = !that.checkArea;
						that.checkBed = !that.checkBed;
						break;
					case "price":
						that.checkPrice = !that.checkPrice;
						break;
					case "carer":
						that.checkCarer = !that.checkCarer;
						break;
				}
			},
			bindMultiItemChange: function(e) {
				console.log('bindMultiItemChange携带值为', e)
				var that = this;
				this.selectArea = e.text;
				this.selectAreaID = e.value;
				this.selectbedID = "";
				this.selectbed = "";
				if (that.selectItem)
					that.loadBeds(that.selectItem);
			},
			bindMultiPickerChange: function(e) {
				console.log('picker发送选择改变，携带值为', e.detail.value)
				var mutiIndex = e.detail.value;
				var that = this;
				this.multiIndex = e.detail.value;
				this.selectArea = that.objectMultiArray[mutiIndex].name;
				this.selectAreaID = that.objectMultiArray[mutiIndex].id;
				this.selectbedID = "";
				this.selectbed = "";
				that.loadBeds(that.selectAreaID);
			},
			bindPickerChange: function(e) {
				var that = this;
				var index = e.detail.value;
				that.index = e.detail.value;
				that.selectbedID = that.objectArray[index].id;
				that.selectbed = that.objectArray[index].name + '床';

			},
			loadBeds: function(id) {
				var that = this;
				util.request({
					api: 'manager/get-area-beds/' + id,
					utilSuccess: function(res) {
						var arr = [];
						var objectArr = [];
						console.log(res)
						res.forEach(function(item, index) {
							arr.push(item.name);
							objectArr.push({
								id: item.id,
								name: item.room_name + "-" + item.name
							});
						})
						
						that.objectArray = objectArr;
						that.array = arr;
					},
					utilFail: function(err) {
						util.alert(err);
					}
				});

			},
			binddelete: function(e) {
				var that = this;
				var index = e.currentTarget.dataset.index;
				uni.showModal({
					title: '提示',
					content: "确认删除[" + that.selectItems[index].service_date + "]",
					confirmText: "确认",
					confirmColor: "#000",
					cancelColor: "#eee",
					success(res) {
						if (res.confirm) {
							that.selectItems.splice(index, 1);
						}
					}
				})

			},
			loadAreas: function() {
				var that = this;
				util.request({
					api: 'manager/get-project-areas/' + that.currentProject.id,
					utilSuccess: function(res) {
						var arr = [];
						var objectArr = [];
						var parr = [];
						
						console.log("res", res)
						res.forEach(function(item, index) {
							//arr.push(item.building_name + "-" + item.name);
							if (parr.filter(function(a) {
									return a.id == item.building_id + '-1'
								}).length == 0) {
						
								parr.push({
									id: item.building_id + '-1',
									name: item.building_name
								});
						
							}
						
							objectArr.push({
								id: item.id,
								name: item.building_name + "-" + item.name
						
							});
						})
						
						parr.forEach(function(citem, cindex) {
							var mod = {};
							mod.text = citem.name;
							mod.value = citem.id;
							var _carr = [];
							res.forEach(function(item, index) {
								if (citem.id == item.building_id + '-1') {
									_carr.push({
										"text": item.name,
										"value": item.id
									})
								}
							})
						
							mod.children = _carr;
							arr.push(mod);
						})
						
						
						
						
						console.log("arr", arr)
						that.multiItems = that.multiArray = arr;
						that.objectMultiArray = objectArr;
					},
					utilFail: function(err) {
						util.alert(err);
					}
				});
			}

		}
	}
</script>

<style>
	page {
		padding-top: 160rpx;
		padding-bottom: 120rpx;
	}

	.btnBox {
		display: flex;
		justify-content: space-around;
		padding: 30rpx;
	}

	.line-btn {
		display: flex;
		width: 48%;
		height: 90rpx;
		background: #FFFFFF;
		border: 2rpx solid #0DC99E;
		line-height: 90rpx;
		justify-content: center;
		border-radius: 8px;
		margin-left: 1%;
		margin-right: 1%;

	}

	.line-btn-txt {
		font-family: SourceHanSansCN-Medium;
		font-size: 32rpx;
		color: #0DC99E;
		letter-spacing: 0;
	}

	.line-btn-green {
		background: #0DC99E;
	}

	.line-btn-txt-green {
		color: #FFFFFF;
	}

	.icon-check {
		font-size: 36rpx;
		margin-right: 20rpx;
	}

	.icon-check-on {
		color: #0CB790;
	}

	.icon-Icons_ToolBar_ArrowRight {
		color: rgba(0, 0, 0, 0.45);
		font-size: 22rpx;
		margin-left: 13rpx;
		margin-top: 5rpx;
	}

	.selectBox {
		padding: 30rpx;
		background-color: #FFFFFF;
	}

	.selectBoxTitle {
		font-family: SourceHanSansCN-Normal;
		font-size: 24rpx;
		color: #666666;
		margin-bottom: 20rpx;
	}

	.selectBoxTagBox {
		display: flex;
		flex-wrap: wrap;
	}

	.selectBoxTag {
		width: 210rpx;
		height: 48rpx;
		background: rgba(13, 201, 158, 0.10);
		border: 1rpx solid #0DC99E;
		border-radius: 8rpx;
		line-height: 48rpx;
		justify-content: center;
		display: flex;
		align-items: center;
		margin-right: 20rpx;
		margin-top: 20rpx;
	}

	.selectBoxTagD {
		font-family: SourceHanSansCN-Normal;
		font-size: 28rpx;
		color: #0DC99E;
		letter-spacing: 0;
		line-height: 36rpx;
	}

	.icon-close {
		font-size: 24rpx;
		color: #0DC99E;
		margin-left: 12.5rpx;
	}
</style>
