<template>
  <div v-show="showDelayBox" class="info_box" :style="{left: tPosition.x+'px', top: tPosition.y+'px' }">
    <el-scrollbal>
      <div v-for="item in delayInfoList"><span>人解</span><span>信号机名</span><span>时间</span></div>
    </el-scrollbal>
  </div>
</template>

<script>
export default {
    name: 'DelayInfo',
    props: {
        delayInfoList: {
            type: Object,
            required: true,
            default: function () {
                return [];
            }
        },
        position: {
            type: Object,
            required: true,
            default: function () {
                return {
                    x: 0,
                    y: 0
                };
            }
        }
    },
    data() {
        return {
            tPosition: {
                x: 0,
                y: 0
            },
            showDelayBox: true
        };
    },
    watch: {
        'position.x': function (val) {
            this.handlePosition();
        },
        'position.y': function (val) {
            this.handlePosition();
        }
    },
    methods: {
        handlePosition() {
            const offset = this.$store.state.config.canvasOffset;
            this.tPosition = {
                x: this.position.x + offset.x,
                y: this.position.y + offset.y
            };
            if (this.tPosition.x < 0 || this.tPosition < 0) {
                this.showDelayBox = false;
            } else {
                this.showDelayBox = true;
            }
        }
    }
};
</script>

<style scoped>
    .info_box{
        border-top:1px solid #fff;
        height: auto;
        max-height: 200px;
        background-color: #000;
    }
</style>
