<template>
	<view class="content" @click.stop="stopPropagation">
		<view class="content_top">
			<view :class="form.user_type == 1 ? 'content_topview' : ''" @click="clickakex(1)">个人</view>
			<view :class="form.user_type == 2 ? 'content_topview' : ''" @click="clickakex(2)">企业</view>
		</view>
		<view class="content_item">
			<view class="Box_box flex-between" v-if="form.user_type == 1">
				<view class="Box_boxone">*姓名</view>
				<view class="Box_boxtow"><input type="text" v-model="form.user_name" placeholder="请填写名称" /></view>
			</view>
			<view class="Box_box flex-between" v-if="form.user_type == 2">
				<view class="Box_boxone">*单位名称</view>
				<view class="Box_boxtow" style="position: relative; width: 70%">
					<input type="text" v-model="form.user_name" placeholder="请填写公司名称" @input="onInput" />
					<view class="position" v-if="subCategoryList.length != 0">
						<view class="positionitem" v-for="(item, index) in subCategoryList" :key="index"
							@click="categorySubClick(item)">
							{{ item.companyName }}
						</view>
					</view>
				</view>
			</view>
			<view class="Box_box flex-between" v-if="form.user_type == 2">
				<view class="Box_boxone">*税号</view>
				<view class="Box_boxtow"><input type="text" v-model="form.user_duty" placeholder="请填写公司税号" /></view>
			</view>
			<view class="Box_box flex-between">
				<view class="Box_boxone">*邮箱</view>
				<view class="Box_boxtow"><input type="text" v-model="form.email" placeholder="请填写邮箱" /></view>
			</view>
			<view class="Box_box flex-between">
				<view class="Box_boxone">*手机号</view>
				<view class="Box_boxtow"><input type="text" v-model="form.mobile" placeholder="请填写联系电话" /></view>
			</view>
			<template v-if="form.user_type == 2">
				<view class="Box_box flex-between" @click="showElse = !showElse">
					<view class="Box_boxone">其他信息</view>
					<view class="arrow">
						<text class="t">地址、开户行</text>
						<u-icon name="arrow-down" class="arrow-icon" :class="{ active: showElse }"></u-icon>
					</view>
				</view>
				<template v-if="showElse">
					<view class="Box_box flex-between">
						<view class="Box_boxone">公司地址</view>
						<view class="Box_boxtow"><input type="text" v-model="form.c_address" placeholder="请填写公司地址" /></view>
					</view>
					<view class="Box_box flex-between">
						<view class="Box_boxone">联系电话</view>
						<view class="Box_boxtow"><input type="text" v-model="form.c_phone" placeholder="请填写公司联系电话" /></view>
					</view>
					<view class="Box_box flex-between">
						<view class="Box_boxone">开户行名称</view>
						<view class="Box_boxtow"><input type="text" v-model="form.c_bank_name" placeholder="请填写公司开户行名称" /></view>
					</view>
					<view class="Box_box flex-between">
						<view class="Box_boxone">开户行账号</view>
						<view class="Box_boxtow"><input type="text" v-model="form.c_bank_account" placeholder="请填写公司开户行账号" /></view>
					</view>
				</template>
			</template>
			<!-- <view class="Box_box flex-between">
				<view>备注：</view>
				<view><input type="text" v-model="form.notes" placeholder="请输入内容" /></view>
			</view> -->
			<view class="Box_box flex-between">
				<view class="Box_boxone">备注：</view>
				<u--textarea v-model="form.notes" placeholder="请输入内容"></u--textarea>
			</view>
			<!-- 	<view class="Box_boxbox" @click="upload">
				<view class="Box_boxone">*上传图片</view>
				<view class="Box_boxtow" v-if="form.img">
					<image :src="form.img" style="width: 100%; height: 100%;" mode=""></image>
				</view>
				<view class="Box_boxtow" v-else>
					<image src="@/static/xj.png" style="width: 60rpx;height: 58rpx;" mode=""></image>
				</view>
			</view> -->
			<view class="preservation flex-colum">
				<view v-if="form.status_note"
					style="width: 100%; color: #ff2b2b; padding: 28rpx 0; word-wrap: break-word">
					({{ form.status_note || '无' }})</view>
			</view>
		</view>
		<view class="content_bottom" @click="saveMerchantBaseInfo">确定</view>
	</view>
</template>

<script>
	// import jWeixin from 'jweixin-module's
	import wx from 'weixin-js-sdk';
	import _ from 'lodash';
	export default {
		data() {
			return {
				showtext: 0,
				subCategoryList: [],
				form: {
					user_type: 2,
					img: '',
					user_name: '',
					user_duty: '',
					email: '',
					mobile: '',
					status_note: '',
					c_address: '',
					c_phone: '',
					c_bank_name: '',
					c_bank_account: ''
				},
				showElse: false
			};
		},
		async onLoad(e) {
			this.form.id = e.id;
			this.form.open_id = e.open_id;
			if (e.view_type == 'fail') {
				this.form.view_type = e.view_type;
				let res = await this.api.szzpyfailccho({
					id: this.form.id,
					view_type: this.form.view_type
				});
				try {
					if (res.code == 1) {
						this.form = res.data.data;
						this.form.status_note = res.data.status_note;
					}
				} catch (e) {
					//TODO handle the exception
				}
			}
		},
		methods: {
			stopPropagation() {
				console.log(1111)
				this.subCategoryList = [];
			},
			wxInit() {
				wx.config({
					debug: false, // true:调试时候弹窗
					appId: res.appId, // 微信appid
					timestamp: res.timestamp, // 时间戳
					nonceStr: res.nonceStr, // 随机字符串
					signature: res.signature, // 签名
					jsApiList: [
						// 所有要调用的 API 都要加到这个列表中
						'onMenuShareTimeline', // 分享到朋友圈接口
						'onMenuShareAppMessage', //  分享到朋友接口
						'onMenuShareQQ', // 分享到QQ接口
						'onMenuShareWeibo' // 分享到微博接口
					]
				});
			},
			onInput(e) {
				if (this.form.user_type == 2) {
					if ([...e.detail.value].length >= 6) {
						console.log(100000);
						this.handleClick();
					} else {

					}
				}
			},
			handleClick: _.debounce(function() {
				console.log(100000);
				this.getOrder();
				// 函数执行内容
			}, 500),
			async categorySubClick(category) {
				if (category.companyName == '以上都不是') {
					let res = await this.api.storepaidkeywordsearch({
						sign: uni.utils.md5(this.form.user_name + 'd2e862a1-02b5-4405-8c69-c74ca871bcfe'),
						like: this.form.user_name,
						open_id: this.form.open_id
					})
					this.subCategoryList = res.data
				} else {
					this.form.user_name = category.companyName;
					this.form.user_duty = category.creditCode;
					this.subCategoryList = [];
				}


			},
			upload() {
				uni.chooseImage({
					success: (chooseImageRes) => {
						uni.pro.showLoading({
							title: '上传中',
							mask: true
						});
						const tempFilePaths = chooseImageRes.tempFilePaths;
						uni.uploadFile({
							url: 'https://cashieradmin.sxczgkj.cn' + '/api/qiNiuContent',
							filePath: tempFilePaths[0],
							name: 'file',
							formData: {
								open_id: this.form.open_id
							},
							success: (uploadFileRes) => {
								uni.showToast({
									title: '上传成功',
									icon: 'none'
								});
								uni.pro.hideLoading();
								let data = JSON.parse(uploadFileRes.data);
								this.form.img = data.data[0];
								console.log(this.form);
							},
							fail: () => {
								uni.pro.hideLoading();
							}
						});
					},
					fail: () => {
						console.log(111);
						uni.pro.hideLoading();
					}
				});
			},
			async saveMerchantBaseInfo() {
				if (this.form.user_name == null || this.form.user_name == '') {
					uni.showToast({
						title: '请输入名称',
						icon: 'none'
					});
					return false;
				}
				if (this.form.user_type == 2) {
					if (this.form.user_duty == null || this.form.user_duty == '') {
						uni.showToast({
							title: '请输入税号',
							icon: 'none'
						});
						return false;
					}
				}
				if (this.form.email == null || this.form.email == '') {
					uni.showToast({
						title: '请输入邮箱',
						icon: 'none'
					});
					return false;
				}
				if (this.form.mobile == null || this.form.mobile == '') {
					uni.showToast({
						title: '请输入手机号',
						icon: 'none'
					});
					return false;
				}
				let res = await this.api.usersubopeninvoice({
					id: this.form.id,
					open_id: this.form.open_id,
					...this.form
				});
				if (res.code == 1) {
					uni.showToast({
						title: res.msg,
						icon: 'none'
					});
					console.log('t_type===', res.data.t_type);
					switch (res.data.t_type) {
						case '1':
							console.log(1);
							// 内链
							setTimeout(() => {
								window.location.href = res.data.n_url;
							}, 1000);
							break;
						case '2':
							console.log(2);
							// 外链
							setTimeout(() => {
								window.location.href = res.data.url;
							}, 1000);
							break;
							// case '3':
							// 	console.log(3);
							// 	// 小程序
							// 	setTimeout(() => {
							// 		plus.share.getServices(function (plusRes) {
							// 			var sweixin = null;
							// 			for (var i = 0; i < plusRes.length; i++) {
							// 				var t = plusRes[i];
							// 				if (t.id == 'weixin') {
							// 					sweixin = t;
							// 				}
							// 			}
							// 			if (sweixin) {
							// 				sweixin.launchMiniProgram({ ...res.data.mini });
							// 			}
							// 		});
							// 	}, 1000);
							// 	break;
						default:
							break;
					}
					// window.location.href = "https://i.hangzhouyiyao.cn/activities?appKey=3f4ca8be626445e8b306c2badafd6f46&appEntrance=1&business=money"
				}
				// uni.request({
				// 	url: 'https://invoice.sxczgkj.cn/api/' + 'user/subopeninvoice',
				// 	data: {
				// 		//参数
				// 		id: this.form.id,
				// 		open_id: this.form.open_id,
				// 		user_name: this.form.user_name,
				// 		user_type: this.form.user_type,
				// 		user_duty: this.form.user_duty,
				// 		email: this.form.email,
				// 		img: this.form.img,
				// 		mobile: this.form.mobile,
				// 		notes: this.form.notes
				// 	},
				// 	method: 'POST', //请求方式，必须为大写
				// 	success: res => {
				// 		uni.showToast({
				// 			title: res.data.message || res.data.msg,
				// 			icon: "none",
				// 		})
				// 		if (res.data.code == 1) {
				// 			setTimeout(() => {
				// 				if (res.data.data.url) {
				// 					window.location.href = res.data.data.url
				// 				}
				// 				// let data = encodeURIComponent(res.data.data.url);
				// 				// uni.navigateTo({
				// 				// 	url: '/pages/index/web?src=' + data
				// 				// })
				// 			}, 1000);
				// 			// window.location.href = "https://i.hangzhouyiyao.cn/activities?appKey=3f4ca8be626445e8b306c2badafd6f46&appEntrance=1&business=money"
				// 		}

				// 	}
				// });
			},
			clickakex(e) {
				this.form.user_type = e;
				this.form.user_name = '';
				this.form.img = '';
				this.form.user_duty = '';
				this.form.email = '';
				this.form.mobile = '';
			},
			async getOrder() {
				//搜索值
				uni.request({
					url: 'https://invoice.sxczgkj.cn/api/' + 'store/enterprise',
					data: {
						//参数
						sign: uni.utils.md5(this.form.user_name + 'd2e862a1-02b5-4405-8c69-c74ca871bcfe'),
						like: this.form.user_name,
						open_id: this.form.open_id
					},
					method: 'POST', //请求方式，必须为大写
					success: async (res) => {
						console.log('接口返回------', res);
						setTimeout(() => {
							// if (this.page == 1) {
							// if (res.data.data.length != 0) {
								this.subCategoryList = [...res.data.data, ...[{
									companyName: '以上都不是'
								}]];
							// }
							// } else {
							// this.subCategoryList.push(...res.data.data);
							// }

						}, 500);

					}
				});
			}
		}
	};
</script>

<style lang="scss" scoped>
	page {
		background: #f9f9f9;
	}

	.arrow {
		display: flex;
		align-items: center;

		.t {
			margin-right: 8upx;
			color: #808080;
			font-size: 32upx;
		}

		.arrow-icon {
			transition: all 0.3s ease-in-out;

			&.active {
				transform: rotate(180deg);
			}
		}
	}

	.content {
		padding: 0 28rpx 28upx;

		.content_top {
			padding: 32rpx 110rpx;
			width: 100%;
			display: flex;
			justify-content: space-between;

			.content_topview {
				background: #288efb;
				color: #fff;
			}

			view {
				width: 142rpx;
				height: 56rpx;
				background: #fff;
				color: #288efb;
				border-radius: 6rpx 6rpx 6rpx 6rpx;
				font-family: Source Han Sans CN, Source Han Sans CN;
				font-weight: 400;
				font-size: 28rpx;
				line-height: 56rpx;
				text-align: center;
			}
		}

		.content_item {
			width: 100%;
			background: #ffffff;
			border-radius: 18rpx 18rpx 18rpx 18rpx;

			.Box_box {
				display: flex;
				justify-content: space-between;
				align-items: center;
				flex-wrap: wrap;
				text-align: right;
				padding: 24rpx;
				border-bottom: 1px solid #e5e5e5;
				font-size: 28rpx;
				font-family: Source Han Sans CN-Regular, Source Han Sans CN;
				font-weight: 400;
				color: #333333;
				.Box_boxone{
					width: 160rpx;
					text-align: left;
				}
				.Box_boxtow{
					flex:auto;
				}
				.position {
					position: absolute;
					right: 0;
					top: 50rpx;
					background: #fff;
					width: 100%;
					max-height: 400rpx;
					overflow: auto;
					z-index: 99;
					box-shadow: 1rpx 3rpx 6rpx #ccc;

					.positionitem {
						padding: 16rpx 10px;
						border-bottom: 1rpx solid #ccc;
					}
				}
			}

			.preservation {
				width: 100%;
				text-align: center;

				.preservation_box {
					width: 100%;
					height: 72rpx;
					background: #288efb;
					text-align: center;
					line-height: 72rpx;
					border-radius: 50rpx;
					font-size: 36rpx;
					font-family: Source Han Sans CN-Regular, Source Han Sans CN;
					font-weight: 400;
					color: #ffffff;
				}

				.preservation_boxs {
					width: 70%;
					height: 72rpx;
					background: #999999;
					text-align: center;
					line-height: 72rpx;
					border-radius: 50rpx;
					font-size: 36rpx;
					font-family: Source Han Sans CN-Regular, Source Han Sans CN;
					font-weight: 400;
					color: #ffffff;
				}
			}

			.Box_boxbox {
				width: 100%;
				padding: 16rpx;

				.Box_boxone {
					font-family: Source Han Sans CN, Source Han Sans CN;
					font-weight: 400;
					font-size: 28rpx;
					color: #333333;
				}
				
				.Box_boxtowimge {
					display: flex;
					justify-content: center;
					align-items: center;
					margin: 0 auto;
					width: 254rpx;
					height: 156rpx;
					background: #ffffff;
					border: 1rpx dashed #707070;
				}
			}
		}

		.content_bottom {
			margin: 100rpx auto;
			width: 80%;
			height: 84rpx;
			background: #288efb;
			border-radius: 50rpx 50rpx 50rpx 50rpx;
			font-family: Source Han Sans CN, Source Han Sans CN;
			font-weight: 400;
			font-size: 36rpx;
			color: #ffffff;
			line-height: 84rpx;
			text-align: center;
		}
	}
</style>