<!--明细页面顶部状态描述块-->
<!--slots-->
<!--default：-->
<template>
    <lj-status-manager class="lj-detail-status-header" :value="value" :statusDic="statusDic">
        <mu-row class="lj-card-primary-title">
            <mu-col>
                <slot></slot>
            </mu-col>
            <mu-col span="5" style="text-align: right;">
                <i :class="iconClass" style="font-size:20px;font-weight: normal;margin-right: 2px;vertical-align: -2px;"></i>
                {{content}}
            </mu-col>
        </mu-row>
    </lj-status-manager>
</template>

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

    export default {
        name: "lj-detail-status-header",
        components: {LjStatusManager},
        props: {
            // 当前状态的值，对应statusDic的key
            value: {
                type: [Number, String],
                default: -1
            },
            // 根据value显示当前状态描述与颜色，用法参考默认值
            statusDic: {
                type: Object,
                default: function () {
                    return {
                        0: {dscrp: "待审核", color: "Alert"},
                        1: {dscrp: "已审核", color: "Pass"},
                        "待审核": {color: "Alert"},
                        "在进行": {color: "Normal"},
                        "已完成": {color: "Pass"},
                        "待财审": {color: "Normal"},
                    }
                }
            }
        },
        data() {
            return {
                currentStatusObject: {},
                iconDic: {
                    "alert": "icon-bill-status-alert",
                    "normal": "icon-bill-status-running",
                    "pass": "icon-bill-status-finish"
                }
            }
        },
        computed: {
            content() {
                let statusInfo = this.statusDic[this.value];
                if (statusInfo) {
                    if (typeof statusInfo.dscrp === "undefined") {
                        return this.value;
                    }
                    return statusInfo.dscrp;
                }
                return this.value;
            },
            iconClass() {
                let statusInfo = this.statusDic[this.value];
                if (statusInfo) {
                    let color = statusInfo.color.toLowerCase();
                    let iconName = this.iconDic[color];
                    if (iconName) {
                        return ["iconfont", iconName];
                    }
                }
                return ["iconfont", this.iconDic["alert"]];
            }
        }
    }
</script>

<style scoped>

</style>