<template>
	<view class="container">
		<view class="interviewee">
			<view>
				<text class="input_left">姓名</text>
				<input type="text" :value="item.user_name" disabled="true" />
			</view>
			<view>
				<text class="input_left">联系电话</text>
				<input type="text" :value="item.tel_number" disabled="true" />
			</view>
			<view>
				<text class="input_left">部门</text>
				<input type="text" :value="item.dept_name" disabled="true" />
			</view>
		</view>

			<view class="form-box" v-for="(detail, index) in item.detailList" :key="index">
				<view class="form-item">
					<text class="label">药名</text>
					<input type="text" v-model="detail.drugs_name"/>
				</view>
				
				<view class="form-item">
					<text class="label">剂型</text>
					<view class="select">
						<image class="arrow" src="/static/icons/right-arrow.png" mode=""></image>
						<picker class="picker" v-if="medicalList.length > 0" :range="medicalList" @change="changeDosage($event, index)" range-key="name">
							<view>{{ medicalList[detail.drugs_type].name }}</view>
						</picker>
					</view>
					<!-- <view class="comment-btn" @click="updY(index)">修改</view> -->
				</view>
				<view class="form-item">
					<text class="label">剂量</text>
					<view class="ipt-box"><input class="name" v-model="detail.drugs_dose" type="text" placeholder="请输入剂量" /></view>
				</view>
				<view class="form-item">
					<text class="label">单位</text>
					<view class="select">
						<image class="arrow" src="/static/icons/right-arrow.png" mode=""></image>
						<picker class="picker" v-if="drugsUnitList.length > 0" :range="drugsUnitList" @change="changeDrugsUnit($event, index)" range-key="name">
							<view>{{ drugsUnitList[detail.drugs_unit].name }}</view>
						</picker>
					</view>
				</view>
				<view class="form-item">
					<text class="label">厂家</text>
					<input type="text" v-model="detail.drugs_factory"/>
				</view>
				<view class="form-item">
					<text class="label">数量</text>
					<view class="ipt-box">
						<view class="">
							<input class="name" v-model="detail.drugs_num" type="number" placeholder="请输入数量" />
							<!-- <uni-number-box :min="1" :max="9" :value="detail.drugs_num" @change="unbChange($event, index)" /> -->
						</view>
					</view>
				</view>
				<view class="pic">
					<image v-if="detail.drugs_pic1" :src="detail.drugs_pic1" mode="" @click="vbPicture(new Array(detail.drugs_pic1))"></image>
					<image v-if="detail.drugs_pic2" :src="detail.drugs_pic2" mode="" @click="vbPicture(new Array(detail.drugs_pic2))"></image>
				</view>
				<view v-if="item.detailList.length > 1 " class="form-item" style="margin-top: 20upx;border-top:1px solid #eee ;border-bottom: 0upx;">
					<image class="jian" src="../../static/imgs/jian.png" @click="jianBtn(index)" alt=""></image>
				</view>
			</view>
			<view style="height: 80upx;"></view>
		<view class="footer-btn">
			<view class="btn btn-col" @click="submit()">确认修改</view>
		</view>
	</view>
</template>

<script>
import { getDrugsApplyDetail ,updateDrugs} from '@/common/api.js';
import { callbackRequest, alertTip, compare,vbPicture } from '@/common/util.js';
import uniNumberBox from '@/components/uni-number-box/uni-number-box.vue';
import tuiNumberbox from '@/components/numberbox/numberbox';
export default {
	components: {
		uniNumberBox,
		tuiNumberbox
	},
	data() {
		return {
			medicalList: [ { name: '片剂' },  { name: '胶囊' }, { name: '颗粒' },{ name: '丸剂' },  { name: '口服液' }, { name: '乳膏' },{ name: '散剂' },  { name: '滴眼液' }, { name: '针剂' },{ name: '贴剂' },{ name: '喷剂' },  { name: '饮片' }],//{ name: '克' },{ name: '颗' },
			drugsUnitList: [ { name: '盒' }, { name: '瓶' },{ name: '袋' },{ name: '支' }],
			currentClickIndex: 0,
			disable: true,
			id:0,
			item:{},
			deletedIndex:'',
			deleteD:[],
			vbPicture:vbPicture
		};
	},
	onLoad(options) {
		this.id = options.id ;
		this.getDrugsApplyDetail();
	},
	methods: {
		jianBtn(index) {
			// this.deletedIndex = this.deletedIndex+","+index;
			// this.$set(this.item.detailList[index], 'is_deleted', 'Y'); 
			//this.item.detailList[index].is_deleted='Y';
			// $delete : Vue的语法，响应式
			this.deleteD.push(this.item.detailList[index]);
			this.$delete(this.item.detailList, index);
			
		},
		// 药品数量可修改
		updY(index) {
			this.disable = false;
		},
		// 数字输入框
		unbChange(value, index) {
			this.item.detailList[index].drugs_num = value;
			console.log(this.item);
		},
		changeDosage(e,index) {
			//let cur = this;
			this.item.detailList[index].drugs_type = e.detail.value;
		},
		changeDrugsUnit(e,index) {
			this.item.detailList[index].drugs_unit = e.detail.value;
		},
		getDrugsApplyDetail(){
			let params = {
				method: getDrugsApplyDetail, // 申请的审批
				data: { id:this.id } //分三种情况
			};
			callbackRequest(params)
			.then(res =>{
				if (res.data.returnCode == 1) {
					this.item = res.data.returnData[0];
				}
				else {
					alertTip(res.data.returnMsg);
				}
			})
		},
		
		submit() {
			var obj = this.item;
			let params = {
				method: updateDrugs, // 申请的审批
				data: {
					id:obj.id,
					userId:obj.user_id,
					userName:obj.user_name,
					telNumber:obj.tel_number,
					deptId:obj.dept_id,
					deptName:obj.dept_name,
					createTime:obj.create_time,
					createBy:obj.create_by,
					modifyTime:obj.modify_time,
					modifyBy:obj.modify_by,
					status:obj.status,
					isDeleted:obj.is_deleted,
					detailList:new Array()
				} //分三种情况
			};
			var arr = [];
			for(var i=0;i<obj.detailList.length;i++){
				var det = obj.detailList[i];
				var arrobj = {
					id:det.id,
					applyId:det.apply_id,
					drugsName:det.drugs_name,
					drugsFactory:det.drugs_factory,
					drugsType:det.drugs_type,
					drugsNum:det.drugs_num,
					drugsPic1:det.drugs_pic1,
					drugsPic1Data:det.drugs_pic1_data,
					drugsPic2:det.drugs_pic2,
					drugsPic2Data:det.drugs_pic2_data,
					isDeleted:det.is_deleted,
					createTime:det.create_time,
					createBy:det.create_by,
					modifyTime:det.modify_time,
					modifyBy:det.modify_by
					
				};
				arr.push(arrobj);
			}
			for(var i=0;i<this.deleteD.length;i++){
				var det = this.deleteD[i];
				var arrobj = {
					id:det.id,
					applyId:det.apply_id,
					drugsName:det.drugs_name,
					drugsFactory:det.drugs_factory,
					drugsType:det.drugs_type,
					drugsNum:det.drugs_num,
					drugsPic1:det.drugs_pic1,
					drugsPic1Data:det.drugs_pic1_data,
					drugsPic2:det.drugs_pic2,
					drugsPic2Data:det.drugs_pic2_data,
					isDeleted:'Y',
					createTime:det.create_time,
					createBy:det.create_by,
					modifyTime:det.modify_time,
					modifyBy:det.modify_by
					
				};
				arr.push(arrobj);
			}
			params.data.detailList = arr;
			// params = {
			// 	method: updateDrugs, // 申请的审批
			// 	data: params
			// };
			var self = this;
			uni.showModal({
				title: '提示',
				content: '是否确认修改',
				success: function(res) {
					if (res.confirm) {
						callbackRequest(params)
						.then(res =>{
							alertTip(res.data.returnMsg);
							setTimeout(function() {
								// uni.redirectTo({
								// 	url:'/pages/repair-record/repair-record'
								// })
								uni.navigateBack({
									delta:1
								})
							}, 1500);
							//this.getDrugsApplyDetail();
							//刷新页面
							//self.reFresh(self.userId,self.id,"02");
						})
					}
				}
			});
		}
	}
};
</script>

<style lang="scss">
@import '@/static/css/common.scss';
.container {
	min-height: 100vh;
	background: #f5f5f5;
	overflow: hidden;
}
.interviewee {
	padding: 0upx 30upx 0;
	background: #fff;
	margin: 30rpx 30rpx 0;
	border-radius: 10rpx;
	.input_left {
		width: 150rpx;
		color: #333333;
		font-size: 28rpx;
		font-weight: bold;
	}
}
.interviewee view {
	line-height: 40rpx;
	padding: 20rpx 0;
	color: #333333;
	font-size: 28rpx;
	border-bottom: 1px solid #eee;
	display: flex;
	align-items: center;
	position: relative;
}
.interviewee view:last-child {
	border-bottom: 0px;
}
.interviewee view input {
	font-size: 28rpx;
	margin-left: 20rpx;
}
.visitor_2 view input {
	font-size: 28rpx;
	margin-left: 20rpx;
}
.visitor_2 view {
	line-height: 40rpx;
	padding: 20rpx 0;
	// color: #333333;
	font-size: 28rpx;
	border-bottom: 1px solid #eee;
	display: flex;
	align-items: center;
	position: relative;
	.comment-btn {
		font-size: 24upx;
		border-radius: 10upx;
		color: #fff;
		min-width: 100upx;
		height: 40upx;
		background-color: #2c8add;
		padding: 28upx 28upx;
		margin-left: auto;
	}
}
.visitor_2 {
	margin: 20rpx 30rpx 20rpx;
	background: #ffffff;
	border-radius: 10upx;
	padding: 30rpx 30rpx;

	.input_left {
		width: 150rpx;
		color: #333333;
		font-size: 28rpx;
		font-weight: bold;
	}
	.select {
		.arrow {
			float: right;
			width: 16upx;
			height: 29upx;
			margin-top: 10upx;
		}

		.picker {
			height: 50upx;
			line-height: 50upx;
			font-size: 26upx;
			color: #666;
		}
	}
}

.form-box .pic {
	padding-top: 20rpx;
}
.form-box image {
	width: 180rpx;
	height: 180rpx;
	vertical-align: top;
	margin-right: 20rpx;
}
/* 已同意 */

#result .ing {
	background: #ffffff;
	height: 2.2rem;
	line-height: 1.2rem;
	border-radius: 0.133333rem;
}

#result .ing i {
	width: 0.566667rem;
	height: 0.566667rem;
	border: 0.033333rem solid #00c277;
	display: inline-block;
	margin-left: 0.8rem;
	margin-right: 0.24rem;
	border-radius: 50%;
	margin-top: 0.9rem;
}

#result .ing text {
	color: #00c277;
	font-size: 0.745333rem;
}

.submit {
	width: 100%;
	position: fixed;
	bottom: 20upx;
	/* bottom: 0upx; */
	height: 80upx;
	display: inline;
	background-color: #00c277;
}
button {
	font-size: 38upx;
	font_weight: bold;
	height: 80upx;
}
.submit_button {
	width: 100%;
	color: #ffffff;
	background-color: #00c277;
	margin: 0;
}

.btn_refuse {
	width: 50%;
	color: #ffffff;
	background-color: red;
	margin: 0;
}
.btn_agree {
	width: 50%;
	color: #ffffff;
	background-color: #00c277;
	margin-left: 50%;
	margin-top: -80upx;
}
.form-box {
	padding: 20upx 30upx;
	background: #fff;
	margin: 28upx 28upx;
	border-radius: 10upx;
	.form-item {
		overflow: hidden;
		border-bottom: 1px solid #eee;
		padding: 20upx 0;
		.label {
			float: left;
			width: 150upx;
			font-size: 28upx;
			color: #333;
			font-weight: bold;
			line-height: 50upx;
		}
		input {
			font-size: 28upx;
		}
		.select {
			.arrow {
				float: right;
				width: 16upx;
				height: 29upx;
				margin-top: 10upx;
			}
			input {
				width: 70%;
			}
		}
		.tip-c {
			color: #929292;
			font-size: 25upx;
			margin-left: 20upx;
		}
		.jian {
			width: 50upx;
			height: 50upx;
			margin-left: 280upx;
		}
		.select {
			.arrow {
				float: right;
				width: 16upx;
				height: 29upx;
				margin-top: 10upx;
			}

			.picker {
				height: 50upx;
				line-height: 50upx;
				font-size: 26upx;
				color: #666;
			}
		}
	}
	.upload-box {
		.label {
			float: none;
		}
		.img-box {
			overflow: hidden;
			padding-top: 25upx;
			.img-item {
				float: left;
				width: 210upx;
				height: 210upx;
				border: 1px solid #ddd;
				margin: 0 20upx 20upx 0upx;
				position: relative;
				.img {
					display: block;
					width: 100%;
					height: 100%;
				}
				.remove-btn {
					position: absolute;
					top: -18upx;
					right: -18upx;
					width: 44upx;
					height: 44upx;
					z-index: 2;
				}
			}
			.upload-btn {
				.img {
					width: 60upx;
					height: 60upx;
					margin: 75upx auto 0;
				}
			}
		}
	}
	.sure-btn {
		width: 100%;
		height: 80upx;
		font-size: 28upx;
		color: #fff;
		text-align: center;
		line-height: 80upx;
		border-radius: 8upx;
		background: #0066cc;
		background: linear-gradient(to right, #ffc200, #ff9000); /*设置按钮为渐变颜色*/
		margin-top: 50upx;
	}
}

// .count-upd {
// 	border-bottom: 1px solid #0055ff;

// }
</style>
