<template>
	<view>
		<loadlogo v-if="!loadlogo" />
		<!-- 	<view class="boxTitle">
			<view v-if="type == 1" class="check">
				指导老师
			</view>
			<view v-else class="noCheck"  @click="checked(1)">
				指导老师
			</view>
			<view v-if="type == 2" class="check">
				我的微信
			</view>
			<view v-else class="noCheck" @click="checked(2)">
				我的微信
			</view>
		</view> -->
		<view class="container" v-if="loadlogo">
			<far-bottom></far-bottom>
			<view class="header-tabBar dis-flex border-line border-bottom p-r">
				<view
					class="tabBar-item p-top-bom-30 t-c p-r f-24 col-9"
					:class="{ 'tabBar-activeText-size': item.tabType === current, 'tabBar-itemCenter': tabBar.length < 2 }"
					v-for="(item, index) in tabBar"
					:key="index"
					@click="currentTabBar(item.tabType)"
				>
					{{ item.title }}
					<view v-if="item.tabType === current" class="tabBar-active"></view>
				</view>
				<view class="cut-off"></view>
			</view>
			<view class="content" :style="{ 'background-image': 'url(' + imageRoot + 'contactway.png)' }">
				<view class="content-top p-r" style="background-color: #FFFAEA;">
					<block v-if="current === '1'">
						<view class="content-avatar-box p-r">
							<view class="user-avatar">
								<image style="width: 100%;height: 100%;border-radius: 50%;" :src="head_info.avatar" v-if="!head_info.hidehead" mode=""></image>
							</view>
							<view class="avatar-title t-c f-24 p-r">{{ !head_info.hidehead ? `我的${ContactData.text_set.dstext}` : '社群信息' }}</view>
							<view class="user-nickname f-28 col-3 t-c">{{ !head_info.hidehead ? head_info.nickname : head_info.title }}</view>
						</view>
					</block>
					<block v-else-if="current === '3'">
						<view class="content-avatar-box p-r">
							<view class="user-avatar">
								<!-- <image style="width: 100%;height: 100%;border-radius: 50%;" :src="comm_info.images" v-if="!head_info.hidehead" mode=""></image> -->
							</view>
							<view class="avatar-title t-c f-24 p-r">{{  '社群信息' }}</view>
							<view class="user-nickname f-28 col-3 t-c">{{ comm_info.title }}</view>
						</view>
					</block>
					<block v-else>
						<view class="content-Wxavatar-box p-r t-c"><image :src="imgfixUrls + 'dealer_tool/wxcontact.png'" mode="" class="Wxavatar"></image></view>
					</block>
					<view class="content-title t-c f-24" :style="{ 'margin-top': current === '1' ? '-20px' : '' }">
						{{ current === '1' ? ContactData.text_set.dsinfotext : ContactData.text_set.grinfotext }}
					</view>
				</view>
				<view class="content-bottom" :style="head_info.type === 2 ? 'margin-top:80px' : 'margin-top:50px'">
					<view class="content-input">
						<block v-if="current === '1' && !head_info.hidehead">
							<view class="content-input-style-1 p-top-bom-30 dis-flex flex-y-center">
								<view class="f-24 col-9 m-right20">手机号</view>
								<view class="f-24 col-3">{{ head_info.mobile }}</view>
							</view>
							<view class=" p-top-bom-30 dis-flex flex-y-center flex-x-between">
								<view class="dis-flex flex-y-center">
									<view class="f-24 col-9 m-right20">微信号</view>
									<view class="f-24 col-3">{{ head_info.wechat_number }}</view>
								</view>
								<view class="copy f-24 t-c" @click="copy(head_info.wechat_number)">复制</view>
							</view>
						</block>
						<block v-if="current === '2'">
							<view class="content-input-style p-top-bom-30 dis-flex flex-y-center flex-x-between">
								<view class="dis-flex flex-y-center">
									<view class="f-24 col-9 flex-shrink m-right20">微信号</view>
									<input type="text" :disabled="true" class="f-24 col-3 input-flex" :focus="isWxdisabled" v-model="user_info.wechat_number" />
								</view>
								<view class="copy f-24 t-c" @click="modif">{{ !!user_info.wechat_number ? '修改' : '设置' }}</view>
							</view>
							<view class="content-input-style p-top-bom-30 dis-flex flex-y-center flex-x-between">
								<view class="f-24 col-9 m-right20">微信二维码</view>
								<view class="copy f-24 t-c" @click="upImages">添加</view>
							</view>
						</block>
						<!-- <block v-if="current === '3' && !comm_info.hidecomm">
							<view class="content-input-style-1 p-top-bom-30 dis-flex flex-y-center">
								<view class="f-24 col-9 m-right20">手机号</view>
								<view class="f-24 col-3">{{ comm_info.mobile }}</view>
							</view>
							<view class=" p-top-bom-30 dis-flex flex-y-center flex-x-between">
								<view class="dis-flex flex-y-center">
									<view class="f-24 col-9 m-right20">微信号</view>
									<view class="f-24 col-3">{{ comm_info.wechat_number }}</view>
								</view>
								<view class="copy f-24 t-c" @click="copy(comm_info.wechat_number)">复制</view>
							</view>
						</block> -->
					</view>
					<view class="wx-code-box p-r" @click="prevImages(comm_info.qrcode || comm_info.wechat_qrcode)">
						<view
							class="wx-code"
							:style="{ 'background-image': 'url(' + head_info['wechat_qrcode'] + ')' }"
							v-if="current === '1'"
						></view>
						<view class="wx-code" v-else-if="current === '2'" :style="{ 'background-image': 'url(' + user_info['wechat_qrcode'] + ')' }"></view>
						<view class="wx-code" v-else-if="current === '3'" :style="{ 'background-image': 'url(' + comm_info['qrcode'] + ')' }"></view>
					</view>
					<view v-if="current === '3'" class="code-hint f-24 t-c">预览识别微信二维码</view>
				</view>
			</view>
		</view>
		<PopManager :show="Wxdisabled" type="center" @clickmask="Wxdisabled = false">
			<view class="managerBox">
				<input type="text" v-if="Wxdisabled" class="manage-input" v-model="manageInput" value="" placeholder="请输入微信号" />
				<view class="btn-box">
					<view class="btn-1" @click="close">取消</view>
					<view class="btn" @click="amend">确定</view>
				</view>
			</view>
		</PopManager>
	</view>
</template>
<script>
import App from '@/common/js/app.js';
import Loadlogo from '@/components/template/loadlogo';
import h5Copy from '@/components/junyi-h5-copy/junyi-h5-copy.js';
import PopManager from '@/components/template/PopManager';
// #ifdef H5
import wxApi from '@/common/js/wxApi.js';
// #endif
export default {
	data() {
		return {
			type: '1',
			current: '2',
			tabBar: [],
			Wxdisabled: false,
			isWxdisabled: false,
			loadlogo: false,
			head_info: {}, //社群或分销商信息
			user_info: {}, //个人信息
			comm_info:{},//社群
			manageInput: '',
			ContactData: {}
		};
	},
	components: {
		Loadlogo,
		PopManager
	},
	computed: {},
	onShow() {},
	mounted() {
		uni.setNavigationBarColor({
			frontColor: '#000000',
			backgroundColor: '#FFFFFF'
		});
		this.getContactInfo();
	},
	methods: {
		amend() {
			let _this = this,
				requestData = {
					wechat_number: _this.manageInput
				};

			App._post_form(
				'&p=distribution&do=setContactInformation',
				requestData,
				res => {
					uni.showToast({
						title: '修改成功'
					});
					this.getContactInfo();
					this.Wxdisabled = !this.Wxdisabled;

					console.log('success');
				},
				false,
				() => {}
			);
		},
		close() {
			this.Wxdisabled = !this.Wxdisabled;
			this.manageInput = '';
		},
		copy(item) {
			// #ifdef H5
			const result = h5Copy(item);
			if (result === false) {
				uni.showToast({
					title: '不支持'
				});
			} else {
				uni.showToast({
					title: '复制成功',
					icon: 'none'
				});
			}
			// #endif

			// #ifndef H5
			uni.setClipboardData({
				data: item
			});
			// #endif
		},
		// 导航切换
		checked(type) {
			let _this = this;
			_this.type = type;
		},
		// 获取联系方式信息
		getContactInfo() {
			let _this = this;
			App._post_form(
				'&p=distribution&do=getContactInformation',
				{},
				res => {
					if (res.errno === 0) {
						// debugger
						let ContactData = res.data;
						// if(!ContactData.head_info){
						// 	ContactData.head_info = {};
						// }
						let tabBar = [];
						if (!ContactData.head_info.hidehead) {
							tabBar.push({
								title: `我的${ContactData.text_set.dstext}`,
								tabType: '1'
							});
							_this.current = '1';
						}
						tabBar.push({
							title: '我的微信',
							tabType: '2'
						});
						if (!ContactData.comm_info.hidecomm) {
							tabBar.push({
								title: '我的社群',
								tabType: '3'
							});
						};
							_this.setData({
								tabBar: tabBar
							})
						// if (ContactData.head_info) {
						// 	let tabBar = [

						// 		{
						// 			title: '我的微信',
						// 			tabType: '2'
						// 		},
						// 		{
						// 			title: '我的社群',
						// 			tabType: '3'
						// 		}
						// 	]
						// 	_this.setData({
						// 		tabBar: tabBar
						// 	})
						// } else {
						// 	if (ContactData.head_info && ContactData.head_info.type == 3) {
						// 		let tabBar = [{
						// 			title: '我的微信',
						// 			tabType: '2'
						// 		}];
						// 		_this.setData({
						// 			tabBar: tabBar,
						// 			current: "2"
						// 		})
						// 	}
						// }
						// #ifdef H5
						wxApi.wxRegister();
						// #endif
						_this.setData(ContactData);
						_this.ContactData = ContactData;
					}
				},
				false,
				() => {
					_this.loadlogo = true;
				}
			);
		},
		// 选项卡
		currentTabBar(tabType) {
			let _this = this;
			_this.current = tabType;
		},
		// 输入框修改
		modif() {
			let _this = this;
			_this.manageInput = _this.user_info.wechat_number;
			_this.Wxdisabled = !_this.Wxdisabled;
			_this.isWxdisabled = !_this.isWxdisabled;
		},
		// 预览图片
		prevImages(ImageCode) {
			uni.previewImage({
				current: ImageCode,
				urls: [ImageCode],
				success: function() {
					console.log('success');
				}
			});
		},
		uploadImageFiles(requestData) {
			App._post_form(
				'&do=uploadFiles',
				requestData,
				res => {
					if (res.errno === 0) {
						this.user_info['wechat_qrcode'] = res.data.img;
						App._post_form(
							'&p=distribution&do=setContactInformation',
							{
								wechat_qrcode: res.data.image
							},
							result => {
								console.log('success');
							}
						);
					}
				},
				false,
				() => {
					uni.hideLoading();
				}
			);
		},
		// 上传图片
		async upImages() {
			let _this = this;
			// #ifdef H5
			if(App.getClientType() == 2){
			     let res = await App.browser_upload(1);
			    uni.showLoading();
			    let imageUrl = res.tempFilePaths[0],
			    	rnImageData = App._upLoad(imageUrl);
			    rnImageData.then(options => {
			    	let file = options.data,
			    		requestData = {
			    			wechat_qrcode: file.img
			    		};
			    	App._post_form(
			    		'&p=distribution&do=setContactInformation',
			    		requestData,
			    		result => {
			    			console.log('success');
			    		},
			    		false,
			    		() => {
			    			uni.hideLoading();
			    		}
			    	);
			    	_this.user_info['wechat_qrcode'] = file.img;
			    });
				return
			}
			wxApi.choseImage(res => {
				wxApi.uoloadIg(res.localIds[0], data => {
					if (data.errMsg === 'uploadImage:ok') {
						uni.showLoading({});
						let requestData = {
							upload_type: 2,
							id: data.serverId
						};
						_this.uploadImageFiles(requestData);
					} else {
						App.showError('上传失败');
					}
				});
			});
			// #endif
			// #ifndef H5
			uni.chooseImage({
				count: 1, //默认9
				sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
				sourceType: ['album'], //从相册选择
				success: function(res) {
					uni.showLoading();
					let imageUrl = res.tempFilePaths[0],
						rnImageData = App._upLoad(imageUrl);
					rnImageData.then(options => {
						let file = options.data,
							requestData = {
								wechat_qrcode: file.img
							};
						App._post_form(
							'&p=distribution&do=setContactInformation',
							requestData,
							result => {
								console.log('success');
							},
							false,
							() => {
								uni.hideLoading();
							}
						);
						_this.user_info['wechat_qrcode'] = file.img;
					});
				},
				fail: function() {
					App.showError('上传失败');
				}
			});
			// #endif
		}
	}
};
</script>

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

// .boxTitle {
// 	display: flex;
// 	justify-content: space-around;

// 	.noCheck {
// 		width: 160upx;
// 		height: 80upx;
// 		text-align: center;
// 		line-height: 80upx;
// 		box-sizing: border-box;
// 	}

// 	.check {
// 		width: 160upx;
// 		height: 80upx;
// 		text-align: center;
// 		line-height: 80upx;
// 		border-bottom: 6upx solid #E6BA55;
// 		box-sizing: border-box;
// 	}
// }

.container {
	.header-tabBar {
		width: 100%;

		.tabBar-activeText-size {
			font-size: 30upx !important;
			color: #333333 !important;
		}

		.tabBar-itemCenter {
			margin: 0 auto;
		}

		.tabBar-item {
			width: 50%;

			.tabBar-active {
				position: absolute;
				left: 50%;
				bottom: -2upx;
				transform: translateX(-50%);
				width: 30upx;
				height: 6upx;
				background-color: #ff4444;
				border-radius: 6upx;
				z-index: 3;
			}
		}

		.cut-off {
			position: absolute;
			left: 50%;
			top: 30%;
			// transform: translate(-50%,-50%);
			transform: scaleX(0.5);
			transform-origin: 0 0;
			width: 1px;
			height: 40upx;
			background-color: #eeeeee;
		}
	}

	.content {
		width: 550upx;
		height: 970upx;
		background-size: 550upx 970upx;
		background-repeat: no-repeat;
		margin: 100upx auto 0;

		// 内容上面部分
		.content-top {
			padding: 0 70upx;

			// 选项1
			.content-avatar-box {
				top: -60upx;

				.user-avatar {
					width: 120upx;
					height: 120upx;
					// border-radius: 50%;
					background-size: 120upx 120upx;
					background-repeat: no-repeat;
					margin: 0 auto;
				}

				.avatar-title {
					width: 120upx;
					height: 40upx;
					line-height: 40upx;
					color: #fff6dd;
					background-color: #e6ba55;
					border-radius: 20upx;
					top: -20upx;
					margin: 0 auto;
				}
			}

			// 选项2
			.content-Wxavatar-box {
				top: -60upx;

				.Wxavatar {
					width: 120upx;
					height: 120upx;
					border-radius: 50%;
				}
			}

			// 内容标题
			.content-title {
				color: #d4a12a;
			}
		}

		//内容下面部分
		.content-bottom {
			// margin-top: 100upx;

			.code-hint {
				color: #e6bb57;
			}

			// 输入框部分
			.content-input {
				margin: 0 50upx;

				.content-input-style-1 {
					border-bottom: 1px solid #ebc773;
				}

				.content-input-style {
					border-bottom: 1px dashed #ebc773;

					.input-flex {
						// width: 50%;
					}
				}

				.copy {
					width: 60upx;
					height: 30upx;
					line-height: 30upx;
					border: 1px solid #ebc877;
					border-radius: 4upx;
					color: #ebc773;
					flex-shrink: 0;
				}
			}

			// 二维码
			.wx-code-box {
				width: 300upx;
				height: 300upx;
				border: 4upx solid rgba(230, 186, 85, 1);
				border-radius: 10upx;
				margin: 50upx auto 30upx;

				.wx-code {
					position: absolute;
					left: 50%;
					top: 50%;
					transform: translate(-50%, -50%);
					width: 260upx;
					height: 260upx;
					background-repeat: no-repeat;
					background-size: 260upx 260upx;
				}
			}
		}
	}
}
.managerBox {
	width: 60vw;
	padding: 30upx 60upx;
	border-radius: 20upx;
	background-color: #ffffff;
	.manage-input {
		font-size: 26upx;
		border: 1upx solid #eeeeee;
		padding: 15upx 30upx;
		border-radius: 10upx;
	}
	.btn-box {
		height: 100upx;
		position: relative;
		.btn {
			width: 128upx;
			height: 50upx;
			line-height: 50upx;
			font-size: 26upx;
			text-align: center;
			color: #ffffff;
			background-color: #ff4444;
			border-radius: 10upx;
			position: absolute;
			right: 0upx;
			top: 70%;
			transform: translateY(-50%);
		}
		.btn-1 {
			width: 128upx;
			height: 50upx;
			line-height: 50upx;
			font-size: 26upx;
			text-align: center;
			color: #ff4444;
			background-color: #ffffff;
			border: 1upx solid #ff4444;
			border-radius: 10upx;
			position: absolute;
			left: 0upx;
			top: 70%;
			transform: translateY(-50%);
		}
	}
}
</style>
