<template>
	<view class="container">
		<view class="noData" v-if="!talk||talk.length==0">{{$lang.lang.notice.noData}}</view>
		<view class="set_box" v-for="(item,index) in talk" :key="index">
			<view  class="set_time" v-if="item.businessTime">
				<view :class="index==0?'time_active':''">{{getDate(item.businessTime)}}</view>
			</view>
			<!-- 步骤条 -->
			<view class="set-1">
				<view :class="index==talk.length-1?'set-2':'set-2 setline'">
					<view :class="index==0?'line line_active':'line'">
<!-- 						<view class="dian">
							
						</view> -->
					</view>
					<view class="tlak_o">
						<view class="docter like_">
							<view class="doc_say like_o">
								<view class="doc_head like_h">
									<text :class="index==0?'name_ name_active':'name_'">{{getTitle(item)}}</text>
									<text :class="item.mark==1?'red name_':'name_'" v-if="item.remarksZh">{{getRemarks(item)}}</text>
									<text class="name_">{{getTime(item.businessTime)}}</text>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name:'steper',
		props: {
			statusData:Array,
			talk: Array,
			status:Number
		},
		data() {
			return {
			}
		},
		methods: {
			getConfigLabel(value){
				let that = this
				var label = ''
				that.statusData.forEach(function(item,index){
					if(item.value == value){
						
						if(that.$lang.locale=='zh'){
							label = item.label
						}else{
							label = item.labelEn
						}
					}
				})
				return label
			},
			getTitle(item){
				if(this.$lang.locale=='zh'){
					return item.titleZh.split(" ")[0]
				}else{
					return item.titleEn.split(" ")[0]
				}
			},
			getRemarks(item){
				if(this.$lang.locale=='zh'){
					return item.remarksZh
				}else{
					return item.remarksEn
				}
			},
			getDate(time) {
				const date = new Date(time);
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();

				// let hour = date.getHours()
				// let min = date.getMinutes()
				// let sec = date.getSeconds()
				
				// hour = hour > 9 ? hour : '0' + hour;
				// min = min > 9 ? min : '0' + min;
				// sec = sec > 9 ? sec : '0' + sec;
				
				month = month > 9 ? month : '0' + month;
				day = day > 9 ? day : '0' + day;
				return `${year}-${month}-${day}`;
			},
			getTime(time) {
				if(!time) return '00:00:00 '
				const date = new Date(time);
				let hour = date.getHours()
				let min = date.getMinutes()
				let sec = date.getSeconds()

				hour = hour > 9 ? hour : '0' + hour;
				min = min > 9 ? min : '0' + min;
				sec = sec > 9 ? sec : '0' + sec;
				
				return `${hour}:${min}:${sec}`;
			},
		}
	}
</script>

<style lang="scss">
	.noData{
		text-align: center;
		color: #999999;
		padding: 20upx 0;
	}
	.container{
		padding-bottom: 20px;
	}
	.act{
		color: #659FD5;
	}
	.acts{
		background-color: #659FD5 !important;
	}
	.actLine{
		border: 1px solid #659FD5 !important;
	}
	.set_box {
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: row;
	}

	/* 左侧时间 */
	.set_time {
		width: 30%;
		position: relative;

		view {
			width: 120%;
			position: absolute;
			margin-top: 40upx;
			right: -100rpx;
			color: #c0c4cd;
			font-size: 22upx;
		}

	}

	.time_active{
		color: #000 !important;
	}
	/* 右侧内容 */


	.set-1 {
		width: 70%;
	}

	.set-2 {
		min-height: 60rpx;
		border-radius: 10upx;
		width: 84%;
		margin-left: 100upx;
		padding-top: 40upx;
		padding-right: 10rpx;
		position: relative;

		.tlak_o {
			width: 100%;
			min-height: 60rpx;

			.like_ {
				width: 100%;
				min-height: 60rpx;

				.like_o {
					width: 100%;
					height: 100%;

					.like_h {
						color: #c0c4cd;
						display: flex;
						flex-direction: column;
						line-height: 40upx;
						.name_ {
							font-size: 24rpx;
							margin-right: 8rpx;
						}
						.red{
							color: red !important;
						}
						.time_ {
							font-size: 24rpx;
						}
					}
				}
			}
		}
	}
	.name_active{
		color: #509eed !important;
	}
	.line_active{
		background-color: #509eed !important;
	}
	.setline::after {
		content: '';
		/* 必须存在如果没有图标就留空 */
		top: 48upx;
		/* 定位 距离*/
		border-left: #dfe4ed 2px solid;
		/* 横线颜色 */
		left: -46upx;
		/* 定位 距离*/
		height: 100%;
		/* 高度 */
		position: absolute;
		/* 定位 */
	}
	.line{
		display: flex;
		align-items: center;
		justify-content: center;
		// border: 1px solid #dfe4ed;
		z-index: 99;
		border-radius: 30upx;
		width: 28upx;
		height: 28upx;
		position: absolute;
		left: -58upx;
		top: 40upx;
		background-color: #dfe4ed;
	}
	.dian{
		width: 16upx;
		height: 16upx;
		background-color: #dfe4ed;
		border-radius: 20upx;
	}
	// .set-2::before {
	// 	content: "\e64d";
	// 	/* 必须存在如果没有图标就留空 */
	// 	color: #c6c6c6;
	// 	/* 设置颜色 */
	// 	position: absolute;
	// 	/* 定位 */
	// 	left: -58upx;
	// 	top: 40upx;
	// 	border: 1px solid #c6c6c6;
	// 	/* 移动到左边 */
	// 	font-weight: bold;
	// 	/* 图标样式在复制的图标文件中复制相对应的图标样式必须存在 */
	// 	font-family: "iconfont" !important;
	// 	/* 图标样式在复制的图标文件中复制相对应的图标样式必须存在 */
	// 	font-size: 24upx;
	// 	border-radius: 30upx;
	// 	/* 图标大小 */
	// 	font-style: normal;
	// 	z-index: 99;
	// 	/* 图标样式在复制的图标文件中复制相对应的图标样式必须存在 */
	// 	-webkit-font-smoothing: antialiased;
	// 	/* 图标样式在复制的图标文件中复制相对应的图标样式必须存在 */
	// 	-moz-osx-font-smoothing: grayscale;
	// 	/* 图标样式在复制的图标文件中复制相对应的图标样式必须存在 */
	// }

	@font-face {
		font-family: "iconfont";
		src: url('//at.alicdn.com/t/font_1337773_f06f5a7las.eot?t=1565581133395');
		/* IE9 */
		src: url('//at.alicdn.com/t/font_1337773_f06f5a7las.eot?t=1565581133395#iefix') format('embedded-opentype'),
			/* IE6-IE8 */
			url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAOIAAsAAAAAB8QAAAM7AAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCDMgqCRIIjATYCJAMUCwwABCAFhG0HZhvNBsiemjwJqJERRCC3tX4YOM4iqNbCnr29uw8wKGBUsUAKqDyCjY5HcEzCALron1wr8wDk8hKBFpIc5yaXfWZJoIBIQkF1KlvVqWuFfZ3c/CBw0p8fcMJJsQY6uIuEMk8188LgXgfHTJceiXlrm0tGajTgaMCz2T6yyf5BXh+Ef9BdxMSIS9cTaKmvYGbzFhRXA1sZ2C0QO7cRAdhadnmkNTSEqufYLM4qNdKx9AJn+M/Hb2OiQVIWwL6rNufIIP1bj29voaZspAiK/byITqLAaEAmdvX6d7KQ+dEstCw2tjQL0FJDkvZald8e//3y+WglCIaW0E/e5R8vERWvuTWY5RYy3/ywXBtKXBEF395EBN++FCQ8V5CWsmEt4CBgHMz1Ad8rde7s2LbD7oUhT3l+eWHbhxwOB+LFrfkVL7I3FIAWdpdWvfHiYt8FltYWdzy1Pz/WfPhQ/elT7efPvUJiVlRsIj8+18X3az7+5Wb48vVrbnvo7OndVe1cPc55k2ebWG7OmMgYX01bT3vJnNlJWtemes0mn3vI/PJl80NQQqVErfcH/Ys5Fy3evrVoyyZNDLSq/cp5EyYsKTbb69bD/+5fmPs/cFwxG9ABoCNdTY+AKrwdi2npHk0Xu4vMH/Q7Wl+4+Yftkv83kMHXTiVutOlsnh68ZYPZit+hmDmRSxVwlDnvxvI8WOq3gz4VCy3xE8Id/d7H2GV2M6Ghi4ak1gcKDYORGTsaSq2Mg0rDTGhplLyTW+mEsRC5BUYadyC0dwpJWw+h0N53ZMb+glJX/6DSPgpoaUN4nLOVobGtZdYuJHAkQ7EbqiVqwMjF7UVrJSKKTmCmitNrETOpUzAiNLxZykMGxPY4wNRBIjnHEDOqh7nOzZBOR6GRUQ2SeKiKc2NiWBju+6JQieqBvbkYRMAhMkjUDVKTUAaYzufsW99fCSEUOgI20rMQr4UwJurloQihwmcg8/SGWT3v8hKTDkQkjsMgjKH0oFzHi+hgnoKM/VtpIBIulGpF1ihRmDcLz9WHnm/Uv0BZNAD40zJSFJGjjEq77dsEg1ahKoF2qbupYvP0KNS2e69WbmucSNZAOpEa5XpUagAAAA==') format('woff2'),
			url('//at.alicdn.com/t/font_1337773_f06f5a7las.woff?t=1565581133395') format('woff'),
			url('//at.alicdn.com/t/font_1337773_f06f5a7las.ttf?t=1565581133395') format('truetype'),
			/* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
			url('//at.alicdn.com/t/font_1337773_f06f5a7las.svg?t=1565581133395#iconfont') format('svg');
		/* iOS 4.1- */
	}

	.iconfont {
		font-family: "iconfont" !important;
		font-size: 16px;
		font-style: normal;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
	}

	.icon-yuandian:before {
		content: "\e64d";
	}

	.icon-dingweiweizhi:before {
		content: "\e619";
	}
</style>
