<template>
	<view>
		<view class="section">
			<u-field v-model="form.shopModel" label="商品型号" placeholder="请输入商品型号">
			</u-field>
			<u-field v-model="form.shopNum" label="商品数量" placeholder="请输入商品数量">
			</u-field>
		</view>
		<view class="section">
			<u-input class="realAddr" type="textarea" placeholder="请粘贴或输入文本，点击“识别”自动识别姓名、电话和地址" v-model="content">
			</u-input>
			<view class="btnContent">
				<view class="btn" @click="onIntelligence" :style="{'opacity': content?1:0.6 }">
					识别
				</view>
			</view>
		</view>
		<view class="section">
			<u-field v-model="form.getPeopleName" label="收货人" placeholder="请输入收货人姓名">
			</u-field>
			<u-field v-model="form.getPeoplePhone" label="手机号" placeholder="请输入收货人手机号">
			</u-field>
			<u-field @click="cityShow=true" v-model="form.city" :disabled="true" label="所属城市" placeholder="请选择所属城市"
				right-icon="arrow-right">
			</u-field>
			<u-picker mode="region" v-model="cityShow" @confirm="regionChage">{{form.city}}</u-picker>
			<view class="addrDetail">
				<view class="addrTitle">
					详细地址
				</view>
				<u-input type="textarea" v-model="form.address" placeholder="请输入详细地址"></u-input>
			</view>
		</view>
		<view class="section">
			<picker @change="changeMode" mode="selector" range-key="text" :value="index" :range="modeList">
				<u-field v-model="form.setGoodsMode" :disabled="true" label="发货模式" placeholder="请选择发货模式"
					right-icon="arrow-right">
				</u-field>
			</picker>
			<u-action-sheet :list="modeList" v-model="modeShow"></u-action-sheet>
			<u-field v-model="form.setGoodsCompany" label="发货公司" placeholder="请输入发货公司">
			</u-field>
			<u-field v-model="form.setGoodsName" label="发货人" placeholder="请输入发货人">
			</u-field>
			<u-field v-model="form.setGoodsPhone" label="发货人电话" placeholder="请输入发货人电话">
			</u-field>
			<picker @change="changeOption" mode="selector" range-key="express_name" :value="index" :range="expressList">
				<u-field v-model="form.logisticsName" :disabled="true" label="物流公司" placeholder="请选择物流公司"
					right-icon="arrow-right">
				</u-field>
			</picker>
			<u-field v-model="form.logisticsNo" label="物流单号" placeholder="请输入物流单号">
			</u-field>
		</view>
		<view class="recordList">
			<view class="recordItem c">
				<view class="recordTitle">
					转账记录<text class="intro">最多上传6张</text>
				</view>
				<u-upload :action="action" :header="header" @on-uploaded="transferSuccess" width="180" height="180"
					:file-list="transferList" :custom-btn="true" max-count="6">
					<template v-slot:addBtn>
						<view class="slot-btn" hover-class="slot-btn__hover" hover-stay-time="150">
							<image src="/static/news/icon-upload.png"></image>
							<view class="1">上传图片</view>
						</view>
					</template>
				</u-upload>
			</view>
			<view class="recordItem c">
				<view class="recordTitle">
					聊天记录<text class="intro">最多上传6张</text>
				</view>
				<u-upload :action="action" :header="header" @on-uploaded="chatSuccess" width="180" height="180"
					:file-list="chatList" :custom-btn="true" max-count="6">
					<template v-slot:addBtn>
						<view class="slot-btn" hover-class="slot-btn__hover" hover-stay-time="150">
							<image src="/static/news/icon-upload.png"></image>
							<view class="1">上传图片</view>
						</view>
					</template>
				</u-upload>
			</view>
		</view>
		<view class="footerBtn" @click="onSubmit">
			提交
		</view>


	</view>
</template>

<script>
	import * as UploadApi from '@/api/upload'
	import * as newFunApi from '@/api/newFun'
	import Config from '@/core/config'
	export default {
		data() {
			return {
				form: {
					shopModel: '',
					shopNum: null,
					auto: '',
					getPeopleName: '',
					getPeoplePhone: '',
					city: null,
					address: '',
					setGoodsMode: null,
					setGoodsCompany: '',
					setGoodsName: '',
					setGoodsPhone: '',
					logisticsName: '',
					logisticsId:'',
					logisticsNo: '',
					transferImgId: '',
					chatImgId: ''
				},
				content: '',
				modeList: [{
					text: '店内现货',
				}],
				cityShow: false,
				transferList: [],
				chatList: [],
				expressList: [],
				action: '',
			}
		},
		onReady() {
			this.action = (Config.get('apiUrl') + 'upload/image').replace("index.php?s=/", "")
			this.header = {
				'Storeid': uni.getStorageSync('Store').storeInfo.store_id,
				'Access-Token': uni.getStorageSync('AccessToken'),
				'platform': "MP-WEIXIN",
			}
			this.getExpressAll()
		},
		methods: {
			// 智能识别
			onIntelligence() {
				if (!this.content) {
					return this.$toast('请输入识别内容')
				}
				newFunApi.analysis({
						content: this.content
					})
					.then(res => {
						if (res.status) {
							let data = res.data.detail
							this.form.city = data.region.province + data.region.city + data.region.region;
							this.form.getPeopleName = data.name
							this.form.getPeoplePhone = data.phone
							this.form.address = data.detail
							console.log(data)
							uni.showToast({
								title: '识别成功',
								icon: 'none',
								duration: 2000
							})
						} else {
							uni.showToast({
								title: '识别失败',
								icon: 'none',
								duration: 2000
							})
						}
					})
					.finally()
			},
			// 提交信息
			onSubmit() {
				const that = this;
				if (!that.form.shopModel) {
					return that.$toast('请选择商品名称')
				}
				if (!that.form.shopNum) {
					return that.$toast('请输入商品数量')
				}
				if (!that.form.getPeopleName) {
					return that.$toast('请输入收货人姓名')
				}
				if (!that.form.getPeoplePhone) {
					return that.$toast('请输入收货人手机号')
				}
				if (!that.form.city) {
					return that.$toast('请选择所属城市')
				}
				if (!that.form.address) {
					return that.$toast('请输入详细地址')
				}
				if (!that.form.setGoodsMode) {
					return that.$toast('请选择发货模式')
				}
				if (!that.form.setGoodsCompany) {
					return that.$toast('请输入发货公司')
				}
				if (!that.form.setGoodsName) {
					return that.$toast('请输入发货人')
				}
				if (!that.form.setGoodsPhone) {
					return that.$toast('请输入发货电话号')
				}
				if (!that.form.express_name) {
					return that.$toast('请选择物流公司')
				}
				if (!that.form.logisticsNo) {
					return that.$toast('请输入物流单号')
				}
				if (!that.form.transferImgId) {
					return that.$toast('请上传转账记录')
				}
				let params = {

				}
			},
			changeMode(e) {
				this.form.setGoodsMode = this.modeList[e.detail.value].text;
			},
			// 选择物流
			changeOption(e) {
				this.form.logisticsName = this.expressList[e.detail.value].express_name;
				this.form.logisticsId = this.expressList[e.detail.value].express_id
			},
			/**
			 * 物流
			 */
			async getExpressAll() {
				let {
					status,
					message,
					data
				} = await newFunApi.expressAll();
				if (status == 200) {
					this.expressList = data.list;
				}
			},
			regionChage(e) {
				this.form.city = e.province.name + e.city.name + e.area.name;
			},
			//接受上传返回的数据
			transferSuccess(list) {
				if (list.length > 0) {
					const {
						response
					} = list[0];
					if (response.status == 200) {
						uni.showToast({
							title: "上传成功"
						})
						this.form.transferImgId = response.data.fileInfo.file_id
					}
				}
			},
			//接受上传返回的数据
			chatSuccess(list) {
				if (list.length > 0) {
					const {
						response
					} = list[0];
					if (response.status == 200) {
						uni.showToast({
							title: "上传成功"
						})
						console.log(response.data.fileInfo.file_id)
						this.form.chatImgId = response.data.fileInfo.file_id
					}
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	page {
		min-height: 100%;
		background-color: #F7F8FA;
		padding-bottom: 96upx;
	}

	.section {
		background-color: #fff;
		padding: 0 26upx;
		margin-top: 16upx;

		.realAddr {
			padding: 40upx 0 !important;

			::v-deep .uni-input-wrapper {
				text-align: left !important;
			}

			::v-deep .uni-input-placeholder {
				white-space: pre-wrap;
			}
		}

		.btnContent {
			display: flex;
			justify-content: flex-end;
			padding-bottom: 30upx;
		}

		.btn {
			width: 120upx;
			height: 50upx;
			background: #FE483B;
			border-radius: 19px 19px 19px 19px;
			opacity: 1;
			line-height: 50upx;
			text-align: center;

			font-size: 24upx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			color: #FFFFFF;

		}

		.addrDetail {
			padding: 0 10upx;

			.addrTitle {

				font-size: 28upx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				color: #303030;
				margin-top: 32upx;
			}
		}
	}

	.selectContent {
		border-top: 1px solid transparent;
		margin-top: 6upx;
		padding-bottom: 100upx;
	}

	::v-deep .u-field {
		padding: 30upx 10upx;
	}

	::v-deep .uni-input-wrapper {
		text-align: right;
	}

	::v-deep .u-label {
		flex: auto !important
	}

	.recordList {
		padding: 30upx;
		background-color: #fff;
		margin-top: 14upx;

		.recordItem {
			.recordTitle {

				font-size: 28upx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				color: #353535;
				margin-bottom: 20upx;

				.intro {

					font-size: 24upx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					color: #9F9F9F;
					margin-left: 28upx;
				}

			}

			.picList {
				display: flex;
				flex-wrap: wrap;
				align-items: center;
				justify-content: space-between;
				margin: 12upx 0;
				text-align: center;

				image {
					width: 200upx;
					height: 160upx;

				}
			}
		}
	}

	.footerBtn {
		width: 86%;
		height: 88upx;
		background: #FF5050;
		border-radius: 36px 36px 36px 36px;
		opacity: 1;
		font-size: 28upx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
		line-height: 88upx;
		text-align: center;
		margin: 96upx auto 0 auto;

	}

	.c {
		padding-top: 20rpx;
		overflow: hidden;

		.slot-btn {
			width: 180rpx;
			height: 180rpx;
			background: #F6F6F6;
			border-radius: 10rpx;
			border: 1px solid #C0C0C0;
			text-align: center;
			font-size: 28rpx;
			font-weight: 500;
			color: #6D6D6D;

			.l {
				line-height: 30rpx;
			}

			image {
				width: 50rpx;
				height: 50rpx;
				display: block;
				margin: 0 auto;
				margin-top: 30rpx;
			}
		}
	}

	.photo {
		display: flex;
		justify-content: flex-start;
		padding: 20rpx 0;
		overflow: hidden;

		.slot-btn {
			width: 80px;
			height: 80px;
			background: #FFFFFF;
			border-radius: 10rpx;
			border: 1px solid #C0C0C0;
			text-align: center;
			font-size: 24rpx;
			font-weight: 500;
			color: #D1D1D1;

			image {
				width: 50rpx;
				height: 50rpx;
				margin-top: 20rpx;
			}
		}
	}

	.file_img {
		overflow: hidden;
		position: relative;
		margin-right: 10rpx;

		image {
			width: 80px;
			height: 80px;

		}

		.image-delete {
			position: absolute;
			top: -10rpx;
			right: -10rpx;
			height: 42rpx;
			width: 42rpx;
			background: rgba(0, 0, 0, 0.64);
			border-radius: 50%;
			color: #fff;
			font-weight: bolder;
			font-size: 22rpx;
			z-index: 10;
			display: flex;
			justify-content: center;
			align-items: center;
		}
	}
</style>