<template>
	<view>
		<view class="header-toper">
			<!-- <view class="start-bar"></view> -->
			<view class="header-toper-title">
				<image src="../../static/img/back.png" mode="" @click="$request.goPage('../create_order/create_order')"></image>
				<text>{{$lang.lang.finsh.success}}</text>
			</view>
		</view>
		<!-- <view class="start-bar"></view> -->
		<view class="order-finish">
			<view class="finish-top">
				<view class="finish-list">
					<view class="finish-info" style="padding-top:12px">
						<text>{{$lang.lang.finsh.orderNo}}:</text>
						<text style="font-size: 16px;font-weight: 600;">{{orderData.orderNo}}</text>
						<view class="copy" @click="toCopy">{{$lang.lang.notices.copy}}</view>
					</view>
					<view class="finish-info" style="margin-top: 2px;">
						<text>{{$lang.lang.create.marks}}:</text>
						<text>{{orderData.marks}}</text>
					</view>
					<view class="finish-info">
						<text>{{$lang.lang.finsh.transport}}:</text>
						<text>{{getTranName(orderData.transportId)}}</text>
					</view>
					<view class="finish-info">
						<text>{{$lang.lang.finsh.lined}}:</text>
						<text>{{getLineName()}}</text>
					</view>
					<view class="finish-info">
						<text>{{$lang.lang.create.customsType}}:</text>
						<text>{{getCustomsType(orderData.customsType)}}</text>
					</view>
					<view class="finish-info">
						<text>{{$lang.lang.create.isCargoControl}}:</text>
						<text>{{orderData.isCargoControl?$lang.lang.create.is:$lang.lang.create.fou}}</text>
					</view>
					<view class="finish-info">
						<text>{{$lang.lang.finsh.list}}:</text>
						<text>{{orderData.goodsName}}</text>
					</view>
				</view>
				<image src="../../static/img/finsh-icon.png" mode="widthFix"></image>
			</view>
			<view class="finish-info">
				<text>{{$lang.lang.finsh.address}}:</text>
				<text>{{orderData.logisticsInfoDto?orderData.logisticsInfoDto[$lang.startAddress]:''}}</text>
			</view>
			<view class="finish-info">
				<text>{{$lang.lang.finsh.phone}}:</text>
				<text>{{orderData.logisticsInfoDto?orderData.logisticsInfoDto.startTell:''}}</text>
			</view>
			<view class="finish-info">
				<text>{{$lang.lang.price.warmPrompt}}:</text>
				<text>{{$lang.lang.finsh.notice}}</text>
			</view>
		</view>
		<view class="footer-btns">
			<view class="blue" @click="toOrderInfo">{{$lang.lang.finsh.see}}</view>
			<view class="yellow" @click="toRc">{{$lang.lang.finsh.know}}</view>
			<view class="green" @click="again">{{$lang.lang.finsh.again}}</view>
		</view>
		<uni-popup ref="choiceTransport" type="center" :mask-click="false">
			<view class="ad-conten">
				<view class="ad-title">{{$lang.lang.notices.transport}}</view>
				<view class="transport-info">
				     <view @click="toCreatOrder(1)">{{$lang.lang.index.sea}}</view>
					 <view @click="toCreatOrder(3)">{{$lang.lang.index.air}}</view>
					 <view @click="toCreatOrder(4)">{{$lang.lang.index.seaAir}}</view>
				</view>
				<view class="ad-btns">
					<view class="ad-btn" @click="closeTransport">
						<view>{{$lang.lang.login.close}}</view>
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				orderData:[],
				tranData:[],
				lineData:[]
			}
		},
		onLoad(options) {
			// this.getLineData()
			this.getTranData()
			if(options.orderId){
				this.getOrderData(options.orderId)
			}
		},

		methods: {
			getTranName(transportId){
				var transName = ''
				let that = this
				if(that.tranData.length>0){
					var name = that.tranData.filter(item=>item.value == transportId)||{}
					if(name.length>0) {
						if(that.$lang.locale=='zh'){
							transName = name[0].label
						}else{
							transName = name[0].labelEn
						}
					}
				}
				return transName
			},
			getOrderData(id){
				this.$request.get('/app-api/my/order/info/'+id).then(res => {
					if(res.code==0&&res.data){
						this.orderData = res.data
						this.getOpenedRouter(this.orderData.lineId)
						var name = []
						if(this.orderData.orderItemVOList.length>0){
							this.orderData.orderItemVOList.forEach((item)=>{
								name.push(item[this.$lang.prodTitle])
							})
							this.orderData.goodsName = name.join(',')
						}
					}
				})
			},
			again(){
				this.openTransport()
				// uni.redirectTo({
				// 	url:'../create_order/create_order'
				// })
			},
			getTranData(){
				this.$request.getConfig('transport_type').then(res => {
					if(res.code==0&&res.data&&res.data.list.length>0){
						this.tranData = res.data.list
					}
				})
			},
			getLineName(){
				if(this.orderData&&this.orderData.logisticsInfoDto){
					if(this.$lang.locale=='zh'){
						return this.orderData.logisticsInfoDto.startTitleZh+'>>'+this.orderData.logisticsInfoDto.destTitleZh
					}else{
						return this.orderData.logisticsInfoDto.startTitleEn+'>>'+this.orderData.logisticsInfoDto.destTitleEn
					}
				}
			},
			getLineData(){
				this.$request.post('/app-api/ecw/warehouse/openedRouterList',{lineId:0}).then(res => {
					if(res.code==0&&res.data.length > 0){
						this.lineData = res.data
					}
				})
			},
			//获取线路
			getOpenedRouter (lineId) {
				if(lineId){
					var transName = ''
					if(this.lineData.length>0){
						var name = this.lineData.filter(item=>item.id == lineId)||{}
						if(name.length>0){
							if(this.$lang.locale=='zh'){
								transName = name[0].startTitleZh+'>>'+name[0].destTitleZh
							}else{
								transName = name[0].startTitleEn+'>>'+name[0].destTitleEn
							}
						}
					}
					return transName
				}
			},
			toOrderInfo(){
				uni.redirectTo({
					url:'../orderInfo/orderInfo?id='+this.orderData.orderId
				})
			},
			toRc(){
				uni.navigateTo({
					url:'../levite/levite'
				})
			},
			//复制订单号
			toCopy(){
				let str = this.$lang.lang.finsh.orderNo+' : '+this.orderData.orderNo+'\n'+this.$lang.lang.create.marks+' : '+this.orderData.marks
				str = str +'\n'+ this.$lang.lang.orderInfo.ballAddress+' : '+(this.orderData.logisticsInfoDto?(this.$lang.locale=='zh'?this.orderData.logisticsInfoDto.destTitleZh:this.orderData.logisticsInfoDto.destTitleEn):'')
				str = str +'\n' + this.$lang.lang.finsh.saddress + ' : '+ (this.orderData.logisticsInfoDto?this.orderData.logisticsInfoDto.startAddressZh:'')
				str = str +'\n' + this.$lang.lang.finsh.phone + ' : '+ (this.orderData.logisticsInfoDto?this.orderData.logisticsInfoDto.startTell:'')
				uni.setClipboardData({
					data:str,
					success:()=>{
						uni.showToast({
							title:this.$lang.lang.notices.copySuccess,
							icon:"none",
						})
					}
				})
			},
			closeTransport(){
				this.$refs.choiceTransport.close()
			},
			openTransport(){
				this.$refs.choiceTransport.open()
			},
			toCreatOrder(id){
				uni.navigateTo({
					url:'../create_order/create_order?transportId='+id
				})
			},
			getCustomsType(type){
				if(type == 1){
					return this.$lang.lang.create.myCustoms
				}else if(type == 2){
					return this.$lang.lang.create.ownCustoms
				}else{
					return this.$lang.lang.create.allCustoms
				}
			}
		}
	}
</script>

<style scoped>
.order-finish{
	width: 84%;
	margin: 200upx auto 0 auto;
	background-image: url(../../static/img/order-finsh.png);
	background-size: 100% 100%;
	padding: 5%;
	background-repeat: no-repeat;
	min-height: 430upx;
}
.finish-top{
	padding: 28upx 0 6upx 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	position: relative;
}
.finish-top image{
	margin-top: 20upx;
	width: 240upx;
	position: absolute;
	right: 20upx;
	top:180upx;
}
.finish-info{
	margin-top: 24upx;
	font-size: 24upx;
}
.finish-info text:first-child{
	font-weight: 600;
}
.finish-info text:last-child{
	color: #666666;
	margin-left: 6upx;
}
.footer-btns{
	width: 100%;
	display: flex;
	align-items: center;
	padding: 40upx 0;
	justify-content: space-evenly;
}
.footer-btns view{
	padding: 10upx 40upx;
	text-align: center;
	color: #fff;
	border-radius: 8upx;
	font-size: 24upx;
}
.blue{
	background-color: #1e98d7;
}
.yellow{
	background-color: #f59a23;
}
.green{
	background-color: #95f204;
}
.copy{
	padding: 16upx;
	color: #1e98d7;
	font-size: 26upx;
	display: inline-block;
}
.transport-info{
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	margin-top: 20upx;
}
.transport-info view{
	color: #fff;
	background-color: #297CE7;
	border-radius: 8upx;
	padding: 18upx 0;
	width: 40%;
	text-align: center;
	margin: 18upx 5%;
	font-size: 28upx;
}
.ad-conten{
	width: 580upx;
	border-radius: 16upx;
	background-image: url(../../static/img/index_pbg.png);
	background-repeat: no-repeat;
	background-size: 100%;
	padding-top: 182upx;
	padding-bottom: 20upx;
}
.ad-bg{
	width: 60upx;
	height: 60upx;
	margin-top: -154upx;
	margin-right: 14upx;
	float: right;
}
.ad-title{
	width: 100%;
	text-align: center;
	font-size: 40upx;
	font-weight: 600;
}
.ad-btns{
	width: 90%;
	margin: 20rpx auto;
	display:flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-between;
}
.ad-btn{
	width: 90%;
	color: #fff;
	text-align: center;
	padding: 40upx 0;
	background-image: url(../../static/img/btn_bg.png);
	background-size: 100%;
	background-repeat: no-repeat;
}
.ad-btn view{
	margin-top: -20upx;
	font-size: 36upx;
}
</style>