<template>
	<view class="content">
		<img class="expressImg" src="@/static/imgs/express-img.png">
		<view class="expressCont">
			<view class="express-write">
				<view class="express-block express-adderss">
					<view class="express-block-name">
						邮寄地址
					</view>
					<view class="express-block-write express-block-grey">
						{{adderss.full_address}}
					</view>
				</view>
				<view class="express-block">
					<view class="express-block-name">
						物流公司
					</view>
					<view class="express-block-write">
						<picker @change="companyChange" :value="companyIndex" :range="companyArray" range-key="name">
							<view class="uni-input" v-if="companyArray[companyIndex]">{{companyArray[companyIndex].name}}</view>
						</picker>
						<img src="@/static/imgs/basic_down.png">
					</view>
				</view>
				<view class="express-block">
					<view class="express-block-name">
						订单类型
					</view>
					<checkbox-group @change="typeChange" class="express-check">
						<view class="express-block-check" v-for="(letterItem, typeIndex) in typeArray" :key="typeIndex">
							<checkbox :value="letterItem.type.toString()" color="#4e7bfe" style="transform:scale(.6); margin-top: -3rpx;"/>
							<text>{{letterItem.name}}</text>
						</view>
					</checkbox-group>
					<!-- <view class="express-block-write">
						<picker @change="typeChange" :value="typeIndex" :range="typeArray" range-key="name">
							<view class="uni-input" v-if="typeArray[typeIndex]">{{typeArray[typeIndex].name}}</view>
						</picker>
						<img src="@/static/imgs/basic_down.png">
					</view> -->
				</view>
				<view class="express-block">
					<view class="express-block-name">
						物流单号
					</view>
					<input class="express-block-write" v-model="number" type="text" placeholder="填写物流单号" placeholder-class="placeholderClass"/>
				</view>
				<view class="express-block">
					<view class="express-block-name">
						备注信息
					</view>
					<view class="express-block-textarea">
						<textarea placeholder-style="color:#999999; font-size: 30rpx" maxlength="500" name="remark" placeholder="可将您的详细情况及诉求进行描述..." @input="remarkInput"/>
						<text>{{cursor}}/500</text>
					</view>
				</view>
				<!-- <view class="express-block">
					<view class="express-block-name">
						上传凭证
					</view>
					<view class="express-photo">
						<img class="camera" src="@/static/icon/cameraImg.png">
						<view class="express-tips">上传图片</view>
					</view>
				</view>
				 -->
				<!-- <view class="album-list">
					<view class="album-list-li">
						<image class="album-list-img" src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic17.997788.com%2F_pic_search%2F00%2F04%2F13%2F26%2F4132653.jpg&refer=http%3A%2F%2Fpic17.997788.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1670402044&t=c3a80087befa0d7db313ca904c870f23" mode="aspectFill"></image>
						<view class="album-remove">删除
						</view>
					</view>
				</view> -->
				<button class="idcardBtn" :disabled="disabled" @click="basicSubmit" >
					确认提交
				</button>
			</view>
		</view>
	</view>
</template>

<script>
	import { getExpress, Send } from '@/apis/interfaces/user'
	import { config } from '../../apis'
	export default {
		data() {
			return {
				disabled	 : false, // 按钮状态
				companyArray : [],
				companyIndex : 0,
				typeArray    : [],
				typeIndex	 : [],
				number		 : '',
				remark		 : '',
				cursor		 : 0,
				adderss		 : '',
				newMobile    : '',
				newmetarial  : ''
			}
		},
		onShow() {
			// 获取物流公司
			this.expressInfo()
			this.adderss     = this.$Route.query.adderss
			this.newMobile   = this.$Route.query.mobile
			this.newmetarial = this.$Route.query.metarial
			
			let newtypeArray	= []
			if(!this.$Route.query.mobile){
				newtypeArray.push({
					type: 1,
					name: '电话卡'
				})
			}
			if(!this.$Route.query.metarial){
				newtypeArray.push({
					type: 2,
					name: '征信资料'
				})
			}
			this.typeArray = newtypeArray
			
			console.log(this.typeArray)
		},
		methods: {
			// 物流公司选择
			companyChange(e) {
				this.companyIndex = e.detail.value
			},
			
			// 订单类型选择
			typeChange(e) {
				this.typeIndex = e.detail.value
			},
			
			// 备注信息
			remarkInput(val) {
				this.remark = val.detail.value
				this.cursor = val.detail.cursor
			},
			
			// 物流公司
			expressInfo(){
				getExpress().then(res => {
					this.companyArray = res
				}).catch(err => {
					uni.showToast({
						title: err.message,
						icon : 'none'
					})
				})
			},
			
			// 提交
			basicSubmit() {
				let data = {
					business_order_id: this.$Route.query.id,
					express_id		 : this.companyArray[this.companyIndex].express_id,
					staff_address_id : this.adderss.address_id,
					number			 : this.number,
					type  			 : this.typeIndex,
					remark			 : this.remark
				}
				Send(this.$Route.query.id, data).then(res => {
					uni.showToast({
						title: '提交成功',
						icon: "none"
					})
					this.disabled = true
					
					setTimeout(() => {
						uni.navigateBack(1)
						uni.hideLoading() 
					}, 1500)
				}).catch(err => {
					uni.showToast({
						title: err.message,
						icon : 'none'
					})
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		background-color: #f4f6fa;
		height: 100vh;
		overflow-y: scroll;
	}
	.expressImg {
		width: 100%;
	}
	.expressCont {
		padding: 0 $padding $padding;
		box-sizing: border-box;
		position: relative;
		margin-top: -($margin + 10);
		.express-write {
			background-color: #ffffff;
			padding: $padding + 10 $padding + 20;
			box-sizing: border-box;
			border-radius: $radius;
		}
	}
	.express-block {
		margin-bottom: $margin + 20;
		.express-block-name {
			margin-bottom: $margin;
			font-weight: 600;
		}
		.express-check {
			display: flex;
			width: 100%;
			.express-block-check {
				margin-right: $margin + 10;
				height: 48rpx;
				line-height: 48rpx;
				display: flex;
				font-size: $title-size-m;
			}
		}
		.express-block-write {
			background-color: #ffffff;
			display: flex;
			height: 90rpx;
			line-height: 90rpx;
			padding: 0 $padding;
			border: 2rpx solid #ededed;
			box-sizing: border-box;
			border-radius: $radius-sm;
			position: relative;
			img {
				width: 28rpx;
				height: 28rpx;
				position: absolute;
				right: $padding;
				top: $padding;
			}
			picker {
				width: 100%;
				height: 100%;
			}
		}
		.express-block-grey {
			color: $text-gray;
			height: auto;
			line-height: 44rpx;
			padding: $padding - 10 $padding;
			box-sizing: border-box;
			font-size: $title-size-m;
			text-align: justify;
		}
		.express-block-textarea {
			background-color: #ffffff;
			padding: $padding;
			box-sizing: border-box;
			border: 2rpx solid #ededed;
			border-radius: $radius-sm;
			textarea {
				width: 100%;
				font-size: $title-size-m;
				text-align: justify;
			}
			text {
				color: #999999;
				font-size: $title-size-sm;
				width: 100%;
				text-align: right;
				display: block;
				margin-top: 20rpx;
			}
		}
	}
	.express-photo {
		border-radius: $radius-sm;
		border: 2rpx solid #ededed;
		padding: 0 $padding;
		position: relative;
		height: 90rpx;
		line-height: 90rpx;
		display: flex;
		img {
			width: 46rpx;
			height: 46rpx;
			margin-top: 24rpx;
		}
		.express-tips {
			position: absolute;
			right: $padding;
			top: 0;
			font-size: $title-size-m;
			color: #999999;
		}
	}
	.album-list {
		margin: $margin -10rpx 0;
		display: flex;
		.album-list-li {
			position: relative;
			width: calc(33.33% - 20rpx);
			padding-top: calc(33.33% - 20rpx);
			margin: 0 10rpx;
			box-sizing: border-box;
			.album-list-img {
			    position: absolute;
			    top: 0;
			    left: 0;
			    width: 100%;
			    height: 100%;
			    background: #f5f5f5;
			    border-radius: 6rpx;
			}
			.album-remove{
			    position: absolute;
			    right: 0;
			    bottom: 0;
			    background: rgba(0, 0, 0, .5);
			    color: white;
			    font-size: 28rpx;
			    text-align: center;
			    line-height: 50rpx;
			    width: 100%;
			    z-index: 9;
			}
		}
	}
	.idcardBtn {
		margin: $margin*2 0 0;
		background-image: linear-gradient(to right, #ff660b, #ff4330);
		color: #ffffff;
		border-radius: $radius-lg;
		line-height: 90rpx;
		text-align: center;
		&[disabled] {
			background-color: #eba5a5;
		}
	}
</style>