<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" />
					<!-- <u-icon name="weixin-fill" color="#04be02" size="28"></u-icon> -->
					<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_weixin flex-center" @click="doReady" v-if="showtitle">
			<u-icon name="weixin-fill" color="#04be02" size="28"></u-icon>
			微信抬头一键导入
		</view>
		<view class="content_bottom" @click="saveMerchantBaseInfo">确定</view>
	</view>
</template>

<script>
	// import jWeixin from 'jweixin-module'
	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,
				showtitle: false
			};
		},
		async onLoad(e) {
			this.getInvoiceList()
			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() {
				this.subCategoryList = [];
			},
			removeUrlParameters(url) {
				return url.split('?')[0];
			},
			//点击按钮获取微信参数配置
			async getInvoiceList() {
				let _this = this
				// 获取当前页面的 URL
				var currentUrl = this.removeUrlParameters(location.href.split('#')[0])
				let res = await this.api.usergetwechatjssdk({
					url: location.href.split('#')[0]
				})
				wx.config(res.data);
				wx.ready(function() {
					// config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。
					wx.checkJsApi({
						jsApiList: [
							// 所有要调用的 API 都要加到这个列表中
							'chooseInvoiceTitle'
						], // 需要检测的JS接口列表，所有JS接口列表见附录2,
						success: function(res) {
							_this.showtitle = true
						}
					});
				});
				wx.error(function(res) {
					_this.showtitle = false
					console.log(res, '失败！')
					// config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
				});

			},
			doReady() {
				let _this = this
				wx.invoke('chooseInvoiceTitle', {
					"scene": "1"
				}, function(res) {
					// 这里处理调用结果X``
					var info = JSON.parse(JSON.stringify(res)).choose_invoice_title_info;
					var infoJ = JSON.parse(JSON.parse(JSON.stringify(info)));
					_this.form.user_name = infoJ.title ? infoJ.title : '' //发票抬头
					_this.form.user_duty = infoJ.taxNumber ? infoJ.taxNumber : '' //税号
					_this.form.c_address = infoJ.companyAddress ? infoJ.companyAddress : '' //公司地址
					_this.form.c_phone = infoJ.telephone ? infoJ.telephone : '' //电话
					_this.form.c_bank_name = infoJ.bankAccount ? infoJ.bankAccount : '' //开户银行
					_this.form.c_bank_account = infoJ.bankName ? infoJ.bankName : '' // 银行账号
					_this.form.user_type = infoJ.type == 0 ? 2 : 1 //发票抬头类型 微信返回0是企业 1是个人
					// form: {
					// 	user_type: 2,
					// 	img: '',
					// 	user_name: '',
					// 	user_duty: '',
					// 	email: '',
					// 	mobile: '',
					// 	status_note: '',
					// 	c_address: '',
					// 	c_phone: '',
					// 	c_bank_name: '',
					// 	c_bank_account: ''
					// },
				})
			},
			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) {
				console.log(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 {
					setTimeout(() => {
						this.$set(this.form, 'user_name', category.companyName);
						this.$set(this.form, 'user_duty', category.creditCode);
						// this.form.user_name = category.companyName;
						// this.form.user_duty = category.creditCode;
						this.subCategoryList = [];
					}, 500)

				}


			},
			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"
				}

			},
			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() { //搜索值
				let res = await this.api.enterprisestore({
					like: this.form.user_name,
					open_id: this.form.open_id,
					sign: uni.utils.md5(this.form.user_name + 'd2e862a1-02b5-4405-8c69-c74ca871bcfe')
				})
				if (res.code == 1) {
					this.subCategoryList = res.data
					// this.subCategoryList = [...res.data,{'companyName':'以上都不是','creditCode':''}] ;
					// this.subCategoryList = [...res.data,{'companyName':'以上都不是','creditCode':''}] ;
					// if (this.page == 1) {
					// 	this.subCategoryList = res.data;
					// } else {
					// 	this.subCategoryList.push(...res.data);
					// }
				}
			}
		}
	};
</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_weixin {
			margin-top: 40rpx;
			width: 100%;
			font-size: 28rpx;
			font-family: Source Han Sans CN-Regular, Source Han Sans CN;
			font-weight: 400;
			text-align: center;
			color: #04be02;
			// font-weight: 400;
		}

		.content_bottom {
			margin: 60rpx 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>