<template>
  <div id="alarmDisplay" class="h-all">
    <el-row class="h-all">
      <el-col :span="24" class="h-all">
        <el-tabs v-model="activeName" type="border-card" class="alarm-tab adapt-height-box h-all" @tab-click="tabClickHandler">
          <!-- 告警未确认列表展示框 -->
          <el-tab-pane :label="$t('AlarmDisplay.unConfirmAlarmInfo')" name="first" class="h-all adapt-height adapt-height-box">
            <div v-if="activeName === 'first'" class="h-all adapt-height-box">
              <el-header height="auto">
                <alarm-filter
                  :deviceCollection = "deviceCollection"
                  :clickTab="tabName[0]"
                  v-on:queryCondition="addQueryCondition"
                ></alarm-filter>
                <div class="header-button-box">
                  <el-button size='mini' icon="el-icon-circle-check" type="primary" @click="alarmConfirm"
                             v-loading.fullscreen.lock="fullscreenLoading">{{ $t('TopologicalGraphShow.confirm') }}
                  </el-button>
                  <el-button size='mini' icon="el-icon-remove" type="warning" @click="alarmClear"
                             v-loading.fullscreen.lock="fullscreenLoading">{{ $t('common.clear') }}
                  </el-button>
                  <el-button size='mini' icon="el-icon-delete" type="danger" @click="alarmDelete"
                             v-loading.fullscreen.lock="fullscreenLoading">{{ $t('common.delete') }}
                  </el-button>
                </div>
              </el-header>
              <el-main class="adapt-height adapt-height-box">
                <pl-table
                  :row-style="tableRowClassName"
                  header-row-class-name="table-header"
                  cell-class-name="table-cell"
                  class="adapt-height"
                  :height="height"
                  border
                  ref="plTableUnConfirm"
                  tooltip-effect="dark"
                  :default-sort="{prop: 'alarmLevel', order: 'descending'}"
                  @selection-change="handleSelectionChange"
                  highlight-current-row
                  @current-change="handleCurrentChange"
                  use-virtual
                  :row-height='pl_table_row_height'
                  :big-data-checkbox="true"
                >
                  <el-table-column
                    type="selection"
                    width="32">
                  </el-table-column>
                  <el-table-column
                    :show-overflow-tooltip="true"
                    align="center"
                    prop="elementName"
                    :label="$t('AlarmDisplay.netWorkElementName')"
                    style="font-size: 10px;">
                  </el-table-column>
                  <el-table-column
                    :show-overflow-tooltip="true"
                    align="center"
                    prop="deviceTypeName"
                    :label="$t('AlarmDisplay.netWorkElementType')"
                    style="font-size: 10px;">
<!--                    <template slot-scope="scope">-->
<!--                      <p v-if="scope.row.isLink === 0">-->
<!--                        {{ $t('AlarmDisplay.deviceType') }}-->
<!--                      </p>-->
<!--                      <p v-else-if="scope.row.isLink === 1">-->
<!--                        {{ $t('AlarmDisplay.linkType') }}-->
<!--                      </p>-->
<!--                    </template>-->
                  </el-table-column>
                  <el-table-column
                    :show-overflow-tooltip="true"
                    align="center"
                    prop="resourceName"
                    :label="$t('AlarmDisplay.resourceName')">
                  </el-table-column>
                  <el-table-column
                    :show-overflow-tooltip="true"
                    align="center"
                    prop="alarmLevel"
                    sortable
                    :label="$t('AlarmDisplay.alarmLevel')">
                    <template slot-scope="scope">
                      <p v-if="scope.row.alarmLevel === 0">
                        {{ $t('AlarmDisplay.warn') }}
                      </p>
                      <p v-else-if="scope.row.alarmLevel === 1">
                        {{ $t('AlarmDisplay.severity') }}
                      </p>
                      <p v-else-if="scope.row.alarmLevel === 2">
                        {{ $t('AlarmDisplay.exigency') }}
                      </p>
                    </template>
                  </el-table-column>
                  <el-table-column
                    :show-overflow-tooltip="true"
                    align="center"
                    prop="alarmName"
                    :label="$t('AlarmDisplay.cause')">
                  </el-table-column>
                  <el-table-column
                    :show-overflow-tooltip="true"
                    align="center"
                    prop="firstTime"
                    sortable
                    :formatter="formatTime"
                    :label="$t('AlarmDisplay.firstTime')">
                  </el-table-column>
                  <el-table-column
                    align="center"
                    :label="$t('AlarmDisplay.measure')">
                    <template slot-scope="scope">
                      <el-button
                        size="mini"
                        style="background: #53D214"
                        :title="$t('AlarmQuery.view')"
                        @click="viewDetail(scope.row)">
                        <svg class="icon" aria-hidden="true">
                          <use xlink:href="#icon-chakan"></use>
                        </svg>
                      </el-button>
                      <el-button
                        size="mini"
                        style="background: #175BE3"
                        :title="$t('common.createBtn')"
                        @click="createAlarmMangExpInit(scope.row)">
                        <svg class="icon" aria-hidden="true">
                          <use xlink:href="#icon-zengjia-cuxiantiao"></use>
                        </svg>
                      </el-button>
                    </template>
                  </el-table-column>
                  <el-table-column
                    :show-overflow-tooltip="true"
                    align="center"
                    :label="$t('AlarmDisplay.alarmStatus')">
                    <template slot-scope="scope">
                      <p v-if="scope.row.alarmStatus === 0">
                        {{ $t('AlarmDisplay.unConfirm') }}
                      </p>
                      <p v-else-if="scope.row.alarmStatus === 1">
                        {{ $t('AlarmDisplay.confirmed') }}
                      </p>
                      <p v-else-if="scope.row.alarmStatus === 2">
                        {{ $t('AlarmDisplay.cleared') }}
                      </p>
                      <p v-else-if="scope.row.alarmStatus === 3">
                        {{ $t('AlarmDisplay.recovered') }}
                      </p>
                    </template>
                  </el-table-column>
                </pl-table>
              </el-main>
            </div>
          </el-tab-pane>
          <!-- 告警确认列表展示框 -->
          <el-tab-pane :label="$t('AlarmDisplay.confirmedAlarmInfo')" name="second" style="text-align: center" class="h-all adapt-height adapt-height-box">
            <div v-if="activeName === 'second'" class="h-all adapt-height-box">
              <el-header height="auto">
                <alarm-filter
                  :deviceCollection = "deviceCollection"
                  :clickTab="tabName[1]"
                  v-on:queryCondition="addQueryCondition"
                ></alarm-filter>
                <div class="header-button-box">
                  <el-button size='mini' icon="el-icon-remove" type="warning" @click="alarmClearForConfirmList"
                             v-loading.fullscreen.lock="fullscreenLoading">{{$t('common.clear')}}
                  </el-button>
                  <el-button size='mini' icon="el-icon-delete" type="danger" @click="alarmDeleteForConfirmList"
                             v-loading.fullscreen.lock="fullscreenLoading">{{ $t('common.delete') }}
                  </el-button>
                </div>
              </el-header>
              <el-main class="adapt-height adapt-height-box">
                <pl-table
                  :row-style="tableRowClassName"
                  header-row-class-name="table-header"
                  cell-class-name="table-cell"
                  class="adapt-height"
                  :height="height"
                  border
                  ref="plTableConfirm"
                  tooltip-effect="dark"
                  :default-sort="{prop: 'alarmLevel', order: 'descending'}"
                  @selection-change="handleSelectionChangeConfirm"
                  highlight-current-row
                  @current-change="handleCurrentChange"
                  use-virtual
                  :row-height='pl_table_row_height'
                  :big-data-checkbox="true"
                >
                  <el-table-column
                    type="selection"
                    width="32">
                  </el-table-column>
                  <el-table-column
                    :show-overflow-tooltip="true"
                    align="center"
                    prop="elementName"
                    :label="$t('AlarmDisplay.netWorkElementName')"
                    style="font-size: 10px;">
                  </el-table-column>
                  <el-table-column
                    :show-overflow-tooltip="true"
                    align="center"
                    prop="deviceTypeName"
                    :label="$t('AlarmDisplay.netWorkElementType')"
                    style="font-size: 10px;">
<!--                    <template slot-scope="scope">-->
<!--                      <p v-if="scope.row.isLink === 0">-->
<!--                        {{ $t('AlarmDisplay.deviceType') }}-->
<!--                      </p>-->
<!--                      <p v-else-if="scope.row.isLink === 1">-->
<!--                        {{ $t('AlarmDisplay.serverType') }}-->
<!--                      </p>-->
<!--                    </template>-->
                  </el-table-column>
                  <el-table-column
                    :show-overflow-tooltip="true"
                    align="center"
                    prop="resourceName"
                    :label="$t('AlarmDisplay.resourceName')">
                  </el-table-column>
                  <el-table-column
                    :show-overflow-tooltip="true"
                    align="center"
                    prop="alarmLevel"
                    sortable
                    :label="$t('AlarmDisplay.alarmLevel')">
                    <template slot-scope="scope">
                      <p v-if="scope.row.alarmLevel === 0">
                        {{ $t('AlarmDisplay.warn') }}
                      </p>
                      <p v-else-if="scope.row.alarmLevel === 1">
                        {{ $t('AlarmDisplay.severity') }}
                      </p>
                      <p v-else-if="scope.row.alarmLevel === 2">
                        {{ $t('AlarmDisplay.exigency') }}
                      </p>
                    </template>
                  </el-table-column>
                  <el-table-column
                    :show-overflow-tooltip="true"
                    align="center"
                    prop="alarmName"
                    :label="$t('AlarmDisplay.cause')">
                  </el-table-column>
                  <el-table-column
                    :show-overflow-tooltip="true"
                    align="center"
                    prop="firstTime"
                    sortable
                    :formatter="formatTime"
                    :label="$t('AlarmDisplay.firstTime')">
                  </el-table-column>
                  <el-table-column
                    align="center"
                    :label="$t('AlarmDisplay.measure')">
                    <template slot-scope="scope">
                      <el-button
                        size="mini"
                        style="background: #53D214"
                        :title="$t('AlarmQuery.view')"
                        @click="viewDetail(scope.row)">
                        <svg class="icon" aria-hidden="true">
                          <use xlink:href="#icon-chakan"></use>
                        </svg>
                      </el-button>
                      <el-button
                        size="mini"
                        style="background: #175BE3"
                        :title="$t('common.createBtn')"
                        @click="createAlarmMangExpInit(scope.row)">
                        <svg class="icon" aria-hidden="true">
                          <use xlink:href="#icon-zengjia-cuxiantiao"></use>
                        </svg>
                      </el-button>
                    </template>
                  </el-table-column>
                  <el-table-column
                    :show-overflow-tooltip="true"
                    align="center"
                    :label="$t('AlarmDisplay.alarmStatus')">
                    <template slot-scope="scope">
                      <p v-if="scope.row.alarmStatus === 0">
                        {{ $t('AlarmDisplay.unConfirm') }}
                      </p>
                      <p v-else-if="scope.row.alarmStatus === 1">
                        {{ $t('AlarmDisplay.confirmed') }}
                      </p>
                      <p v-else-if="scope.row.alarmStatus === 2">
                        {{ $t('AlarmDisplay.cleared') }}
                      </p>
                      <p v-else-if="scope.row.alarmStatus === 3">
                        {{ $t('AlarmDisplay.recovered') }}
                      </p>
                    </template>
                  </el-table-column>
                  <el-table-column
                    align="center"
                    prop="confirmUser"
                    :label="$t('AlarmDisplay.confirmUser')">
                  </el-table-column>
                </pl-table>
              </el-main>
            </div>
          </el-tab-pane>
          <!-- 告警清除列表展示框 -->
          <el-tab-pane :label="$t('AlarmDisplay.clearedAlarmInfo')" name="third" style="text-align: center" class="h-all adapt-height adapt-height-box">
            <div v-if="activeName === 'third'" class="h-all adapt-height-box">
              <el-header height="auto">
                <alarm-filter
                  :deviceCollection = "deviceCollection"
                  :clickTab="tabName[2]"
                  v-on:queryCondition="addQueryCondition"
                ></alarm-filter>
                <div class="header-button-box">
                  <el-button size='mini' icon="el-icon-delete" type="danger" @click="alarmDeleteForClearList"
                             v-loading.fullscreen.lock="fullscreenLoading">{{ $t('common.delete') }}
                  </el-button>
                </div>
              </el-header>
              <el-main class="adapt-height adapt-height-box">
                <pl-table
                  :row-style="tableRowClassName"
                  header-row-class-name="table-header"
                  cell-class-name="table-cell"
                  class="adapt-height"
                  :height="height"
                  border
                  ref="plTableCleared"
                  tooltip-effect="dark"
                  :default-sort="{prop: 'alarmLevel', order: 'descending'}"
                  @selection-change="handleSelectionChangeClear"
                  highlight-current-row
                  @current-change="handleCurrentChange"
                  use-virtual
                  :row-height='pl_table_row_height'
                  :big-data-checkbox="true"
                >
                  <el-table-column
                    type="selection"
                    width="32">
                  </el-table-column>
                  <el-table-column
                    :show-overflow-tooltip="true"
                    align="center"
                    prop="elementName"
                    :label="$t('AlarmDisplay.netWorkElementName')"
                    style="font-size: 10px;">
                  </el-table-column>
                  <el-table-column
                    :show-overflow-tooltip="true"
                    align="center"
                    prop="deviceTypeName"
                    :label="$t('AlarmDisplay.netWorkElementType')"
                    style="font-size: 10px;">
<!--                    <template slot-scope="scope">-->
<!--                      <p v-if="scope.row.isLink === 0">-->
<!--                        {{ $t('AlarmDisplay.deviceType') }}-->
<!--                      </p>-->
<!--                      <p v-else-if="scope.row.isLink === 1">-->
<!--                        {{ $t('AlarmDisplay.serverType') }}-->
<!--                      </p>-->
<!--                    </template>-->
                  </el-table-column>
                  <el-table-column
                    :show-overflow-tooltip="true"
                    align="center"
                    prop="resourceName"
                    :label="$t('AlarmDisplay.resourceName')">
                  </el-table-column>
                  <el-table-column
                    :show-overflow-tooltip="true"
                    align="center"
                    prop="alarmLevel"
                    sortable
                    :label="$t('AlarmDisplay.alarmLevel')">
                    <template slot-scope="scope">
                      <p v-if="scope.row.alarmLevel === 0">
                        {{ $t('AlarmDisplay.warn') }}
                      </p>
                      <p v-else-if="scope.row.alarmLevel === 1">
                        {{ $t('AlarmDisplay.severity') }}
                      </p>
                      <p v-else-if="scope.row.alarmLevel === 2">
                        {{ $t('AlarmDisplay.exigency') }}
                      </p>
                    </template>
                  </el-table-column>
                  <el-table-column
                    :show-overflow-tooltip="true"
                    align="center"
                    prop="alarmName"
                    :label="$t('AlarmDisplay.cause')">
                  </el-table-column>
                  <el-table-column
                    :show-overflow-tooltip="true"
                    align="center"
                    prop="firstTime"
                    sortable
                    :formatter="formatTime"
                    :label="$t('AlarmDisplay.firstTime')">
                  </el-table-column>
                  <el-table-column
                    align="center"
                    :label="$t('AlarmDisplay.measure')">
                    <template slot-scope="scope">
                      <el-button
                        size="mini"
                        style="background: #53D214"
                        :title="$t('AlarmQuery.view')"
                        @click="viewDetail(scope.row)">
                        <svg class="icon" aria-hidden="true">
                          <use xlink:href="#icon-chakan"></use>
                        </svg>
                      </el-button>
                      <el-button
                        size="mini"
                        style="background: #175BE3"
                        :title="$t('common.createBtn')"
                        @click="createAlarmMangExpInit(scope.row)">
                        <svg class="icon" aria-hidden="true">
                          <use xlink:href="#icon-zengjia-cuxiantiao"></use>
                        </svg>
                      </el-button>
                    </template>
                  </el-table-column>
                  <el-table-column
                    :show-overflow-tooltip="true"
                    align="center"
                    :label="$t('AlarmDisplay.alarmStatus')">
                    <template slot-scope="scope">
                      <p v-if="scope.row.alarmStatus === 0">
                        {{ $t('AlarmDisplay.unConfirm') }}
                      </p>
                      <p v-else-if="scope.row.alarmStatus === 1">
                        {{ $t('AlarmDisplay.confirmed') }}
                      </p>
                      <p v-else-if="scope.row.alarmStatus === 2">
                        {{ $t('AlarmDisplay.cleared') }}
                      </p>
                      <p v-else-if="scope.row.alarmStatus === 3">
                        {{ $t('AlarmDisplay.recovered') }}
                      </p>
                    </template>
                  </el-table-column>
                  <el-table-column
                    align="center"
                    prop="clearUser"
                    :label="$t('AlarmDisplay.clearUser')">
                  </el-table-column>
                </pl-table>
              </el-main>
            </div>
          </el-tab-pane>
          <!-- 配置差异信息 -->
          <el-tab-pane :label="$t('AlarmDisplay.configDifferencesInfo')" name="fourth" style="text-align: center" class="h-all adapt-height adapt-height-box">
            <div v-if="activeName === 'fourth'" class="h-all adapt-height-box">
              <el-header height="auto">
              </el-header>
              <el-main class="adapt-height adapt-height-box">
                <el-table
                  :empty-text="$t('common.noData')"
                  header-row-class-name="table-header"
                  cell-class-name="table-cell"
                  class="adapt-height"
                  height="auto"
                  border
                  ref="singleTable"
                  :data="configFileDifferenceList"
                  tooltip-effect="dark"
                  highlight-current-row
                >
                  <el-table-column
                    :show-overflow-tooltip="true"
                    align="center"
                    prop="deviceName"
                    :label="$t('AlarmDisplay.netWorkElementName')"
                    style="font-size: 10px;">
                  </el-table-column>
                  <el-table-column
                    :show-overflow-tooltip="true"
                    align="center"
                    prop="deviceTypeKey"
                    :label="$t('AlarmDisplay.netWorkElementType')"
                    style="font-size: 10px;">
                    <template slot-scope="scope">
                      <p v-if="scope.row.deviceTypeKey === 'SWITCH'">
                        {{ $t('AlarmDisplay.SWITCH') }}
                      </p>
                      <p v-else-if="scope.row.deviceTypeKey === 'SERVER'">
                        {{ $t('AlarmDisplay.SERVER') }}
                      </p>
                      <p v-else-if="scope.row.deviceTypeKey === 'ROUTERSWITCH'">
                        {{ $t('AlarmDisplay.ROUTERSWITCH') }}
                      </p>
                      <p v-else-if="scope.row.deviceTypeKey === 'ROUTER'">
                        {{ $t('AlarmDisplay.ROUTER') }}
                      </p>
                      <p v-else-if="scope.row.deviceTypeKey === 'FIREWALL'">
                        {{ $t('AlarmDisplay.FIREWALL') }}
                      </p>
                      <p v-else-if="scope.row.deviceTypeKey === 'STORAGE'">
                        {{ $t('AlarmDisplay.STORAGE') }}
                      </p>
                      <p v-else-if="scope.row.deviceTypeKey === 'OTHER'">
                        {{ $t('AlarmDisplay.OTHER') }}
                      </p>
                    </template>
                  </el-table-column>
                  <el-table-column
                    :show-overflow-tooltip="true"
                    align="center"
                    prop="deviceModel"
                    :label="$t('AlarmDisplay.deviceModel')">
                  </el-table-column>
                  <el-table-column
                    :show-overflow-tooltip="true"
                    align="center"
                    prop="subnetName"
                    :label="$t('AlarmDisplay.subnet')">
                  </el-table-column>
                  <el-table-column
                    :show-overflow-tooltip="true"
                    align="center"
                    prop="differentType"
                    :label="$t('AlarmDisplay.differenceType')"
                    style="font-size: 10px;">
                    <template slot-scope="scope">
                      <p v-if="scope.row.differentType === 1">
                        {{ $t('AlarmDisplay.runFileDifference') }}
                      </p>
                      <p v-else-if="scope.row.differentType === 0">
                        {{ $t('AlarmDisplay.backupFileDifference') }}
                      </p>
                    </template>
                  </el-table-column>
                  <el-table-column
                    :show-overflow-tooltip="true"
                    align="center"
                    width="320"
                    :label="$t('AlarmDisplay.differenceDetails')"
                    style="font-size: 10px;">
                    <template slot-scope="scope">
                      <el-link target="_blank" v-if="scope.row.differentType === 1" @click="viewConfigFile(scope.row)" style="text-decoration: underline">
                        {{ $t('AlarmDisplay.checkDeviceConfig') }}
                      </el-link>
                      <el-link  target="_blank" v-if="scope.row.differentType === 1" @click="viewRunConfigFile(scope.row)" style="text-decoration: underline">
                        {{ $t('AlarmDisplay.checkDeviceRunConfig') }}
                      </el-link>
                      <el-link target="_blank" v-if="scope.row.differentType === 0" @click="viewConfigFile(scope.row)" style="text-decoration: underline">
                        {{ $t('AlarmDisplay.checkDeviceConfig') }}
                      </el-link>
                      <el-link  target="_blank" v-if="scope.row.differentType === 0" @click="viewBackupConfigFile(scope.row)" style="text-decoration: underline">
                        {{ $t('AlarmDisplay.checkBackupConfig') }}
                      </el-link>
                    </template>
                  </el-table-column>
                  <el-table-column
                    :show-overflow-tooltip="true"
                    align="center"
                    width="320"
                    :label="$t('AlarmDisplay.operation')">
                    <template slot-scope="scope" >
                      <p v-if="scope.row.differentType === 1">
                        <el-button
                          size="mini"
                          style="color: #006FFF;border: 0"
                          :title="$t('common.compareBtn')"
                          @click="compareOperation(scope.row)">
                          <icon name="compare" :w="18" :h="18"></icon>
                        </el-button>
                        <el-button
                          size="mini"
                          type="primary"
                          style="background: #175BE3"
                          :title="$t('common.saveBtn')"
                          @click="configSave(scope.row)">
                          <icon name="backup" :w="16" :h="16" ></icon>
                        </el-button>
                        <el-button
                          size="mini"
                          type="primary"
                          style="background: #006FFF"
                          :title="$t('common.restartBtn')"
                          @click="configRestart(scope.row)">
                          <icon name="restart" :w="16" :h="16"></icon>
                        </el-button>
                        {{ $t('AlarmDisplay.CompareSaveRestart') }}
                      </p>
                      <p v-else-if="scope.row.differentType === 0">
                        <el-button
                          size="mini"
                          style="color: #006FFF;border: 0"
                          :title="$t('common.compareBtn')"
                          @click="compareOperation(scope.row)">
                          <icon name="compare" :w="18" :h="18"></icon>
                        </el-button>
                        <el-button
                          size="mini"
                          type="primary"
                          style="background: #175BE3"
                          :title="$t('common.backupBtn')"
                          @click="configBackup(scope.row)">
                          <icon name="backup" :w="16" :h="16"></icon>
                        </el-button>
                        <el-button
                          size="mini"
                          type="primary"
                          style="background: #409eff"
                          :title="$t('common.recoveryBtn')"
                          @click="configRecover(scope.row)">
                          <icon name="recover" :w="16" :h="16"></icon>
                        </el-button>
                        {{ $t('AlarmDisplay.CompareBackupResume') }}
                      </p>
                    </template>
                  </el-table-column>
                </el-table>
              </el-main>
            </div>
          </el-tab-pane>
        </el-tabs>
      </el-col>
    </el-row>
    <el-dialog
      title="配置文件查看"
      :visible.sync="configFileDialogVisible"
      width="55%" center class="AlarmDisplay" style="font-size: 20px">
      <pre>{{this.content}}</pre>
    </el-dialog>
    <el-dialog title="配置文件对比"
               :visible.sync="configDifferenceFileDialogVisible"
               center width="90%" class="AlarmDisplay">
      <div slot="title" class="dialog-title" v-if="fileDifferentMessage.differentType === 0">
              <span style="font-size:20px">
            设备配置文件
          </span>
        <span style="font-size:20px;margin-left:785px;">
             设备备份配置文件
            </span>
      </div>
      <div slot="title" class="dialog-title" v-if="fileDifferentMessage.differentType === 1">
              <span style="font-size:20px">
            设备配置文件
          </span>
        <span style="font-size:20px;margin-left:785px;">
             设备运行配置文件
            </span>
      </div>
      <code-diff  :old-string="oldStr" :new-string="newStr" :context="5000" outputFormat="side-by-side"/>
    </el-dialog>
    <CommandExecuteContext v-bind:commands="commandContext"></CommandExecuteContext>
  </div>
</template>
<style lang="scss">
  .AlarmDisplay {
    display: flex;
    justify-content: center;
    align-items: Center;
    .el-dialog {
      margin: 0 auto !important;
      height: 90%;
      overflow: hidden;
    }
    .el-dialog__body {
      position: absolute;
      left: 0;
      top: 54px;
      bottom: 0;
      right: 0;
      padding: 0;
      z-index: 1;
      overflow: hidden;
      overflow-y: auto;
    }
  }
</style>

<script>
import AlarmManager from '../../domain/models/AlarmManager'
import AlarmService from '../../domain/services/AlarmService'
import LinkService from '../../domain/services/LinkService'
import legitimacyCheck from '../../utils/legitimacyCheck'
import HelperUtil from '../../utils/HelperUtil'
import {EventBus} from '../../domain/EventBus'
import CodeDiff from 'vue-code-diff'
import alarmFilter from './AlarmFilterComponent'
import ConfigFileDifferenceService from '../../domain/services/ConfigFileDifferenceService'
import AlarmMangExpCommands from "../../commands/AlarmMangExpCommands";
import CommandExecuteContext from "../../commands/CommandExecuteContext";
let curThis = ''
export default {
  name: 'AlarmDisplay',
  props:
      [
        'alarmCollection',
        'deviceCollection',
        // 'serverCollection',
        'alarmLevelConfig',
        'curClickDeviceId',
        'configFileDifferenceCollection'
      ],
  components: {CodeDiff,
    alarmFilter,
    CommandExecuteContext
  },
  data () {
    return {

      oldStr: '',
      newStr: '',
      content: '',

      configFileDialogVisible: false,

      configDifferenceFileDialogVisible: false,
      tabName: ['unConfirm', 'confirmed', 'cleared'],
      // pl table 的行高
      pl_table_row_height: 31,

      // 点击的告警栏所对应的device id
      clickDeviceId: this.curClickDeviceId,

      deviceList: [], // 网元
      usingDeviceList: [], // 筛选网元
      serviceList: [], // 服务器
      // confirmUser: '',

      fileDifferentMessage: {
        fileDifferentMessageKey: '',
        deviceKey: '',
        differentType: '',
        deviceName: '',
        deviceTypeKey: '',
        deviceModel: '',
        subnetName: '',
        delFlag: '',
        messageContains: []
      },

      configFileDifferenceList: [],

      // 链路对象
      link: {
        linkKey: '',
        linkName: '',
        startDeviceKey: '',
        startPortName: '',
        endDeviceKey: '',
        endPortName: '',
        linkStatus: 0, // 链路状态 （0:在用 1:未规划）
        linkType: 0
      },

      // 标签页 默认显示告警信息
      activeName: 'first',

      // 未确认告警信息集合
      unConfirmAlarmList: [],
      // 确认告警信息集合
      confirmAlarmList: [],
      // 清除告警信息集合
      clearAlarmList: [],
      multipleSelection: [],
      multipleSelectionConfirm: [],
      multipleSelectionClear: [],
      multipleSelectionConfig: [],
      // 告警颜色
      warnAlarmColor: '#fdfd08',
      severityAlarmColor: '#f97309',
      instancyAlarmColor: '#f9110b',

      // 数据加载过程中，覆盖界面
      fullscreenLoading: false,
      height: 300,
      // 告警过滤条件
      alarmFilterCondition: {
        tabName: 'undefined',
        selectList: []
      },
      createAndCopyInitList: {},
      createAndCopyTitle: '',
      commandContext: {}
    }
  },
  methods: {
    /**
     * @Description  : createAlarmMangExpInit
     * @author       : ls
     * @date         : 2021/2/27 20:24
     * @param        :
     * @return       :
     */
    createAlarmMangExpInit: function (val) {
      this.createAndCopyTitle = this.$t('AlarmMangExp.createAlarmMangExp')
      this.createAndCopyInitList = val
      this.queryCreateAlarmMangExpCommand.execute()
    },
    /**
     * @Description  : viewDetail
     * @author       : ls
     * @date         : 2021/2/27 20:18
     * @param        :
     * @return       :
     */
    viewDetail: function (row) {
      let flag = false
      for (let item of this.openTab) {
        if (item.name === '告警经验维护') {
          this.$store.commit('delete_keepAliveRouter', 'AlarmMangExp')
          this.$store.commit('delete_tabs', '/TheLayout/AlarmMangExp')
          this.$store.commit('add_tabs', {route: '/TheLayout/AlarmMangExp', name: '告警经验维护', title: 'TheLayoutHeader.AlarmMangExp'})
          this.$store.commit('set_active_index', '/TheLayout/AlarmMangExp')
          this.$store.commit('add_keepAliveRouter', 'AlarmMangExp')
          this.$router.push({path: '/TheLayout/AlarmMangExp', query: {alarmMangExp: row}})
          flag = true
          break
        }
      }
      if (!flag) {
        this.$store.commit('add_tabs', {route: '/TheLayout/AlarmMangExp', name: '告警经验维护', title: 'TheLayoutHeader.AlarmMangExp'})
        this.$store.commit('add_keepAliveRouter', 'AlarmMangExp')
        this.$store.commit('set_active_index', '/TheLayout/AlarmMangExp')
        this.$router.push({path: '/TheLayout/AlarmMangExp', query: {alarmMangExp: row}})
      }
    },
    calTableHeight () {
      // 处理告警的高度，实时计算，若显示表格的高度过小，则固定为300
      let result = 0
      result = document.getElementsByClassName('el-main adapt-height adapt-height-box')[0].offsetHeight
      this.height = result > 0 ? result : 300
    },
    tabClickHandler () {
      // 解决“切换tab导致pltable出现空白”的问题
      setTimeout(function () {
        if (curThis.activeName === 'first') {
          curThis.$refs.plTableUnConfirm.reloadData(curThis.unConfirmAlarmList)
          curThis.$refs.plTableUnConfirm.pagingScrollTopLeft(0, 0)
        } else if (curThis.activeName === 'second') {
          curThis.$refs.plTableConfirm.reloadData(curThis.confirmAlarmList)
          curThis.$refs.plTableConfirm.pagingScrollTopLeft(0, 0)
        } else if (curThis.activeName === 'third') {
          curThis.$refs.plTableCleared.reloadData(curThis.clearAlarmList)
          curThis.$refs.plTableCleared.pagingScrollTopLeft(0, 0)
        }
      }, 10)
    },

    selectConfig (row) {
      this.fileDifferentMessage.fileDifferentMessageKey = row.fileDifferentMessageKey
      this.fileDifferentMessage.deviceKey = row.deviceKey
      this.fileDifferentMessage.differentType = row.differentType
      this.fileDifferentMessage.deviceName = row.deviceName
      this.fileDifferentMessage.deviceTypeKey = row.deviceTypeKey
      this.fileDifferentMessage.deviceModel = row.deviceModel
      this.fileDifferentMessage.subnetName = row.subnetName
      this.fileDifferentMessage.delFlag = row.delFlag
      this.fileDifferentMessage.messageContains = row.messageContains
    },

    // 获取告警过滤条件
    addQueryCondition: function (tabName, selectList) {
      this.alarmFilterCondition['tabName'] = tabName
      this.alarmFilterCondition['selectList'] = selectList
      this.getThreeAlarmList(this.alarmFilterCondition)
    },
    /**
       * @Description  ：初始化所需数据
       * @author       : yjz
       * @param        :
       * @return       :
       * @exception    :
       * @date         :
       */
    initUsedData () {
      this.deviceList = Object.freeze(Object.values(this.deviceCollection))
      this.configFileDifferenceList = Object.freeze(Object.values(this.configFileDifferenceCollection))
      // this.serviceList = Object.values(this.serverCollection);
      this.getThreeAlarmList(this.alarmFilterCondition)
      this.filterDeviceList()
      // this.getConfigDifferencesList()
    },

    /**
       * @Description  ：根据设备状态，过滤设备集合
       * @author       : yjz
       * @param        :
       * @return       :
       * @exception    :
       * @date         :
       */
    filterDeviceList () {
      let _this = this
      let usingDeviceObject = {}
      this.deviceList.forEach(function (device) {
        if (device.deviceStatus === 0) {
          _this.$set(usingDeviceObject, device.deviceKey, device)
        }
      })
      _this.usingDeviceList = Object.values(usingDeviceObject)
    },

    /**
       * @Description  :过滤deviceKey，转为显示deviceName
       * @author       :
       */
    formatDeviceKey: function (row, column) {
      if (row.isLink === 0) { // 节点类型 0：网元 1：服务器 2：链路
        for (var i = 0; i < this.deviceList.length; i++) {
          if (this.deviceList[i]['deviceKey'] === row.elementKey) {
            return this.deviceList[i]['displayName']
          }
        }
      }
      if (row.linkType === 1) { // 节点类型 0：网元 1：服务器 2：链路
        for (var j = 0; j < this.serviceList.length; j++) {
          if (this.serviceList[j]['serverKey'] === row.deviceKey) {
            return this.serviceList[j]['serverName']
          }
        }
      }
    },
    formatTime: function (val) {
      return HelperUtil.timeTran(val.firstTime)
    },
    /**
       * @Description  ：根据告警等级改变该行的背景色
       * @author       :
       * @param        :
       * @return       :
       * @exception    :
       * @date         : 2018/12/14 18:56
       */
    tableRowClassName ({row, rowIndex}) {
      if (row.alarmLevel === 0) {
        return {'background-color': this.alarmLevelConfig['0']['alarmColor']}
      } else if (row.alarmLevel === 1) {
        return {'background-color': this.alarmLevelConfig['1']['alarmColor']}
      } else if (row.alarmLevel === 2) {
        return {'background-color': this.alarmLevelConfig['2']['alarmColor']}
      }
      return ''
    },

    /**
       * @Description  ：将父组件传来的告警信息集合处理成三个告警信息列表
       * @author       :
       * @param        :
       * @return       :
       * @exception    :
       * @date         :
       */
    getThreeAlarmList (alarmFilterCondition) {
      console.log('alarmlist length is ', Object.keys(this.alarmCollection).length)
      let alarmMgr = AlarmManager(this.alarmCollection)
      this.unConfirmAlarmList = alarmMgr.getUnConfirmedAlarmList(this.unConfirmAlarmList)
      this.confirmAlarmList = alarmMgr.getConfirmedAlarmList(this.confirmAlarmList)
      this.clearAlarmList = alarmMgr.getClearedAlarmList(this.clearAlarmList)
      this.tabClickHandler()
      if (alarmFilterCondition['selectList'].length <= 0) return
      // 添加过滤操作
      switch (alarmFilterCondition['tabName']) {
        case 'unConfirm':
          this.unConfirmAlarmList = this.getAlarmFilterResult(this, alarmFilterCondition, this.unConfirmAlarmList)
          curThis.$refs.plTableUnConfirm.reloadData(curThis.unConfirmAlarmList)
          break
        case 'confirmed':
          this.confirmAlarmList = this.getAlarmFilterResult(this, alarmFilterCondition, this.confirmAlarmList)
          curThis.$refs.plTableConfirm.reloadData(curThis.confirmAlarmList)
          break
        case 'cleared':
          this.clearAlarmList = this.getAlarmFilterResult(this, alarmFilterCondition, this.clearAlarmList)
          curThis.$refs.plTableCleared.reloadData(curThis.clearAlarmList)
          break
        default:
      }
    },

    // 返回过滤后的告警集合
    getAlarmFilterResult: function (_this, alarmFilterCondition, arrayList) {
      return arrayList.filter((alarm) => {
        let flag = true
        for (let i = 0; i < alarmFilterCondition['selectList'].length; i++) {
          switch (alarmFilterCondition['selectList'][i]['compareSymbol']) {
            case '<=':
              flag = alarm[alarmFilterCondition['selectList'][i]['quaryAttribute']] <= alarmFilterCondition['selectList'][i]['compareValue']
              break
            case '>=':
              flag = alarm[alarmFilterCondition['selectList'][i]['quaryAttribute']] >= alarmFilterCondition['selectList'][i]['compareValue']
              break
            case '=':
              let quaryAttribute = alarmFilterCondition['selectList'][i]['quaryAttribute']
              if (quaryAttribute === 'deviceTypeKey') {
                if (alarm.isLink === 0) {
                  flag = _this.deviceCollection[alarm['elementKey']]['deviceTypeKey'] === alarmFilterCondition['selectList'][i]['compareValue']
                  break
                } else {
                  flag = false
                  break
                }
              }
              if (quaryAttribute === 'displayName') {
                if (alarm.isLink === 0) {
                  flag = _this.deviceCollection[alarm['elementKey']]['displayName'] === alarmFilterCondition['selectList'][i]['compareValue']
                  break
                } else {
                  flag = false
                  break
                }
              }
              flag = alarm[alarmFilterCondition['selectList'][i]['quaryAttribute']] === alarmFilterCondition['selectList'][i]['compareValue']
              break
            default:
          }
          if (!flag) break
        }
        return flag
      })
    },

    compareOperation (row) {
      let this_ = this
      this_.selectConfig(row)
      if (this_.fileDifferentMessage.differentType === 0) {
        ConfigFileDifferenceService.getConfigFileView(this_.fileDifferentMessage, 2).then(result => {
          this_.readFile(result, 1)
        })
        ConfigFileDifferenceService.getConfigFileView(this_.fileDifferentMessage, 0).then(result => {
          this_.readFile(result, 0)
        }).catch(err => {
          this_.InfoTip.errorTip(this, err)
        })
      } else {
        ConfigFileDifferenceService.getConfigFileView(this_.fileDifferentMessage, 2).then(result => {
          this_.readFile(result, 1)
        })
        ConfigFileDifferenceService.getConfigFileView(this_.fileDifferentMessage, 1).then(result => {
          this_.readFile(result, 0)
        }).catch(err => {
          this_.InfoTip.errorTip(this, err)
        })
      }
    },

    // 读取文件
    readFile (result, index) {
      var fr = new FileReader()
      fr.addEventListener('load', function (ev) {
        // 2代表查看的内容，1为old，0位new
        if (index === 2) {
          curThis.content = ev.target.result
          curThis.configFileDialogVisible = true
        } if (index === 1) {
          curThis.oldStr = ev.target.result
          curThis.configDifferenceFileDialogVisible = true
        } if (index === 0) {
          curThis.newStr = ev.target.result
        }
      })
      fr.readAsText(result)
    },

    // 配置文件
    viewConfigFile (row) {
      this.viewFile(row, 2)
    },

    // 备份配置文件
    viewBackupConfigFile (row) {
      this.viewFile(row, 0)
    },

    // 运行配置文件
    viewRunConfigFile (row) {
      this.viewFile(row, 1)
    },

    viewFile (row, index) {
      let this_ = this
      this_.selectConfig(row)
      ConfigFileDifferenceService.getConfigFileView(this_.fileDifferentMessage, index).then(result => {
        this_.readFile(result, 2)
      }).catch(err => {
        this_.InfoTip.errorTip(this, err)
      })
    },

    // 保存
    configSave (row) {
      this.userOperation(row, 2)
    },

    // 重启
    configRestart (row) {
      this.userOperation(row, 3)
    },

    // 备份
    configBackup (row) {
      this.userOperation(row, 0)
    },

    // 恢复
    configRecover (row) {
      this.userOperation(row, 1)
    },

    userOperation (row, index) {
      let this_ = this
      this_.selectConfig(row)
      ConfigFileDifferenceService.handleConfigFile(this_.fileDifferentMessage, index).then(result => {
        this_.InfoTip.successTip(this_, HelperUtil.getStatusCodeObjectByCode(this_.successCode.OTHERS_CODE))
      }).catch(err => {
        this_.InfoTip.errorTip(this_, err)
      })
    },

    /**
       * @Description  ：告警确认
       * @author       :
       * @param        :
       * @return       :
       * @exception    :
       * @date         :
       */
    alarmConfirm () {
      let _this = this
      if (this.multipleSelection.length === 0) {
        this.InfoTip.warningTip(this, HelperUtil.getCheckStatusCodeObjectByCode(this.successCode.PLEASE_SELECT_AT_LEASE_ONE_ALARM_INFORMATION_TO_CONFIRM))

        return
      }
      var alarmConfirmList = []
      for (var i = 0; i < this.multipleSelection.length; i++) {
        alarmConfirmList.push(this.multipleSelection[i].alarmKey)
      }
      console.log('current alarm is', alarmConfirmList)
      AlarmService.batchAlarmConfirm(alarmConfirmList).then(result => {
        _this.InfoTip.successTip(_this, HelperUtil.getStatusCodeObjectByCode(_this.successCode.OTHERS_CODE))
        this.getThreeAlarmList(this.alarmFilterCondition)
      }).catch(err => {
        this.InfoTip.errorTip(this, err)
      })
    },

    /**
       * @Description  ：告警清除
       * @author       :
       * @param        :
       * @return       :
       * @exception    :
       * @date         :
       */
    alarmClear () {
      let _this = this
      if (this.multipleSelection.length === 0) {
        this.InfoTip.warningTip(this, HelperUtil.getCheckStatusCodeObjectByCode(this.successCode.PLEASE_SELECT_AT_LEASE_ONE_ALARM_INFORMATION_TO_CLEAR))

        return
      }
      var alarmClearList = new Array()
      for (var i = 0; i < this.multipleSelection.length; i++) {
        alarmClearList.push(this.multipleSelection[i].alarmKey)
      }
      AlarmService.batchAlarmClear(alarmClearList)
        .then(result => {
          _this.InfoTip.successTip(_this, HelperUtil.getStatusCodeObjectByCode(_this.successCode.OTHERS_CODE))
          //            this.getThreeAlarmList()
        }).catch(err => {
          this.InfoTip.errorTip(this, err)
        })
    },
    alarmDeleteForClearList: function () {
      if (this.multipleSelectionClear.length === 0) {
        this.InfoTip.warningTip(this, HelperUtil.getCheckStatusCodeObjectByCode(this.successCode.PLEASE_SELECT_AT_LEASE_ONE_ALARM_INFORMATION_TO_DELETE))
        return
      }
      var alarmDeleteList = []
      for (var i = 0; i < this.multipleSelectionClear.length; i++) {
        alarmDeleteList.push(this.multipleSelectionClear[i].alarmKey)
      }
      this.InfoTip.conformTip(this, HelperUtil.getCheckStatusCodeObjectByCode(this.successCode.ALARM_DELETE)
      ).then(() => {
        AlarmService.batchAlarmDelete(alarmDeleteList).then(result => {
          this.InfoTip.successTip(this, HelperUtil.getStatusCodeObjectByCode(this.successCode.OTHERS_CODE))
        }).catch(err => {
          this.InfoTip.errorTip(this, err)
        })
      }).catch(() => {
      })
    },
    alarmDelete: function () {
      if (this.multipleSelection.length === 0) {
        this.InfoTip.warningTip(this, HelperUtil.getCheckStatusCodeObjectByCode(this.successCode.PLEASE_SELECT_AT_LEASE_ONE_ALARM_INFORMATION_TO_DELETE))
        return
      }
      var alarmDeleteList = []
      for (var i = 0; i < this.multipleSelection.length; i++) {
        alarmDeleteList.push(this.multipleSelection[i].alarmKey)
      }
      this.InfoTip.conformTip(this, HelperUtil.getCheckStatusCodeObjectByCode(this.successCode.ALARM_DELETE)
      ).then(() => {
        AlarmService.batchAlarmDelete(alarmDeleteList).then(result => {
          this.InfoTip.successTip(this, HelperUtil.getStatusCodeObjectByCode(this.successCode.OTHERS_CODE))
          // this.getThreeAlarmList()
        }).catch(err => {
          this.InfoTip.errorTip(this, err)
        })
      }).catch(() => {
        // this.command.done()
      })
    },
    alarmDeleteForConfirmList: function () {
      if (this.multipleSelectionConfirm.length === 0) {
        this.InfoTip.warningTip(this, HelperUtil.getCheckStatusCodeObjectByCode(this.successCode.PLEASE_SELECT_AT_LEASE_ONE_ALARM_INFORMATION_TO_DELETE))
        return
      }
      var alarmDeleteList = []
      for (var i = 0; i < this.multipleSelectionConfirm.length; i++) {
        alarmDeleteList.push(this.multipleSelectionConfirm[i].alarmKey)
      }
      this.InfoTip.conformTip(this, HelperUtil.getCheckStatusCodeObjectByCode(this.successCode.ALARM_DELETE)
      ).then(() => {
        AlarmService.batchAlarmDelete(alarmDeleteList).then(result => {
          this.InfoTip.successTip(this, HelperUtil.getStatusCodeObjectByCode(this.successCode.OTHERS_CODE))
        }).catch(err => {
          this.InfoTip.errorTip(this, err)
        })
      }).catch(() => {
      })
    },
    alarmClearForConfirmList: function () {
      let _this = this
      if (this.multipleSelectionConfirm.length === 0) {
        this.InfoTip.warningTip(this, HelperUtil.getCheckStatusCodeObjectByCode(this.successCode.PLEASE_SELECT_AT_LEASE_ONE_ALARM_INFORMATION_TO_CLEAR))

        return
      }
      var alarmConfirmClearList = new Array()
      for (var i = 0; i < this.multipleSelectionConfirm.length; i++) {
        alarmConfirmClearList.push(this.multipleSelectionConfirm[i].alarmKey)
      }
      this.InfoTip.conformTip(this, HelperUtil.getCheckStatusCodeObjectByCode(this.successCode.ALARM_DELETE)
      ).then(() => {
        AlarmService.batchAlarmClear(alarmConfirmClearList).then(result => {
          _this.InfoTip.successTip(_this, HelperUtil.getStatusCodeObjectByCode(_this.successCode.OTHERS_CODE))
          this.getThreeAlarmList(this.alarmFilterCondition)
        }).catch(err => {
          this.InfoTip.errorTip(this, err)
        })
      }).catch(() => {
      })
    },

    /**
       * @Description  ：表格多选框改变时，将所选行进行保存
       * @author       :
       * @param        :
       * @return       :
       * @exception    :
       * @date         :
       */
    handleSelectionChange (val) {
      this.multipleSelection = val
    },

    handleSelectionChangeConfirm (val) {
      this.multipleSelectionConfirm = val
    },
    handleSelectionChangeClear (val) {
      this.multipleSelectionClear = val
    },

    handleSelectionChangeConfig (val) {
      this.multipleSelectionConfig = val
    },

    /**
       * @Description  ：单击表格里面一项时的处理
       * @author       :
       * @param        :
       * @return       :
       * @exception    :
       * @date         :
       */
    handleCurrentChange (val) {
      this.clickDeviceId = val.elementKey
      EventBus.$emit('i-got-clickDeviceId', this.clickDeviceId)// 通过全局事件总线将点击的设备传送给顶层组件
    },
    // ------------------------------------验证开始-------------------------------------------------------------------
    /**
       * @Description  ：校验各个输入框
       * @author       : yjz
       * @param        :
       * @return       :
       * @exception    :
       * @date         :
       */
    totalCheck () {
      if (this.linkNameCheck() && this.startLinkNameCheck() && this.endLinkNameCheck() && this.startPortNameCheck() && this.endPortNameCheck()) {
        return true
      } else {
        return false
      }
    },

    /**
       * @Description  ：链路名称校验： 不能为空
       * @author       :
       * @param        :
       * @return       :
       * @exception    :
       * @date         :
       */
    linkNameCheck: function () {
      let linkCheck = legitimacyCheck()
      if (!linkCheck.textNullCheck(this.link.linkName)) {
        this.InfoTip.warningTip(this, HelperUtil.getCheckStatusCodeObjectByCode(this.successCode.TEXT_NULL_CODE), this.$t('LinkConfigurationManagement.linkName'))

        return false
      }
      if (!this.textLengthCheck(this.link.linkName)) {
        return false
      }
      return true
    },

    /**
       * @Description  ：设备名称校验： 不能为空
       * @author       :
       * @param        :
       * @return       :
       * @exception    :
       * @date         :
       */
    startLinkNameCheck: function () {
      let linkCheck = legitimacyCheck()
      if (!linkCheck.textNullCheck(this.link.startDeviceKey)) {
        this.InfoTip.warningTip(this, HelperUtil.getCheckStatusCodeObjectByCode(this.successCode.TEXT_NULL_CODE), this.$t('LinkConfigurationManagement.startDeviceName'))

        return false
      }
      if (!this.textLengthCheck(this.link.startDeviceKey)) {
        return false
      }
      return true
    },
    endLinkNameCheck: function () {
      let linkCheck = legitimacyCheck()
      if (!linkCheck.textNullCheck(this.link.endDeviceKey)) {
        this.InfoTip.warningTip(this, HelperUtil.getCheckStatusCodeObjectByCode(this.successCode.TEXT_NULL_CODE), this.$t('LinkConfigurationManagement.endDeviceName'))

        return false
      }
      if (!this.textLengthCheck(this.link.endDeviceKey)) {
        return false
      }
      return true
    },

    /**
       * @Description  ：端口名称校验： 不能为空，应数字
       * @author       :
       * @param        :
       * @return       :
       * @exception    :
       * @date         :
       */
    startPortNameCheck: function () {
      let linkCheck = legitimacyCheck()
      if (!linkCheck.textNullCheck(this.link.startPortName)) {
        this.InfoTip.warningTip(this, HelperUtil.getCheckStatusCodeObjectByCode(this.successCode.TEXT_NULL_CODE), this.$t('LinkConfigurationManagement.startDevicePort'))

        return false
      }
      if (!this.textLengthCheck(this.link.startPortName)) {
        return false
      }
      if (!this.numCheck(this.link.startPortName)) {
        return false
      }
      if (!this.portNumCheck(this.link.startPortName)) {
        return false
      }
      return true
    },
    endPortNameCheck: function () {
      let linkCheck = legitimacyCheck()
      if (!linkCheck.textNullCheck(this.link.endPortName)) {
        this.InfoTip.warningTip(this, HelperUtil.getCheckStatusCodeObjectByCode(this.successCode.TEXT_NULL_CODE), this.$t('LinkConfigurationManagement.endDevicePort'))

        return false
      }
      if (!this.textLengthCheck(this.link.endPortName)) {
        return false
      }
      if (!this.numCheck(this.link.endPortName)) {
        return false
      }
      if (!this.portNumCheck(this.link.endPortName)) {
        return false
      }
      return true
    },

    /**
       * @Description  ：校验 限制长度不能大于2位  <99
       * @author       : bjh
       * @param        :
       * @return       :
       * @exception    :
       * @date         : 2019/3/18 11:12
       */
    portNumCheck: function (portName) {
      if (portName.length > 2) {
        this.InfoTip.warningTip(this, HelperUtil.getCheckStatusCodeObjectByCode(this.successCode.PORT_ENTERED_MUST_BE_LESS_THAN_99))

        return false
      }
      return true
    },

    /**
       * @Description  ：文本框所输入的字符长度校验： 控制在20之内
       * @author       : bjh
       * @param        :
       * @return       :
       * @exception    :
       * @date         : 2019/1/15 16:09
       */
    textLengthCheck: function (checkString) {
      let linkCheck = legitimacyCheck()
      if (!linkCheck.textLengthCheck(checkString)) {
        this.InfoTip.warningTip(this, HelperUtil.getCheckStatusCodeObjectByCode(this.successCode.LENGTH_CODE))

        return false
      }
      return true
    },

    /**
       * @Description  ：输入数字
       * @author       : bjh
       * @param        :
       * @return       :
       * @exception    :
       * @date         : 2019/1/15 16:09
       */
    numCheck: function (checkNumber) {
      let linkCheck = legitimacyCheck()
      if (!linkCheck.numberCheck(checkNumber)) {
        this.InfoTip.warningTip(this, HelperUtil.getCheckStatusCodeObjectByCode(this.successCode.PLEASE_ENTER_VALID_NUMBER))

        return false
      }
      return true
    }
    // ------------------------------------验证结束-------------------------------------------------------------------
  },

  watch: {
    alarmCollection: {
      handler (newVal, OldVal) {
        this.alarmCollection = newVal
        this.getThreeAlarmList(this.alarmFilterCondition)
      },
      deep: true
    },

    deviceCollection: {
      handler (newVal, OldVal) {
        this.deviceList = Object.freeze(Object.values(newVal))
        this.filterDeviceList()
      },
      deep: true
    },
    configFileDifferenceCollection: {
      handler (newVal, OldVal) {
        this.configFileDifferenceList = Object.freeze(Object.values(newVal))
      },
      deep: true
    }

  },
  created () {
    curThis = this
    this.initUsedData()
    // this.getAllConfigFile()
  },
  mounted () {
    this.$refs.plTableUnConfirm.reloadData(this.unConfirmAlarmList)
    // this.$refs.plTableConfirm.reloadData(this.confirmAlarmList)
    // this.$refs.plTableCleared.reloadData(this.clearAlarmList)
    EventBus.$on('cal-table-height', this.calTableHeight)
    for (let t in this.alarmCollection) {
      console.log(JSON.stringify(this.alarmCollection[t]))
    }
    for (let j in this.deviceCollection) {
      console.log(JSON.stringify(this.deviceCollection[j]))
    }
  },
  activated () {
    // 解决“切换路由导致pltable出现空白”的问题
    this.$refs.plTableUnConfirm.pagingScrollTopLeft(0, 0)
    // this.$refs.plTableConfirm.pagingScrollTopLeft(0, 0)
    // this.$refs.plTableCleared.pagingScrollTopLeft(0, 0)
  },
  computed: {
    queryCreateAlarmMangExpCommand () {
      return AlarmMangExpCommands.queryCreateAlarmMangExpCommand(this.createAndCopyTitle, this.createAndCopyInitList, this.commandContext)
    },
    openTab () {
      return this.$store.state.openTab
    }
  }
}

</script>

<style scoped>
  .adapt-height-box{
    overflow: hidden;
  }
</style>
