<template>
  <global-layout>
    <transition name="page-transition">
      <keep-alive v-if="keepAlive">
        <router-view />
      </keep-alive>
      <router-view v-else />
    </transition>
    <t-modal :visibled.sync="modal" :closable="false" :mask-closable="false" :width="800" title="报警">
      <div class="alarm-info-container">
        <div>
          <img src="/static/images/Alarm.png"/>
        </div>
        <div class="alarm-info">
          <div>
            <div>报警类型：</div><div>{{ alarmObj.alarmType }}</div>
          </div>
          <div>
            <div>报警人:</div><div>{{ alarmObj.userName }}</div>
          </div>
          <div>
            <div>报警位置：</div><div>{{ alarmObj.alarmLocation }}</div>
          </div>
        </div>
      </div>
      <div class="rescue">
        <div>救援人员：</div>
        <div>
          <t-select v-model="rescue" placeholder="请选择救援人员" width="150">
            <t-option v-for="(item,index) in personList" :key="index" :value="item.workEmployeeId">{{ item.workEmployeeName }}</t-option>
          </t-select>
        </div>
      </div>
      <div slot="footer">
        <t-button @click="closeModal">直接关闭报警</t-button>
        <t-button color="success" @click="close">确认并稍后指派</t-button>
        <t-button color="success" @click="closeModalAndAppoint">确认并立即指派</t-button>
      </div>
    </t-modal>
  </global-layout>
</template>

<script>
import GlobalLayout from '../page/GlobalLayout.vue'
import EventBus from '../../bus'
import StompClient from '../../stomp/ipu-stomp'
import {socketUrl} from '../../constants'
import services from '../../conf/services'
export default {
  name: 'BasicLayout',
  components: {
    GlobalLayout
  },
  data () {
    return {
      modal: false,
      stompClient: null,
      personList: [],
      rescue: '',
      alarmObj: {
        alarmType: '',
        alarmLocation: '',
        workTaskId: '',
        userName: ''
      }
    }
  },
  computed: {
    keepAlive () {
      return this.$route.meta.keepAlive
    }
  },
  mounted() {
    // 镜屏调用
    this.load()
    this.connect()
    this.getGisToken()
  },
  methods: {
    async getGisToken() { // 获取GIS token并存入store
      await this.$test
          .post(services.mapTag.GET_MAP_PARAM, '')
          .then((res) => {
            this.$store.commit('setGisToken', res.data.ak)
            this.$store.commit('setMapParam', {center: [res.data.latitude, res.data.longitude], zoom: res.data.scale})
          })
          .catch((res) => {
            // 请求失败处理...
          })
    },
    load() {
      this.$test
        .post(services.organization.BIND_DEVICE, {})
        .then((res) => {
          console.log(res)
          this.personList = res.data
        })
        .catch((res) => {
          // 请求失败处理...
        })
    },
    closeModalAndAppoint() {
      if (!this.rescue) {
        this.$Message.warning('请选择救援人！')
        return
      }
      this.$test
        .post(services.alarm.ASSIGN_RESCUER, {workTaskId: this.alarmObj.workTaskId, rescuersId: this.rescue})
        .then((res) => {
          this.modal = false
          EventBus.$emit('reload', true)
        })
        .catch((res) => {
          // 请求失败处理...
        })
    },
    closeModal() {
      this.$Confirm.confirm({
        title: '请确认',
        content: '是否关闭？关闭后不可恢复',
        ok: () => {
          this.$test
            .post(services.alarm.CLOSE_RESCUE, {workTaskId: this.alarmObj.workTaskId, isAssignAlarm: 0})
            .then((res) => {
              this.modal = false
            })
            .catch((res) => {
              // 请求失败处理...
            })
        }
      })
    },
    close() {
      this.$Confirm.confirm({
        title: '请确认',
        content: '是否关闭稍后指派？',
        ok: () => {
          this.modal = false
          EventBus.$emit('reload', true)
        }
      })
    },
    alarmOpen(msg) {
      console.log(msg)
      var obj = JSON.parse(msg.body)
      this.alarmObj.alarmType = obj.data.businessTypeZH
      this.alarmObj.alarmLocation = obj.data.longitude + ' , ' + obj.data.latitude
      this.alarmObj.userName = obj.data.employeeName
      this.alarmObj.workTaskId = obj.data.workTaskId
      this.modal = true
    },
    connect() {
      if (this.stompClient == null || !this.stompClient.connected()) {
        this.stompClient = new StompClient(socketUrl)
        this.stompClient.connect('zhangsan', '123456', () => { this.connectCallback() }, () => { this.errorCallback() })
      } else {
        console.log('当前处于连接状态')
      }
    },
    connectCallback() {
      console.log('connectCallback')
      this.stompClient.subscribe('personnel', (msg) => {
        console.log(msg)
        EventBus.$emit('person', msg.body)
      })
      this.stompClient.subscribe('alarm', (msg) => {
        console.log('alarm' + msg)
        this.alarmOpen(msg)
        EventBus.$emit('person', msg.body)
      })
      this.stompClient.subscribe('ship', (msg) => {
        console.log(msg)
        EventBus.$emit('ship', msg.body)
      })
      EventBus.$emit('connected', true)
    },
    errorCallback() {
      console.log('errorCallback')
      EventBus.$emit('connected', false)
      this.connect()
    }
  }
}
</script>