<template>
    <van-search v-model="queryParams.search_keyword" placeholder="请输入事件标题/事件地点" @search="on_search_keyword" @cancel="on_search_cancel" />

    <van-dropdown-menu>
        <van-dropdown-item title="类型" v-model="queryParams.event_type" :options="opt_event_type" @change="change_event_type" />
        <van-dropdown-item title="等级" v-model="queryParams.event_level" :options="opt_event_level" @change="change_event_level"  />
        <van-dropdown-item title="状态" v-model="queryParams.event_status" :options="opt_event_status" @change="change_event_status" />
    </van-dropdown-menu>

    <van-list
        v-model:loading="loading"
        :finished="finished"
        finished-text="没有更多事件了"
        @load="onLoad">

        <div class="event-list-item" v-for="(item,index) in event_list" :key="item.id">
            <div class="item-title">
                <div class="item-title-text">
                    {{item.event_title}}
                </div>
                <div class="item-title-control">
                    <van-button v-if="item.event_status == '0'" type="primary" size="small" @click="handleStartEvent(index)">开始指挥</van-button>
                    <van-button v-if="item.event_status == '1'" type="danger" size="small" @click="handleCloseEvent(index)">结束指挥</van-button>
                </div>
            </div>
            <div  @click="handleEventDetail(index)">
                <div class="item-data">
                    <div class="item-data-label">事件类型：</div>
                    <div class="item-data-value">
                    <dict-tag :options="mm_event_type" :value="item.event_type"></dict-tag>
                    </div>
                </div>
                <div class="item-data">
                    <div class="item-data-label">事件等级：</div>
                    <div class="item-data-value">
                    <dict-tag :options="mm_event_level" :value="item.event_level"></dict-tag>
                    </div>
                </div>
                <div class="item-data">
                    <div class="item-data-label">事件状态：</div>
                    <div class="item-data-value">
                    <dict-tag :options="mm_event_state" :value="item.event_status"></dict-tag>
                    </div>
                </div>
                <div class="item-data">
                    <div class="item-data-label">事发时间：</div>
                    <div class="item-data-value">{{item.event_time}}</div>
                </div>
                <div class="item-data">
                    <div class="item-data-label">事发地点：</div>
                    <div class="item-data-value">{{item.address}}</div>
                </div>
            </div>
        </div>
    </van-list>
    <StartEventDialog v-model="startEventState.show" :data="startEventState.form" @update:model-value="onStartEventDialogClose"></StartEventDialog>
    <CloseEventDialog v-model="closeEventState.show" :data="closeEventState.form" @update:model-value="onCloseEventDialogClose"></CloseEventDialog>
</template>

<script lang="ts" setup>
import {getCurrentInstance, reactive, ref, toRefs, onMounted} from 'vue';
import { useRouter } from 'vue-router'
import { showConfirmDialog } from 'vant';
import { showSuccessToast, showFailToast  } from 'vant';
import StartEventDialog from  './StartEventDialog.vue';
import CloseEventDialog from  './CloseEventDialog.vue';

import { getEventList } from "@/api/event";
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 router = useRouter()

const opt_event_type = [
    { text: '全部', value: '' },
    { text: '自然灾害', value: '0' },
    { text: '事故灾害', value: '1' },
    { text: '公共卫生事件', value: '2' },
    { text: '社会安全事件', value: '2' },
];

const opt_event_level = [
    { text: '全部', value: '' },
    { text: '一般', value: '1' },
    { text: '较大', value: '2' },
    { text: '重大', value: '3' },
    { text: '特别重大', value: '4' },
    { text: '其他', value: '0' },
];

const opt_event_status = [
    { text: '全部', value: '' },
    { text: '已登记', value: '0' },
    { text: '指挥中', value: '1' },
    { text: '指挥结束', value: '2' },
    { text: '已关闭', value: '2' },
];

const current_item = ref(null);
const event_list = ref([]);
const total = ref(0);
const loading = ref(false);
const finished = ref(false);
const queryParams = ref({
    page: 0,
    page_size: 5,
    event_type: '',
    event_level: '',
    event_status: '',
    search_keyword: ''
});

const on_search_keyword = (val) => {
    queryParams.value.search_keyword = val;
    queryParams.value.page = 0;
    getList();
}

const on_search_cancel = () => {
    queryParams.value.search_keyword = '';
    queryParams.value.page = 0;
    getList();
}

const change_event_type = (val) => {
    queryParams.value.event_type = val;
    queryParams.value.page = 0;
    getList();
}

const change_event_level = (val) => {
    queryParams.value.event_level = val;
    queryParams.value.page = 0;
    getList();
}

const change_event_status = (val) => {
    queryParams.value.event_status = val;
    queryParams.value.page = 0;
    getList();
}

const onLoad = () => {
    getList();
}

const getList = () => {
    queryParams.value.page ++;
    getEventList(queryParams.value)
        .then((res) => {
            var items = res.data || [];
            total.value = res.total;
            if(queryParams.value.page == 1) {
                event_list.value = [];
            }
            items.forEach(val => {
                event_list.value.push(val)                
            });
            if (queryParams.value.page_size * queryParams.value.page >= total.value) {
                finished.value = true;
            }
        })
        .finally(() => {
            loading.value = false;
        });
}

const startEventState=reactive({
    show: false,
    form: {
        event_id: '',
        event_title: '',
        event_level: '',
        event_level_text: ''
    }
});

const closeEventState=reactive({
    show: false,
    form: {
        event_id: '',
        event_title: '',
        event_level: '',
        event_level_text: '',
        deaths: '',
        injuries: '',
        missing: ''
    }
});

const onStartEventDialogClose = (t) => {
    startEventState.show = false;
    console.log(startEventState.form);
    if(t) {
        queryParams.value.page = 0;
        getList();
    }
};

const onCloseEventDialogClose = (t) => {
    closeEventState.show = false;
    console.log(closeEventState.form);
    if(t) {
        queryParams.value.page = 0;
        getList();
    }
};  

const onConfirm = () => {
    showConfirmDialog({
        title: '提示',
        message:
            '确认进入移动指挥（应急态）',
        })
        .then(() => {
            
            localStorage.setItem('mobile_control_status', "1");
            router.push("/leader/mobile_control")
        })
        .catch(() => {

        });
};

const handleEventDetail = (index) => {
    current_item.value = event_list.value[index];
    router.push("/event/detail?event_id="+current_item.value.event_id)
}

const handleStartEvent = (index) => {
    current_item.value = event_list.value[index];
    console.log('handleStartEvent', current_item.value.event_id);
    startEventState.form.event_id = current_item.value.event_id;
    startEventState.form.event_title = current_item.value.event_title;
    startEventState.form.event_level = current_item.value.event_level;
    startEventState.show = true;
    return false;
}

const handleCloseEvent = (index) => {
    current_item.value = event_list.value[index];
    console.log('handleStartEvent', current_item.value.event_id);
    closeEventState.form.event_id = current_item.value.event_id;
    closeEventState.form.event_title = current_item.value.event_title;
    closeEventState.form.event_level = current_item.value.event_level;
    closeEventState.show = true;
    return false;
}


</script>

<style lang="scss" scoped>
.van-doc-block__title {
    color: var(--van-doc-text-color-4);
    margin: 0;
    padding: 32px 16px 16px;
    font-size: 14px;
    font-weight: 400;
    line-height: 16px
}
.event-list-item {
    position: relative;
    margin: 2.0vmin;
    padding: 3.2vmin;
    background: #fafafa;
    .item-title {
        line-height: 9.3vmin;
        display: flex;
        flex-direction: row;
        justify-content: space-between;

        .item-title-text {
            font-size: 4.2vmin;
            font-weight: 600;
        }

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

    .item-data {
        font-size:4.6vmin;
        display: flex;
        flex-direction: row;
        justify-content: start;

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

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