<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">{{eventDetails.event_title}}</div>
            </div>
            <div class="info-title-control">
                <van-button v-if="eventDetails.event_status == '0'" type="primary" class="btn1" @click="handleStartEvent">开始指挥</van-button>
                <van-button v-if="eventDetails.event_status == '1'" type="danger" class="btn2" @click="handleCloseEvent">结束指挥</van-button>
            </div>
        </div>
        <div class="info-data">
            <div class="info-data-label">持续时长：</div>
            <div class="info-data-value">{{eventDetails.keep_time}}</div>
        </div>
        <div class="info-data">
            <div class="info-data-label">事件类型：</div>
            <div class="info-data-value">
              <dict-tag :options="mm_event_type" :value="eventDetails.event_type"></dict-tag>
            </div>
        </div>
        <div class="info-data">
            <div class="info-data-label">事件等级：</div>
            <div class="info-data-value">
              <dict-tag :options="mm_event_level" :value="eventDetails.event_level"></dict-tag>
            </div>
        </div>
        <div class="info-data">
            <div class="info-data-label">事发地点：</div>
            <div class="info-data-value">{{eventDetails.address}}</div>
        </div>
        <div class="info-data">
            <div class="info-data-label">事件状态：</div>
            <div class="info-data-value">
              <dict-tag :options="mm_event_state" :value="eventDetails.event_status"></dict-tag>
            </div>
        </div>
        <div class="info-data">
            <div class="info-data-label">事发时间：</div>
            <div class="info-data-value">{{eventDetails.event_time}}</div>
        </div>
       <div class="info-data">
         <div class="info-data-label">事发来源：</div>
         <div class="info-data-value">{{eventDetails.event_source}}</div>
       </div>
    </div>
</template>

<script lang="ts" setup name="EventInfo">
import {closeEvent, getEventDetail} from "@/api/event";
import {reactive, ref, toRefs, watch} from "vue";
import {useDict} from "@/utils/dict";
import {useRouter} from "vue-router";
import {showConfirmDialog, showSuccessToast} from "vant";

const props = defineProps({
  eventId: String
});
const router = useRouter();
const { mm_event_type, mm_event_level, mm_event_state } = toRefs<any>(useDict('mm_event_type', 'mm_event_level', 'mm_event_state'));
let eventDetails = ref({
  event_id: '',
  event_title: '',
  event_status: '',
  keep_time: '',
  event_type: '',
  event_level: '',
  address: '',
  event_time: '',
  event_source: '',
  latitude: '',
  longitude: ''
});

const getDataList = () => {
  if (!!props.eventId) {
    getEventDetail({event_id: props.eventId}).then((res) => {
      eventDetails.value = res.data
    })
  }
};

watch(() => props.eventId, () => {
  getDataList();
}, {
  immediate: true
})

const handleStartEvent = () => {

}

const handleCloseEvent = () => {
  showConfirmDialog({
    title: '结束指挥',
    message:
        '是否确定结束指挥？',
  }).then(() => {
    const params = {
      eventId: eventDetails.value.event_id,
      address: eventDetails.value.address,
      latitude: eventDetails.value.latitude,
      longitude: eventDetails.value.longitude
    };
    // 如果 flag 为 true，则直接调用 closeEvent 接口关闭事件
    closeEvent(params).then(() => {
      showSuccessToast('结束指挥成功');
      router.push('/leader/index')
    })
  })
}
</script>


<style lang="scss" scoped>
.event-info {
    position: relative;
    margin: 0px;
    padding: 16px;
    overflow-y: auto;
    height: 260px;
    .info-title {
        line-height: 28px;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        font-size: 14px;
        color: #414F64;
        .info-title-text-label {
          font-weight: bold;
          flex-shrink: 0;
        }
        .info-title-text {

            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;
        font-size: 14px;
        color: #414F64;
        .info-data-label {
          flex-shrink: 0;
          font-weight: bold;
        }

    }
}
.btn1 {
  min-width: 73px;
  height: 24px;
  background: #2c81ff;
  border-radius: 2px;
  padding: 0 11px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.btn2 {
  min-width: 73px;
  height: 24px;
  background: #EC2734;
  border-radius: 2px;
  padding: 0 11px;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
