<template>
	<view class="stepPanel" :class="size" :style="{'height':height}">
		<!-- 步骤控件，实现效果1-2-3-4-N -->
		<view v-for="item,index in steps" class="item" :class="{'lastItem':index==steps.length-1}">

			<view class="step " @click="stepClick(item,index)" :class="{'active':index<=curr}">
				<view class="circle center ">{{index+1}}</view>
				<view class="txt">{{item.text}}</view>
			</view>
			<view class="line" v-if="index<steps.length-1" :class="{'active':index<=curr-1}">

			</view>
		</view>

	</view>
</template>

<script>
	export default {
		name: "SubStep",
		data() {
			return {}
		},
		computed: {

		},
		props: {
			steps: {
				type: Array,
				default: []
			},
			curr: {
				type: Number,
				default: 0
			},
			size: {
				type: String,
				default: 'nomal'
			},
			height: {
				type: String,
				default: "140rpx"
			}
		},
		methods: {
			stepClick(item, index) {
				this.$emit('stepClick', item, index);
			}
		}
	}
</script>

<style>
	.stepPanel {
		width: 100%;
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		align-content: center;
		align-items: center;
		justify-content: space-evenly;
	}

	.item {
		height: 100%;
	}

	.item {
		width: calc((100% - 100rpx) / 3);
	}

	.item:last-of-type,
	.item.lastItem{
		width: 100rpx !important;
	}

	.item .step {
		height: 100%;
		display: flex;
		flex-direction: column;
		flex-wrap: wrap;
		align-content: center;
		align-items: center;
		justify-content: space-around;
		float: left;
		width: 100rpx;
	}

	.item .line {

		height: 0rpx;
		border: 2rpx solid rgba(42, 42, 42, 1);
		margin-top: 39rpx;
		float: left;
		width: calc(100% - 120rpx);
		margin-left: 10rpx;
	}

	.item .circle {
		width: 35rpx;
		height: 35rpx;
		border-radius: 50%;
		background: rgba(58, 58, 58, 1);
		color: rgba(255, 255, 255, 0.87);
		font-family: "PingFang SC";
		font-style: Regular;
		font-size: 22rpx;
		font-weight: 400;
	}

	.nomal .item .circle {
		width: 45rpx;
		height: 45rpx;
	}

	.small .item .circle {
		width: 35rpx;
		height: 35rpx;
	}

	.large .item .circle {
		width: 50rpx;
		height: 50rpx;
	}

	.item .txt {
		color: rgba(255, 255, 255, 0.87);
		font-family: "PingFang SC";
		font-style: Regular;
		font-size: 24rpx;
		font-weight: 400;
		white-space: nowrap;
	}



	.nomal .item .txt {
		font-size: 24rpx;
	}

	.small .item .txt {
		font-size: 20rpx;
	}

	.large .item .txt {
		font-size: 28rpx;
	}

	.item .step.active .circle {
		background: #AED600 !important;
		color: rgba(255, 255, 255, 1) !important;
		box-shadow: 0px 0px 0px 12rpx #aed6004a;
	}

	.item .line.active {
		border: 1px solid #AED600 !important;
	}
</style>