<template>
	<div>
		<back :title="titlename"></back>
		<div class="content">
			<div class="dh">
				<div>
					<img src="../assets/images/ad_icon1.png" alt="快递公司图标">
					<span>单号：{{expressInfo.expressNo}}</span>
				</div>
				<!-- <div>
					<img src="../assets/images/ad_icon1.png" alt="快递公司图标">
					<span>转单号：112323</span>
				</div> -->
			</div>
			<!-- 寄件地址 -->
			<div class="jjinfo">
				<div>
					<div class="jj">
						<div class="jjaddress">
							<p>寄</p>
							<div>
								<p>{{expressInfo.sender}} {{expressInfo.senderPhone}}</p>
								<p>{{expressInfo.sendAddr}}{{expressInfo.sendAddress}}</p>
							</div>
						</div>
					</div>
					<div class="jj" style="border-top:.01rem solid #ededed">
						<div class="jjaddress">
							<p style="background: #fa9c22;">收</p>
							<div>
								<p>{{expressInfo.receiver}} {{expressInfo.receiverPhone}}</p>
								<p>{{expressInfo.receiveAddr}}{{expressInfo.receiveAddress}}</p>
							</div>
						</div>

					</div>
				</div>

			</div>
			<!-- 快递公司 -->
			<div class="kdshow">
				<van-field readonly clickable name="picker" :value="expressComp" label="快递公司" />
			</div>
			<!-- 快递属性 -->
			<div class="ktsx">
				<p>物品类型：{{expressInfo.itemType}}</p>
				<p v-if="expressInfo.itemType == '文件'">件数：{{expressInfo.itemNum}}</p>
				<p v-if="expressInfo.itemType == '物品'">重量(kg)：{{expressInfo.weight}}</p>
				<p>包装类型：{{expressInfo.packingType}}</p>
				<p>物品性质：{{expressInfo.goodNature}}</p>
				<p style="width: 100%;">付款方式：{{expressInfo.payWay}}</p>
				<p style="width: 100%;">体积(cm³)：{{expressInfo.volume}}</p>
				<p style="width: 100%;">备注：{{expressInfo.itemRemark}}</p>
				<div>
					<button @click="show=true">修改</button>
				</div>
			</div>
			<div class="group_btn">
				<button :disabled="buttonDis" @click="sign()">揽件</button>
				<button @click="print()">打印面单</button>
			</div>
		</div>
		<!-- 修改弹窗 -->
		<van-popup round v-model="show" class="whrite_add" closeable closed="close">
			<div>
				<p style="font-size: 16px;text-align: center;margin-bottom: 16px;">修改信息</p>
				<van-form @submit="onSubmit">
					<van-field v-model="expressComp" name="快递公司" disabled label="快递公司" placeholder="请选择"
						@click="showPicker1 = true" />
					<van-field v-model="expressInfo.expressPhone" readonly name="联系方式" type="number" label="联系方式" placeholder="请输入快递公司联系方式" />
					<van-field v-model="expressInfo.itemType" name="物品类型" disabled label="物品类型" placeholder="请选择"
						@click="showPicker2 = true" />
					<van-field v-if="expressInfo.itemType == '物品'" v-model="expressInfo.weight" name="重量" type="number" label="重量(kg)"
						placeholder="请输入" />
					<van-field v-if="expressInfo.itemType == '文件'" v-model="expressInfo.itemNum" name="数量" type="number" label="数量" placeholder="请输入" />
					<van-field v-model="expressInfo.packingType" name="包装类型" disabled label="包装类型" placeholder="请选择"
						@click="showPicker3 = true" />
					<van-field v-model="expressInfo.goodNature" name="物品性质" disabled label="物品性质" placeholder="请选择"
						@click="showPicker4 = true" />
					<van-field v-model="expressInfo.payWay" name="支付方式" disabled label="支付方式" placeholder="请选择"
						@click="showPicker5 = true" />
					<van-field v-model="expressInfo.volume" name="体积" type="number" label="体积(cm³)" placeholder="请输入" />
					<van-field v-model="expressInfo.predictPrice" readonly name="预估价格" type="number" label="预估价格(元)" placeholder="请输入" />
					<van-field v-model="expressInfo.itemRemark" name="备注" type="text" label="备注" placeholder="请输入" />
					<div style="margin-top: 16px;">
						<van-button color="#00c4b8" block type="info" native-type="submit">确定</van-button>
					</div>
				</van-form>
			</div>

		</van-popup>
		<van-popup v-model="showPicker1" position="bottom">
			<van-picker show-toolbar :columns="columns" @confirm="onConfirm1" @cancel="showPicker = false" />
		</van-popup>
		<van-popup v-model="showPicker2" position="bottom">
			<van-picker show-toolbar :columns="columns2" @confirm="onConfirm2" @cancel="showPicker = false" />
		</van-popup>
		<van-popup v-model="showPicker3" position="bottom">
			<van-picker show-toolbar :columns="columns3" @confirm="onConfirm3" @cancel="showPicker = false" />
		</van-popup>
		<van-popup v-model="showPicker4" position="bottom">
			<van-picker show-toolbar :columns="columns4" @confirm="onConfirm4" @cancel="showPicker = false" />
		</van-popup>
		<van-popup v-model="showPicker5" position="bottom">
			<van-picker show-toolbar :columns="columns5" @confirm="onConfirm5" @cancel="showPicker = false" />
		</van-popup>
		<!-- 修改弹窗 -->
	</div>
</template>

<script>
	import {
		Toast,
		Dialog
	} from 'vant'
	export default {
		data() {
			return {
				titlename: "邮件收发室",
				showPicker: false, //快递
				expressNo: "", //单号
				type: '', //寄件/收件
				expressInfo: {},
				buttonDis: false,
				show: false,
				name: "",
				showPicker1: false,
				columns: [],
				kdphone: "",
				wptype: "",
				showPicker2: false,
				columns2: ["物品", "文件"],
				bztype: "",
				showPicker3: false,
				columns3: ["有", "无"],
				weight: "",
				num: "",
				typeshow: 0,
				wpxz: "",
				showPicker4: false,
				columns4: ["普通", "特殊"],
				pricetype: "",
				showPicker5: false,
				columns5: ["自费", "月结"],
				tj: "",
				price: "",
				bz: "",
				expressCompId:'',//快递公司Id
				expressComp:'',//快递公司名
			}
		},
		created: function() {
			this.isLogin();
			this.expressNo = this.$route.query.expressNo;
			this.type = this.$route.query.type;
			if(this.type == undefined || this.type == ''){
				this.type = 2;
			}
			this.getData();
			this.getLogisticsList();
		},
		methods: {
			//揽件
			sign() {
				this.buttonDis = true
				this.$http.post(this.$store.state.host + "/solic/mailReceive", {
						expressNo: this.expressNo,
						sendSt: 2, //已揽件
					}, {
						emulateJSON: true
					})
					.then(res => {
						//发送成功
						if (res.body.msg == 'success') {
							//揽件成功
							Toast.success('揽件成功')
							setTimeout(() => {
								this.getData() //刷新数据
								//this.buttonDis = false
							}, 2000)
						} else {
							Toast.fail('揽件失败')
							this.buttonDis = false
						}
					}, res => {
						//发送失败
						Toast("网络错误!")
						this.buttonDis = false
					})

			},
			//后端获取数据
			getData() {
				Toast.loading({
					message: '加载中...',
					forbidClick: true,
					duration: 0
				});

				this.$http.post(this.$store.state.host + "/solic/getExpressDetail", {expressNo: this.expressNo,type: this.type}, {emulateJSON: true})
					.then(res => {
						//发送成功
						if (res.body.msg == 'success') {
							this.expressInfo = res.body.expressInfo
							this.expressCompId = res.body.expressInfo.expressInfo;
							switch (res.body.expressInfo.expressInfo){
								case "1":
								this.expressComp = '顺丰快递';
								break;
								case "2":
								this.expressComp = '中通快递';
								break;
								case "6":
								this.expressComp = '京东快递';
								break;
								case "5":
								this.expressComp = '同城急送';
								break;
								case "4":
								this.expressComp = '邮政EMS';
								break;
								case "3":
								this.expressComp = 'DHL';
								break;
								default:
								this.expressComp = -1;
								break;
							}
						}
					}, res => {
						//发送失败
						Toast("网络错误!")
					})
				Toast.clear()
			},
			onConfirm1(options) {
				this.expressComp = options.text;
				this.expressInfo.expressPhone = options.phone;
				this.expressCompId = options.id;
				this.showPicker1 = false;
			},
			onConfirm2(options) {
				this.expressInfo.itemType = options
				this.showPicker2 = false
			},
			onConfirm3(options) {
				this.expressInfo.packingType = options
				this.showPicker3 = false
			},
			onConfirm4(options) {
				this.expressInfo.goodNature = options
				this.showPicker4 = false
			},
			onConfirm5(options) {
				this.expressInfo.payWay = options
				this.showPicker5 = false
			},
			//修改
			onSubmit() {
				this.buttonDis = true
				this.$http.post(this.$store.state.host + "/solic/updateMailInfo", {
						expressNo: this.expressNo,
						expressInfo: this.expressCompId, //快递公司[传回快递公司id]
						expressPhone: this.expressInfo.expressPhone, //快递公司联系方式
						itemType: this.expressInfo.itemType, //物品类型：物品、文件
						weight: this.expressInfo.weight, //重量
						itemNum: this.expressInfo.itemNum, //物品数量
						packingType: this.expressInfo.packingType, //包装类型：有、无
						goodNature: this.expressInfo.goodNature, //物品性质：普通、特殊
						payWay: this.expressInfo.payWay, //支付方式：自费、月结
						volume: this.expressInfo.volume, //体积
						predictPrice: this.expressInfo.predictPrice, //预估价格
						itemRemark: this.expressInfo.itemRemark, //物品备注
					}, {
						emulateJSON: true
					})
					.then(res => {
						//发送成功
						if (res.body.msg == 'success') {
							//签收成功
							Toast.success('修改成功')
							this.show = false
							setTimeout(() => {
								this.getData() //刷新数据
								this.buttonDis = false
							}, 2000)
						} else {
							Toast.fail('修改失败')
							this.buttonDis = false
						}
					}, res => {
						//发送失败
						Toast("网络错误!")
						this.buttonDis = false
					})
				//this.show = false
			},
			//打印面单
			print(){
				Toast('该功能正在开发中，敬请期待！')
			}

		},
		mounted: function() {

		}
	}
</script>

<style scoped lang="less">
	.whrite_add {
		width: 6.6rem;
		padding: .4rem .2rem;

		/deep/.van-field__value {
			input {
				text-align: right;
			}

		}

		/deep/.van-popup__close-icon--top-right {
			top: 5px;
			right: 10px;
		}

		/deep/.van-field__label {
			color: #333 !important;
		}
	}

	.content {
		padding: 0.25rem .37rem;
		font-size: .3rem;

		.sm {
			display: flex;
			margin-bottom: .2rem;
			justify-content: space-between;

			/deep/.van-search {
				width: 6.2rem;
				height: .76rem;
				border-radius: 25px;
				overflow: hidden;
				padding: 0rem;
				background-color: white;

				.van-search__content {
					background-color: white;
				}

				input {
					background-color: white;
				}
			}

			img {
				width: .4rem;
				height: .4rem;
				position: relative;
				top: .18rem;
			}
		}

		.dh {
			margin: .2rem 0rem;
			background: white;
			padding: .2rem .3rem;
			border-radius: .05rem;

			div {
				display: flex;
				align-items: center;

				img {
					width: .36rem;
					height: .36rem;
					border-radius: 50%;
					margin-right: .25rem;
				}

			}

			div:nth-of-type(1) {
				margin-bottom: .2rem;
			}
		}

		.jjinfo {
			font-size: .24rem;
			color: #999999;

			>div {
				background: white;
				border-radius: .05rem;
				padding: .1rem .3rem;

				.jj {
					display: flex;
					justify-content: space-between;
					padding: .2rem 0rem;

					.jjaddress {
						display: flex;
						padding: .1rem 0rem;

						>p {
							font-size: .24rem;
							font-weight: bold;
							display: inline-block;
							width: .5rem;
							height: .5rem;
							background: #00c4b8;
							text-align: center;
							line-height: .5rem;
							color: white;
							border-radius: 50%;
							margin-right: .3rem;
						}

						div {
							p:nth-of-type(2) {
								font-size: .24rem;
							}

							p:nth-of-type(1) {
								font-size: .3rem;
								color: #333;
								margin-bottom: .2rem;
							}
						}
					}
				}
			}

		}

		.kdshow {
			font-size: .3rem;
			padding: .3rem 0px;
			background: white;
			border-radius: .05rem;
			margin: 0.2rem auto .2rem;

			/deep/.van-cell {
				padding: 0px .3rem;
				overflow: unset;

				input {
					text-align: right;
					height: .5rem;
					padding-right: .25rem;
				}
			}

			/deep/.van-cell::after {
				/* content: "";
				display: inline-block;
				border-right: .01rem solid #b0b0b0;
				border-bottom: .01rem solid #b0b0b0;
				transform: rotate(-45deg);
				left: unset;
				position: absolute;
				right: .3rem;
				bottom: .15rem;
				width: .2rem;
				height: .2rem; */
			}
		}

		.ktsx {
			padding: .2rem .3rem;
			background: white;
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			font-size: .28rem;
			line-height: 200%;
			border-radius: .05rem;

			p {
				width: 48%;
			}

			div {
				width: 100%;
				border-top: .01rem solid #F6F6F6;
				text-align: right;
				padding-top: .2rem;
				margin-top: .2rem;

				button {
					font-size: .28rem;
					border: .01rem solid #00c4b8;
					color: #00c4b8;
					background: white;
					padding: 0rem .3rem;
					border-radius: .05rem;
				}
			}
		}

		.group_btn {
			display: flex;
			justify-content: space-between;

			button {
				width: 47%;
				border: none;
				color: white;
				padding: .2rem 0rem;
				margin-top: .3rem;
				border-radius: .05rem;
			}

			button:nth-of-type(1) {
				background: #00c4b8;
			}

			button:nth-of-type(2) {
				background: #0086c4;
			}
		}
	}
</style>
