<template>
	<!-- 收货详情 -->
	<view class="ware-house">
		<u-navbar back-icon-color="#333333" :background="{ backgroundColor: '#F4F5F7' }" title="收货" titleColor="#333333" :border-bottom="false" title-bold></u-navbar>
		<view class="tools-box">
			<text class="tools-box-title">品牌</text>
			<view class="select-view">
				<xh-picker-select
					background="#f4f5f7"
					placeholder="全部"
					border
					width="100%"
					:disabled="disabled"
					:value="form.brandId"
					:rangeKey="rangeKey"
					:list="brandList"
					@change="pickerchange"
				></xh-picker-select>
			</view>
		</view>
		<!-- 列表 -->
		<view class="tab-view">
			<receive-qr-code :disabled="disabled" :value="form.productCode" @onScanCodeChange="onScanCodeChange"></receive-qr-code>
			<receive-images ref="receive-images" :disabled="disabled" :value="form.image" @updateImages="updateImages"></receive-images>
			<receive-bar-code :disabled="disabled" :value="form.courierNumber" @onBarCodeChange="onBarCodeChange"></receive-bar-code>
		</view>
		<!-- 底部按钮 -->
		<fixed-button text="保存并下一个" v-if="!disabled" @handleClick="submit"></fixed-button>
		<!-- 通用提示框 -->
		<view><u-toast ref="uToast" /></view>
	</view>
</template>

<script>
import XhPickerSelect from './components/XhPickerSelect.vue';
import FixedButton from '@/components/mine/fixed-button.vue';
import ReceiveQrCode from './components/receiveDetail/receiveQrCode.vue';
import ReceiveBarCode from './components/receiveDetail/receiveBarCode.vue';
import ReceiveImages from './components/receiveDetail/receiveImages.vue';
import { receiveStatusOptions } from '@/common/optinos/mine/received.js';
import { showToast,setNeedRefresh } from '@/common/common.js';
export default {
	components: {
		XhPickerSelect,
		FixedButton,
		ReceiveQrCode,
		ReceiveBarCode,
		ReceiveImages
	},
	data() {
		return {
			receiveStatusOptions,
			rangeKey: 'name',
			brandList: [],
			disabled: false,
			form: {
				// id: '',
				brandId: '',
				brandName:"",
				productCode: '', // 箱码二维码
				image: "", // 箱码图片
				courierNumber: '' // 快递单号
			}
		};
	},
	computed: {},
	onLoad(e) {
		this.getBrandList();
		if (e && e.id) {
			this.form.id = e.id;
			this.getDetail();
			this.disabled = true;
		}
	},
	onShow() {},
	methods: {
		pickerchange(data) {
			this.form.brandId = data.id;
			this.form.brandName = data.name;
		},
		onScanCodeChange(data) {
			this.form.productCode = data;
		},
		onBarCodeChange(data) {
			this.form.courierNumber = data;
		},
		updateImages(data) {
			let image = data.map(item => process.uniEnv.qn_asset_url + '/' + item.src);
			this.form.image = image.join(";");
		},
		// 获取品牌列表
		async getBrandList() {
			let res = await this.$u.api.brandListByReceivedModules();
			let { code, data,message } = res;
			if (code === 200) {
				this.brandList = data || [];
			}else{
				showToast(message);
			}
		},
		async getDetail() {
			let res = await this.$u.api.receiveDetailByReceivedModules(this.form.id);
			let { code, data,message } = res;
			if (code === 200) {
				let image = data.image.split(';').map(item => {
					return { path: item };
				});
				this.$refs['receive-images'].initImages(image);
				this.form = Object.assign(this.form, data);
				if(!this.form.signId){
					showToast('箱码不存在');
				}
			}else{
				showToast(message);
			}
		},
		submit() {
			let { brandId, productCode, courierNumber, image } = this.form;
			if (!brandId) {
				showToast('请选择品牌');
				return false;
			}
			if (!productCode) {
				showToast('请输入箱码');
				return false;
			}
			if (!image) {
				showToast('最少上传一张图片');
				return false;
			}

			if (!courierNumber) {
				showToast('请输入快递单号');
				return false;
			}
			this.$u.throttle(this.createdReceive(this.form), 300)
		},
		async createdReceive(form) {
			let res=await this.$u.api.addReceiveByReceivedModules(form)
			let { code, data,message } = res;
			if (code === 200) {
				showToast('操作成功');
				setNeedRefresh()
				setTimeout(() => {
					this.replacePage()
				}, 1500);
			}else{
				showToast(message);
			}
		},
		// 刷新当前页
		replacePage() {
			uni.redirectTo({
				url: 'pages/mine/warehouse/receiveDetail'
			});
		}
	}
};
</script>
<style lang="scss" scoped>
.ware-house {
	padding: 0 30rpx;
	display: flex;
	flex-direction: column;
	margin-bottom: 100rpx;
	padding-bottom: constant(safe-area-inset-bottom);
	/* 兼容 iOS < 11.2 */
	padding-bottom: env(safe-area-inset-bottom);
	/* 兼容 iOS >= 11.2 */
	.tools-box {
		width: 100%;
		height: 100rpx;
		border-radius: 12rpx;
		display: flex;
		align-items: center;
		margin-bottom: 30rpx;
		padding: 0 30rpx;
		background-color: #ffffff;
		.tools-box-title {
			font-size: 28rpx;
			margin-right: 20rpx;
			width: 58rpx;
		}
		.select-view {
			width: 552rpx;
		}
	}
}
</style>
