<template>
    <div class="event_map"></div>
    <div class="event_title">{{eventInfo.event_title||"暂无事件标题"}}</div>
    <div class="event_prop">
        <div class="event_type"><dict-tag :options="mm_event_type" :value="eventInfo.event_type"></dict-tag></div>
        <div class="event_level"><dict-tag :options="mm_event_level" :value="eventInfo.event_level||'0'"></dict-tag></div>
        <div class="event_status"><dict-tag :options="mm_event_state" :value="eventInfo.event_status"></dict-tag></div>
    </div>

    <van-tabs v-model:active="active">
        <van-tab title="基础信息">
            <div class="event_tab">
                <div class="event-data-item">
                    <div class="event-data-item-title">事件编号：</div>
                    <div class="event-data-item-value">{{eventInfo.event_id}}</div>
                </div>
                <div class="event-data-item">
                    <div class="event-data-item-title">事件类型：</div>
                    <div class="event-data-item-value"><dict-tag :options="mm_event_type" :value="eventInfo.event_type"></dict-tag></div>
                </div>
                <div class="event-data-item">
                    <div class="event-data-item-title">事件等级：</div>
                    <div class="event-data-item-value"><dict-tag :options="mm_event_level" :value="eventInfo.event_level||'0'"></dict-tag></div>
                </div>
                <div class="event-data-item">
                    <div class="event-data-item-title">事件状态：</div>
                    <div class="event-data-item-value"><dict-tag :options="mm_event_state" :value="eventInfo.event_status"></dict-tag></div>
                </div>
                <div class="event-data-item">
                    <div class="event-data-item-title">事发地点：</div>
                    <div class="event-data-item-value">{{eventInfo.address}}</div>
                </div>
                <div class="event-data-item">
                    <div class="event-data-item-title">事发时间：</div>
                    <div class="event-data-item-value">{{eventInfo.event_time}}</div>
                </div>
                <div class="event-data-item">
                    <div class="event-data-item-title">上报时间：</div>
                    <div class="event-data-item-value">{{eventInfo.report_time}}</div>
                </div>
                <div class="event-data-item">
                    <div class="event-data-item-title">伤亡情况：</div>
                    <div class="event-data-item-value blue" @click="handleUploadCasualties">去上报</div>
                </div>
                <div class="event-data-item">
                    <div class="event-data-item-title">登记人：</div>
                    <div class="event-data-item-value">{{eventInfo.reported_by}}</div>
                </div>
                <div class="event-data-item">
                    <div class="event-data-item-title">登记时间：</div>
                    <div class="event-data-item-value">{{eventInfo.reported_time}}</div>
                </div>
                <div class="event-data-item">
                    <div class="event-data-item-title">联系方式：</div>
                    <div class="event-data-item-value">{{eventInfo.contact}}</div>
                </div>
                <div class="event-data-item">
                    <div class="event-data-item-title">事件来源：</div>
                    <div class="event-data-item-value">{{eventInfo.event_source}}</div>
                </div>
            </div>
        </van-tab>
    <van-tab title="事件概要"><div class="event_tab">{{ eventInfo.event_description }}</div></van-tab>
    <van-tab title="事件跟踪"><div class="event_tab">
        <van-steps direction="vertical" :active="0">
            <van-step v-for="(item,index) in eventTrackState.items" :key="item.id">
                <h3>{{ item.title }}</h3>
                <p>{{ item.description }}</p>
            </van-step>
        </van-steps>
    </div></van-tab>
        <van-tab title="匹配预案">
            <div class="event_tab">
                <van-empty description="未关联到对应预案" />
                <div style="margin-top: -5.0vmin; display: flex; flex-direction: row; justify-content: center;">
                    <van-button type="primary" size="small" @click="handleEnterEvent">手工关联</van-button>
                </div>
            </div>
        </van-tab>
    <van-tab title="总结报告">
        <div class="event_tab">
            <div v-if="eventInfo.plan_name||'' === ''">
                <van-empty image="search" description="暂未上传总结报告" />
                <div style="margin-top: -5.0vmin; display: flex; flex-direction: row; justify-content: center;">
                    <van-button type="primary" size="small" @click="handleUploadCasualties">去上传</van-button>
                </div>
            </div>
        </div>
    </van-tab>
    
    </van-tabs>

    <div style="padding: 3.0vmin; display: flex; flex-direction: row; justify-content: center;">
        <div style="display: flex; flex-direction: row; justify-content: space-between;">
            <van-button  v-if="eventInfo.event_status == '1'" type="primary" size="small" @click="handleEnterEvent">进入指挥</van-button>
            <van-button  v-if="eventInfo.event_status == '2'" type="danger"  size="small" @click="handleCloseEvent">关闭事件</van-button>
        </div>
    </div>

    <UploadEventCasualtiesDialog v-model="uploadCasualtiesState.show" :data="uploadCasualtiesState.form" @update:model-value="onUploadCasualtiesDialogClose"></UploadEventCasualtiesDialog>

</template>

<script lang="ts" setup>
import {getCurrentInstance, reactive, ref, toRefs, onMounted} from 'vue';
import { useRouter, useRoute } from 'vue-router'
import { getEventDetail, closeEvent  } from "@/api/event";
import UploadEventCasualtiesDialog from "./UploadEventCasualtiesDialog.vue";
import { showDialog, showConfirmDialog, showToast } from 'vant';

const router = useRouter()
const route = useRoute()
const proxy = getCurrentInstance()?.proxy;
const { mm_event_type, mm_event_level, mm_event_state } = toRefs<any>(proxy?.useDict('mm_event_type', 'mm_event_level', 'mm_event_state'));

const active = ref(0);
const eventId = ref('');
const data = reactive({
    eventInfo: {
        event_id: '',
        event_title: '',
        event_code: '',
        event_type: '',
        event_level: '',
        event_status: '',
        address: '',
        event_time: '',
        report_time: '',
        contact: '',
        event_source: '',
        event_description: '',
        reported_by: '',
        reported_time: '',

        plan_id: '',
        plan_name: '',
        summary_file: [],
        // 伤亡情况
        deaths: '',
        injuries: '',
        missing: '',
    },
    eventTrackState: {
        active: 0,
        items: [{
            id: 0,
            title: '事件登记',
            description: ''
        }]
    }
});
const { eventInfo, eventTrackState } = toRefs(data);
const handleEnterEvent = () => {
    router.push("/mobile_control2/index?event_id="+eventId.value);
};

// 关闭事件
const handleCloseEvent = () => {
    if(eventInfo.value.plan_id === '') {
        showDialog({message: '关闭事件前请先匹配预案'});
        return false;
    }
    if(eventInfo.value.summary_file.length === 0) {
        showDialog({message: '关闭事件前请先上传总结报告'});
        return false;
    }
    showConfirmDialog({
        title: '提示',
        message: '关闭事件所有事项相关数据将不能再修改，是否继续？'
    }).then(()=>{
        closeEvent({ eventId: eventId.value }).then((res) => {
            refreshData()
        })
    })
};

// 上报伤亡情况
const uploadCasualtiesState = reactive({
    show: false,
    form: {
        event_id: '',
        deaths: '',
        injuries: '',
        missing: ''
    }
})

const handleUploadCasualties = () => {
    console.log('handleUploadCasualties');
    uploadCasualtiesState.form.event_id = eventId.value;
    uploadCasualtiesState.form.deaths = eventInfo.value.deaths;
    uploadCasualtiesState.form.injuries = eventInfo.value.injuries;
    uploadCasualtiesState.form.missing = eventInfo.value.missing;
    uploadCasualtiesState.show = true;
};

const onUploadCasualtiesDialogClose = (t) => {
    console.log('onUploadCasualtiesDialogClose', t)
    uploadCasualtiesState.show = false;
    if(t) { 
        refreshData();
    }
}


onMounted(()=>{
    refreshData();
})

const refreshData = () => { 
    eventId.value = route.query.event_id as string;
    getEventDetail({event_id: eventId.value})
        .then((res) => {
            eventInfo.value = res.data
            eventTrackState.value = res.data.event_status_tracks;
        })
}
</script>

<style lang="scss" scoped>
.event_map {
    width: 100vw;
    height: 40vmin;
    background: #ccffcc;
}
.event_title {
    padding: 1.6vmin 3.2vmin;
    font-size: 6.2vmin;
    font-weight: 600;
}

.event_prop {
    padding: 0 3.2vmin;
    line-height: 4.8vmin;
    font-size:3.6vmin;
    display: flex;
    flex-direction: row;
    justify-content: start;
    color:#999;
    
    .event_type {
        padding: 0.5vmin 3.0vmin;
        background: #efefef;
        margin-right: 2.0vmin;
    }

    .event_level {
        padding: 0.5vmin 3.0vmin;
        background: #efefef;
        margin-right: 2.0vmin;
    }

    .event_status {
        padding: 0.5vmin 3.0vmin;
        background: #efefef;

    }
}

.event_tab {
    padding:3.2vmin;
    color: #000;

    .event-data-item {
        font-size:4.2vmin;
        line-height: 8.0vmin;
        display: flex;
        flex-direction: row;
        justify-content: space-between;

        .event-data-item-title {
            color: #888;
            min-width: 5em;
        }

        .event-data-item-value {
            color: #888;
        }

        .blue {
            color: #1989fa;
        }
    }

    h3 {
        font-size:4.2vmin;
        line-height: 8.0vmin;
    }

}


</style>