<template>
	<view class="whole">
		<view class="colitem">
			<view class="tit">1.请将退货物品寄到以下地址</view>
			<view class="arrdbox">
				<view class="arrd">
					<text>{{refundInfo.refund_address_name}}&nbsp;&nbsp;{{refundInfo.refund_address_mobile || refundInfo.refund_address_tel}}</text><br>
					<text>{{refundInfo.refund_address_province_name}}{{refundInfo.refund_address_city_name}}{{refundInfo.refund_address_area_name}}{{refundInfo.refund_address_detail}}</text>
				</view>
				<view class="copybtn" @click="copyAddress()">复制</view>
			</view>
		</view>
		
		<view class="colitem">
			<view class="tit">2.请填写退货物流单号<text></text></view>
			<view class="cellbox">
				<view class="cell cell1">
					<text>快递单号</text>
					<input class="inpt" type="text" v-model="express_no" placeholder="请输入快递单号"/>
					<view @click="scanQrCode()">
						<up-icon name="scan" :color="Color" size="20" />
					</view>
				</view>
				<view class="cell" @click="showConpany = true">
					<text>快递公司</text>
					<view class="inpt" v-if="companyIndex === ''">请选择快递公司</view>
					<view class="inpt" v-else>{{conpanyList[companyIndex].name}}</view>
				</view>
			</view>
		</view>
		
		<view class="bottom">
			<view class="btn" @click="toAfterSale()">确认提交</view>
		</view>
		
		<!-- 选择快递公司 -->
		<up-popup :show="showConpany" :round="10" mode="bottom" close-on-click-overlay closeable @close="showConpany = false">
			<view class="reasonbox">
				<view class="title">请选择快递公司</view>
				<view class="box">
					<view class="row" v-for="(item, index) in conpanyList" @click="selectConpany(index)">
						<view class="tit">{{item.name}}</view>
						<span v-if="companyIndex === index" class="iconfont icon-checked"></span>
						<span v-else class="iconfont icon-circle"></span>
					</view>
				</view>
			</view>
		</up-popup>
		
		<!-- 隐私协议弹窗 -->
		<privacy-popup :show-dialog="showPrivacy" @close="showPrivacy = false" @agree="showPrivacy = false" @refuse="showPrivacy = false" />
		
	</view>
</template>

<script>
	import { ref, reactive, toRefs } from 'vue'
	import { showToast, judgePrivacy } from '@/components/common.js'
	import { get, post } from '@/api/request.js'
	import privacyPopup from '@/components/privacyPopup/index.vue'
	
	export default {
		components: {
			privacyPopup
		},
		setup() {
			const data = reactive({
				refundInfo: {},
				express_no: '',
				companyIndex: '',
				refund_id: '',
				showConpany: false,
				conpanyList: [],
				modify: false,
				Color: uni.getStorageSync('theme_color'),
				showPrivacy: false
			})
			
			async function scanQrCode() {
				if(await judgePrivacy()) {
					data.showPrivacy = true
					return false
				}
				uni.scanCode({
				    onlyFromCamera: false,
					scanType: ['barCode', 'qrCode'],
				    success(res){
						data.express_no = res.result
						showToast('扫码成功')
				    },
					fail(error){
						showToast('扫码失败')
					}
				})
			}
			
			function toAfterSale() {
				if(data.express_no === '') {
					showToast('请填写快递单号')
					return false
				}
				if(data.companyIndex === '') {
					showToast('请选择快递公司')
					return false
				}
				let params = {
					delivery_company_id: data.conpanyList[data.companyIndex].id,
					delivery_code: data.conpanyList[data.companyIndex].code,
					ship_sn: data.express_no
				}
				
				let url = '/api/v1/orderRefundApply/fillShip/'
				if(data.modify) { //修改单号
					url = '/api/v1/orderRefundApply/editShip/'
				}
				post(url + data.refund_id, params).then((res) => {
					uni.hideLoading()
					uni.navigateBack({
						delta: 1
					})
				})
			}
			
			// 获取订单信息
			async function getRefundInfo() {
				await get(`/api/v1/orderRefundApply/${data.refund_id}`).then((res) => {
					data.refundInfo = res.data
					data.express_no = res.data.ship_sn
				})
			}
			
			async function copyAddress() {
				if(await judgePrivacy()) {
					data.showPrivacy = true
					return false
				}
				let address = data.refundInfo.refund_address_name + ' ' +
							  (data.refundInfo.refund_address_mobile || data.refundInfo.refund_address_tel) + ' ' +
							  data.refundInfo.refund_address_province_name +
							  data.refundInfo.refund_address_city_name +
							  data.refundInfo.refund_address_area_name +
							  data.refundInfo.refund_address_detail
				uni.setClipboardData({
					data: address,
					success: function () {
						uni.showToast({
							icon: 'none',
							title: '地址信息已复制'
						})
					},
					fail: function () {
						uni.showToast({
							icon: 'none',
							title: '复制失败'
						})
					}
				})
			}
			
			async function getConpanyList() {
				await get('/api/v1/delivery/company').then((res) => {
					data.conpanyList = res.data
					if(data.refundInfo.delivery_company && data.refundInfo.delivery_company.id) {
						res.data.forEach((item, index) => {
							if(data.refundInfo.delivery_company.id == item.id) {
								data.companyIndex = index
							}
						})
					}
				})
			}
			
			function selectConpany(index) {
				data.companyIndex = index
				data.showConpany = false
			}
			
			return {
				...toRefs(data),
				scanQrCode,
				toAfterSale,
				getConpanyList,
				selectConpany,
				getRefundInfo,
				copyAddress
			}
		},
		async onLoad(options) {
			this.refund_id = options.refund_id
			this.modify = options.modify ? true : false
			await this.getRefundInfo()
			await this.getConpanyList()
		}
	}
</script>

<style lang="scss" scoped>
	.whole {
		box-sizing: border-box;
		.colitem{
			padding: 30rpx;
			background: #fff;
			margin-bottom: 20rpx;
			.tit{
				color: #333;
				font-size: 30rpx;
				font-weight: bold;
			}
			.arrdbox{
				font-size: 26rpx;
				color: #303030;
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 20rpx;
				background: #F5F5F5;
				margin-top: 20rpx;
				border-radius: 10rpx;
				.arrd{
					width: calc(100% - 140rpx);
					text{
						color: #7B7B7B;
						line-height: 44rpx;
					}
				}
				.copybtn{
					height: 48rpx;
					padding: 0 30rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					font-size: 26rpx;
					color: #333;
					border: 1rpx solid #BBBBBB;
					border-radius: 48rpx;
				}
			}
			.cellbox{
				margin-top: 20rpx;
				font-size: 28rpx;
				background: #F5F5F5;
				border-radius: 10rpx;
				padding: 6rpx 0;
				.cell{
					display: flex;
					align-items: center;
					padding: 20rpx;
					&.cell1{
						border-bottom: 1rpx solid #E5E5E5;
					}
					text{
						color: #000000;
						margin-right: 40rpx;
					}
					.inpt{
						width: calc(100% - 220rpx);
					}
				}
				
			}
		}
		.bottom{
			position: fixed;
			left: 0;
			bottom: 20rpx;
			width: 100%;
			padding: 0 30rpx;
			z-index: 10;
			box-sizing: border-box;
			.btn{
				height: 80rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 30rpx;
				width: 100%;
				color: #fff;
				border-radius: 80rpx;
				background: v-bind('Color');
			}
		}
	}
	
	.reasonbox{
		padding: 0 30rpx;
		.title{
			font-size: 30rpx;
			color: #303030;
			font-weight: bold;
			padding: 30rpx 0;
			border-bottom: 1rpx solid #E5E5E5;
		}
		.box{
			padding-bottom: 100rpx;
			min-height: 40vh;
			max-height: 60vh;
			overflow: auto;
			.row{
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 20rpx 0;
				.tit{
					font-size: 28rpx;
					color: #707070;
				}
			}
		}
	}
	.iconfont{
		font-size: 22px;
	}
	.icon-checked{
		color: v-bind('Color');
	}
</style>
