<template>
	<lj-win-common :title="title" @fix-body="fixbody">
		<div slot="body">
			<div class="about_wrap" :style="{'height':bodyheight}">
				<div class="about_logo">
					<img :src="pic" class="about-img-responsive"></img>
				</div>
				<!-- <div style="font-size:18px;font-weight:bold;text-align: center;color:#666;margin:20px">
					{{title}}
				</div> -->

				<div class="about_lianxi" v-if="ifshowExcutor">
					<div class="about_lianxi_title">销售咨询</div>
					<template v-for="item in dataList">
						<div v-if="item.classid === 1">
							<span v-html="item.label">{{item.label}}</span>
							<span v-html="item.value">{{item.value}}</span>
						</div>
					</template>
				</div>

				<div class="about_lianxi" style="margin-top:25px"  v-if="ifshowExcutor">
					<div class="about_lianxi_title">版权所有</div>
					<template v-for="item in dataList">
						<div v-if="item.classid === 2">
							<div class="about_lianxi_dept" v-html="item.label">{{item.label}}</div>
							<div v-html="item.value">{{item.value}}</div>
						</div>
					</template>
				</div>

				<div class="about_lianxi"  v-if="ifshowDefault">
					<div class="about_lianxi_title">销售咨询</div>
					<van-cell
						v-for="(item, index) in salelist"
						:key="index"
						class="about-cell"
					>
						<template #title>
							<div class="about_lianxi_dept">{{ item.area }}</div>
							<div>{{ item.company }}</div>
						</template>
						<template #icon>
							<div class="icon-box">
								<i class="iconfont icon-marker-pin-01"></i>
							</div>
						</template>
						<template #default>
							<div class="man-box flex">
								<div class="left flex-1">
									<div class="about_lianxi_dept">{{ item.name }}</div>
									<div>{{item.phone | phoneFilter}}</div>
								</div>
								<div class="right flex_shrink-0" @click="handleCall(item.phone)">
									<i class="iconfont icon-dianhua"></i>
								</div>
							</div>
						</template>
					</van-cell>
					<!-- <div class="about_lianxi_dept">珠三角地区</div>
					<div>佛山总部</div>
					<div>黎生 136 9522 9509</div>
					<div class="about_lianxi_dept">长三角地区</div>
					<div>安吉龙嘉软件有限公司</div>
					<div>项生 157 0572 2284</div>
					<div class="about_lianxi_dept">西南地区</div>
					<div>龙嘉软件成都分公司</div>
					<div>周生 158 2853 8680</div> -->
				</div>

				<div class="about_lianxi" style="margin-top:25px">
					<div class="about_lianxi_title">用户协议与隐私政策</div>
					<div><a style="font-weight:bold;color:#6487df;text-decoration:none;" href="javascript:void(0);" @click="openUserpolicy">《用户协议》</a></div>
					<div><a style="font-weight:bold;color:#6487df;text-decoration:none;" href="javascript:void(0);" @click="openPrivacy">《隐私政策》</a></div>
				</div>

				<div class="about_lianxi" style="margin-top:25px" v-if="ifshowDefault">
					<div class="about_lianxi_title">版权所有</div>
					<div>佛山市顺德区龙嘉软件有限公司</div>
					<div>www.longjoe.com</div>
					<div>copyright©2003</div>
				</div>
			</div>
		</div>
	</lj-win-common>
</template>

<script>
	import LjWinCommon from 'components/lj-win-common'
	// import picUrl from 'assets/image/app_about_pic_no_logo.png'

	export default {
		components: {
			LjWinCommon
		},
		data() {
			return {
				title: "关于龙嘉L1APP",
				pic: "../../../assets/image/app_about_pic_no_logo.png",
				userpolicy: "../../../assets/privacy/userpolicy.html",
				privacypolicy: "../../../assets/privacy/privacypolicy.html",
				dataList: [],
				ifshowDefault:false,
				ifshowExcutor:false,
				bodyheight:"",
				salelist: [
					{
						area: '珠三角地区',
						company: '佛山总部',
						name: '黎生',
						phone: '13695229509'
					},
					{
						area: '长三角地区',
						company: '安吉龙嘉软件有限公司',
						name: '项生',
						phone: '15705722284'
					},
					{
						area: '西南地区',
						company: '龙嘉软件成都分公司',
						name: '周生',
						phone: '15828538680'
					},
				]
			}
		},
		created() {
			this.getDataList();
		},
		methods: {
			fixbody(obj){
				var winHeight = api.winHeight; 
				var marginTop = obj.marginTop.replace("px","");
				this.bodyheight = (winHeight - Number(marginTop)) + "px";
			},
			getDataList() {
				this.ifshowExcutor = false;
				this.ifshowDefault = false;
				let self = this;
				$lj.postLJRequest('GetL1APPAbout', {
					token: $lj.getStorage("token")
				}, function (ret) {
					if (ret) {
						if (ret.dataList) {
							self.dataList = ret.dataList;
							if (self.dataList.length > 0) {
								self.ifshowExcutor = true;
							}else{
								self.ifshowDefault = true;
							}
						}
					}
				})
			},
			handleCall(phone) {
				api.call({
					type: 'tel_prompt',
					number: phone
				});
			},
			openUserpolicy() {
				var param = {
					name: "用户协议",
					title: "用户协议",
					url: this.userpolicy,
					bgColor: '#fff',
					slidBackType: 'edge',
					scrollToTop:true,
					navigationBar:{
						color:'#000',
						background:'#fff',
						backButtonTitle:''
					}
				};
				
				api.openTabLayout(param);
			},
			openPrivacy() {
				var param = {
					name: "隐私政策",
					title: "隐私政策",
					url: this.privacypolicy,
					bgColor: '#fff',
					slidBackType: 'edge',
					scrollToTop:true,
					navigationBar:{
						color:'#000',
						background:'#fff',
						backButtonTitle:''
					}
				};
				
				api.openTabLayout(param);
			}
		},
		filters: {
			phoneFilter(phone) {
				let value = phone;
				if (phone.indexOf('-') > -1) {
					return phone
				}
				let len = value.length;
				if (len > 3 && len <= 8) {
					value = value.replace(/^(\d{4})/g, '$1 ')
				} else if (len > 8) {
					value = value.replace(/^(\d{3})(\d{4})/g, '$1 $2 ')
					console.log(value);
				}
				return value
			}
		}
	}
</script>

<style lang="less">
	.about_wrap {
		padding: 0 0 45px 0;
		background-color:#ffffff;
	}

	.about_logo {
		text-align: center;
		/* margin: 10px */
	}

	.about-img-responsive {
		display: inline-block;
		height: auto;
		max-width: 100%;
	}

	.about_lianxi{
		font-size: 15px;
		color: #636363;
		padding:0 20px 10px 20px
	}

	.about_lianxi_title{
		color:  #f5772f;
		padding:0 0 10px 0;
		font-size: 18px;
		font-weight: bold;
	}

	.about_lianxi_dept{
		font-size: 15px;
		font-weight: bold;
		padding: 10px 0 0 0 ;
	}
	.about-cell {
		padding-left: 0;
		padding-right: 0;
		.icon-box {
			margin-right: 4px;
			display: flex;
			justify-content: center;
			align-items: center;
		}
	}
	.man-box {
		.left {
			justify-content: flex-end;
		}
		.right {
			margin-left: 4px;
			// border-left: 1px solid @light-separator-transparent-secondary;
			display: flex;
			justify-content: center;
			align-items: center;
			
			.iconfont {
				// font-size: 18px;
				color: @musePrimary;
			}
		}
	}
</style>