<template>
	<view>
		<view class='record-box fill-base radius-24'>
			<view class='record-item' :class="[{'b-1px-l': index != list.length -1}]" v-for="(item,index) in list"
				:key="index">
				<view class='c-caption rel'>
					<text class="item-tag abs" :class="[{'cur':info.pay_type > item.pay_type -1}]"
						:style="{border:`5rpx solid ${primaryColor}`,background: info.pay_type > item.pay_type -1 ? activeColor : ''}"></text>
					<view class="item-text f-paragraph c-title flex-y-baseline">
						{{item[type]}}
					</view>
				</view>
				<view class="f-caption c-caption">{{item.time_text}}</view>
				<image @tap.stop="toPreviewImage(index)" mode="aspectFill" class="item-img mt-sm radius-10"
					:src="item.cover">
				</image>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'timeline',
		props: {
			list: {
				type: Object,
				default () {
					return {}
				}
			},
			info: {
				type: Object,
				default () {
					return {}
				}
			},
			type: {
				type: String,
				default () {
					return ''
				}
			},
			activeColor: {
				type: String,
				default () {
					return '#39b54a'
				}
			},
			primaryColor: {
				type: String,
				default () {
					return '#39b54a'
				}
			}
		},
		created() {

		},
		data() {
			return {

			}
		},
		methods: {
			toPreviewImage(index) {
				let {
					cover: current
				} = this.list[index]
				let urls = this.list.map(item => {
					return item.cover
				})
				this.$util.previewImage({
					current,
					urls
				})
			},
			async toMap(key) {
				let {
					info
				} = this
				await this.$util.checkAuth({
					type: 'userLocation'
				})
				await uni.getLocation({
					type: 'gcj02',
				})
				await uni.openLocation({
					latitude: info[`${key}_lat`] * 1,
					longitude: info[`${key}_lng`] * 1,
					name: info[`${key}_address`],
					scale: 28
				})
			},
		},
	}
</script>

<style lang="scss">
	.record-item {
		padding: 0rpx 0rpx 30rpx 40rpx;
		margin-left: 13rpx;

		.item-tag {
			width: 19rpx;
			height: 19rpx;
			background: #EEF5F2;
			border: 5rpx solid #39b54a;
			transform: rotateZ(360deg);
			border-radius: 50%;
			top: 0rpx;
			left: -52rpx;
		}

		.item-text {
			line-height: 34rpx;
		}

		.item-img {
			width: 158rpx;
			height: 120rpx;
			background: #f4f6f8;
		}
	}

	.record-item.b-1px-l::before {
		border: 1rpx solid #DBDBDB;
		transform: rotateZ(360deg);
	}

	.record-item:nth-child(5) {
		padding-bottom: 0;
	}
</style>
