<template>
	<view class="mystereo">
		<view class="mystereo-header">
			<view class="mystereo-header-text">
				<view class="mystereo-header-text-neishi" @click="topgi">
					<view class="mystereo-header-text-icon">
						<image src="https://cdn.bjtdba.com/vod/image/2022-08-11/20220811133828415.png" mode="widthFix">
						</image>
					</view>
				</view>

				<view class="mystereo-header-text-title">
					我的音响
				</view>
			</view>
		</view>
		<view class="mystereo-wuuw" @click="scan">
			<view class="mystereo-wuuw-text">
				<view class="mystereo-wuuw-text-left">
					我的音响
				</view>
				<view class="mystereo-wuuw-text-right">
					<view class="mystereo-wuuw-text-right-textsgjd" :style="dangding=='已绑定'?'color:#333333':'#999999'">
						{{dangding}}
					</view>
					<view class="mystereo-wuuw-text-right-icon">
						<image src="https://cdn.bjtdba.com/vod/image/2022-08-29/20220829100206110.png" mode="widthFix">
						</image>
					</view>
				</view>
			</view>
		</view>
		<view class="mystereo-text">
			提示:</br>
			打开音响，等待音响提示服务链接成功后，可正常使用；</br>
			如果音响提示，服务链接失败请重新打开音响或等待重新链接。
		</view>
	</view>
</template>

<script>
	import {
		merchantYxadd,
		queryByMerId
	} from '@/commit/config.js'
	export default {
		data() {
			return {
				mer_id: '',
				uid: '',
				dangding: "未绑定",
				status: ""
			}
		},
		onLoad() {
			let selectmerchant = uni.getStorageSync('selectmerchant')
			this.mer_id = selectmerchant.merId
			let userinfo = uni.getStorageSync('userinfo')
			this.uid = userinfo.uid
			if (this.uid) {
				this.queryByMerId()
			}
			
		},
		onShow() {

		},
		methods: {
			// 查询音响是否绑定
			queryByMerId() {
				queryByMerId({
					merId: this.mer_id
				}).then(res => {
					this.status = res.data.status
					if (res.data.status == 200) {
						this.dangding = "已绑定"
					} else {
						this.dangding = "未绑定"
					}
				}, fail => {
					console.log(fail)
				}).catch(data => {
					console.log(data)
				})
			},
			//点击扫描二维码
			scan() {
				let data = {}
				if (this.mer_id) {
					data.merId = this.mer_id
				}
				data.uid = this.uid
				let that = this
				if (this.status == 200) {
					uni.showToast({
						title: "已绑定",
						icon: 'error',
					})
				} else {
					// 允许从相机和相册扫码
					uni.scanCode({
						success: function(res) {
							data.sn = res.result
							uni.showModal({
								title: "提示",
								content: "确定绑定音响吗 编号:" + data.sn,
								showCancel: true,
								cancelText: '取消',
								confirmText: '确定',
								success: res => {
									if (res.confirm) {
										merchantYxadd(data).then(res => {
											if (res.data.status == 200) {
												that.dangding = "已绑定"
												uni.showToast({
													title: res.data.message,
													icon: 'success',
												})
											}
										}, fail => {
											uni.showToast({
												title: fail,
												icon: 'error',
											})
										}).catch(err => {
											console.log(err);
										})
									} else {
										// 否则点击了取消 
										that.dangding = '未绑定'
									}
								}
							})
						},
					});
				}

			},
			topgi() {
				uni.switchTab({
					url: '/pages/my/index'
				});
			}
		}
	}
</script>

<style>
	page {
		background-color: #F7F8FC;
	}
</style>
<style lang="scss" scoped>
	.mystereo {
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;

		.mystereo-header {
			position: fixed;
			top: 0;
			left: 0;
			z-index: 111;
			width: 100%;
			height: 176rpx;
			background: #FFFFFF;
			display: flex;
			justify-content: center;

			.mystereo-header-text {
				width: 686rpx;
				font-size: 36rpx;
				font-weight: 500;
				color: #333333;
				display: flex;
				margin-top: 107rpx;
				align-items: center;

				.mystereo-header-text-neishi {
					width: 45rpx;
					height: 45rpx;
					margin-right: 17rpx;

					.mystereo-header-text-icon {
						width: 36rpx;
						height: 36rpx;
						margin-top: 2rpx;

						image {
							width: 100%;
							height: 100%;
						}
					}
				}
			}
		}

		.mystereo-wuuw {
			width: 686rpx;
			height: 118rpx;
			background: #FFFFFF;
			border-radius: 8rpx;
			margin: 202rpx 0 25rpx 0;
			display: flex;
			justify-content: center;
			align-items: center;

			.mystereo-wuuw-text {
				width: 622rpx;
				height: 100%;
				display: flex;
				justify-content: space-between;
				align-items: center;

				.mystereo-wuuw-text-left {
					font-size: 30rpx;
					font-weight: 400;
					color: #333333;
				}

				.mystereo-wuuw-text-right {
					display: flex;

					.mystereo-wuuw-text-right-textsgjd {
						font-size: 30rpx;
						font-weight: 400;
						color: #B6B6B6;
					}

					.mystereo-wuuw-text-right-icon {
						width: 20rpx;
						height: 20rpx;
						margin-left: 8rpx;

						image {
							margin-bottom: 5rpx;
							width: 100%;
							height: 100%;
						}
					}
				}
			}
		}

		.mystereo-text {
			width: 686rpx;
			font-size: 26rpx;
			font-weight: 400;
			color: #999999;
		}
	}
</style>
