<template>
    <view class="vertical-step-progress">
        <view v-for="(step, index) in steps" :key="index" class="step-item">
            <view class="step-connector" :style="{ backgroundColor:  index < activeStep ? activeColor : inactiveColor2 }"></view>
            <view class="step-icon" :style="{  backgroundColor: index < activeStep ? activeColor : inactiveColor }">
                <text v-if="index < activeStep">✓</text>
                <!-- <text v-else>{{ index + 1 }}</text> -->
            </view>
            <view class="step-content">
                <text class="step-title">
                    <text class="font-blue">{{ step.beginTime }}</text> — <text class="font-blue">{{ step.endTime }}</text>
                </text>
                <text class="step-desc">{{ step.desc }}</text>
            </view>
            <!-- <view class="btn-round-red" @click="handleDelete(index)">
                <uni-icons type="trash" size="20" color="#fff"></uni-icons>
            </view> -->
        </view>
    </view>
</template>

<script setup>
// import { ref } from 'vue';
import { showAlert } from '@/utils/message.js';

const props = defineProps({
    steps: {
        type: Array,
        default: () => []
    },
    activeStep: {
        type: Number,
        default: -1
    },
    activeColor: {
        type: String,
        default: '#4cd964'
    },
    inactiveColor: {
        type: String,
        default: '#ffffff'
    },
    inactiveColor2:{
        type: String,
        default: '#E6E6E6'
    }
})

const emit = defineEmits(['update:modelValue'])
// 删除日程提醒
const handleDelete = (index) => {
    showAlert("是否确认删除？","提示",true,()=>{
        props.steps.splice(index,1);
        emit('update:modelValue', props.steps)
    });
}
</script>

<style scoped>
.vertical-step-progress {
    margin: 30rpx 0rpx 0;
}

.step-item {
    display: flex;
    align-items: flex-start;
    position: relative;
}

.step-connector {
    position: absolute;
    left: 4px;
    top: 0px;
    width: 2px;
    height: 160rpx;
    transform:translate(0px, -8px) !important;
}

.step-item:last-child .step-connector {
    height: 100rpx;
}

.step-icon {
    width:1px;
    height: 1px;
    padding:3px;
    border:2px solid #E6E6E6;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 15px;
    color: white;
    font-size: 14px;
    z-index: 1;
}

.step-content {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.step-title {
    font-size: 28rpx;
    color: #BFBFBF;
    margin-bottom: 4px;
    margin-top:-5px;
}
.step-title .font-blue{
    color:#05A3F4;
    font-weight: bold;
    font-size:28rpx;
}

.step-desc{
    font-size: 32rpx;
    color: #333;
    height:120rpx;
    width: 500rpx;
}

.step-item:last-child .step-desc{
    height:70rpx;
}

.btn-round-red{
    background-color: #FF687A;
    color:#fff;
    border-radius: 50%;
    width:56rpx;
    height: 56rpx;
    line-height: 56rpx;
    text-align: center;
    margin-top:30rpx;
}
</style>