<template>
	<view>
		<topnav :title='pageTitle' @tohome='tohome'></topnav>
		<view class="content">
			<view class="listBox">
				<view class="listBoxItem">
					<view class="listBoxItemLeft">
						生效日期
					</view>
					<view class="listBoxItemRight">
						<radio-group class="radiogroup" @change="radioChangeAvailable">
							<label class="radioitemlabel" style="margin-left: 0;">
								<view>
									<radio class="radioitem" checked="true" value="today" />
								</view>
								<view>今日生效</view>
							</label>
							<label class="radioitemlabel" style="margin-left: 0;">
								<view>
									<radio class="radioitem" value="tomorrow" />
								</view>
								<view>明日生效</view>
							</label>
						</radio-group>
					</view>
				</view>
			</view>

			<block v-for="(info, index) in orders">
				<view class="orderBox">
					<view class="orderHeader">
						<text class="orderNo">订单编号：{{info.serial}}</text>
						<text class="orderStatus">{{info.status_name}}</text>
					</view>

					<view class="orderBody">
						<view class="orderLine">
							<text class="iconfont iconLocation icon">&#xe62d;</text>
							<text class="orderTxt">{{info.project.name}}</text>
							<text class="orderGe">|</text>
							<text
								class="orderTxt">{{info.bed.building_name}}-{{info.bed.area_name}}-{{info.bed.room_name}}-{{info.bed.name+'床'}}</text>
						</view>
						<view class="orderLine">
							<text class="iconfont iconLocation icon">&#xe606;</text>
							<text class="orderTxt">{{info.patient.name}}</text>
							<text class="orderGe">|</text>
							<text class="orderTxt">{{info.patient.sex==null?'男':info.patient.sex}}</text>
							<text class="orderGe">|</text>
							<text class="orderTxt">{{info.mobile}}</text>
						</view>
						<view class="orderLine">
							<text class="iconfont iconLocation icon">&#xe603;</text>
							<text class="orderTxt">{{info.from_date}} ～ {{info.to_date}} 共预约{{info.days}}天</text>
						</view>
						<view class="orderLine">
							<text class="orderTxt" style="color: red;"
								v-if="info.change=='one_to_many'">订单由原【1对1】变更为【1对多】</text>
							<text class="orderTxt" style="color: red;"
								v-if="info.change=='many_to_one'">订单由原【1对多】变更为【1对1】</text>
						</view>
					</view>

					<view>
						<view class="listBoxItem">
							<view class="listBoxItemLeft">
								关联的护工
							</view>
							<view class="listBoxItemRight">
								<text>{{info.paramedic.name}}</text>
							</view>
						</view>
						<view class="listBoxItem">
							<view class="listBoxItemLeft">
								原价格
							</view>
							<view class="listBoxItemRight">
								<text>{{info.price}}</text>
							</view>
						</view>
						<view class="listBoxItem">
							<view class="listBoxItemLeft">
								协商后金额
							</view>
							<view class="listBoxItemRight">
								<input type="number" class="listBoxItemInput"
									placeholder-class="listBoxItemInputPlaceholder" placeholder="请输入协商价格"
									@input='changePrice' :data-index="index" :value="info.price" />
							</view>
						</view>
					</view>
				</view>
			</block>
		</view>

		<view class="bottom">
			<view class="btnCancel btn" @click="bindBack">取消</view>
			<view class="btnSubmit btn" @click="bindsubmitFun">提交</view>

		</view>
	</view>
</template>

<script>
	var util = require("../../../../utils/util.js");
	export default {
		data() {
			return {
				pageTitle: "编辑相关订单",
				orders: [],
				from_paramedic_id: "",
				id: "",
				available_day: "today"

			}
		},
		onLoad(options) {
			this.from_paramedic_id = options.from_paramedic_id;
			this.id = options.id;
			this.getOrders();
		},
		methods: {
			radioChangeAvailable: function(e) {
				this.available_day = e.detail.value;
			},
			changePrice: function(e) {
				var index = e.currentTarget.dataset.index;
				var newPrice = e.detail.value;
				this.orders[index].newPrice = newPrice;
				console.log(this.orders)
			},
			bindBack: function() {
				uni.navigateTo({
					url: "/pages/order/order"
				})
			},
			getOrders: function() {
				var that = this;
				var url = "manager/get-affected-orders/" + that.id;
				util.request({
					bindThis: that,
					customLoading: false,
					api: url,
					data: {from_order_id:that.id,from_paramedic_id:that.from_paramedic_id},
					utilSuccess: function(res) {
						for (var m of res) {
							m.newPrice = m.price;
						}
						that.orders = res;
					},
					utilFail: function(res) {

					}
				});


			},
			bindsubmitFun: function() {
				var that = this;
				var isNoPrice = false;
				var json = [];
				for (var i = 0; i < this.orders.length; i++) {
					var m = this.orders[i];
					if (util.isNull(m.newPrice)) {
						isNoPrice = true;
						break;
					} else {
						json.push({
							order_id: m.id,
							price: m.newPrice
						})
					}
				}
				let data={available_day:that.available_day,price:JSON.stringify(json)}

				if (isNoPrice) {
					util.alert("请填写协商后的价格！")
					return false;
				}
				
				

				uni.showModal({
					title: '提示',
					content: "请确认您的修改内容？",
					confirmText: "确认",
					confirmColor: "#000",
					cancelColor: "#eee",
					success(res) {
						that.toUpdate(data);
					}

				});
			},
			toUpdate: function(data) {
				var that = this;

				util.request({
					bindThis: that,
					method: 'POST',
					customLoading: false,
					api: 'manager/update-order-price',
					data: data,
					utilSuccess: function(res) {
						console.log('3：提交成功返回' + res);
						
						uni.showModal({
							title: "更新成功",
							success: function() {
								that.afterUpdate();
							}
						})
					},
					utilFail: function(res) {
						console.log('4：提交失败' + res);
						util.alert(res);
					}
				});

			},
			afterUpdate: function() {
				uni.navigateTo({
					url: "../orderinfo/orderinfo?id="+this.id
				})
			}
		}
	}
</script>

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

	.listBoxItemLeft {
		font-size: 28rpx;
	}

	.listBoxItemRight {
		font-size: 28rpx;
	}

	.listBoxItemInput {
		border-bottom: 1rpx solid #000000;
	}

	.bottom {
		background: #FFFFFF;
		box-shadow: 0 -2rpx 12rpx 0 rgba(0, 0, 0, 0.16), inset 0 1rpx 0 0 #E4E4E4;
		width: 100%;
		height: 100rpx;
		position: fixed;
		bottom: 0;
		left: 0;
		display: flex;
		justify-content: space-between;
	}

	.listBoxItem {
		padding: 8rpx 0;
	}

	.btn {
		width: 50%;
		line-height: 100rpx;
		text-align: center;
		line-height: 100rpx;
		font-family: SourceHanSansCN-Medium;
		font-size: 32rpx;
		letter-spacing: 0;
	}

	.btnCancel {

		color: #666666;
		background: #F0F0F0;
	}

	.btnSubmit {

		color: #FFFFFF;
		background: #0DC99E;
	}

	.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;
	}

	.radiogroup {
		display: flex;
		flex-direction: row;
	}

	.radioitemlabel {
		flex: 1;
		display: flex;
		align-items: center;
		margin-left: 134rpx;
	}

	.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;
	}


	.orderLine {
		flex-direction: row;
		margin-top: 16rpx;
		align-items: center;
	}

	.orderTxt {
		font-family: SourceHanSansCN-Normal;
		font-size: 28rpx;
		color: #333333;
		line-height: 36rpx;
	}

	.iconback {
		width: 40rpx;
		height: 40rpx;
	}

	.navTab {
		background: #FAFAFA;
		box-shadow: 0 1px 0 0 #E6E6E6;
		flex-direction: row;
		justify-content: space-around;
		top: 140rpx;
		left: 0;
		position: fixed;
		z-index: 999;
		width: 750rpx;
	}

	.tabItem {
		align-items: center;
		position: relative;
	}

	.orderGe {
		color: #D8D8D8;
		margin-left: 16rpx;
		margin-right: 16rpx;
		font-size: 28rpx;
	}

	.tabTxt {
		font-size: 28rpx;
		color: #666666;
		text-align: left;
		height: 70rpx;
		line-height: 70rpx;
	}

	.tabItemOn {
		color: #0DC99E;
	}

	.tabItemOnLine {
		background: #0DC99E;
		height: 4rpx;
		width: 100rpx;
		position: absolute;
		bottom: -2rpx;
		left: 0;
	}

	.orderBox {
		padding-top: 16rpx;
		padding-bottom: 16rpx;
		padding-left: 30rpx;
		padding-right: 30rpx;
		background: #ffffff;
		margin-top: 20rpx;
	}

	.orderHeader {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		padding-bottom: 16rpx;
		border-bottom: 1rpx solid #E4E4E4;
		align-items: center;
	}

	.orderBody {

		border-bottom: 1rpx solid #E4E4E4;
		padding-bottom: 16rpx;
	}

	.orderStatus {
		font-family: PingFangSC-Regular;
		font-size: 28rpx;
		color: #FD8C30;
		text-align: left;
		line-height: 40rpx;
	}

	.orderNo {
		font-family: SourceHanSansCN-Normal;
		font-size: 24rpx;
		color: #999999;
		line-height: 24rpx;
	}

	.orderTag {
		background: rgba(13, 201, 158, 0.10);
		border-radius: 2px;
		width: 100rpx;
		padding: 4rpx 10rpx;
		margin-right: 10rpx;
	}

	.orderTagTxt {
		font-family: SourceHanSansCN-Normal;
		font-size: 20rpx;
		text-align: center;
	}

	.tag1 {
		color: #0DC99E;
	}

	.tag2 {
		color: #4A90E2;
	}

	.tag3 {
		color: #FD8C30;
	}

	.tagBox1 {}

	.tagBox2 {
		background: rgba(60, 145, 245, 0.10);
	}

	.tagBox3 {
		background: rgba(253, 140, 48, 0.10);
	}

	.orderPrice {
		flex-direction: row;
		margin-top: 16rpx;
		border-bottom: 1rpx solid #E4E4E4;
		padding-bottom: 16rpx;
	}

	.priceBox {
		margin-right: 30rpx;
		flex-direction: row;
		align-items: center;
	}

	.priceTitle {
		font-family: SourceHanSansCN-Normal;
		font-size: 24rpx;
		color: #999999;
		line-height: 28rpx;
	}

	.priceInfo {
		font-family: Roboto-Medium;
		font-size: 24rpx;
		color: #333333;
		text-align: left;
		line-height: 40rpx;
	}

	.orderFooter {
		margin-top: 16rpx;
		padding-bottom: 16rpx;
		flex-direction: row;
		justify-content: flex-end;
	}


	.iconBack {}

	.icon {

		color: #52D5A6;
		margin-right: 12rpx;
		font-size: 28rpx;
	}

	.iconLocation {}

	.navRight {
		flex-direction: row;
	}
</style>
