<template>
    <view class="steps flex-between">
        <view class="item" v-for="(item, index) in stepViewData" :key="index">
            <!--  0 灰色， 1 蓝色  2 红色 -->
            <image v-if="item.state == 0" src="@/static/image/postion/step/hookDisabled.png" />
            <image v-if="item.state == 1" src="@/static/image/postion/step/hook.png" />
            <image v-if="item.state == 2" src="@/static/image/postion/step/fork.png" />
            <view
                class="title"
                :class="{
                    grey: item.state == 0,
                    blue: item.state == 1,
                    red: item.state == 2
                }"
                >{{ item.title }}</view
            >
            <view class="date">{{ item.date }}</view>
        </view>
        <view class="line-wrap">
            <view></view>
            <view></view>
        </view>
    </view>
</template>

<script setup>
import { watch, ref } from "vue";
import dayjs from "dayjs";
const props = defineProps({
    data: {
        type: Object,
        default: () => ({})
    }
});
const stepViewData = ref([]);
/* 设置步骤条显示数据 */
const setStepViewData = data => {
    if (!data) return;
    let list = [];
    const format = date => dayjs(date).format("MM-DD hh:mm");
    list.push({
        state: 1,
        title: "已投递",
        date: format(data.createTime)
    });
    if (data.status == 1 || data.status == 2 || data.status == 3 || data.status == 4) {
        list.push({
            state: 1,
            title: "已查看",
            date: format(data.reviewTime)
        });
    } else {
        list.push({
            state: 0,
            title: "待查看",
            date: ""
        });
    }
    switch (data.status) {
        case 2:
            list.push({
                state: 1,
                title: "待面试",
                date: format(data.interviewTime)
            });
            break;
        case 3:
            list.push({
                state: 1,
                title: "已面试",
                date: format(data.interviewTime)
            });
            break;
        case 4:
            list.push({
                state: 2,
                title: "已拒绝",
                date: format(data.updateTime)
            });
            break;
        default:
            list.push({
                state: 0,
                title: "待反馈",
                date: ""
            });
            break;
    }
    stepViewData.value = list;
};
watch(
    () => props.data,
    value => {
        if (value) {
            setStepViewData(value);
        }
    },
    {
        immediate: true
    }
);
</script>

<style lang="scss" scoped>
.steps {
    position: relative;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    width: 750rpx;
    padding: 18rpx 60rpx;
    .item {
        position: relative;
        text-align: center;
        image {
            width: 76rpx;
            height: 76rpx;
        }
        .title {
            font-size: 28rpx;
            font-weight: 500;
            line-height: 36rpx;
        }
        .blue {
            color: #1f86ff;
        }
        .red {
            color: #f63717;
        }
        .grey {
            color: #a3a7b3;
        }
        .date {
            position: absolute;
            right: 50%;
            font-size: 24rpx;
            font-weight: 500;
            line-height: 36rpx;
            color: #a3a7b3;
            letter-spacing: 0rpx;
            white-space: nowrap;
            transform: translate(50%, 0);
        }
    }
    .line-wrap {
        position: absolute;
        top: 76rpx;
        left: 0;
        display: flex;
        justify-content: space-evenly;
        width: 100%;
        view {
            width: 80rpx;
            height: 2rpx;
            background-color: #1f86ff;
        }
    }
}
</style>
