<template>
	<div class="footer-container">
		<div class="foot-content">
			<div class="footer">
				<div>
					<p class="links-title" v-if="linkShow">
						<span>LINK</span>
						<span>友情链接</span>
					</p>

					<div class="my-outbox">
						<div class="my-inbox" ref="box">
							<div class="my-list" v-for="(item,index) in list" :key="index">
								<a class="my-uname" target="_blank" :href='item.linkUrl' @mouseenter="enter(index)" @mouseleave="leave()">{{item.name}}</a>
							</div>
							<div class="my-list" v-for="(item,index) in list" :key="(index+1)*100">
								<a class="my-uname" target="_blank" :href='item.linkUrl' @mouseenter="enter(index)" @mouseleave="leave()">{{item.name}}</a>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="bottom-main">
			<div class="hot-tel">
				<p>24小时客服竭诚为您服务</p>
				<p>
					<span class="iconfont icon24xiaoshi"></span>4000-369-369
				</p>
			</div>
			<div class="adress">
				<p>
					<span class="iconfont iconditu"></span>广东省东莞市松山湖工业西路12号 欣新房车控股集团(东莞)股份有限公司
				</p>
				<p>
					©欣新房车控股集团（东莞）股份有限公司2019保留一切权利
					备案号：
					粤ICP备19139280号
				</p>
			</div>
		</div>
	</div>
</template>
<script>
import axios from '../plugins/axios'

export default {
	data() {
		return {
			list: [],
			start: true,
			linkShow:true
		}
	},
	created() {
		axios.get('/api/uccn/app/unauth/friend_link/list').then(data => {
			this.list = data.data.data
			if (this.list.length < 5) this.start = false
			if(this.list.length == 0) this.linkShow = false
 		})
	},
	mounted: function() {
		var that = this
		var target = this.$refs.box
		var initLeft = 0
		let demo = setInterval(function() {
			if (that.start) {
				initLeft++
				if (initLeft >= target.offsetWidth / 2) {
					initLeft = 0
				}
				target.style = 'transform: translateX(-' + initLeft + 'px)'
			}
		}, 16)
	},
	methods: {
		enter() {
			this.start = false
		},
		leave() {
			this.start = true
		}
	}
}
</script>
<style>
.my-outbox {
	width: 915px;
	display: inline-block;
	color: #fff;
	overflow: hidden;
	height: 35px;
	position: relative;
	left: 40px;
}
.my-inbox {
	white-space: nowrap;
	position: absolute;
	font-size: 0;
	top: 4px;
}
.my-list {
	margin-right: 95px;
	display: inline-block;
	font-size: 16px;
	height: 35px;
	line-height: 35px;
}
.my-uname {
	color: #666;
	transition: all 0.2s linear;
}
.my-uname:hover {
	color: #1bbb9f;
}
.footer {
	display: block;
	overflow: hidden;
}
.foot-content {
	width: 100%;
	border-bottom: 1px solid #eee;
}
.links-title {
	display: inline-block;
	width: 169px;
	color: #666;
}
.links-title span:nth-child(1) {
	font-weight: bold;
	color: #1bbb9f;
	font-size: 40px;
	font-style: italic;
}
.links-title span:nth-child(2) {
	position: relative;
	top: -8px;
	left: 4px;
}
.bottom-main {
	width: 1120px;
	margin: 0 auto;
	margin-top: 30px;
}
.hot-tel {
	display: inline-block;
}
.hot-tel p:nth-child(1) {
	color: #666;
}
.hot-tel p:nth-child(2) {
	display: inline-block;
	font-size: 29px;
	background: #1bbb9f;
	padding: 16px 15px;
	border-radius: 10px;
	margin-top: 15px;
}
.hot-tel p:nth-child(2) span {
	font-size: 29px;
	margin-right: 10px;
}
.bottom-main .adress {
	display: inline-block;
	float: right;
	text-align: center;
	margin-top: 44px;
}
.bottom-main .adress p:nth-child(1) {
	font-size: 16px;
	color: #666;
}
.bottom-main .adress p:nth-child(2) {
	font-size: 12px;
	color: #666;
	margin-top: 20px;
}
</style>