<template>
	<view class="padding-bottom margin-bottom-xs steps-view">
		<view class="cu-steps">
			<view class="cu-item font24" :class="index > stepsIndex ? '' : 'text-blue'"
				v-for="(item, index) in stepsList" :key="index" style="position: relative;">
				<text class="cuIcon-title"></text>
				{{ item }}
				<image v-if="index === stepsIndex" :src="positionImg" class="i-position"
					:class="{ 'pos-left': stepsList.length === 3, 'pos-left-two': stepsList.length === 2 }"></image>
			</view>
		</view>
	</view>
</template>

<script>
	import i_position from '../static/img/hcdb/i-position.png'
	export default {
		name: 'q-steps',
		data() {
			return {
				positionImg: i_position
			};
		},
		
		props: {
			stepsIndex: {
				type: Number,
				default () {
					return 0;
				}
			},
			stepsList: {
				type: Array,
				default () {
					return [];
				}
			}
		}
	};
</script>

<style lang="less" scoped>
	.steps-view {
		padding-top: 70rpx;
		background-color: #eeeeee;

		.i-position {
			position: absolute;
			width: 44rpx;
			height: 44rpx;
			top: -40rpx;
			left: 74rpx;
		}

		.pos-left {
			left: 105rpx;
		}

		.pos-left-two {
			left: 166rpx;
		}

		/deep/.text-blue,
		/deep/.line-blue,
		/deep/.lines-blue {
			color: #166ce5;
		}
	}
</style>