<template>
    <div>
        <lj-status-manager class="lj-oa-detail-status-header" :statusDic="statusDic" :value="value">
            <slot></slot>
        </lj-status-manager>
        <div class="taskview_toparea_sec" :class="colortop_sec" :style="{'top':top + 83 + 'px'}"></div>
        <div class="taskview_toparea_thr" :class="colortop_thr" :style="{'top':top + 88 + 'px'}"></div>
        <!-- <div :class="secColorClass" style="height: 5px;"></div>
        <div :class="thrColorClass" style="height: 5px;"></div> -->
    </div>

</template>

<script>
    import LjStatusManager from "components/lj-status-manager";

    export default {
        name: "lj-oa-detail-status-header",
        components: {
            LjStatusManager
        },
        props: {
            // 当前状态的值，对应statusDic的key
            value: {
                type: [Number, String],
                default: -1
            },
            // 根据value显示当前状态描述与颜色，用法参考默认值
            statusDic: {
                type: Object
            }
        },
        data() {
            return {
                top: 0
            }
        },
        created () {
            // safeArea + 48(顶部bar) + 35(状态栏)
            this.top = api.safeArea.top;
        },
        computed: {
            colortop_sec: function () {
                return {
                    taskview_toparea_green_sec: this.value == "待验收",
                    taskview_toparea_blue_sec: this.value == "已验收" || this.value == "已完成"
                };
            },
            colortop_thr: function () {
                return {
                    taskview_toparea_green_thr: this.value == "待验收",
                    taskview_toparea_blue_thr: this.value == "已验收" || this.value == "已完成"
                };
            },
        }
    }
</script>

<style scoped>
    .taskview_toparea_sec {
        position: absolute;
        height: 5px;
        background-color: #fd8e78;
        width: 100%;
    }

    .taskview_toparea_green_sec {
        background-color: #bbe26e;
    }

    .taskview_toparea_blue_sec {
        background-color: #90cef1;
    }

    .taskview_toparea_thr {
        position: absolute;
        height: 5px;
        background-color: #ffdbd4;
        width: 100%;
    }

    .taskview_toparea_green_thr {
        background-color: #e3f8b8;
    }

    .taskview_toparea_blue_thr {
        background-color: #d1edfd;
    }
</style>