<template>
    <div>
        <el-timeline>
            <template v-for="(item, i) in list" :key="item.jobId">
                <el-timeline-item :timestamp="item.jobTime ? formatTime(item.jobTime) : '--'" placement="top"
                    :icon="getIcon(item.jobState)" size="large" :type="getColor(item.jobState)">
                    <el-card shadow="hover" v-if="i < list.length - 1">
                        <div class="flex">
                            <UserAvatar :src="item.avatar" />
                            <div class="padding-left">
                                <div>{{ item.jobName }}</div>
                                <div class="flex padding-tb-xs align-center">
                                    <!-- <span class="text-grey margin-right-xs">{{ item.nickName }}</span> -->
                                    <el-link class="margin-right-xs" v-if="item.nickName">
                                        <span>{{ item.nickName }}</span>
                                        <span v-if="item.jobUser == $store.state.user.user.userId"
                                            class="margin-left-xs">(我)</span>
                                    </el-link>
                                    <div v-else>
                                        <span class="margin-right-xs text-grey">(未知)</span>
                                    </div>
                                    <dict-tag :options="com_apply_state" :value="item.jobState" />
                                </div>
                                <div class="text-gray text-content">
                                    {{ item.jobOpinion }}
                                </div>
                            </div>
                        </div>
                    </el-card>
                    <div v-else>
                        <div>{{ item.jobName }}</div>
                    </div>
                </el-timeline-item>
            </template>
        </el-timeline>
    </div>
</template>

<script setup>
import {
    MoreFilled,
    Promotion,
    Check,
    Close,
    SwitchButton,
} from "@element-plus/icons-vue";
const { proxy } = getCurrentInstance();
const { com_apply_state } = proxy.useDict('com_apply_state');
const props = defineProps({
    list: {
        type: [Array],
        default: [],
    },
});


function getIcon(state) {
    switch (state) {
        case 0:
        case "0":
            return Check
        case 10:
        case "10":
            return MoreFilled
        case 20:
        case "20":
            return Check
        case 30:
        case "30":
            return Close
        case 40:
        case "40":
            return Promotion
        case 50:
        case "50":
            return SwitchButton
        default:
            return Promotion
    }
}

function getColor(state) {
    switch (state) {
        case 0:
        case "0":
            return "primary"
        case 10:
        case "10":
            return "warning"
        case 20:
        case "20":
            return "primary"
        case 30:
        case "30":
            return "danger"
        case 40:
        case "40":
            return "success"
        case 50:
        case "50":
            return "info"
        default:
            return "info"
    }
}
</script>