<template>
    <div class="task-node" :style="properties.style">
        <div v-if="properties.type == 'trigger'" class="flex-center" style="height: 100%; font-size: 18px">
            {{ properties.name }}
        </div>
        <div v-else class="flex-center" style="height: 100%; font-size: 14px">{{ properties.name }} : {{ properties.value }}</div>
    </div>
</template>
<script>
export default {
    name: 'Zhsf',
    props: {
        properties: {
            type: Object,
            default: () => ({
                label: '',
                name: '',
                taskType: '',
                taskTypeVal: '',
                taskId: '',
                weight: 1,
                failGoOn: 0,
                style: {},
            }),
        },
    },
    mounted() {
        console.log('this.props', this.properties);
    },
};
</script>
<style scoped>
.task-node {
    width: 220px;
    height: 100px;
    font-size: 15px;
    color: #737063;
    padding: 15px;
    border-radius: 15px;
    border: 3px solid #8bc9ff;
    background-color: #fffdfc;
    box-sizing: border-box;
}
</style>