<template>
  <div class="container">
    <van-search
        v-model="queryParams.search_keyword"
        class="common-search"
        :left-icon="searchImg"
        :right-icon="closeImg"
        @search="on_search_keyword"
        @cancel="on_search_cancel"
    />

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

    <van-list
        v-model:loading="loading"
        v-model:error="error"
        error-text="请求失败，点击重新加载"
        :finished="finished"
        finished-text="没有更多事件了"
        @load="getList">

      <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" @click="handleStartEvent(index)">
              开始指挥
            </van-button>
            <van-button v-if="item.event_status == '1'" type="danger" size="small" @click="handleCloseEvent(item)">
              结束指挥
            </van-button>
          </div>
        </div>
        <div class="item-content" @click="handleEventDetail(index)">
          <div class="item-data">
            <div class="item-left">
              <i class="icon1" />
              <div class="item-data-label">事件类型：</div>
            </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-left">
              <i class="icon2" />
              <div class="item-data-label">事件等级：</div>
            </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-left">
              <i class="icon3" />
              <div class="item-data-label">事件状态：</div>
            </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-left">
              <i class="icon4" />
              <div class="item-data-label">事发时间：</div>
            </div>
            <div class="item-data-value">{{ item.event_time }}</div>
          </div>
          <div class="item-data">
            <div class="item-left">
              <i class="icon5" />
              <div class="item-data-label">事发地点：</div>
            </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>
  </div>
</template>

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

import {closeEvent, getEventList} from "@/api/event";
import searchImg from "@/assets/images/search.png";
import closeImg from "@/assets/images/close.png";

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: '3'},
];

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 error = ref(false);
const finished = ref(false);
const queryParams = ref({
  page: 0,
  page_size: 15,
  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 = () => {
  queryParams.value.page = 0;
  getList();
}

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

const change_event_status = () => {
  queryParams.value.page = 0;
  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;
        }
      }).catch(() => {
    error.value = true;
    finished.value = false;
  }).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 = (item) => {
  showConfirmDialog({
    title: '结束指挥',
    message:
        '是否确定结束指挥？',
  }).then(() => {
    const params = {
      eventId: item.value.event_id,
      address: item.value.address,
      latitude: item.value.latitude,
      longitude: item.value.longitude
    };
    // 如果 flag 为 true，则直接调用 closeEvent 接口关闭事件
    closeEvent(params).then(() => {
      showSuccessToast('结束指挥成功');
      router.push('/leader/index')
    })
  })
}


</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: 16px 16px 0;
  background: #ffffff;
  border-radius: 4px;
  border: 0.5px solid #EAEDF7;
  box-shadow: 0 0 4px 0 #4554661a;
  &:first-child {
    margin-top: 0;
  }
  .item-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 46px;
    background-image: linear-gradient(180deg, #F3F7FD 0%, #FFFFFF 100%);
    padding: 0 12px;
    .item-title-text {
      font-size: 16px;
      color: #414F64;
      font-weight: 600;
    }

    .item-title-control {
      display: inline-flex;
      justify-content: center;
      align-items: center;
    }
    .van-button {
      width: 73px;
      height: 24px;
      padding: 0;
    }
  }
  .item-content {
    padding: 0 12px 12px;
  }
  .item-data {
    font-size: 14px;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: start;
    line-height: 26px;
    .item-left {
      display: flex;
      align-items: center;
      flex-shrink: 0;
    }
    .item-data-label {
      flex-shrink: 0;
      color: #414F64;
    }

    .item-data-value {
      color: #414F64;
    }
  }
}
.van-dropdown-menu {
  :deep(.van-dropdown-menu__bar) {
    background: transparent;
    box-shadow: none;
  }
}
.common-search {
  :deep(.van-field__left-icon) {

    .van-icon__image {
      width: 12px;
      height: 12px;
    }
  }
  :deep(.van-field__right-icon) {
    width: 30px;
    height: 30px;
    padding: 0;
    .van-icon__image {
      width: 30px;
      height: 30px;
    }
  }
}
.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;
}
</style>
