<template>
  <div id="main" class="h-all">
    <el-container class="h-all">
      <el-header height="auto">
        <div class="header-button-box">
          <el-button size='mini' icon="el-icon-delete" type="primary" @click="clear()"
                     v-loading.fullscreen.lock="fullscreenLoading">{{$t('ServiceStatusUpdate.clearAlreadyAchieve')}}
          </el-button>
        </div>
      </el-header>
      <!-- table数据表格 -->
      <el-main class="adapt-height-box">
        <el-table
          :empty-text="$t('common.noData')"
          ref="multipleTable"
          :data="alarmLevelConfigList"
          header-row-class-name="table-header"
          cell-class-name="table-cell"
          class="adapt-height"
          height="auto"
          border
          tooltip-effect="dark"
          highlight-current-row
          stripe
          @selection-change="handleSelectionChange">
          <el-table-column
            prop="vpnId"
            :label="$t('ServiceStatusUpdate.serviceId')"
            :min-width="110"
            :show-overflow-tooltip="true">
          </el-table-column>
          <el-table-column
            prop="serviceName"
            :label="$t('ServiceStatusUpdate.serviceName')"
            :min-width="110"
            :show-overflow-tooltip="true">
          </el-table-column>
          <el-table-column
            prop="elineStatus"
            :label="$t('ServiceStatusUpdate.serviceStatus')"
            :min-width="110"
            :show-overflow-tooltip="true">
          </el-table-column>
        </el-table>
      </el-main>
    </el-container>
  </div>
</template>

<script>
import Vue from 'vue'
import VueResource from 'vue-resource'
import ElCol from 'element-ui/packages/col/src/col'
import ElineService from '@/domain/services/Business/ElineService.js'

export default {
  name: 'ServiceStatusUpdate',
  data () {
    return {
      alarmLevelConfigList: null,

      elineList1: null
    }
  },
  created: function () {

  },
  props: [
    'elineCollection'
  ],
  methods: {

    /***
       *  清除已完成
       */
    clear: function () {
      // 调用清除按钮
      ElineService.clearFinishedService(this.elineCollection)
      //        this.alarmLevelConfigList = Object.values(this.elineCollection);
    }

  },
  mounted () {
    this.alarmLevelConfigList = Object.values(this.elineCollection)
  },
  watch: {
    elineCollection: {
      handler (newVal, OldVal) {
        this.alarmLevelConfigList = Object.values(newVal)
      },
      deep: true
    }
  }
}
</script>

<style lang="scss" scoped>
</style>
