<template>
	<view class="content">
		<view class="mailed-back"></view>
		<view class="receive" v-if="address != ''" @click="onCopy(address.name + ' ' + address.mobile + ' ' + address.full_address)">
			<text class="receive-icon">收</text>
			<view class="receive-text">
				<view class="receive-name">{{address.name}}<text>{{address.mobile}}</text></view>
				<view class="receive-add">{{address.full_address}}</view>
			</view>
			<uni-icons class="receive-right" type="right" color="gray"></uni-icons>
		</view>
		<view class="material">
			<view class="material-title">
				<text class="material-title-text">邮寄物品</text>
				<u-checkbox-group @change="onAll" v-model="checkboxAll">
					<u-checkbox name="all" activeColor="#446EFE" shape="circle" label="全选" labelSize="14" labelColor="#111"></u-checkbox></text>
				</u-checkbox-group>
			</view>
			<u-checkbox-group
				v-model="checkboxValue"
				iconPlacement="right"
				placement="column"
				@change="onCheckboxChange"
			>
				<view class="material-item" v-for="(item, index) in deliverCount" :key="index">
					<u-checkbox :name="item.value" activeColor="#446EFE" shape="circle" :label="item.title" labelSize="14" labelColor="#111"></u-checkbox>
				</view>
			</u-checkbox-group>
		</view>
		<view class="from">
			<view class="from-flex">
				<label>物流单号</label>
				<view class="from-inputs">
					<input class="from-inputs-input" v-model="no" type="text" placeholder="请填写">
					<uni-icons type="scan" color="#111" size="36rpx" @click="onScan"></uni-icons>
				</view>
			</view>
			<view class="from-flex">
				<label>物流公司</label>
				<view class="from-inputs">
					<picker :range="expressArr" range-key="name" :value="expressIndex" @change="onPicker">
						<view class="from-inputs-input" :class="{ 'hide': expressIndex == null }">{{expressIndex == null ? '请选择': expressArr[expressIndex].name}}</view>
					</picker>
					<uni-icons type="right" color="#999999" size="36rpx"></uni-icons>
				</view>
			</view>
		</view>
		<view class="from-btn">
			<button @click="onSubmit">提交</button>
		</view>
	</view>
</template>

<script>
	import { express, orderAddress, submitExpresses } from '@/apis/interfaces/mailed.js'
	export default {
		data() {
			return {
				address		 : '',
				no			 : '',
				expressIndex : null,
				expressArr	 : [],
				checkboxAll	 : [],
				checkboxValue: [],
				deliverCount : []
			};
		},
		created() {
			uni.showLoading({
				title: '加载中...',
				mask : true
			})
			Promise.all([orderAddress(this.$Route.query.orderId),express()]).then(res => {
				let addressData 	= res[0],
					expressData 	= res[1],
					deliverOption	= []
					
				for(let key in addressData.deliver_count){
					if(key == 'mobile' && !addressData.deliver_count[key]){
						deliverOption.push({
							value: 1,
							title: '电话卡'
						})
					}
					if(key == 'metarial' && !addressData.deliver_count[key]){
						deliverOption.push({
							value: 2,
							title: '征信资料'
						})
					}
				}
				this.expressArr 	= expressData
				this.deliverCount	= deliverOption
				this.address		= addressData.address
				uni.hideLoading()
			}).catch(err => {
				uni.showToast({
					title: err.message,
					icon : 'none'
				})
			})
		},
		methods: {
			// 选择框
			onCheckboxChange(e){
				this.checkboxAll = e.length == this.deliverCount.length ? ['all'] : []
				this.checkboxValue = e;
			},
			// 全选
			onAll(e){
				if(e.length > 0){
					this.checkboxValue = this.deliverCount.map(val => {
						return val.value
					})
				}else{
					this.checkboxValue = []
				}
			},
			// 提交订单物流
			onSubmit(){
				if(this.checkboxValue.length <= 0){
					uni.showToast({
						title: '请选择邮寄的物品',
						icon : 'none'
					})
					return
				}
				if(this.expressIndex == null){
					uni.showToast({
						title: '请选择物流公司',
						icon : 'none'
					})
					return
				}
				uni.showLoading({
					title: '加载中...',
					mask : true
				})
				submitExpresses(this.$Route.query.orderId, {
					express_id		: this.expressArr[this.expressIndex].express_id,
					number	  		: this.no,
					type	  		: this.checkboxValue,
					staff_address_id: this.address.address_id
				}).then(res => {
					uni.showModal({
						content		: '材料已邮寄',
						showCancel	: false,
						success		: () => {
							this.$store.commit('setOrderId', this.$Route.query.orderId)
							this.$Router.back()
						}
					})
				}).catch(err => {
					uni.showToast({
						title: err.message,
						icon : 'none'
					})
				})
			},
			// 选择物流公司
			onPicker(e){
				this.expressIndex = e.detail.value
			},
			// 扫码
			onScan(){
				uni.scanCode({
					scanType: ['barCode', 'qrCode'],
					success: res => {
						let { result } = res;
						this.no = result;
					}
				})
			},
			// 复制地址
			onCopy(e){
				uni.setClipboardData({
					data: e,
					success: res => {
						uni.showToast({
							title: '地址已复制',
							icon : 'none'
						})
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.mailed-back{
		background: $main-color;
		height: 150rpx;
	}
	// 按钮
	.from-btn{
		padding: 30rpx;
		button{
			background: $main-color;
			color: white;
			font-size: 32rpx;
			height: 100rpx;
			line-height: 100rpx;
			padding: 0;
			border-radius: 20rpx;
		}
	}
	// 表单
	.from{
		background: white;
		border-radius: 20rpx;
		padding: 10rpx 30rpx;
		margin: 30rpx;
		.from-flex{
			display: flex;
			justify-content: space-between;
			align-items: center;
			font-size: 30rpx;
			label{
				width: 150rpx;
				line-height: 90rpx;
			}
			.from-inputs{
				width: calc(100% - 150rpx);
				display: flex;
				justify-content: flex-end;
				align-items: center;
				.from-inputs-input{
					font-size: 30rpx;
					text-align: right;
					margin-right: 30rpx;
					flex: 1;
					height: 90rpx;
					line-height: 90rpx;
					&.hide{
						color: gray;
					}
				}
			}
		}
	}
	// 邮寄物品
	.material{
		background: white;
		border-radius: 20rpx;
		padding: 30rpx;
		margin: 30rpx;
		.material-title{
			padding-bottom: 20rpx;
			font-size: 30rpx;
			display: flex;
			justify-content: space-between;
			&-text{
				font-weight: bold;
			}
		}
		.material-item{
			padding: 20rpx 0;
		}
	}
	// 邮寄信息
	.receive{
		background-color: white;
		margin: -130rpx 30rpx 0;
		border-radius: 20rpx;
		padding: $padding;
		display: flex;
		justify-content: space-between;
		align-items: center;
		.receive-icon{
			background: $main-color;
			color: white;
			width: 48rpx;
			height: 48rpx;
			line-height: 48rpx;
			border-radius: 10rpx;
			display: inline-block;
			font-size: 28rpx;
			text-align: center;
		}
		.receive-text{
			width: calc(100% - 130rpx);
			.receive-name{
				padding-bottom: 5rpx;
				font-weight: bold;
				font-size: 32rpx;
				text{
					font-size: 90%;
					margin-left: 20rpx;
					font-weight: normal;
					color: #111;
				}
			}
			.receive-add{
				font-size: 28rpx;
				color: #111;
			}
		}
		.receive-right{
			color: gray;
		}
	}
</style>
