<template>
  <div class="navbar">
    <hamburger id="hamburger-container" :is-active="sidebar.opened" class="hamburger-container" @toggleClick="toggleSideBar" />

    <top-nav v-if="topNav" id="topmenu-container" class="breadcrumb-container" />
    <div class="app_name">
      <el-form ref="queryForm" :model="queryParams" :inline="true" style="display:inline-block">
        <el-form-item label="" prop="name">
          <el-select
            v-model="queryParams.name"
            placeholder="请选择"
            filterable
            value-key="id"
            @change="handChange"
          >
            <el-option
              v-for="app in appList"
              :key="app.id"
              :label="app.name"
              :value="app"
            />
          </el-select>
        </el-form-item>
      </el-form>
      <el-button style="margin-left:10px" size="mini" type="danger" @click="getFireEvent">{{ event_number==undefined?0:event_number }}个事件</el-button>
    </div>
    <div class="right-menu">

      <template>
        <time-range />
      </template>
      <template v-if="device!=='mobile'">

        <screenfull id="screenfull" class="right-menu-item hover-effect" />

      </template>

      <el-dropdown class="avatar-container right-menu-item hover-effect" trigger="hover">
        <div class="avatar-wrapper">
          <!-- <img :src="avatar+'?imageView2/1/w/80/h/80'" class="user-avatar"> -->

          <!-- <img :src="avatarUrl+'?imageView2/1/w/80/h/80'" class="user-avatar"> -->
          <span class="user-name">{{ name }}</span>
          <i class="el-icon-caret-bottom" />
        </div>
        <el-dropdown-menu slot="dropdown">
          <router-link to="/profile/index">
            <el-dropdown-item>个人中心</el-dropdown-item>
          </router-link>
          <el-dropdown-item>
            <span style="display:block;" @click="logout">退出登录</span>
          </el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>

    <el-drawer
      :visible.sync="drawerfire"
      direction="rtl"
      size="55%"
      append-to-body
      @close="drawerFireClose"
    >
      <div style="margin-bottom:16px">
        <el-table
          v-loading="fireLoading"
          :data="fireEventList"
        >
          <el-table-column label="事件" header-align="center" align="left" prop="exceptionName" :show-overflow-tooltip="true" />

          <el-table-column label="异常状态" header-align="center" align="center" prop="alertStatus" width="200">
            <template slot-scope="scope">
              <span v-if="scope.row.alertStatus === 4 || scope.row.alertStatus === 8">
                <el-tag
                  type="danger"
                  disable-transitions
                  style="margin-right: 5px;"
                >已告警</el-tag>
                <el-tag
                  :type="scope.row.alertStatus==4?'info': ''"
                  disable-transitions
                >{{ scope.row.alertStatus==4?"通知未发送":"通知已发送" }}</el-tag>
              </span>
              <el-tag
                v-else
                type="warning"
                disable-transitions
              >{{ "触发异常" }}</el-tag>

            </template>
          </el-table-column>
          <el-table-column label="发生时间" header-align="center" align="center" prop="appendTime" width="160">
            <template slot-scope="scope">
              <span>{{ parseTime(scope.row.appendTime) }}</span>
            </template>
          </el-table-column>
          <!-- <el-table-column label="事件信息" header-align="center" align="left">
            <template slot-scope="scope">
              <span style="cursor: pointer;" @click="handleOpen(scope.row)">
                <span v-if="scope.row.rowResult =='UNSET'">
                  <el-tooltip placement="bottom">
                    <div
                      slot="content"
                      style="width:400px;max-height:200px; overflow-y: scroll;"
                    >
                      {{ scope.row.rowsResult }}
                    </div>
                    <span class="missionBodystyle" style="display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;">{{
                      scope.row.rowsResult
                    }}</span>
                  </el-tooltip>
                </span>
                <span v-else>{{ scope.row.rowResult }}</span>
              </span>

            </template>
          </el-table-column> -->
          <el-table-column
            label="操作"
            align="center"
            class-name="small-padding fixed-width"
            width="120"
          >
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="text"
                @click="handleIsIgnore(scope.row)"
              >忽略
              </el-button>
              <el-button
                size="mini"
                type="text"
                @click="handleIsResolve(scope.row)"
              >已解决
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <pagination
          v-show="totalFire>0"
          :total="totalFire"
          :page.sync="queryFire.pageIndex"
          :limit.sync="queryFire.pageSize"
          @pagination="getFireEvent"
        />
      </div>
    </el-drawer>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import TopNav from '@/components/TopNav'
import Hamburger from '@/components/Hamburger'
import Screenfull from '@/components/Screenfull'
import TimeRange from './TimeRange'
import storage from '@/utils/storage'
import { eventNums, fireEvent, notate } from '@/api/event'
import { listApps } from '@/api/apps'

export default {
  components: {
    TopNav,
    Hamburger,
    Screenfull,
    TimeRange
  },
  data() {
    return {
      avatarUrl: '',
      appItem: {},
      event_number: 0,
      fireLoading: false,
      drawerfire: false,
      fireEventList: [],
      totalFire: 0,
      queryFire: {
        pageIndex: 1,
        pageSize: 10,
        exceptionName: '',
        app_alias: '',
        isKnow: 0,
        isResolve: 0,
        isIgnore: 0,
        start_time: 0,
        end_time: 0
      },
      queryParams: {
        name: ''
      },
      appList: [],
      queryNums: {
        start_time: Math.round((new Date().getTime()) / 1000 - (5 * 60)),
        end_time: Math.round(new Date().getTime() / 1000),
        pageSize: 10,
        pageIndex: 1,
        app_aliases: ''
      },
      queryScore: {
        interval: 5,
        req_applist: []
      },
      times: {
        start_time: Math.round((new Date().getTime()) / 1000 - (1 * 60)),
        end_time: Math.round(new Date().getTime() / 1000),
        live: false
      },
      currentRoute: ''
    }
  },
  watch: {
    '$store.state.time.globalTimes': {
      handler(newValue, oldValue) {
        if (newValue) {
          this.queryNums.start_time = newValue.startTime
          this.queryNums.end_time = newValue.endTime
          this.times.start_time = newValue.startTime
          this.times.end_time = newValue.endTime
          this.queryFire.start_time = newValue.startTime
          this.queryFire.end_time = newValue.endTime
          this.getEventNums()
        }
      },
      deep: true
    },
    '$store.state.alias.currentAlias': { // 当前应用切换
      handler(newValue, oldValue) {
        this.appItem = storage.get('appsItem')
        this.queryFire.app_alias = newValue
        const arr = this.appList.filter(item => item.alias == newValue) || []
        this.queryParams.name = (arr[0] || {}).name
        this.queryNums.app_aliases = ''
        this.queryNums.app_aliases = newValue
        this.getEventNums()
      },
      deep: true
    }
  },
  computed: {
    ...mapGetters([
      'sidebar',
      'avatar',
      'device',
      'timesFlag',
      'name'
    ]),
    setting: {
      get() {
        return this.$store.state.settings.showSettings
      },
      set(val) {
        this.$store.dispatch('settings/changeSetting', {
          key: 'showSettings',
          value: val
        })
      }
    },
    topNav: {
      get() {
        return this.$store.state.settings.topNav
      }
    }
  },
  created() {
    this.currentRoute = this.$router.currentRoute.path
    const start_time = this.$store.state.time.globalTimes.startTime
    const end_time = this.$store.state.time.globalTimes.endTime
    this.queryNums.start_time = start_time
    this.queryNums.end_time = end_time
    this.queryFire.start_time = start_time
    this.queryFire.end_time = end_time
    this.times.start_time = start_time
    this.times.end_time = end_time
    this.appItem = storage.get('appsItem')
    if (JSON.stringify(this.appItem) != '{}') {
      this.queryFire.app_alias = this.appItem.alias
      this.queryParams.name = this.appItem.name
      this.queryNums.app_aliases = ''
      this.queryNums.app_aliases = this.appItem.alias
      this.getList()
    }
  },
  methods: {
    toggleSideBar() {
      this.$store.dispatch('app/toggleSideBar')
    },
    async logout() {
      this.$confirm('确定注销并退出系统吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$store.dispatch('user/LogOut').then(() => {
          location.reload()
        })
        // this.$router.push('/login');
        // location.reload()
      })
    },
    // 忽略
    handleIsIgnore(row) {
      const obj = {
        isKnow: 0,
        isResolve: row.isResolve,
        isIgnore: row.isIgnore == 0 ? row.isIgnore = 1 : row.isIgnore = 0
      }
      notate(obj, row.id).then((res) => {
        if (res.code == 200) {
          this.msgSuccess(res.msg)
          this.queryFire.pageIndex = 1
          this.getFireEvent()
        }
      })
    },
    // 已解决
    handleIsResolve(row) {
      const obj = {
        isKnow: 0,
        isResolve: row.isResolve == 0 ? row.isResolve = 1 : row.isResolve = 0,
        isIgnore: row.isIgnore
      }
      notate(obj, row.id).then((res) => {
        if (res.code == 200) {
          this.msgSuccess(res.msg)
          this.queryFire.pageIndex = 1
          this.getFireEvent()
        }
      })
    },
    cancelevent() {
      this.openfire = false
    },
    getFireEvent() {
      this.fireLoading = true
      this.drawerfire = true
      fireEvent(this.queryFire).then((res) => {
        if (res.code == 200) {
          this.fireLoading = false
          this.fireEventList = res.data.list
          this.totalFire = res.data.count
        }
      })
    },
    drawerFireClose() {
      this.drawerfire = false
    },
    handChange(val) {
      this.$store.commit('alias/setCurrentAlias', val.alias)
      if (val) {
        this.queryNums.app_aliases = ''
        this.queryNums.app_aliases = val.alias
        this.getEventNums()
        const start_time = this.times.start_time
        const end_time = this.times.end_time

        const obj = val
        obj.live = this.times.live
        obj.start_time = this.times.start_time
        obj.end_time = this.times.end_time
        storage.set('appsItem', obj)
        this.$router.push({
          path: '/business-analysis/system-space/index',
          query: {
            id: val.id,
            app_alias: val.alias,
            name: val.name,
            start_time,
            end_time,
            item: val,
            live: val.live
          }
        })
      }
    },
    getList() {
      listApps({ pageIndex: 0, pageSize: 200 }).then(res => {
        if (res && res.code == 200) {
          this.appList = res.data.list || []
          this.$store.commit('alias/setAllAliasArr', this.appList)
        } else {
          this.$store.commit('alias/setAllAliasArr', [])
          this.appList = []
        }
      })
    },
    getEventNums() {
      eventNums(this.queryNums).then((res) => {
        if (res.code == 200) {
          if (res.data.list.length != 0 && res.data.list != null) {
            this.event_number = res.data.list[0].exception_num
          } else {
            this.event_number = 0
          }
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .el-drawer__header{
  margin-bottom: 0;
}
.navbar {
  height: 50px;
  overflow: hidden;
  position: relative;
  background: #fff;
  box-shadow: 0 1px 4px rgba(0,21,41,.08);

  .hamburger-container {
    line-height: 46px;
    height: 100%;
    float: left;
    cursor: pointer;
    transition: background .3s;
    -webkit-tap-highlight-color:transparent;

    &:hover {
      background: rgba(0, 0, 0, .025)
    }
  }

  .breadcrumb-container {
    float: left;
  }

  .errLog-container {
    display: inline-block;
    vertical-align: top;
  }

  .right-menu {
    float: right;
    height: 100%;
    line-height: 50px;
    width: calc(100% - 400px);
    display: flex;
    &:focus {
      outline: none;
    }

    .right-menu-item {
      display: inline-block;
      padding: 0 8px;
      height: 100%;
      font-size: 18px;
      color: #5a5e66;
      vertical-align: text-bottom;

      &.hover-effect {
        cursor: pointer;
        transition: background .3s;

        &:hover {
          background: rgba(0, 0, 0, .025)
        }
      }
    }

    .avatar-container {
      margin-right: 30px;

      .avatar-wrapper {
        // margin-top: 5px;
        position: relative;

        .user-avatar {
          cursor: pointer;
          width: 40px;
          height: 40px;
          border-radius: 50%;
        }
        .user-name {
          display: inline-block;
          cursor: pointer;
          font-weight: bold;
          line-height: 50px;
        }

        .el-icon-caret-bottom {
          cursor: pointer;
          position: absolute;
          right: -20px;
          top: 20px;
          font-size: 12px;
        }
      }
    }
  }

}
.app_name{
  height: 50px;
  line-height: 50px;
  font-size: 16px;
  font-weight: 500;
  display: inline-block;
}
.app_name ::v-deep .el-button--mini{
    font-size: 14px;
    font-weight: bold;
}
.app_name ::v-deep .el-form--inline .el-form-item__content{
  vertical-align:middle;
}
</style>
