<template>
	<page-meta :page-style="themeColor"></page-meta>
	<view :style="themeColor">
		<view class="about w100">
			<view class="bg border-top"></view>
			<view class="list_cotact padding-top">
				<view class="container">
					<!-- #ifdef H5 -->
					<view class="view_ul view_ul_one clearfix">
						<view @click="tapMessage" class="view_li w50_li  text-center"
							style="background: #1daa39;width: 100%;border-radius: 10rpx;">
							<view class="bl bor" style="box-sizing: border-box;">
								<image mode="heightFix" :src="$util.img('public/static/img/liuyan.png')"></image>
								<view class="name bl line1" style="margin-top: 6rpx;">在线留言</view>
							</view>
						</view>
					</view>
					<!-- <view @click="test()">Test</view> -->
					<!-- #endif -->
					<!-- #ifdef MP-WEIXIN -->
					<view class="view_ul view_ul_one clearfix">
						<view class="view_li w50_li  text-center">
							<button class="bl bor" hoverClass="none" openType="contact" sessionFrom="weapp"
								showMessageCard="true" style="margin: 0;">
								<image mode="heightFix" :src="$util.img('public/static/img/kefu.png')"></image>
								<view class="name bl line1">专属客服</view>
							</button>
						</view>
						<view @click="tapMessage" class="view_li w50_li  text-center">
							<view class="bl bor" style="box-sizing: border-box;">
								<image mode="heightFix" :src="$util.img('public/static/img/liuyan.png')"></image>
								<view class="name bl line1" style="margin-top: 6rpx;">在线留言</view>
							</view>
						</view>
					</view>
					<!-- #endif -->

					<view class="view_ul_100" v-for="(item, index) in dataList" :key="index" style="margin-bottom: 20rpx;">

						<view class="bl clearfix bor bg-white"
							:style="{ backgroundImage: ' url(' + $util.img(personnel_bg) + ')', backgroundSize: '100% 100%' }">
							<view class="fr">

								<view class="text" style="font-size: 40rpx;font-weight: 600;color:#333">
									{{ item.realname }}</view>
								<view class="text">{{ item.position }}</view>
								<!--   <view class="text">{{item.mobile_text}}：{{item.mobile}}</view> -->
								<view class="text" style="padding-bottom:20rpx;color:#0054a5">{{ item.address }}</view>
								<view class="contact_name"
									style="padding-top:30rpx;padding-bottom:0rpx;border-top: solid 1px #eee;font-size:28rpx;display: flex;">
									<image mode="widthFix" :src="$util.img('public/static/img/boda.png')"
										style="margin-top: 8rpx;margin-right: 10rpx;"></image>
									<view style="flex: 1;">{{ item.mobile }}</view>
									<view
										style="margin-top: 0rpx;margin-left: 10rpx;font-size: 26rpx;color:rgba(71,71,71,.79)"
										@click="Tel(item.mobile)"><span
											style="background: #0054a5;color:#fff;padding: 10rpx 30rpx;font-size: 24rpx;border-radius: 50rpx;">一键拨打</span>
									</view>
								</view>
								<view class="contact_name"
									style="padding-top:20rpx;padding-bottom:20rpx;font-size:28rpx;display: flex;">
									<image mode="widthFix" :src="$util.img('public/static/img/emall.png')"
										style="margin-top: 8rpx;margin-right: 10rpx;"></image>
									<view style="flex: 1;">{{ item.email }}</view>
									<view
										style="margin-top: 0rpx;margin-left: 10rpx;font-size: 26rpx;color:rgba(71,71,71,.79)"
										@click="tomap()"><span
											style="background: #888;color:#fff;padding: 10rpx 30rpx;font-size: 24rpx;border-radius: 50rpx;">立即导航</span>
									</view>
								</view>
							</view>
						</view>
					</view>
					<!--   <view class="view_ul view_ul_two clearfix " v-if="dataList.length > 3" >
		                <view @click="Tel(item.mobile)" class="view_li w50_li" v-for="(item,index)  in dataList" >
		                    <view class="bl bor" hoverClass="none" url="" style="box-shadow: 5rpx 5rpx 10rpx #dcdcdc;height: 230rpx;position: relative;">
		                        <view class="contact_name"  v-if="item.position">{{item.position_text}}：{{item.position}}</view>
		                        <view class="contact_name">{{item.title_text}}：{{item.realname}}</view>
		                        <view class="contact_name">{{item.mobile_text}}：{{item.mobile}}</view>
		                        <view class="contact_name" style="padding-bottom:10rpx;white-space: nowrap;text-overflow: ellipsis;overflow: hidden;">{{item.address_text}}：{{item.address}}</view>
		                        <view class="contact_name" style="padding-top:10rpx;padding-bottom:0rpx;border-top: solid 1px #eee;position: absolute;bottom: 0;display: flex">
									<image mode="widthFix":src="$util.img('public/static/img/boda.png')"></image>
									<view style="margin-top: -6rpx;margin-left: 10rpx;font-size: 24rpx;color:rgba(71,71,71,.79)">点击拨打电话</view>
								</view>
		                    </view>
		                </view>
		            </view> -->
					<map v-if="shop.longitude > 0 && shop.latitude > 0 && ismessage == 0" id="map"
						style="width: 100%; height:400rpx" scale="12" :markers="markers" bindupdated="bindupdated"
						:longitude="shop.longitude" :latitude="shop.latitude" show-location>
						<cover-view
							style="position:absolute;right:10px;bottom:30rpx;z-index:9;background:#4d83ff;padding:5px 10px;wxcs_style_padding:10rpx 20rpx;border-radius:8rpx;color: #fff;"
							@click="tomap"><cover-view style="font-size:24rpx">一键导航</cover-view>
						</cover-view>
					</map>
				</view>

			</view>

			<!--  <view wx:if="landline !=0">
		        <button bindtap="contact">
		            <view class="message">
		                <image mode="widthFix" src="{{contactbg}}"></image>
		            </view>
		        </button>
		    </view> -->
		</view>
		<!--留言弹窗-->
		<view class="goods-sku">
			<uni-popup ref="informationPopup" type="bottom" @change="change">
				<view class="liuyan-popup-layer popup-layer">
					<view class="head-wrap" @click="closeinformationPopup()">
						<text>在线留言</text>
						<text class="iconfont icon-close"></text>
					</view>
					<scroll-view scroll-y class="liuyan-body">
						<view style="padding: 0 30rpx;">
							<view class="fui-cell-group">
								<view class="fui-cell  ">
									<view class="fui-cell-label ">姓名</view>
									<view class="fui-cell-info">
										<input v-model="Form.realname" class="fui-input" placeholder="请输入您的姓名"
											value=""></input>
									</view>
								</view>
								<view class="fui-cell ">
									<view class="fui-cell-label">联系方式</view>
									<view class="fui-cell-info">
										<input v-model="Form.mobile" class="fui-input" maxlength="11"
											placeholder="请输入您的手机号" type="number"></input>
									</view>
								</view>
								<view class="fui-cell ">
									<view class="fui-cell-label" style="position: absolute;top:10px">留言内容</view>
									<view class="fui-cell-info" style="margin-left: 160rpx;border: solid 2rpx #eee;">
										<!-- <input v-model="Form.mailbox"  class="fui-input" placeholder="请输入您的邮箱" type="text" ></input> -->
										<textarea class="textarea" v-model="Form.remark" placeholder="请输入留言内容"
											style="font-size: 28rpx;padding: 10rpx;"></textarea>
									</view>
								</view>
							</view>
						</view>
					</scroll-view>
					<view class="button-box"><button type="primary" @click="save()">提交</button></view>
				</view>
			</uni-popup>
		</view>
		<to-top v-if="showTop" @toTop="scrollToTopNative()"></to-top>
	</view>
	<hover-nav></hover-nav>
	<diy-bottom-nav></diy-bottom-nav>
</template>

<script>
import toTop from '@/components/toTop/toTop.vue';
import scroll from '@/common/js/scroll-view.js';

export default {
	components: {
		toTop
	},
	mixins: [scroll],
	data() {
		return {
			minScrollTop: 100, // 设置回到顶端按钮显示要求，最小页面滚动距离
			dataList: [],
			ismessage: 0,
			Form: {
				realname: '',
				mobile: '',
				remark: ''

			},
			markers: [
				{
					id: 1,
					/*	width:20, //宽度
						height:20, //高度*/
					//	iconPath: '../../static/goal_weizhi.png', //目标位置图标路径
					//这里的经纬度是 目的地 的经纬度
					latitude: 0,
					longitude: 0,
					callout: {
						/* 	title:123,
							content:'123' */
					}
				}
			],
			landline: 0,
			shop: {
				latitude: 0,
				longitude: 0,
			},
			personnel_bg: ''
		};
	},
	onLoad(option) {
		//刷新多语言
		this.$langConfig.refresh();
		this.$api.sendRequest({
			url: '/api/member/personnel',
			success: res => {
				if (res.code == 0) {
					this.dataList = res.data
					this.shop = res.shop
					this.personnel_bg = res.set.personnel_bg ? res.set.personnel_bg : 'public/static/img/diy_view/member_info_bg.png'
					this.markers = [{
						id: 1,
						//iconPath:'http://saas.cn//public/static/img/kefu.png',
						latitude: this.shop.latitude,
						longitude: this.shop.longitude
					}]
				}
			},
			fail: res => {
			}
		});
	},
	methods: {
		test() {
			//     channelReady(function(bAvailable) {
			//         alert('是否存在框架服务：' + bAvailable)
			//       })
			// window.location.href = 'https://hapjs.org/app//[path][?key=value] hap://app//[path][?key=value] '
			//参数说明： package: 应用包名，必选 path: 应用内页面的 path，可选，默认为首页 key-value: 希望传给页面的参数，可选，可以有多个

			// const isQuickAppEnv = navigator.userAgent.includes('HuaweiQuickApp');
			// let quickAppBridge;
			// console.log(window.quickapp)
			// if (isQuickAppEnv) {
			//   quickAppBridge = window.quickapp;
			// }
			// quickAppBridge.invoke('startQuickAppPage', { page: '/NativePage' });
			// window.postMessage({ action: 'someAction', data: 'some data' }, '*');
			// window.open('https://xcx10.5g-quickapp.com/test.php')
		},
		save() {
			this.$api.sendRequest({
				url: '/api/member/message',
				data: this.Form,
				success: res => {
					this.$refs.informationPopup.close();
					this.$util.showToast({
						title: res.message
					});
				},
				fail: res => {
				}
			});
		},
		change(e) {
			console.log(e)
			this.ismessage = e.show ? 1 : 0
		},
		//留言打开
		tapMessage() {
			this.ismessage = 1
			this.$refs.informationPopup.open();
		},
		//留言关闭
		closeinformationPopup() {
			this.ismessage = 0
			this.$refs.informationPopup.close();
		},
		Tel(m) {
			uni.makePhoneCall({
				phoneNumber: m + '',
				success(e) {
					console.log(e)
				}
			})
		},
		copy(text) {
			uni.setClipboardData({
				data: text,
				success: function () {
					console.log('复制成功');
					// 可以添加用户友好的提示，例如使用uni.showToast提示复制成功
					uni.showToast({
						title: '复制成功',
						icon: 'success',
						duration: 2000
					});
				},
				fail: function () {
					console.log('复制失败');
					// 可以添加错误处理或用户友好的提示
				}
			});
		},
		tomap() {
			uni.openLocation({
				latitude: parseFloat(this.shop.latitude),
				longitude: parseFloat(this.shop.longitude),
				name: "一键导航",
			})
		}
	}
};
</script>

<style lang="scss">
// 留言
.liuyan-popup-layer {
	height: 660rpx;

	.free-tip {
		min-width: 72rpx;
		height: 36rpx;
		line-height: 36rpx;
		text-align: center;
		border: none;
		padding: 8rpx 8rpx;
		border-radius: $border-radius;
		margin-right: 20rpx;
		font-size: $font-size-activity-tag;
		display: inline-block;
		font-weight: bold;
		color: var(--main-color);
		background-color: var(--main-color-shallow);
	}

	.liuyan-body {
		position: absolute;
		left: 0;
		right: 0;
		height: 60%;

		.item {
			padding: $padding 0;
			margin: 0 30rpx;
			border-bottom: 1px solid $color-line;

			.value {
				margin-left: 20rpx;
			}

			&:last-child {
				border-bottom: 0;
			}
		}
	}
}

.popup-layer {
	background: #fff;

	.head-wrap {
		font-size: $font-size-toolbar;
		line-height: 100rpx;
		height: 100rpx;
		display: block;
		text-align: center;

		.iconfont {
			position: absolute;
			float: right;
			right: 44rpx;
			font-size: $font-size-toolbar;
		}
	}

	.button-box {
		width: 100%;
		position: absolute;
		bottom: 0;
		z-index: 1;
		margin-bottom: 30rpx;

		button {
			height: 80rpx;
			background-color: var(--goods-btn-color);
		}
	}
}

button,
image,
input,
label,
navigator,
scroll-view,
swiper,
textarea,
view {
	box-sizing: border-box;
}

.w100 {
	width: 100%;
	padding-bottom: 60rpx;
}

.bg {
	/* background: #5dc2d0;*/
}

.border-top {
	border-top: 1px solid rgba(78, 78, 78, .1);
}

.padding-top {
	padding-top: 30rpx;
}

.container {
	align-items: center;
	box-sizing: border-box;
	flex-direction: column;
	height: 100%;
	justify-content: space-between;
	padding: 0 30rpx;
	width: 100% !important;
}

.clearfix {
	zoom: 1;
	overflow: hidden;
}

.text-center {
	text-align: center;
}

.w50_li {
	float: left;
	margin-bottom: 20rpx;
	width: 50%;
}

.w50_li:nth-child(odd) {
	padding-right: 20rpx;
}

.bl {
	display: block;
}

.bor {
	border-radius: 10rpx;
}

image {
	display: inline-block;
	max-width: 100%;
	position: relative;
	z-index: 0;
}

image {
	max-width: 100%;
}

.bl {
	display: block;
}

.line1 {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/*--当前页面css--*/

.list_cotact .view_ul_one .bor {
	padding: 40rpx;
}

.list_cotact .bor image {
	height: 60rpx;
}

.list_cotact .bor .name,
.view_ul_100 .name {
	font-size: 32rpx;
	line-height: 44rpx;
	margin-top: 20rpx;
	color: #fff
}

.list_cotact .view_ul_one .view_li:nth-child(1)>button {
	background: #0054a5;
	height: 200rpx;
	line-height: 20rpx;
}

.list_cotact .view_ul_one .view_li:nth-child(2) {
	background: #1daa39;
	height: 200rpx;
	line-height: 20rpx;
	border-radius: 10rpx;
}

.view_ul_100 .fl {
	width: 10%;
}

.view_ul_100 .fr {
	/*  padding-left: 30rpx;*/
	width: 100%;
}

.view_ul_100>view {
	background: #fff;
	// box-shadow: 5rpx 5rpx 10rpx #dcdcdc;
}

.view_ul_100 .text {
	color: rgba(71, 71, 71, .79);
	font-size: 24rpx;
	margin-top: 10rpx;
}

.list_cotact .view_ul_100 .name {
	margin-top: 0;
}

.list_cotact .view_ul_100>view {
	padding: 20rpx 30rpx 0rpx 30rpx;
}

.list_cotact .view_ul_two .view_li>view {
	background-color: #fff;
	padding: 20rpx 30rpx 0rpx 30rpx;
}

.list_cotact .view_ul_two .view_li>view .address {
	background-color: #5dc2d0;
	color: #fff;
	display: inline-block;
	font-size: 28rpx;
	line-height: 48rpx;
	margin-bottom: 30rpx;
	padding: 0 30rpx;
	width: auto;
}

.view_ul_two {
	margin-top: 20rpx;
}

.contact_name {
	color: rgba(71, 71, 71, .79);
	font-size: 24rpx;
	line-height: 36rpx;
	padding-left: 0rpx;
}

.contact_name image {
	opacity: .79;
	width: 30rpx;
}

.message {
	/* background-color: rgba(0,0,0,.8); */
	border-radius: 50%;
	bottom: 50%;
	height: 90rpx;
	line-height: 74rpx;
	position: fixed;
	right: 30rpx;
	text-align: center;
	width: 90rpx;
	z-index: 9999;
}

</style>

<style lang="scss" scoped>
	/deep/ .mescroll-totop {
		right: 27rpx!important; 
		/* #ifdef H5 */
		bottom: 120rpx!important;
		/* #endif */		
		/* #ifdef MP-WEIXIN */
		bottom: 180rpx!important;
		/* #endif */
	}
</style>