<template>
    <div class="build-node-item">
        <span class="lbl-title" v-show="showLabel" @click="doHeaderClick">
            <i class="el-icon-caret" :class="item.expend?'el-icon-caret-bottom':'el-icon-caret-right'"></i>            
            {{ item.nodeText }}</span>
        <div class="date-info">
        <el-col :span="6">
            <span class="sp-label">计划开始时间:</span>
            <span class="sp-date">{{formatDate(item.planStartDate)   }}</span>
        </el-col>
        <el-col :span="6">
            <span class="sp-label">计划完成时间:</span>
            <span class="sp-date">{{ formatDate(item.planEndDate) }}</span>
        </el-col>
        <el-col :span="6">
            <span class="sp-label">实际开始时间:</span>
            <span class="sp-date">{{formatDate(item.startDate) }}</span>
        </el-col>
        <el-col :span="6">
            <span class="sp-label">实际完成时间:</span>
            <span class="sp-date">{{ formatDate(item.endDate)}}</span>
        </el-col>
        </div>
    </div>
</template>

<script>
export default {
    name: 'JhbigscreenNodeItem',
    props: {
        showLabel: {
            type: Boolean,
            default: true
        },
        item: {
            type: Object,
            default: () => { }
        }
    },
    data() {
        return {
            
        };
    },

    mounted() {
        
    },

    methods: {
        formatDate(dt){
            if(dt){
                return this.$dt(dt).format("YYYY-MM-DD");
            }
            return "暂无";
        },
        doHeaderClick(){            
            this.$emit("header-click");
        }
    },
};
</script>

<style lang="less" scoped>
.build-node-item{
    .lbl-title {
        cursor: pointer;
        display: block;        
    }
    .sp-label{
        color: #d6f10a;
    }
}
</style>