<template>
	<view class="Send">
		<view class="contail">
			<view class="main">
				<view class="bar">
					<view class="name">
						物品名称：
					</view>
					<view class="nameinput">
						<input v-model="form.name" type="text" placeholder="请输入">
					</view>
				</view>
				<view class="bar">
					<view class="name">
						所属分类：
					</view>
					<view class="barchoose flexA" @click="showCategory = true">
						<text :style="{color:sortName=='请选择'?'grey':'#000'}">{{sortName}}</text>
						<image src="/static/ic-arrow2.png" mode=""></image>
					</view>
				</view>
				<view class="bar">
					<view class="name">
						价格：
					</view>
					<view class="nameinput">
						<input @input="checkNumber" v-model="form.price"  type="text" placeholder="请输入(元)">
					</view>
				</view>
				<view class="newbar">
					<view class="name">
						物品介绍：
					</view>
					<u--textarea :autoHeight="true" maxlength="300" v-model="form.description" border="none" placeholder="请输入"></u--textarea>
				</view>
				<view class="newbar">
					<view class="name">
						物品图片：（最多五张）
					</view>
					<view class="upimg">
						<u-upload :fileList="fileList1" @afterRead="afterRead" @delete="deletePic" name="1" multiple
							:maxCount="5"></u-upload>
					</view>
				</view>
			</view>

			<u-gap height="12" bgColor="#F6F6F6"></u-gap>
			<view class="main">
				<view class="title">
					卖家信息
				</view>
				<view class="bar">
					<view class="name">
						姓名：
					</view>
					<view class="nameinput">
						<input v-model="form.seller_name" type="text" placeholder="选填">
					</view>
				</view>
				<view class="bar">
					<view class="name">
						手机号：
					</view>
					<view class="nameinput">
						<input v-model="form.seller_mobile" type="text" placeholder="选填">
					</view>
				</view>

				<view class="bar">
					<view class="name">
						<text>*</text>发送账户：
					</view>
					<view class="nameinput">
						<input v-model="form.package_add" type="text" placeholder="请输入手机号或钱包地址">
					</view>
				</view>

				<view class="bar">
					<view class="name">
						<text>*</text>微信号：
					</view>
					<view class="nameinput">
						<input v-model="form.wechat_num" type="text" placeholder="请输入">
					</view>
				</view>
				<view class="bar">
					<view class="name">
						<text>*</text>保证金：{{lastInfo.cert_withdraw_price}}
					</view>
					<view class="barlast" v-if="lastInfo.is_cert_withdraw!=1">
						去缴纳<image src="/static/arrowR.png" mode=""></image>
					</view>
					<view class="barlast" v-else style="color: #18D18E;">
						已缴纳
					</view>
				</view>
				<view class="bar" @click="show = true">
					<view class="name">
						<text>*</text>实名认证：
					</view>
					<view class="barlast" v-if="lastInfo.is_cert==0" >
						去认证<image src="/static/arrowR.png" mode=""></image>
					</view>
					<view class="barlast" v-else style="color: #18D18E;">
						已认证
					</view>
				</view>
			</view>
			<view style="height: 200rpx;"></view>
			<view class="btn">
				<view class="paybtn" @click="send">
					提交
				</view>
			</view>
		
			<u-popup :show="showmoney" :closeOnClickOverlay="false" @close="close" @open="open" mode="center" :round="12">
				<view class="popname">
					<view class="title">
						缴纳保证金
					</view>
					<view class="contant">
						为了保证平台用户交易的安全性，您需要缴纳{{lastInfo.cert_withdraw_price}}元保证金后方可在平台中进行发布物品操作。交易完成后，可在余额中心中进行退回。
					</view>
					<view class="btngroup" >
						<view class="concle" @click="back">
							暂不缴纳
						</view>
						<view class="requt"  @click="authorization">
							立即缴纳
						</view>
					</view>
				</view>
			</u-popup>
			<u-popup :show="show" :closeOnClickOverlay="false" @close="close" @open="open" mode="center" :round="12">
				<view class="popname">
					<view class="title">
						实名认证
					</view>
					<view class="contant">
						为了保证平台用户交易的安全性，您需要实名认证后，才能在平台中进行发布物品操作
					</view>
					<view class="btngroup" >
						<view class="concle" @click="back">
							暂不认证
						</view>
						<view class="requt" @click="goRealName">
							立即认证
						</view>
					</view>
				</view>
			</u-popup>
		</view>
		
		<u-picker :show="showCategory" @cancel="showCategory=false" @confirm="selctCategory" :columns="columns"  keyName="name"></u-picker>
		<Botton  :flag="3"></Botton>
	</view>
</template>

<script>
	var that 
	var wx = require('jweixin-module')
	import {baseURL} from '@/utils/request.js'
	import Botton from "@/components/Botton.vue"
	import {sortList,product_detail} from '@/api/index'
	import {toa} from '@/utils/toast.js'
	import { getCategory,sendProduct,getLastInfo,payGuarantee,authorization ,getOpenid,userCertWithdraw} from '@/api/send'
	export default {
		name:'send',
		components: {
			Botton
		},
		data() {
			return {
				fileList1: [],
				show: false,
				showmoney: false,
				showCategory:false,
				content:'',
				columns: [],
				lastInfo:{},
				sortName:'请选择',
				form:{
					product_id:'', //	string	否	物品id
					name:'', //	string	是	物品名称
					sort_id:'', //	integer	是	所属分类
					price:'', //	string	是	价格
					description:'', //	string	是	物品介绍
					images:'', //	string	是	物品图片
					seller_name:'', //	string	否	卖家姓名
					seller_mobile:'', //	string	否	手机号
					package_add:'', //	string	是	钱包地址
					wechat_num:'', //	string	是	微信号
				},
				code:''
			}
		},
		onLoad(e) {
			that = this
			if(e.id){
				this.form.product_id = e.id
				this.getDetail()
			}
			this.code = e.code || ''
			this.getLastInfo()
			this.sortList()
			if(this.code){
				this.getOpenid()
			}
		
		},
		onShow() {
		},
		methods: {
			back(){
				uni.navigateBack({})
				this.showmoney=false
			},
			// 获取openid
			async getOpenid(){
			  try {
			    const res = await getOpenid(this.code)
			    console.log('getOpenid', res)
				uni.setStorageSync('openId',res.openid)
				this.userCertWithdraw()
			    // 保存数据
			  } catch (err) {
			 	setTimeout(()=>{
					uni.showToast({ title:err,icon:'none' })
				},300)
				uni.redirectTo({
					url:'/pages/index/index'
				})
			    console.log('getOpenid', err)
			  }
			},
			// 缴纳保证金
			async userCertWithdraw(){
			  try {
				const openId =  uni.getStorageSync('openId')
			    const res = await userCertWithdraw(openId)
				 console.log(res.pay_data);
			    console.log('userCertWithdraw', res)
				 wx.config({
				              debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
				              appId: res.pay_data.appId, // 必填，公众号的唯一标识
				              timestamp: res.pay_data.timeStamp, // 必填，生成签名的时间戳
				              nonceStr: res.pay_data.nonceStr, // 必填，生成签名的随机串
				              signature: res.pay_data.paySign, // 必填，签名
				              jsApiList: ['chooseWXPay'] // 必填，需要使用的JS接口列表
				            })
				            wx.ready(function () {
				              wx.chooseWXPay({
				                timestamp: res.pay_data.timeStamp, // 时间戳
				                nonceStr: res.pay_data.nonceStr, // 随机数
				                package: res.pay_data.package, //
				                signType: res.pay_data.signType,
				                paySign: res.pay_data.paySign, // 签名
				                success: function () {
									that.lastInfo.is_cert_withdraw = 1
									that.showmoney = false
									that.getLastInfo()
									toa.success('支付成功')
				                },
				                cancel: function () {
									setTimeout(()=>{
										toa.toast('取消失败')
									},200)
									uni.navigateBack({})
				                },
				                fail: function () {
									setTimeout(()=>{
										toa.toast('支付失败')
									},200)
									uni.navigateBack({})
				                }
				              })
				            })
			    // 保存数据
			  } catch (err) {
			 	uni.showToast({ title:err,icon:'none' })
			    console.log('userCertWithdraw', err)
			  }
			},
			// 获取详情
			async getDetail(){
			  try {
			    const res = await product_detail(this.form.product_id)
				// this.form = res.detail
				this.form.sort_id = res.detail.sort.id
				this.sortName = res.detail.sort.name
				this.form.product_id = res.detail.id
				this.form.name = res.detail.name
				this.form.price = res.detail.price
				this.form.description = res.detail.description
				res.detail.fileList.forEach(it=>{
					it.shortUrl = it.url
					it.url = it.fullUrl
				})
				this.fileList1 = res.detail.fileList
				console.log(this.fileList1,'图片');
			    console.log('getDetail', res)
			    // 保存数据
			  } catch (err) {
			 	uni.showToast({ title:err,icon:'none' })
			    console.log('getDetail', err)
			  }
			},
			checkNumber(e) {
				let val = e.target.value.replace(/(^\s*)|(\s*$)/g, "")
				var reg = /[^\d.]/g
							
				// 只能是数字和小数点，不能是其他输入
				val = val.replace(reg, "")
				// // 保证第一位只能是数字，不能是点
				val = val.replace(/^\./g, "");
				// // 小数只能出现1位
				val = val.replace(".", "$#$").replace(/\./g, "").replace("$#$", ".");
				// // 小数点后面保留2位
				val = val.replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3');
				// console.log(val);
				this.$nextTick(() => {
					this.form.price = val;
				})
			},
			async sortList(){
			  try {
			    const res = await sortList(2)
				this.columns = [res.list]
			    console.log('sortList', res)
			    // 保存数据
			  } catch (err) {
			 	uni.showToast({ title:err,icon:'none' })
			    console.log('sortList', err)
			  }
			},
			async getLastInfo(){
			  try {
			    const res = await getLastInfo()
				this.lastInfo = res.detail
				console.log(1);
				if(res.detail.is_cert==0){ return	this.show = true}
				if(res.detail.is_cert_withdraw!=1 && !this.code){ 	this.showmoney = true}
				console.log(2);
				console.log(res.detail.is_cert_withdraw!=1,!this.code);
				this.form.seller_mobile = res.detail.seller_mobile
				this.form.seller_name = res.detail.seller_name
				this.form.package_add = res.detail.package_add
				this.form.wechat_num = res.detail.wechat_num
			    console.log('getLastInfo', res)
			    // 保存数据
			  } catch (err) {
			 	uni.showToast({ title:err,icon:'none' })
			    console.log('getLastInfo', err)
			  }
			},
			open() {
				// console.log('open');
			},
			close() {
				this.show = false
				this.showmoney = false
				// console.log('close');
			},
			// 删除图片
			deletePic(event) {
				this[`fileList${event.name}`].splice(event.index, 1)
			},
			// 新增图片
			async afterRead(event) {
				// 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				let fileListLen = this[`fileList${event.name}`].length
				lists.map((item) => {
					this[`fileList${event.name}`].push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})
				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromise(lists[i].url)
					console.log(result,'获取的结构');
					let item = this[`fileList${event.name}`][fileListLen]
					this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
						status: 'success',
						message: '',
						url: result.fullurl,
						shortUrl:result.url
					}))
					fileListLen++
				}
			},
			uploadFilePromise(url) {
				return new Promise((resolve, reject) => {
					let a = uni.uploadFile({
						url: baseURL + 'common/upload', // 仅为示例，非真实的接口地址
						filePath: url,
						name: 'file',
						formData: {
							token:uni.getStorageSync('token') || ''
						},
						success: (res) => {
							setTimeout(() => {
								resolve(JSON.parse(res.data).data)
							}, 1000)
						}
					});
				})
			},
			selctCategory(e){
				this.sortName = e.value[0].name
				this.form.sort_id = e.value[0].id
				this.showCategory = false
				console.log(e);
			},
			// 发布
			send(){
				console.log(this.lastInfo);
				if(this.lastInfo.is_cert_withdraw!=1 ) return this.showmoney = true
				if(this.lastInfo.is_cert==0) return this.show = true
				if(this.fileList1.length){
					this.form.images = this.fileList1.map(it=>it.shortUrl).join(',')
				}
				console.log(this.form);
				this.sendProduct()
			},
			async sendProduct(){
			  try {
			    const res = await sendProduct(this.form)
			    console.log('sendProduct', res)
				setTimeout(()=>{
					toa.success(this.form.product_id?'修改成功':'发布成功')
				},400)
				uni.redirectTo({
					url:'/pages/mine/myRelease'
				})
			    // 保存数据
			  } catch (err) {
			 	uni.showToast({ title:err,icon:'none' })
			    console.log('sendProduct', err)
			  }
			},
			goRealName(){
				uni.navigateTo({
					url:'/pages/index/realName'
				})
			
			},
			// 拿code
			async authorization(){
			  try {
				const openId =  uni.getStorageSync('openId')
				if(openId) return this.userCertWithdraw()
			    const res = await authorization(window.location.href)
			    console.log('authorization', res)
				window.location.href = res.url
			    // 保存数据
			  } catch (err) {
			 	uni.showToast({ title:err,icon:'none' })
			    console.log('authorization', err)
			  }
			},
		
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #ffffff;
	}

	.Send {
		.contail {
			padding-bottom: 160rpx;

			.title {
				padding: 32rpx;
				box-sizing: border-box;
				color: rgba(0, 0, 0, 1);
				font-size: 28rpx;
				font-weight: 600;
				font-family: "PingFang SC";
			}

			.main {
				padding: 0 32rpx;

				.bar {
					display: flex;
					align-items: center;
					justify-content: space-between;
					box-sizing: border-box;
					padding: 32rpx 0;
					border-bottom: 1px solid #F0f0f0;

					.name {
						color: rgba(0, 0, 0, 1);
						font-size: 28rpx;
						font-weight: 400;
						font-family: "PingFang SC";

						text {
							color: rgba(252, 67, 56, 1);
							font-size: 28rpx;
							font-weight: 400;
							font-family: "PingFang SC";
						}
					}

					.barchoose {
						
						color: rgba(0, 0, 0, 0.4);
						font-size: 28rpx;
						font-weight: 400;
						font-family: "PingFang SC";
						image{
							width: 24rpx;
							height: 16rpx;
						}
					}

					.barlast {
						display: flex;
						align-items: center;
						color: rgba(33, 83, 212, 1);
						font-size: 28rpx;
						font-weight: 400;
						font-family: "PingFang SC";

						image {
							margin-left: 12rpx;
							width: 16rpx;
							height: 32rpx;
						}
					}

					input {
						text-align: right;
					}
				}

				.newbar {
					padding: 32rpx 0;
					box-sizing: border-box;
					border-bottom: 1px solid #F0f0f0;

					.name {
						color: rgba(0, 0, 0, 1);
						font-size: 28rpx;
						font-weight: 400;
						font-family: "PingFang SC";
					}

					textarea {
						margin-top: 32rpx;
						padding: 24rpx;
						width: 100%;
						height: 200rpx;
						box-sizing: border-box;
						background-color: #F6F6F6;
					}

					.upimg {
						margin-top: 32rpx;
					}
				}

			}

			.popname {
				padding: 32rpx;
				box-sizing: border-box;
				width: 622rpx;
				text-align: center;

				.title {
					color: rgba(0, 0, 0, 0.9);
					font-size: 32rpx;
					font-weight: 600;
					font-family: "PingFang SC";
					text-align: center;
				}

				.contant {
					color: rgba(179, 179, 179, 1);
					font-size: 28rpx;
					font-weight: 400;
					font-family: "PingFang SC";
					text-align: center;
				}

				.btngroup {
					margin-top: 80rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;

					.concle {
						width: 264rpx;
						height: 76rpx;
						border-radius: 16rpx;
						opacity: 1;
						line-height: 76rpx;
						color: rgba(0, 0, 0, 0.9);
						font-size: 28rpx;
						font-weight: 500;
						font-family: "PingFang SC";
						text-align: center;
						background: rgba(246, 246, 246, 1);
					}

					.requt {
						width: 264rpx;
						height: 76rpx;
						color: rgba(0, 0, 0, 0.9);
						font-size: 28rpx;
						font-weight: 500;
						font-family: "PingFang SC";
						text-align: center;
						line-height: 76rpx;
						border-radius: 16rpx;
						opacity: 1;
						background: rgba(254, 208, 0, 1);
					}
				}

			}

			.btn {
				position: fixed;
				bottom: 50rpx;
				left: 0;
				width: 100%;
				// height: 128rpx;
				padding: 16rpx 32rpx;
				padding-bottom: 100rpx;
				box-sizing: border-box;
				opacity: 1;
				background: rgba(255, 255, 255, 1);

				.paybtn {
					width: 100%;
					height: 96rpx;
					line-height: 96rpx;
					text-align: center;
					border-radius: 28rpx;
					opacity: 1;
					color: rgba(0, 0, 0, 0.9);
					font-size: 32rpx;
					font-weight: 600;
					font-family: "PingFang SC";
					background: linear-gradient(134.8deg, rgba(255, 232, 100, 1) 0%, rgba(255, 216, 0, 1) 100%);
				}
			}

		}
	}
	
	.u-textarea {
		margin-top: 32rpx;
		min-height: 200rpx;
		background: #f4f5f7;
	}
	/deep/ .uni-textarea-wrapper {
		height: 100% !important;
	}
</style>