<template>
	<!-- 提交订单 -->
	<view class="submit">
		<u-notice-bar bg-color="#FFFDEE" color="#97702D" mode="horizontal" :list="list"></u-notice-bar>
		<!-- 填写地址 -->
		<image class="line" :src="require('@/static/line.png')" mode=""></image>
		<view class="fillIn" @click="location">
			<view class="fillInBox">
				<view class="leftSize" v-if="addressShow">
					<view class="leftSizeTop">
						<p class="firstName">姓名</p>
						<p>手机号</p>
					</view>
					<view class="leftSizeBottom">
						<p>地址详细信息</p>
					</view>
				</view>
				<view class="leftSize" v-if="!addressShow">
					<view class="leftSizeTop">
						<p class="firstName">{{name}}</p>
						<p>{{phone}}</p>
					</view>
					<view class="leftSizeBottom">
						<p>{{province+city+region+" "+dest}}</p>
					</view>
				</view>
				<!-- <view class="address">
					
				</view> -->
				<p class="rightFillIn">
					<u-icon name="arrow-right" size="40"></u-icon>
				</p>
			</view>
		</view>

		<!-- 开出的商品 -->
		<view class="goods">
			<view class="goodsTitle">
				<!-- <img :src="require('@/static/blackShape.png')" alt=""> -->
				<view class="shapeblack">

				</view>
				<span>开出的商品</span>
			</view>
			<view class="Goods" v-for="el in orderParticulars.orderItemList">
				<!-- 信息 -->
				<view class="orderDetail">
					<!-- 商品图片 -->
					<img class="orderPicture" :src="el.productPic" alt="">
					<!-- 商品标题 -->
					<view class="orderTitle">
						<p>{{el.productName}}</p>
						<view class="goodsType" :class="typeArr[el.productLevel]">
						</view>
					</view>
					<!-- 待提货 -->
					<view class="awaitBox">
						x 1
					</view>
				</view>
			</view>


		</view>

		<!-- 运费 -->
		<view class="freight">
			<view class="freightTitle">
				<p>运费</p>
				<p>￥10.00</p>
			</view>
			<view class="money">
				<span>订单金额</span>¥10.00
			</view>
		</view>


		<!-- 下拉 -->
		<u-popup :mask-close-able="false" v-model="show" mode="bottom" :mask="true" width="750rpx"
			close-icon-color="#FFFFFF" :closeable="true" close-icon-size="60" close-icon="close-circle">
			<view class="scrollBox">
				<scroll-view class="scroll" :scroll-y="true" :show-scrollbar="true">
					<view class="flexBox">
						<p class="title">编辑收货地址</p>
						<view class="isName">
							<span>姓名</span>
							<u-field v-model="name" placeholder="请填写姓名"></u-field>
						</view>
						<view class="isName">
							<span>手机号</span>
							<u-field v-model="phone" placeholder="请填写手机号"></u-field>
						</view>
						<view class="isName" @click="cityShow=!cityShow">
							<span>省/市/区</span>
							<u-field v-model="pcraddress" placeholder="填写您的收货地址（省/市/区）"></u-field>
						</view>
						<view class="dest">
							<span>详细地址</span>
							<!-- <input class="destInpt" type="textarea" v-model="dest"> -->
							<textarea class="destInpt" v-model="dest" cols="5" rows="2"></textarea>
						</view>
						<view class="btnSubmit" @click="submitBtn">
							添加地址
						</view>
					</view>
				</scroll-view>
			</view>


		</u-popup>

		<!-- 全国地址三级联动 -->
		<template>
			<u-select v-model="cityShow" mode="mutil-column-auto" :list="cityList" @confirm="confirm"></u-select>
		</template>
		<!-- 底部提交 -->

		<view class="bottomMoney">
			<view class="left">
				<p>需支付: 10.00</p>
				<span v-if="orderParticulars.orderItemList">共{{orderParticulars.orderItemList.length}}商品</span>
			</view>
			<view class="right" @click="sendOut">
				确认提交
			</view>
		</view>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import city from "@/static/city.json"
	export default {
		data() {
			return {
				// 滚动通知
				list: [
					'滚动信息条',
					'产品送达时间请参考个人中心物流时间'
				],
				// 标签数组
				typeArr: ["", "cs", "ss", "zg", "pt", "pt"],

				// 下拉地址
				show: false,

				// 姓名
				name: "",
				// 手机号
				phone: "",
				// 省
				province: "",
				//市
				city: "",
				//区
				region: "",
				//省市区
				pcraddress: "",
				// 详细
				dest: "",
				// 地址id
				addressId: "",
				// 联动显示
				cityShow: false,
				// 全国地址
				cityList: "",
				//地址显示
				addressShow:true,

			};
		},
		computed: {
			// 订单id
			orderParticulars() {
				return this.$store.state.order.orderId
			},
			addressAll() {
				return this.$store.state.order.address
			}
		},
		methods: {
			// 省市区
			confirm(e) {
				console.log(e);
				//省
				this.province = e[0].label;
				// 市
				this.city = e[1].label;
				// 区
				this.region = e[2].label;
				this.pcraddress = this.province + "/" + this.city + "/" + this.region
				// console.log(this.province,this.city,this.region);
			},
			// 地址显示
			location() {
				this.show = !this.show
			},
			// 添加地址
			async submitBtn() {
				if (this.name != "" && this.phone != "" && this.province != "" && this.pcraddress != "" && this.dest !=
					"") {
					try {
						await this.$store.dispatch("receiving", {
							province: this.province,
							city: this.city,
							region: this.region,
							detailAddress: this.dest,
							name: this.name,
							memberId: this.orderParticulars.memberId,
							phoneNumber: this.phone,
							isToken: uni.getStorageSync("isToken")
						})
						this.$refs.uToast.show({
							title: '添加地址成功',
							type: 'success',
						})
						await this.$store.dispatch("gainAddressAll", uni.getStorageSync("isToken"))

						this.addressId = this.$store.state.order.address[this.$store.state.order.address.length - 1].id
						this.addressShow=false
						this.show = false
						
					} catch (e) {
						//TODO handle the exception
					}
				} else {
					this.$refs.uToast.show({
						title: '请填写地址',
						type: 'error',
					})
				}
			},

			// 发货
			async sendOut() {
				if (this.addressId) {
					try {
						await this.$store.dispatch("deliverGoods", {
							orderId: this.orderParticulars.id,
							isToken: uni.getStorageSync("isToken"),
							receiveAddressId: this.addressId
						})
						this.$refs.uToast.show({
							title: '发货成功',
							type: 'success'
						})
						setTimeout(() => {
							this.$Router.back(1)
						}, 500)
					} catch (e) {

					}
				} else {
					this.$refs.uToast.show({
						title: '请选择地址',
						type: 'error'
					})
				}
			},
		},
		onShow() {
			// 获取订单
			this.$store.dispatch("gainOrderId", {
				isID: this.$Route.query.isID,
				isToken: uni.getStorageSync("isToken")
			})
			// 获取地址
			this.$store.dispatch("gainAddressAll", uni.getStorageSync("isToken"))

			//全国地址
			this.cityList = city
			console.log(city);

		}
	}
</script>

<style lang="scss" scoped>
	// 适配函数计算
	@function rpx($px) {
		@return 750 * $px/720+rpx;
	}

	page {
		background-color: #F7F7F7;
	}

	.pt {
		background: url("@/static/putong.png") 0 0 /100% no-repeat;
	}

	.zg {
		background: url("@/static/zg.png") 0 0 /100% no-repeat;
	}

	.ss {
		background: url("@/static/ss.png") 0 0 /100% no-repeat;
	}

	.cs {
		background: url("@/static/cs.png") 0 0 /100% no-repeat;
	}

	.submit {
		width: 750rpx;
		display: flex;
		align-items: center;
		flex-direction: column;
		background-color: #F7F7F7;

		// 线条
		.line {
			width: 750rpx;
			height: 20rpx;
			margin: 20rpx 0;
		}

		// 填写地址
		.fillIn {
			width: 750rpx;
			display: flex;
			background-color: white;
			justify-content: center;
			align-items: center;
			margin-bottom: rpx(20);

			.fillInBox {
				width: 680rpx;
				height: rpx(160);
				display: flex;
				justify-content: space-between;
				align-items: center;

				// 左边提示填写地址
				.leftSize {
					width: rpx(491);
					height: rpx(100);
					font-size: 18px;
					color: gray;

					.leftSizeTop {
						display: flex;
						width: rpx(491);
						height: rpx(50);
						color: black;
						font-size: 16px;

						.firstName {
							margin-right: rpx(20);
						}

					}

					.leftSizeBottom {
						width: rpx(491);
						height: rpx(50);
						font-size: 14px;
						color: #999999;
						p{
							overflow: hidden;
							white-space: nowrap;
							text-overflow: ellipsis;
						}
					}
				}

				// 右边地址信息
				.rightFillIn {
					font-size: 28px;
				}
			}
		}


		// 开出的商品
		.goods {
			width: 750rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			background-color: white;

			.goodsTitle {
				width: 700rpx;
				height: 80rpx;
				text-align: left;
				line-height: 80rpx;
				font-size: 14px;
				display: flex;
				background-color: white;
				align-items: center;

				.shapeblack {
					width: rpx(30);
					height: rpx(33);
					background: url("~@/static/blackShape.png") 0 0 /100% no-repeat;
					margin-right: rpx(20);
				}
			}

			.Goods {
				background-color: #F7F7F7;
				width: 700rpx;
				display: flex;
				margin-bottom: 25rpx;
				align-items: center;
				flex-direction: column;
				background-color: white;

				// 信息
				.orderDetail {
					width: 640rpx;
					height: 240rpx;
					display: flex;
					// background-color: red;
					justify-content: space-between;
					align-items: center;

					//商品图片
					.orderPicture {
						width: 200rpx;
						height: 200rpx;
					}

					// 商品标题
					.orderTitle {
						width: 300rpx;
						height: 200rpx;
						display: flex;
						flex-direction: column;
						justify-content: space-between;

						.goodsType {
							width: 100rpx;
							height: 40rpx;
						}

						p {
							font-size: 14px;
							overflow: hidden;
							/* 设置元素为弹性伸缩盒 */
							display: -webkit-box;
							/* 设置弹性盒纵向排列 */
							-webkit-box-orient: vertical;
							/* 你要显示多少行 而且设置这个属性后，不需要单独设置ellipsis就可以显示为省略号*/
							-webkit-line-clamp: 2;
						}

						.type {
							width: 100rpx;
							height: 40rpx;
							background: linear-gradient(55deg, #03EBF1 0%, #C3FDFF 34%, #F8C6E7 69%, #FFFEE1 100%);
							border-radius: 10rpx;
							line-height: 40rpx;
							text-align: center;
						}
					}
				}



			}
		}


		// 运费
		.freight {
			width: 750rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			background-color: white;
			margin-top: rpx(20);
			margin-bottom: 273rpx;
			.freightTitle {
				width: 680rpx;
				height: 120rpx;
				display: flex;
				border-bottom: 1px solid darkgray;
				justify-content: space-between;
				align-items: center;
				font-size: 15px;
				font-weight: 600;
			}

			.money {
				width: 680rpx;
				height: 110rpx;
				line-height: 110rpx;
				font-size: 21px;
				font-weight: 700;
				text-align: right;

				span {
					margin-right: 20rpx;
					font-size: 14px;
					font-weight: 400;
				}
			}
		}

		// 关闭按钮
		::v-deep .u-drawer-content {
			// background-color: red!important;

			.u-close {
				top: -85rpx !important;
				right: 35rpx !important;
			}

		}

		// 下拉地址
		.scrollBox {
			width: 750rpx;
			height: 1200rpx;
			display: flex;
			align-items: center;
			justify-content: center;

			.scroll {
				width: 680rpx;
				height: 1200rpx;
				display: flex;

				.flexBox {
					width: 680rpx;
					display: flex;
					align-items: center;
					flex-direction: column;

					.title {
						width: 680rpx;
						font-size: 20px;
						height: 100rpx;
						line-height: 100rpx;
					}

					.isName {

						width: 680rpx;
						height: 200rpx;
						display: flex;
						flex-direction: column;

						span {
							font-size: 18px;
							color: darkgray;
						}

					}

					.dest {
						width: 670rpx;
						height: 400rpx;
						display: flex;
						flex-direction: column;

						.destInpt {
							width: 670rpx;
							height: 200rpx;
							border: 1px solid black;
						}

						span {
							font-size: 18px;
							color: darkgray;
						}
					}


					.btnSubmit {
						width: 400rpx;
						height: 90rpx;
						margin-bottom: 50rpx;
						text-align: center;
						line-height: 90rpx;
						font-size: 18px;
						background: linear-gradient(140deg, #FF9A4D 0%, #F72934 100%);
						border-radius: 12rpx;
						color: white;
					}
				}


			}
		}



		//底部
		.bottomMoney {
			width: 750rpx;
			height: 150rpx;
			background-color: white;
			position: fixed;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 0 40rpx;
			bottom: 0;

			.left {
				p {
					font-size: 20px;
					font-weight: 700;
				}

				span {
					color: darkgray;
					font-size: 14px;
				}

			}

			.right {
				width: 230rpx;
				height: 100rpx;
				background: linear-gradient(140deg, #FF9A4D 0%, #F72934 100%);
				border-radius: 12rpx;
				color: white;
				text-align: center;
				line-height: 100rpx;
			}
		}
	}
</style>