<template>
    <div class="event-info">
        <div class="info-title">
            <div class="info-title-text">
                <div class="info-title-text-label">事件标题：</div>
                <div class="info-title-text-value">{{info.event_title}}</div>
            </div>
            <div class="info-title-control">                    
                <van-button v-if="info.event_status == '0'" type="primary" size="small" @click="handleStartEvent">开始指挥</van-button>
                <van-button v-if="info.event_status == '1'" type="danger" size="small" @click="handleCloseEvent">结束指挥</van-button>
            </div>
        </div>
        <div class="info-data">
            <div class="info-data-label">持续时长：</div>
            <div class="info-data-value">{{info.keep_time}}</div>
        </div>
        <div class="info-data">
            <div class="info-data-label">事件类型：</div>
            <div class="info-data-value">{{info.event_type}}</div>
        </div>
        <div class="info-data">
            <div class="info-data-label">事件等级：</div>
            <div class="info-data-value">{{info.event_level}}</div>
        </div>
        <div class="info-data">
            <div class="info-data-label">事发地点：</div>
            <div class="info-data-value">{{info.address}}</div>
        </div>
        <div class="info-data">
            <div class="info-data-label">事件状态：</div>
            <div class="info-data-value">{{info.event_status}}</div>
        </div>
        <div class="info-data">
            <div class="info-data-label">事发时间：</div>
            <div class="info-data-value">{{info.event_time}}</div>
        </div>
       <div class="info-data">
            <div class="info-data-label">事件来源：</div>
            <div class="info-data-value">{{info.event_source}}</div>
        </div>
    </div>
</template>

<script lang="ts" setup>
const info = {
    event_title: 'xxxx应急指挥事件',
    keep_time: '1天12小时14分20秒',
    event_status: '0',
    event_type: '0',
    event_level: '0',
    event_time: '1090-09-09 10:10',
    address: 'zzz',
    event_source: '110'
};

const handleStartEvent = () => {
    
}

const handleCloseEvent = () => {

}

</script>


<style lang="scss" scoped>
.event-info {
    position: relative;
    margin: 0px;
    padding: 16px;
    .info-title {
        line-height: 28px;
        display: flex;
        flex-direction: row;
        justify-content: space-between;

        .info-title-text {
            color: #888;
            display: flex;
            flex-direction: row;
            justify-content: start;
        }

        .info-title-control {
            display: inline-flex;
            justify-content: center;
            align-items: center;
        }
    }

    .info-data {
        line-height: 28px;
        display: flex;
        flex-direction: row;
        justify-content: start;

        .info-data-label {
            color: #888;
        }

        .info-data-value {
            color: #888;
        }
    }
}
</style>