<template>
	<view class="hzIndex">
		<hzHeader title="药品预定"></hzHeader>
		<view class="container hzContent">
			<view class="main">
				<view class="tab-box">
					<view class="tab-item" :class="currentTabIndex == 0 ? 'active_tab' : ''"
						@click="currentTabIndex = 0">
						药品预订
						<view class="tabBottom" v-if="currentTabIndex == 0"></view>
					</view>
					<view class="tab-item" :class="currentTabIndex == 1 ? 'active_tab' : ''"
						@click="currentTabIndex = 1">
						预订记录
						<view class="tabBottom" v-if="currentTabIndex == 1"></view>
					</view>
				</view>
				<view v-if="currentTabIndex == 0">
					<!-- <view class="form-box">
							<view class="form-item">
								<text class="label">姓名</text>
								<view class="ipt-box"><input type="text" placeholder="请填写订购人姓名" v-model="userName" /></view>
							</view>
							<view class="form-item">
								<text class="label">部门</text>
								<view class="ipt-box select">
									<image class="arrow" src="/static/icons/right-arrow.png" mode=""></image>
									<picker class="picker" v-if="deptList.length > 0" :range="deptList" @change="changeDepartment" range-key="name">
										<view>{{ deptList[departmentIndex].name }}</view>
									</picker>
								</view>
							</view>
							<view class="form-item">
								<text class="label">联系电话</text>
								<view class="ipt-box"><input type="text" placeholder="请填写手机号码" v-model="phone" /></view>
							</view>
						</view> -->
					<view class="form-box card-box" v-if="medicals.length > 0">
						<view id="visitor" v-for="(item, index) in medicals" :key="index">
							<view class="visitor">
								<view class="form-item">
									<text class="label">药名</text>
									<view class="ipt-box"><input class="name" v-model="item.drugsName" 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="medicalList.length > 0" :range="medicalList"
											@change="changeDosage($event, index)" range-key="name">
											<view>{{ medicalList[item.drugsType].name }}</view>
										</picker>
									</view>
								</view>
								<view class="form-item">
									<text class="label">剂量</text>
									<view class="ipt-box"><input class="name" v-model="item.drugsDose" 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[item.drugsUnit].name }}</view>
										</picker>
									</view>
								</view>
								<view class="form-item">
									<text class="label">厂家</text>
									<view class="ipt-box"><input class="name" v-model="item.drugsFactory" type="text"
											placeholder="请输入厂家" /></view>
								</view>
								<view class="form-item">
									<text class="label">数量</text>
									<view class="ipt-box">
										<view class="">
											<input class="name" v-model="item.drugsNum" type="number"
												placeholder="请输入数量" />
											<!-- <uni-number-box :min="1" :max="500" :value="item.drugsNum" @change="unbChange($event, index)" /> -->
										</view>
									</view>
								</view>
								<view class="form-item upload-box">
									<text class="label">图片</text>
									<text class="tip-c">(药品正面和反面,至多两张)</text>
									<view class="img-box">
										<view class="img-item" v-for="(imgItem, imgIndex) in item.imgs" :key="imgIndex">
											<image class="remove-btn" @click="removeImg(index,imgIndex)"
												src="/static/icons/delete-icon.png" mode=""></image>
											<image class="img" :src="imgItem.replace(/[\r\n]/g,'')" mode=""></image>
										</view>
										<view class="img-item upload-btn" @click="chooseImg(index)"
											v-if="medicals[index].imgs.length < 2">
											<image class="img" src="/static/imgs/tianjia-img.png" mode=""></image>
										</view>
									</view>
									<view style="font-size: 28rpx;font-weight: 600;color: red;border-bottom: 1px solid #eee;">互联网信息系统严禁存储、传输、处理涉及国家秘密企业秘密以及敏感信息，违者将严肃问责追责!</view>
								</view>
								<view class="form-item" v-if="medicals.length > 0 && index > 0">
									<image class="jian" src="../../static/takeaway/cut1.png" @click="jianBtn(index)"
										alt="">
									</image>
								</view>
							</view>
						</view>
					</view>
					<!-- 添加 -->
					<view id="addbtn" class="add clear">
						<view class="addbtn" @click="addBtn()">
							<image class="add-img" src="../../static/takeaway/add3.png" mode=""></image><text> 新增
							</text>
						</view>
					</view>
					<!-- <view class="tips">
						温馨提醒：
						<br />
						1. 所购药品非本所日常用药，可能存在价格偏高现象
						<br />
						2. 到货后必须开方取回，否则由本人承担经济损失
						<br />
						3. 7号之前（含7号）订购单于当月下旬到货；7号之后于次月下旬到货。
					</view> -->
					<view class="tips">
						<view class="tipsTit">
							<image src="@/static/haircut/tz.png" mode=""></image>
							<text>温馨提示</text>
						</view>
						<view class="tipsCont">
							<text>1. 所购药品非本所日常用药，可能存在价格偏高现象</text>
							<text>2. 到货后必须开方取回，否则由本人承担经济损失</text>
							<text>3. 7号之前（含7号）订购单于当月下旬到货；7号之后于次月下旬到货。</text>
						</view>
					</view>
					<view class="occupied"></view>
					<view class="footer-btn footer-btn-color" @click="submit()">
						<view class="btn">确认订购</view>
					</view>
				</view>

				<!-- 订购记录列表 -->
				<view class="list-box" v-if="currentTabIndex == 1">
					<view class="detail" v-for="(item, index) in list" :key="index">
						<view class="detail_header">
							<image class="blueSign" src="@/static/haircut/ypyd.png" mode=""></image>
							<text class="font-tilte" style="font-size: 16px;">{{ item.createTime }}</text>
							<text style="color: #666;" v-if="item.status==0&&item.endremind==0"
								class="font-result">待审核</text>
							<text v-if="item.status==1&&item.endremind==0" class="font-result">已同意</text>
							<text style="color: red;" v-if="item.status==2&&item.endremind==0"
								class="font-result">已拒绝</text>
							<text v-if="item.endremind>0" class="font-result">已到货</text>
						</view>
						<view class="detail_msg">
							<!-- <view class="info-item">
									<view class="fl-text">姓名:</view>
									<view class="fr-text">{{ item.user_name }}</view>
								</view>
								<view class="info-item">
									<view class="fl-text">联系电话:</view>
									<view class="fr-text">{{ item.tel_number }}</view>
								</view>
								<view class="info-item">
									<view class="fl-text">部门:</view>
									<view class="fr-text">{{ item.dept_name }}</view>
								</view> -->
							<view class="info-item">
								<text>预计到货时间：</text>
								<text class="infoSpan">{{ item.pickDate }}</text>
							</view>
							<!-- <view class="info-item">
									<view class="fl-text">剂型:</view>
									
									<view  class="fr-text">{{medicalList[item.drugs_type]}}</view>
								</view>
								<view class="info-item">
									<view class="fl-text">剂量:</view>
									
									<view  class="fr-text">{{item.drugs_dose}}</view>
								</view>
								<view class="info-item">
									<view class="fl-text">单位:</view>
									
									<view  class="fr-text">{{drugsUnitList[item.drugs_unit]}}</view>
								</view> -->
							<view class="info-item">
								<text>详情:</text>
								<text class="infoSpan"><text v-for="(item1, index1) in item.detailList"
										:key="index1"><text
											v-if="index1!=0">，</text>{{ item1.drugs_name}}x{{item1.drugs_num}}</text>
								</text>
							</view>
							<view class="info-item" v-if="item.status!=0">
								<text>医师意见:</text>
								<text v-if="item.status==1" class="infoSpan">通过</text>
								<text v-if="item.status==2" class="infoSpan"><textarea style="width: auto;" auto-height
										type="text" disabled="true" :value="item.reason" /></text>
							</view>
							<view class="info-item" v-if="item.status!=0&&item.real_name">
								<text>医师:</text>
								<text class="infoSpan">{{item.real_name+" "+item.mobile}}</text>
							</view>
							<!-- <view class="comment-btn" @click.stop="del(item.detail_id,4,index)">删除</view> -->
						</view>
					</view>
				</view>

				<content-none v-if="currentTabIndex != 0 && list.length == 0" :padTop="20"></content-none>
			</view>
			<uni-calendar ref="calendar" :insert="false" @confirm="confirm"></uni-calendar>
			<uni-calendar ref="calendar2" :insert="false" @confirm="confirm2"></uni-calendar>
			<load-more v-show="currentTabIndex == 1" :loadingType="loadingType" :contentText="contentText"></load-more>
		</view>

	</view>
</template>

<script>
	import uniCalendar from '@/components/uni-calendar/uni-calendar.vue';
	import {
		getAllDept,
		submitDrugsApply,
		getMyDrugsApplyList
	} from '@/common/api.js';
	import {
		callbackRequest,
		convertImgToBase64,
		alertTip,
		getStorage,
		wxSdk,
		uploadImg
	} from '@/common/util.js';
	import loadMore from '@/components/loadMore.vue';
	import contentNone from '@/components/contentNone.vue';
	import datetimePicker from '@/components/dateTime.vue';
	import uniNumberBox from '@/components/uni-number-box/uni-number-box.vue';
	import {
		pathToBase64
	} from '@/js_sdk/mmmm-image-tools/index.js';
	let currentTime = new Date().getTime();
	let millisecond = 24 * 7 * 60 * 60 * 1000;
	export default {
		data() {
			return {
				userId: getStorage('userInfo').userId, //登录用户id
				user: getStorage('userInfo'),
				selectedTime: '',
				currentTabIndex: 0,
				page: 1,
				pageSize: 10,
				medicalList: [{
					name: '片剂'
				}, {
					name: '胶囊'
				}, {
					name: '颗粒'
				}, {
					name: '丸剂'
				}, {
					name: '口服液'
				}, {
					name: '乳膏'
				}, {
					name: '散剂'
				}, {
					name: '滴眼液'
				}, {
					name: '针剂'
				}, {
					name: '贴剂'
				}, {
					name: '喷剂'
				}, {
					name: '饮片'
				}], //{ name: '克' },{ name: '颗' },
				drugsUnitList: [{
					name: '盒'
				}, {
					name: '瓶'
				}, {
					name: '袋'
				}, {
					name: '支'
				}],
				medicalIndex: 0, //选择的剂型下标
				medicals: [{
					drugsName: '',
					drugsFactory: '',
					drugsDose: '',
					drugsUnit: 0,
					drugsType: 0,
					drugsNum: 1,
					imgs: [],
					imgsId: []
				}], //[{ medName: '', factory: '', medicalIndex: 0, count: 1, imgs: [] }],
				role: 1,
				list: [],
				visitPlace: '0',
				userName: getStorage('userInfo').userName,
				DeptName: getStorage('userInfo').userId,
				mediciName: '',
				phone: getStorage('userInfo').telnumber,
				loadingType: 0, //0-loading前；1-loading中；2-没有更多了
				contentText: {
					contentdown: '上拉加载更多',
					contentrefresh: '正在加载...',
					contentnomore: '没有更多数据了'
				},
				deptList: [], //部门列表
				departmentIndex: 0,
				factory: '',
				imgs: [] //用户上传的图片
			};
		},
		components: {
			uniCalendar,
			loadMore,
			datetimePicker,
			contentNone,
			uniNumberBox
		},
		watch: {
			currentTabIndex: function(newVal, oldVal) {
				this.currentTabIndex = newVal;
				if (this.currentTabIndex == 1) {
					this.page = 1;
					this.loadingType = 0;
					this.getMyDrugsApplyList();
				} else {
					this.getDepartment();
				}
			},
		},
		onLoad(option) {
			this.currentTabIndex = option.currentTabIndex || 0;
			if (this.currentTabIndex == 0) {
				this.getDepartment();
			} else {
				this.page = 1;
				this.loadingType = 0;
				this.getMyDrugsApplyList();
			}
		},
		methods: {
			// 数字输入框 
			unbChange(value, index) {
				this.medicals[index].drugsNum = value;
			},
			// 选择剂型
			changeDosage(e, index) {
				let cur = this;
				cur.medicals[index].drugsType = e.detail.value;
			},
			// 选择单位
			changeDrugsUnit(e, index) {
				let cur = this;
				cur.medicals[index].drugsUnit = e.detail.value;
			},
			// 选择部门
			changeDepartment(e) {
				this.departmentIndex = e.detail.value;
			},
			// 获取部门
			getDepartment() {
				let data = {
					method: getAllDept,
					data: {}
				};
				callbackRequest(data).then(res => {
					// console.log(res);
					if (res.data.returnCode == 1) {
						this.deptList = res.data.returnData;
						for (var i = 0; i < this.deptList.length; i++) {
							if (this.deptList[i].id == this.user.deptId) {
								this.departmentIndex = i;
							}
						}
						// console.log("dept:", this.deptList);
					}
				});
			},
			getMyDrugsApplyList() {
				var data = {
					userId: this.userId,
					page: this.page,
					pageSize: this.pageSize
				};
				let params = {
					method: getMyDrugsApplyList,
					data: data
				};
				callbackRequest(params).then(res => {
					if (res.data.returnCode == 1) {
						let result = res.data.returnData;
						if (this.page == 1) {
							this.list = result;
						} else {
							if (result.length > 0) {
								this.list = [...this.list, result];
								this.loadingType = 0;
							} else {
								this.loadingType = 2;
							}
						}
					} else {
						alertTip(res.data.returnMsg);
					}
				});
			},
			toDetail(url) {
				uni.navigateTo({
					url
				});
			},
			async chooseImg(index) {
				let chec = 0;
				let sty = [];
				let _this = this;
				uni.showActionSheet({
					itemList: ['拍照', '相册'],
					success: function(resp) {
						chec = resp.tapIndex;
						if (chec == 0) {
							sty = ['camera']; //从相册相机选择 
						} else {
							sty = ['album']; //从相册相机选择
						}
						uni.chooseImage({
							count: 2,
							sizeType: ['compressed'],
							sourceType: sty,
							quality: 1,
							success: async function(res) {
								let resData = res.tempFilePaths;
								for (let i = 0; i < resData.length; i++) {
									if (_this.medicals[index].imgs.length > 2) {
										break;
									}
									uni.getImageInfo({
										src: resData[i],
										success: async (path) => {
											convertImgToBase64(path.path,
												async function(base64) {
													if (_this.medicals[
															index].imgs
														.length < 2) {
														// _this.imgs.push(base64);

														uni.showLoading({
															title: '图片上传中'
														})
														let blength =
															base64.length;
														let glength = 7500;
														if (blength <=
															glength) {
															let uploadParam = {
																base64: base64,
																userId: getStorage(
																		'userInfo'
																	)
																	.userId +
																	i,
																groupEnd: '1'
															}
															await uploadImg
																(
																	uploadParam
																)
																.then(
																	resu => {
																		resu =
																			resu
																			.data;
																		uni
																			.hideLoading();
																		if (resu
																			.returnCode !=
																			1
																		) {
																			alertTip
																				(resu
																					.returnMsg
																				);
																		} else {
																			_this
																				.medicals[
																					index
																				]
																				.imgs
																				.push(
																					base64
																				);
																			_this
																				.medicals[
																					index
																				]
																				.imgsId
																				.push(
																					resu
																					.returnData +
																					".jpg"
																				);
																		}
																	});
														} else {
															let fnum =
																parseInt(
																	blength /
																	glength
																);
															for (let j =
																	1; j <
																fnum +
																1; j++) {
																if (j ==
																	fnum) {
																	let groupBase =
																		base64
																		.slice(
																			(j -
																				1
																			) *
																			glength
																		);
																	console
																		.log(
																			groupBase
																			.length,
																			"groupBaselength"
																		);
																	let uploadParam = {
																		base64: groupBase,
																		userId: getStorage(
																				'userInfo'
																			)
																			.userId +
																			i,
																		groupEnd: '1'
																	}
																	await uploadImg
																		(
																			uploadParam
																		)
																		.then(
																			resu => {
																				resu =
																					resu
																					.data;
																				if (resu
																					.returnCode ==
																					1
																				) {
																					_this
																						.medicals[
																							index
																						]
																						.imgs
																						.push(
																							base64
																						);
																					_this
																						.medicals[
																							index
																						]
																						.imgsId
																						.push(
																							resu
																							.returnData +
																							".jpg"
																						);
																				} else {
																					uni
																						.hideLoading();
																					alertTip
																						(resu
																							.returnMsg
																						);
																					return;
																				}
																			}
																		);
																} else {
																	let groupBase =
																		base64
																		.slice(
																			(j -
																				1
																			) *
																			glength,
																			glength *
																			j
																		);
																	let uploadParam = {
																		base64: groupBase,
																		userId: getStorage(
																				'userInfo'
																			)
																			.userId +
																			i,
																		groupEnd: '0'
																	}
																	await uploadImg
																		(
																			uploadParam
																		)
																		.then(
																			resu => {
																				resu =
																					resu
																					.data;
																				if (resu
																					.returnCode ==
																					1
																				) {} else {
																					uni
																						.hideLoading();
																					alertTip
																						(resu
																							.returnMsg
																						);
																					return;
																				}
																			}
																		);
																}

															}
															uni
																.hideLoading();
														}


													}

												});
										},
									});
								}

							}
						});
					},
					fail: function(resp) {
						console.log(resp.errMsg);
					}
				});
			},

			// chooseImg(index) {
			// 	let chec = 0;
			// 	let sty = [];
			// 	let _this = this;
			// 	uni.showActionSheet({
			// 		itemList:['拍照','相册'],
			// 		success:function(resp){
			// 			chec = resp.tapIndex;
			// 			if (chec == 0) {
			// 				sty = ['camera']; //从相册相机选择 
			// 			} else {
			// 				sty = ['album']; //从相册相机选择
			// 			}
			// 			uni.chooseImage({
			// 				count:3,
			// 				sizeType: ['compressed'],
			// 				sourceType: sty, 
			// 				quality: 0.7,
			// 				success:function(res){
			// 					let resData = res.tempFilePaths;
			// 					for(let i=0;i<resData.length;i++){
			// 						uni.getImageInfo({
			// 							src: resData[i],
			// 							success: (path) => {
			// 								pathToBase64(path.path).then(base64 => {
			// 									// if(_this.imgs.length<3){
			// 									// 	_this.imgs.push(base64);
			// 									// }
			// 									if(_this.medicals[index].imgs.length<2){
			// 										_this.medicals[index].imgs.push(base64);
			// 									}
			// 								})
			// 								.catch(error => {
			// 								})
			// 							}
			// 						})
			// 					}

			// 				}
			// 			});
			// 		},
			// 		fail:function(resp){
			// 			console.log(resp.errMsg);
			// 		}
			// 	});
			// },

			//删除图片
			removeImg(index, imgIndex) {
				let cur = this.medicals[index];
				cur.imgs.splice(imgIndex, 1);
				cur.imgsId.splice(imgIndex, 1);
			},
			confirm(e) {
				this.selectedTime = e.fulldate;
			},
			open(type) {
				if (type == 1) {
					this.$refs.calendar.open();
				} else {
					this.$refs.calendar2.open();
				}
			},
			// 添加一个药品表单
			addBtn() {
				var obj = {
					drugsName: '',
					drugsFactory: '',
					drugsDose: '',
					drugsUnit: 0,
					drugsType: 0,
					drugsNum: 1,
					imgs: [],
					imgsId: []
				};
				this.medicals.push(obj);
				this.number++;
			},
			// 删除一个药品表单
			jianBtn(index) {
				// $delete : Vue的语法，响应式
				this.$delete(this.medicals, index);
			},
			submit() {
				for (var i = 0; i < this.medicals.length; i++) {
					if (this.medicals[i].drugsName == '') {
						alertTip('请输入药品名称');
						return;
					}
					if (this.medicals[i].drugsDose == '') {
						alertTip('请输入药品剂量');
						return;
					}
					if (this.medicals[i].drugsFactory == '') {
						alertTip('请输入药品厂家');
						return;
					}
					if (this.medicals[i].drugsNum == '' || this.medicals[i].drugsNum == 0) {
						alertTip('请输入药品数量');
						return;
					}
				}

				uni.showModal({
					title: '确认',
					content: '特殊需求药品价格偏高，是否接受？点击接受提交。',
					showCancel: true,
					cancelText: '取消',
					confirmText: '接受',
					success: res => {
						if (res.confirm) {
							let detailList = [];
							this.medicals.forEach(
								function(value, index, array) {
									let dobj = {
										drugsName: value.drugsName,
										drugsFactory: value.drugsFactory,
										drugsDose: value.drugsDose,
										drugsUnit: value.drugsUnit,
										drugsType: value.drugsType,
										drugsNum: value.drugsNum,
										imgs: value.imgsId,
									}
									detailList.push(dobj);
								}
							);

							let params = {
								method: submitDrugsApply,
								data: {
									userName: this.userName,
									userId: this.userId,
									telNumber: this.phone,
									deptName: this.deptList[this.departmentIndex].name,
									deptId: this.deptList[this.departmentIndex].id,
									detailList: detailList
								}
							};
							callbackRequest(params).then(res => {
								if (res.data.returnCode == 1) {
									alertTip('订购成功');
									setTimeout(function() {
										uni.navigateTo({
											url: '/pages/medical/drugreserve?currentTabIndex=1'
										});
									}, 1500);
								} else {
									alertTip(res.data.returnMsg);
								}
							});
						} else if (res.cancel) {}
					}
				});
			}
		},
		onReachBottom() {
			if (this.loadingType !== 0 || this.currentTabIndex == 0) {
				return;
			}
			this.loadingType = 1;
			this.page = this.page + 1;
			this.getMyDrugsApplyList();
		}
	};
</script>

<style lang="scss">
	@import '@/static/css/common.scss';

	page {
		// background: #f8f8f8;
	}

	.font-result {
		display: inline-block;
		float: right;
		font-size: 28upx;
		color: #00c277;
		line-height: 50upx;
		vertical-align: top;
		padding-right: 20upx;
	}

	.container {
		padding: 22upx;

		.main {
			.tab-box {
				width: 80%;
				display: flex;
				font-size: 36upx;
				color: #555555;

				.active_tab {
					font-weight: 800;

				}

				.tab-item {
					width: 40%;

					.tabBottom {
						width: 28%;
						height: 6upx;
						border-radius: 5px;
						background-image: linear-gradient(to right, #64E182, #1CA7B2);
					}
				}
			}

			.form-box {
				margin-top: 24upx;

				.form-item {
					overflow: hidden;
					border-bottom: 1px solid #EBEFF7;
					padding: 26upx 0;

					.label {
						float: left;
						width: 150upx;
						font-size: 28upx;
						color: #555555;
						font-weight: 400;
						line-height: 50upx;
					}

					.ipt-box {
						margin-left: 150upx;

						input {
							width: 100%;
							height: 50upx;
							line-height: 50upx;
							font-size: 26upx;
							color: #999;
						}

						.pic {
							width: 60upx;
							height: 60upx;
							line-height: 80upx;
						}
					}

					.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: 40upx;
						height: 40upx;
						margin-left: 50%;
						transform: translateX(-50%);
					}

					.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: 67*2upx;
							height: 67*2upx;
							background: #E6E8EE;
							border-radius: 5*2upx;
							// margin: 0 20upx 20upx 0upx;
							position: relative;
							display: flex;
							align-items: center;
							justify-content: center;

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

			.form-box .form-item:last-child {
				border-bottom: 0px;
			}

		}
	}

	#addbtn {
		height: 100upx;
		background-color: #ffffff;
		border-radius: 20upx;
		color: #333333;
		position: relative;
		margin-top: 20upx;
		line-height: 100upx;
		text-align: center;

		text {
			font-size: 38upx;
			color: #00c277;
		}
	}

	.addbtn {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
	}

	.add-img {
		width: 40upx;
		height: 40upx;
		margin-right: 16upx;
	}

	.addbtn view text:nth-child(1) {}

	.addbtn view text:nth-child(2) {
		font-weight: 600;
		font-size: 32upx;
		color: #00c277;
	}

	.tips {
		width: 100%;
		padding: 20upx;
		background-color: #fff;
		border-radius: 20upx;
		margin-top: 20upx;
		color: #FB8107;
		font-size: 28upx;

		.tipsTit {
			width: 100%;
			display: flex;
			align-items: center;
		}

		.tipsCont {
			margin-left: 38upx;
			margin-top: 10upx;
			display: flex;
			flex-direction: column;
			font-size: 24upx;
			color: #555555;
			line-height: 40upx;
		}

		image {
			width: 36upx;
			height: 36upx;
			margin-right: 10upx;
		}
	}

	.num-box {
		float: right;
		width: 220upx;
		// height: 20upx;
	}

	.list-box {
		margin: unset;
		margin-top: 36upx;

		.detail {
			// margin-top: 10upx;
			margin-bottom: 24upx;
			background: #ffffff;
			border-radius: 20upx;
			padding: 24upx;
		}

		.detail_header {
			padding: 15upx 0upx;
			border-bottom: 1px solid #eee;
			display: flex;
			flex-direction: row;
			align-items: center;
			position: relative;
		}

		.detail_header .blueSign {
			width: 48upx;
			height: 48upx;
		}

		.detail_header .font-tilte {
			display: inline-block;
			font-weight: bold;
			font-size: 18px;
			color: #333333;
			margin-left: 16upx;
		}

		.detail_header .font-result {
			display: inline-block;
			position: absolute;
			width: 80*2upx;
			height: 28*2upx;
			right: 0upx;
			background: #C1EFEA;
			border-radius: 15px 15px 15px 15px;
			font-size: 28upx;
			color: #0DB0A7;
			text-align: center;
			line-height: 28*2upx;
		}

		.detail_msg {
			display: grid;
			margin-top: 20upx;
			padding: unset;
		}

		.detail_msg .info-item {
			font-size: 28upx;
			color: #999999;
			margin-bottom: 10upx;
			font-size: 28upx;
			line-height: 50upx;

			text {
				display: inline-block;
				width: 200upx;
			}

			.infoSpan {
				width: auto;
				font-size: 28upx;
				color: #666;
				float: right;
			}
		}

		// .detail_msg .info-item:nth-of-type(3) {
		// 	padding-bottom: 24upx;
		// 	border-bottom: 1px solid #EBEFF7;
		// }

		// .detail_msg .info-item:last-child {
		// 	padding-bottom: 24upx;
		// 	border-bottom: 0px solid #000;
		// }

		.comment-btn {
			margin-top: 24upx;
			width: 84*2upx;
			height: 32*2upx;
			border-radius: 16*2upx;
			border: 1px solid #0DB0A7;
			font-size: 28upx;
			color: #0DB0A7;
			line-height: 32*2upx;
			text-align: center;
			min-width: 140upx;
			justify-self: end;
			background-color: unset;
		}

		.bg-ccc {
			border-color: #CACACA;
			color: #CACACA;
			background-color: #fff !important;
		}
	}
</style>