<template>
	<view class="content">
		<view class="contentitem" v-for="(item,index) in form.list" :key="index">
			<view class="contentitemtop flex-between">
				<text>{{item.name}}</text>
				<text v-if="item.dlzh_status == 0" style="color: green;">无需登录</text>
				<text v-if="item.dlzh_status == 1" style="color: red;">需要登录</text>
				<text v-if="item.dlzh_status == 9">未知</text>
			</view>
			<text v-if="item.is_default == 1"
				style="background: #1989fa;color: #fff; padding:0 6rpx; border-radius: 10rpx;font-size: 24rpx;">默认</text>
			<view class="contentitemtext">
				电局账号： {{item.dlzh}}
			</view>
			<view class="contentitemtext">
				登录身份： {{item.k_identity}}
			</view>
			<view class="contentitemtext">
				手机号码： {{item.phone}}
			</view>
			<view class="contentitembotton flex-between">
				<view class="flex-colum" @click="login(item,'登录')">
					<image src="https://czg-invoicing.oss-cn-beijing.aliyuncs.com/issuername5.png" mode="aspectFill">
					</image>
					<text>登录</text>
				</view>
				<view class="flex-colum" @click="renlian(item,'人脸')">
					<image src="https://czg-invoicing.oss-cn-beijing.aliyuncs.com/issuername1.png" mode="aspectFill">
					</image>
					<text>人脸</text>
				</view>
				<view class="flex-colum" @click="modify(item,'修改')">
					<image src="https://czg-invoicing.oss-cn-beijing.aliyuncs.com/issuername2.png" mode="aspectFill">
					</image>
					<text>修改</text>
				</view>
				<view class="flex-colum" @click="setdefault(item,'默认')">
					<image src="https://czg-invoicing.oss-cn-beijing.aliyuncs.com/issuername3.png" mode="aspectFill">
					</image>
					<text>默认</text>
				</view>
				<!-- <view class="flex-colum">
					<image src="https://czg-invoicing.oss-cn-beijing.aliyuncs.com/issuername4.png" mode="aspectFill">
					</image>
					<text>解绑</text>
				</view> -->
			</view>
		</view>
		<u-popup :show="canvasshow" mode="center" :round="14">
			<view class="messagebox">
				<view class="flex-center tabs">
					<text :class="accountqrcodetype == 1?'tabsselect':''"
						@click="accountqrcodetype=1,accountqrcode()">电子税务局</text>
					<text :class="accountqrcodetype == 2?'tabsselect':''"
						@click="accountqrcodetype=2,accountqrcode()">个人所得税</text>
				</view>
				<view style="text-align: center; margin: 16rpx;">
					{{formCode.text}}
				</view>
				<view class="Box_item_content_T flex-center" style="padding: 16rpx;">
					<view style="width:242px; height:242px;"><canvas style="width:100%; height:100%;" id="qrcode"
							ref="qrcode" canvas-id="qrcode"></canvas></view>
				</view>
				<view v-if="textshow == '人脸'"
					style="padding:10rpx 0; text-align: center; margin: 32rpx auto 0rpx auto; background: #1989fa; width: 200rpx;color: #fff; border-radius: 30rpx;"
					@click="clicktextshow(loginid,textshow)">
					已认证
				</view>
			</view>
		</u-popup>
		<u-popup :show="messageshow" @close="messageshow = !messageshow" mode="center" :round="14">
			<view class="messagebox">
				<view class="messageboxtop">
					短信验证
				</view>
				<view class="messageboxtoptext">
					{{codephone}}
				</view>
				<view class="messageboxtoptext flex-between">
					<input type="mobile" v-model="codelang" placeholder="请输入短信验证码" maxlength="6" />
					<view class="repeats">
						<view v-if="showText == true"
							style="padding: 8rpx 16rpx 6rpx 16rpx;background: #288EFB;  border-radius: 15rpx;color: #fff;"
							@click="clickfasongyanzhengm">{{ Recapture }}</view>
						<view v-else
							style="color: #ccc; background-color: #f9f9f9; padding: 8rpx 16rpx 6rpx 16rpx; border-radius: 15rpx;">
							{{ second }}s重新发送
						</view>
					</view>
				</view>
				<view class="box" @click="queding">
					确定
				</view>
			</view>
		</u-popup>
		<u-popup :show="showpopup" @close="showpopup = !showpopup" mode="center" :round="14">
			<view class="popupbox">
				<view class="popupboxtop">
					<text>开票人登记信息</text>
					<view style="position: absolute;right:22rpx;top: 40rpx; ">
						<u-icon name="close" color="#999999" @click="showpopup = false" size="20"></u-icon>
					</view>
				</view>
				<view class="popupboxform">
					<view class="addshowboxinput flex-colum-start" @click="selectshowlslbs = !selectshowlslbs">
						<text class="addshowboxinputtext">*选择等录身份</text>
						<view class="addshowboxinput_inp flex-between">
							<view class="listinput_leftrelative">
								<text class="leftrelativetext">{{addform.dlsfname}}</text>
								<u-icon style="padding-right: 16rpx;" :name="selectshowlslbs?'arrow-up':'arrow-down'"
									color="#999999" size="14"></u-icon>
								<view class="listinput_leftabsolute" v-if="selectshowlslbs">
									<view v-for="(item,index) in columnsdlsf" :key="index"
										:class="addform.dlsf == item.id?'class':''" @click="taxexempttype(item,index)">
										{{ item.name }}
									</view>
								</view>
							</view>
						</view>
					</view>
					<view class="addshowboxinput flex-colum-start">
						<text class="addshowboxinputtext">*电子税务局账号</text>
						<view class="addshowboxinput_inp">
							<input type="text" disabled style="background: #f6f6f6;" placeholder="请输入"
								v-model="addform.dlzh" />
						</view>
					</view>
					<view class="addshowboxinput flex-colum-start">
						<text class="addshowboxinputtext">*电子税务局登录密码</text>
						<view class="addshowboxinput_inp">
							<input type="text" placeholder="请输入" v-model="addform.dlmm" />
						</view>
					</view>
					<view class="addshowboxinput flex-colum-start">
						<text class="addshowboxinputtext">*电子税务局地区</text>
						<view class="addshowboxinput_inp flex-between">
							<view class="listinput_leftrelative" disabled style="background: #f6f6f6;">
								<text class="leftrelativetext">{{addform.dqbmname}}</text>
								<u-icon style="padding-right: 16rpx;" :name="regionshow?'arrow-up':'arrow-down'"
									color="#999999" size="14"></u-icon>
								<!-- 	<view class="listinput_leftabsolute" v-if="regionshow">
									<view v-for="(item,index) in region" :key="index"
										:class="addform.region == item.code?'class':''"
										@click="regionclick(item,index)">
										{{ item.name }}
									</view>
								</view> -->
							</view>
						</view>
					</view>
					<view class="addshowboxinput flex-colum-start">
						<text class="addshowboxinputtext">*办税人姓名</text>
						<view class="addshowboxinput_inp">
							<input type="text" placeholder="请输入" v-model="addform.taxname" />
						</view>
					</view>
					<view class="addshowboxinput flex-colum-start">
						<text class="addshowboxinputtext">*办税人手机号码</text>
						<view class="addshowboxinput_inp">
							<input type="number" disabled placeholder="请输入" v-model="addform.taxphone" />
						</view>
					</view>
				</view>
				<view class="addshowbox_box">
					<view class="addshowbox_boxitem" @click="showpopup = false">
						取消
					</view>
					<view class="addshowbox_boxitem" @click="szzpyaddinvoicer">
						保存
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import uQRCode from '@/uni_modules/Sansnn-uQRCode/js_sdk/uqrcode/uqrcode.js'; // npm install uqrcodejs
	export default {
		data() {
			return {
				formCode: {
					text: '超掌柜',
					url: 'https://www.baidu.com/baidu?ie=utf-8&wd=312'
				}, //成功后
				text: 'uQRCode',
				size: 242,
				codephone: '', //公共手机号
				codelang: '', //公共验证码
				textshow: '', //判断显示那个
				loginid: '', //公共id
				showpopup: false,
				messageshow: false, //短信
				canvasshow: false, //二维码
				columnsdlsf: [],
				selectshowlslbs: false, //免税类型
				regionshow: false, //省份显示
				// 注册定时器   初始值
				second: 60,
				showText: false,
				Recapture: '发送验证码',
				accountqrcodetype: 1,
				form: {
					user_name: '',
					time: "",
					page: 1,
					type: '-1',
					status: 'loadmore',
					list: []
				},
				addform: {},
				region: [], //省份
			}
		},
		async onLoad() {
			this.newissuedbyliststatus()
			let res = await this.api.szzpygetprovinceno()
			this.region = res.data
			this.onShowdatadlsf()
		},
		onReachBottom() {
			if (this.form.status != 'nomore') {
				this.form.page = ++this.form.page;
				this.invoicingrecordsthatneed()
			}
		},
		onReady() {
			this.merchantStoreshowMerchantStoreReceipt()
		},
		methods: {
			// 设置默认
			async setdefault(item) {
				uni.showModal({
					title: '设置默认开票人',
					content: `确定设置办税员【${item.name}】为默认吗？`,
					success: async (res) => {
						if (res.confirm) {
							let resdata = await this.api.kpdefault({
								is_default: item.is_default == 0 ? 1 : 0,
								id: item.id
							})
							if (resdata.code == 1) {
								this.reset()
							}
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});

			},
			// 二维码
			async merchantStoreshowMerchantStoreReceipt() {
				// 获取uQRCode实例
				var qr = new uQRCode();
				// 设置二维码内容
				qr.data = this.formCode.url;
				// 设置二维码大小，必须与canvas设置的宽高一致
				qr.size = this.size;
				// 调用制作二维码方法
				qr.make();
				// 获取canvas上下文
				var canvasContext = uni.createCanvasContext('qrcode', this); // 如果是组件，this必须传入
				// 设置uQRCode实例的canvas上下文
				qr.canvasContext = canvasContext;
				// 调用绘制方法将二维码图案绘制到canvas上
				qr.drawCanvas();
			},
			// 人脸
			renlian(item, textshow) {
				this.textshow = textshow
				this.loginid = item.id
				uni.showModal({
					title: '人脸验证',
					content: `确定使用办税员【${item.name}】进行人脸吗？`,
					success: (res) => {
						if (res.confirm) {
							// 这是未登录要发送验证码
							this.accountqrcode()
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});

			},
			// 人脸前获取验证码
			async accountqrcode() {
				let res = await this.api.accountqrcode({
					type: this.accountqrcodetype,
					id: this.loginid
				})
				if (res.data.url) {
					this.messageshow = false
					this.formCode.url = res.data.url
					this.formCode.text = res.data.text
					this.canvasshow = true
					this.$nextTick(() => {
						this.merchantStoreshowMerchantStoreReceipt()
					})
				} else {
					uni.showToast({
						title: res.data.msg,
						icon: 'none'
					});
					this.yanzhengm(false)
					this.codephone = res.data.msg
					this.messageshow = true
				}
			},
			//登录获取验证码
			login(item, textshow) {
				this.textshow = textshow
				this.loginid = item.id
				uni.showModal({
					title: '登录验证',
					content: `确定使用办税员【${item.name}】进行登录验证吗？`,
					success: (res) => {
						if (res.confirm) {
							this.getsendsms()
							this.yanzhengm(false)
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			// 登录前获取验证码
			async getsendsms() {
				let res = await this.api.getsendsms({
					id: this.loginid
				})
				if (res.code == 1) {
					uni.showToast({
						title: res.data.msg,
						icon: 'none'
					});
					this.codephone = res.data.msg
					this.messageshow = true
				}
			},
			// 登录成功上传
			async sensms() {
				console.log(this.textshow)
				let res = await this.api.sensms({
					id: this.loginid,
					code: this.codelang,
				})
				console.log(res)
				if (res.code == 1) {
					switch (this.textshow) {
						case '登录':
							uni.showToast({
								title: '登录成功',
								icon: 'none'
							});
							this.messageshow = false
							this.reset() //重置
							break;
						case '人脸':
							await this.accountqrcode()
							break;
					}
				}
			},
			//开票员类型列表
			async onShowdatadlsf() {
				let res = await this.api.szzpytypeofinvoicer()
				this.columnsdlsf = res.data
			},
			taxexempttype(item, index) {
				this.addform.dlsfname = item.name
				this.addform.dlsf = item.id
			},
			regionclick(item, index) {
				this.addform.regionname = item.name
				this.addform.region = item.code
			},
			// 修改
			modify(item, textshow) {
				this.textshow = textshow
				this.addform = item
				this.addform.taxname = item.name
				this.addform.taxphone = item.phone
				this.addform.dlsf = item.dlsf
				// 税务地区
				this.region.forEach((i) => {
					if (i.code == item.dqbm) {
						this.addform.dqbmname = i.name
					}
				})
				// 开票人类型
				this.columnsdlsf.forEach((i) => {
					if (i.id == item.dlsf) {
						this.addform.dlsfname = i.name
					}
				})
				this.showpopup = true
			},
			// 修改开票人
			async szzpyaddinvoicer() {
				if (this.addform.dlsfname == null || this.addform.dlsfname == '') {
					uni.showToast({
						title: '选择等录身份不能为空',
						icon: 'none'
					});
					return false;
				}
				if (this.addform.dlmm == null || this.addform.dlmm == '') {
					uni.showToast({
						title: '电子税务局登录密码不能为空',
						icon: 'none'
					});
					return false;
				}
				if (this.addform.taxname == null || this.addform.taxname == '') {
					uni.showToast({
						title: '办税人姓名不能为空',
						icon: 'none'
					});
					return false;
				}
				if (this.addform.taxphone == null || this.addform.taxphone == '') {
					uni.showToast({
						title: '办税人手机号码不能为空',
						icon: 'none'
					});
					return false;
				}
				// this.addform.taxphone = this.codephone
				let res = await this.api.szzpyaddinvoicer(this.addform)
				if (res.code == 1) {
					this.showpopup = false
					this.messageshow = true
				}
			},
			// 修改后的下一步
			async szzpyaddinvoicersendsms() {
				this.addform.code = this.codelang
				let res = await this.api.szzpyaddinvoicersendsms(this.addform)
				if (res.code == 1) {
					this.showpopup = false
					uni.showToast({
						title: '修改成功',
						icon: 'none'
					});
					this.messageshow = false
					this.reset() //重置
				}
			},
			//再次获取验证码
			async clickfasongyanzhengm() {
				switch (this.textshow) {
					case '修改':
						await this.szzpyaddinvoicer()
						break;
					case '登录':
						await this.getsendsms()
						break;
					case '人脸':
						await this.accountqrcode()
						break;

				}
				this.yanzhengm(true) //验证码
			},
			//点击确定
			queding() {
				console.log(this.textshow)
				switch (this.textshow) {
					case '修改':
						this.szzpyaddinvoicersendsms()
						break;
					case '登录':
						this.sensms()
						break;
					case '人脸':
						this.sensms()
						break;
				}

			},
			// 验证码
			yanzhengm(e) {
				if (e) {
					uni.showToast({
						title: '验证码发送成功',
						icon: 'none'
					});
				}
				// 定时器
				this.showText = false;
				this.Recapture = '重新获取';
				var interval = setInterval(() => {
					let times = --this.second;
					this.second = times < 10 ? '0' + times : times; //小于10秒补 0
				}, 1000);
				setTimeout(() => {
					clearInterval(interval);
					this.second = 60;
					this.showText = true;
				}, 60000);
			},
			// 重置
			reset() {
				// this.form = {
				// 	user_name: '',
				// 	time: "",
				// 	page: 1,
				// 	type: '-1',
				// 	status: 'loadmore',
				// }
				this.form.user_name = ''
				this.form.time = ''
				this.form.page = 1
				this.form.type = '-1'
				this.form.status = 'loadmore'
				this.textshow = ''
				this.loginid = ''
				this.codelang = ''
				this.codephone = ''
				this.popupshow = false
				this.canvasshow = false
				this.newissuedbyliststatus()
			},
			//查询人脸认证结果  其他没有
			async clicktextshow(loginid, textshow) {
				if (textshow == '人脸') {
					let res = await this.api.researhqrcode({
						id: this.loginid
					})
					this.canvasshow = false
					uni.showToast({
						title: res.message || res.msg,
						icon: "none",
					})
					setTimeout(()=>{
						this.reset()
					},1000)
				}
			},
			// 列表
			async newissuedbyliststatus() {
				this.form.status = 'loading';
				let res = await this.api.newissuedbyliststatus({
					user_name: this.form.user_name,
					time: this.form.time,
					page: this.form.page,
					status: this.form.type,
				})
				if (this.form.page == 1 && res.data.length == 0) {
					this.form.list = res.data
					this.form.status = 'nomore'
					return false;
				} else {
					setTimeout(() => {
						if (this.form.page == 1) {
							this.form.list = res.data
						} else {
							this.form.list = [...this.form.list, ...res.data]
						}
						if (res.data.length < 10) this.form.status = 'nomore';
						else this.form.status = 'loadmore';
					}, 500)
				}
			}
		}
	}
</script>

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

	.content {
		padding: 0 28rpx;

		.contentitem {
			margin-top: 32rpx;
			padding: 32rpx;
			width: 100%;
			background: #FFFFFF;
			border-radius: 24rpx 24rpx 24rpx 24rpx;

			.contentitemtop {
				text:nth-child(1) {
					font-family: Source Han Sans CN, Source Han Sans CN;
					font-weight: 500;
					font-size: 32rpx;
					color: #333333;
				}

				text:nth-child(2) {
					font-weight: 400;
					font-size: 28rpx;
					color: #F39D52;
				}
			}

			.contentitemtext {
				margin-top: 26rpx;
				font-family: Source Han Sans CN, Source Han Sans CN;
				font-weight: 400;
				font-size: 28rpx;
				color: #666666;
			}

			.contentitembotton {
				margin-top: 34rpx;
				border-top: 1rpx solid #E5E5E5;
				padding-top: 30rpx;

				.flex-colum {
					padding: 0 22rpx;

					image {
						width: 37.89rpx;
						height: 37.89rpx;
					}

					text {
						margin-top: 8rpx;
						font-family: Source Han Sans CN, Source Han Sans CN;
						font-weight: 400;
						font-size: 24rpx;
						color: #333333;
					}
				}
			}
		}

		.messagebox {
			width: 694rpx;
			max-height: 870rpx;
			background: #FFFFFF;
			border-radius: 24rpx 24rpx 24rpx 24rpx;
			padding: 28rpx 32rpx;

			.tabs {
				text {
					margin-left: 10rpx;
					font-size: 34rpx;
					text-align: center;
					margin: 16rpx;
				}

				text:nth-child(1) {
					margin-left: 0;
				}

				.tabsselect {
					color: #318afe;
					font-weight: bold;
				}
			}

			.messageboxtop {
				padding: 10rpx 0;
				font-family: Source Han Sans CN, Source Han Sans CN;
				font-weight: 500;
				font-size: 28rpx;
				color: #333333;
				border-bottom: 2rpx solid #E5E5E5;
			}

			.messageboxtoptext {
				position: relative;
				margin-top: 28rpx;
				font-family: Source Han Sans CN, Source Han Sans CN;
				font-weight: 300;
				font-size: 24rpx;
				color: #666;

				input {
					font-size: 28rpx;
				}

				.repeat {
					position: absolute;
					bottom: 0;
					right: 26rpx;
					width: 25rpx;
					height: 17rpx;
				}

				.repeats {
					position: absolute;
					bottom: 0;
					right: 26rpx;
					font-size: 24rpx;
					font-weight: 400;
					color: #ffffff;
					border-radius: 12rpx;
				}
			}

			.box {
				width: 300rpx;
				margin: 100rpx auto 0rpx auto;
				text-align: center;
				padding: 8rpx 16rpx 6rpx 16rpx;
				background: #288EFB;
				border-radius: 15rpx;
				color: #fff;
			}
		}

		.popupbox {
			width: 694rpx;
			max-height: 870rpx;
			background: #FFFFFF;
			border-radius: 24rpx 24rpx 24rpx 24rpx;

			.popupboxtop {
				position: relative;
				padding: 32rpx 0 26rpx 38rpx;
				font-family: Source Han Sans CN, Source Han Sans CN;
				font-weight: 500;
				font-size: 28rpx;
				color: #333333;
				border-bottom: 2rpx solid #E5E5E5;
			}

			.popupboxform {
				padding: 0rpx 32rpx 30rpx 32rpx;
				overflow: auto;
				height: 74%;

				.addshowboxinput {
					margin-top: 32rpx;

					.addshowboxinputtext {
						font-family: Source Han Sans CN, Source Han Sans CN;
						font-weight: 400;
						font-size: 28rpx;
						color: #333333;
					}

					.addshowboxinput_inp {
						margin-top: 24rpx;
						position: relative;
						width: 100%;
						height: 66rpx;
						background: #fff;
						border-radius: 4rpx 4rpx 4rpx 4rpx;
						border: 2rpx solid #D9D9D9;

						.listinput_leftrelative {
							position: relative;
							display: flex;
							justify-content: space-between;
							align-items: center;
							flex: auto;
							height: 100%;
							background: #FFFFFF;
							border-radius: 4rpx 4rpx 4rpx 4rpx;
							font-family: Source Han Sans CN, Source Han Sans CN;
							font-weight: 400;
							font-size: 26rpx;

							.leftrelativetext {
								padding: 6rpx 24rpx;
								color: #6f6f6f;
							}

							.listinput_leftabsolute {
								position: absolute;
								z-index: 999;
								width: 100%;
								top: 65rpx;
								max-height: 250rpx;
								overflow: auto;
								background: #fff;
								border: 1px solid #D9D9D9;

								view {
									padding: 6rpx 24rpx;
									color: #6f6f6f;
								}

								.class {
									font-weight: 500;
									font-size: 28rpx;
									color: #333;
									border-bottom: 1rpx solid #e3d8d8;
									background: #f1f1f1;
								}
							}
						}

						input {
							width: 100%;
							height: 100%;
							padding: 0 16rpx;
							font-family: Source Han Sans CN, Source Han Sans CN;
							font-weight: 400;
							font-size: 24rpx;
						}

						.absolute {
							padding: 8rpx 18rpx;
							position: absolute;
							background: #318AFE;
							border-radius: 4rpx 4rpx 4rpx 4rpx;
							font-family: Source Han Sans CN, Source Han Sans CN;
							font-weight: 400;
							font-size: 24rpx;
							color: #FFFFFF;
							right: 16rpx;
							top: 50%;
							transform: translateY(-50%);
						}
					}
				}
			}

			.addshowbox_box {
				padding-top: 32rpx;
				padding-right: 16rpx;
				width: 100%;
				border-top: 2rpx solid #E5E5E5;
				display: flex;
				justify-content: flex-end;
				align-items: flex-start;

				.addshowbox_boxitem {
					width: 112rpx;
					height: 56rpx;
					font-family: Source Han Sans CN, Source Han Sans CN;
					font-weight: 400;
					font-size: 28rpx;
					color: #333333;
					line-height: 56rpx;
					margin-left: 16rpx;

				}

				.addshowbox_boxitem:nth-child(1) {
					text-align: center;
					background: #FFFFFF;
					border: 2rpx solid #D9D9D9;
					font-family: Source Han Sans CN, Source Han Sans CN;
					font-weight: 400;
					font-size: 28rpx;
					color: #333333;
				}

				.addshowbox_boxitem:nth-child(2) {
					text-align: center;
					background: #318AFE;
					border: 2rpx solid #D9D9D9;
					font-family: Source Han Sans CN, Source Han Sans CN;
					font-weight: 400;
					font-size: 28rpx;
					color: #FFFFFF;
				}
			}
		}
	}
</style>