<template>
  <div class="container">
    <div v-if="!hideMap" id="aMap" class="event_map"></div>
    <div class="box">
      <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="item-left">
                <i class="icon6" />
                <div class="event-data-item-title">事件编号：</div>
              </div>
              <div class="event-data-item-value">{{eventInfo.event_id}}</div>
            </div>
            <div class="event-data-item">
              <div class="item-left">
                <i class="icon1" />
                <div class="event-data-item-title">事件类型：</div>
              </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="item-left">
                <i class="icon2" />
                <div class="event-data-item-title">事件等级：</div>
              </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="item-left">
                <i class="icon3" />
                <div class="event-data-item-title">事件状态：</div>
              </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="item-left">
                <i class="icon5" />
                <div class="event-data-item-title">事发地点：</div>
              </div>
              <div class="event-data-item-value">{{eventInfo.address}}</div>
            </div>
            <div class="event-data-item">
              <div class="item-left">
                <i class="icon4" />
                <div class="event-data-item-title">事发时间：</div>
              </div>
              <div class="event-data-item-value">{{eventInfo.event_time}}</div>
            </div>
            <div class="event-data-item">
              <div class="item-left">
                <i class="icon4" />
                <div class="event-data-item-title">上报时间：</div>
              </div>
              <div class="event-data-item-value">{{eventInfo.report_time}}</div>
            </div>
            <div class="event-data-item">
              <div class="item-left">
                <i class="icon7" />
                <div class="event-data-item-title">伤亡情况：</div>
              </div>
              <div class="event-data-item-value blue" @click="handleUploadCasualties">去上报</div>
            </div>
            <div class="event-data-item">
              <div class="item-left">
                <i class="icon8" />
                <div class="event-data-item-title">登记人：</div>
              </div>
              <div class="event-data-item-value">{{eventInfo.reported_by}}</div>
            </div>
            <div class="event-data-item">
              <div class="item-left">
                <i class="icon4" />
                <div class="event-data-item-title">登记时间：</div>
              </div>
              <div class="event-data-item-value">{{eventInfo.reported_time}}</div>
            </div>
            <div class="event-data-item">
              <div class="item-left">
                <i class="icon9" />
                <div class="event-data-item-title">联系方式：</div>
              </div>
              <div class="event-data-item-value">{{eventInfo.contact}}</div>
            </div>
            <div class="event-data-item">
              <div class="item-left">
                <i class="icon10" />
                <div class="event-data-item-title">事件来源：</div>
              </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_tab2">
            <div class="emptyIcon" />
            <div class="emptyText">未关联到对应预案</div>
            <van-button type="primary" size="small" @click="handleEnterEvent">手工关联</van-button>
          </div>
        </van-tab>
        <van-tab title="总结报告">
          <div class="event_tab2">
            <template v-if="eventInfo.plan_name||'' === ''">
              <div class="emptyIcon2" />
              <div class="emptyText">暂未上传总结报告</div>
              <van-button type="primary" size="small" @click="handleUploadCasualties">去上传</van-button>
            </template>
          </div>
        </van-tab>
      </van-tabs>
    </div>

    <div class="footer">
      <div style="display: flex; flex-direction: row; justify-content: space-between;">
        <van-button v-if="eventInfo.event_status == '0'" type="primary" @click="handleEnterEvent">开始指挥</van-button>
        <van-button v-if="eventInfo.event_status == '1'" type="primary" @click="handleEnterEvent">进入指挥</van-button>
        <van-button v-if="eventInfo.event_status == '2'" type="danger"  @click="handleCloseEvent">关闭事件</van-button>
      </div>
    </div>

    <UploadEventCasualtiesDialog v-model="uploadCasualtiesState.show" :data="uploadCasualtiesState.form" @update:model-value="onUploadCasualtiesDialogClose"></UploadEventCasualtiesDialog>
  </div>
</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';
import {useAMap} from "@/hooks/AMap/useAMap";

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: '',
        longitude: '',
        latitude: '',
        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({
    path: '/leader/mobile_control',
    query: {
      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();
})
let hideMap = ref(false);
let map;
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;
      if (!eventInfo.value.longitude || !eventInfo.value.latitude) {
        hideMap.vlaue = true
      } else {
        // 初始化地图
        const lnglat = [eventInfo.value.longitude, eventInfo.value.latitude];
        const { getMap } = useAMap({
          key: '30d3d8448efd68cb0b284549fd41adcf',
          version: '2.0',
          zoom: 16,
          center: lnglat,
          dragEnable: true,
          scrollWheel: true,
          // 加载完成事件
          onLoadCompleted: (AMap) => {
            map = getMap();
            let marker = new AMap.Marker({
              position: lnglat,
              icon: new AMap.Icon({
                size: new AMap.Size(22, 28),  //图标所处区域大小
                imageSize: new AMap.Size(22, 28), //图标大小
                image: "//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png",
              }),
              anchor: 'bottom-center',
              offset: new AMap.Pixel(0, 0)
            });
            marker.setMap(map);
          }
        });
      }
    })
}
</script>

<style lang="scss" scoped>
.event_map {
    width: 100%;
    height: 170px;
}
.box {
  margin: 0 16px 16px;
  background-color: #ffffff;
  border-radius: 4px;
  box-shadow: 0 0 4px 0 #4554661a;
}
.event_title {
  font-weight: 600;
  min-height: 46px;
  background-image: linear-gradient(180deg, #F3F7FD 0%, #FFFFFF 100%);
  padding: 12px;
}

.event_prop {
    padding: 0 12px;
    line-height: 4.8vmin;
    display: flex;
    flex-direction: row;
    justify-content: start;
    color:#999;
    font-size: 12px;
    .event_type {
      padding: 3px 10px;
      border: 0.8px solid #2C81FF;
      border-radius: 2px;
      color: #2C81FF;
      margin-right: 7px;
    }

    .event_level {
      padding: 3px 10px;
      border: 0.8px solid #2C81FF;
      border-radius: 2px;
      margin-right: 7px;
      color: #2C81FF;
    }

    .event_status {
      padding: 3px 10px;
      border: 0.8px solid #2C81FF;
      border-radius: 2px;
      color: #2C81FF;
    }
}

.event_tab {
    padding: 16px;
    color: #A6000000;

    .event-data-item {
        font-size: 14px;
        line-height: 8.0vmin;
        display: flex;
        flex-direction: row;
        align-items: flex-start;
        justify-content: space-between;
        .item-left {
          display: flex;
          align-items: center;
          justify-content: center;
          flex-shrink: 0;
          .icon1 {
            width: 17px;
            height: 16px;
            background: url('@/assets/images/event/icon1.png') no-repeat;
            background-size: 100% 100%;
            margin-right: 7px;
          }
          .icon2 {
            width: 17px;
            height: 16px;
            background: url('@/assets/images/event/icon2.png') no-repeat;
            background-size: 100% 100%;
            margin-right: 7px;
          }
          .icon3 {
            width: 17px;
            height: 16px;
            background: url('@/assets/images/event/icon3.png') no-repeat;
            background-size: 100% 100%;
            margin-right: 7px;
          }
          .icon4 {
            width: 17px;
            height: 16px;
            background: url('@/assets/images/event/icon4.png') no-repeat;
            background-size: 100% 100%;
            margin-right: 7px;
          }
          .icon5 {
            width: 16px;
            height: 16px;
            background: url('@/assets/images/event/icon5.png') no-repeat;
            background-size: 100% 100%;
            margin-right: 7px;
          }
          .icon6 {
            width: 16px;
            height: 16px;
            background: url("@/assets/images/event/icon6.png") no-repeat;
            background-size: 100% 100%;
            margin-right: 7px;
          }
          .icon7 {
            width: 16px;
            height: 16px;
            background: url("@/assets/images/event/icon7.png") no-repeat;
            background-size: 100% 100%;
            margin-right: 7px;
          }
          .icon8 {
            width: 16px;
            height: 16px;
            background: url("@/assets/images/event/icon8.png") no-repeat;
            background-size: 100% 100%;
            margin-right: 7px;
          }
          .icon9 {
            width: 16px;
            height: 16px;
            background: url("@/assets/images/event/icon9.png") no-repeat;
            background-size: 100% 100%;
            margin-right: 7px;
          }
          .icon10 {
            width: 16px;
            height: 16px;
            background: url("@/assets/images/event/icon10.png") no-repeat;
            background-size: 100% 100%;
            margin-right: 7px;
          }
        }
        .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;
    }
}
.event_tab2 {
  padding: 16px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: rgba(0, 0, 0, 0.65);
}
.footer {
  padding: 0 16px 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  .van-button {
    border-radius: 2px;
    width: 94px;
    height: 40px;
    font-size: 14px;
    &:first-child {
      margin-right: 24px;
    }
  }
}
.emptyIcon {
  width: 110px;
  height: 108px;
  background: url('@/assets/images/unrelatedPlan.png') no-repeat;
  background-size: 100% 100%;
}
.emptyIcon2 {
  width: 111px;
  height: 110px;
  background: url('@/assets/images/noReport.png') no-repeat;
  background-size: 100% 100%;
}
.emptyText {
  font-size: 14px;
  margin: 6px;
  color: rgba(0, 0, 0, 0.65);
}
</style>
