<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-circle-plus-outline" type="primary" @click="createTemplateInit"
                      v-if="createAndCopyCommand.visible">{{$t('common.createBtn')}}</el-button>
          <el-button size = 'mini' icon="el-icon-delete" type="danger" @click="deleteTemplateInit"
                      v-if="deleteTemplateCommand.visible">{{$t('common.deleteBtn')}}</el-button>
          <div class="search">
            <label>{{$t('ResourceManagement.templateName')}}：</label>
            <el-input size='mini' :placeholder="$t('common.placeholder')"
                      v-model="TemplateName"
                      style="width: 180px"
                      clearable>
            </el-input>
            <label>{{$t('ResourceManagement.subnet')}}：</label>
            <el-select v-model="chooseSubnet" size="mini" :placeholder="$t('common.selectOption')" :clearable="true">
              <el-option
                v-for="item in subnetList"
                :key="item.subnetKey"
                :label="item.subnetName"
                :value="item.subnetKey">
              </el-option>
            </el-select>
            <el-button icon="el-icon-search" type="primary" size = 'mini' @click="queryTemplateByCondition">{{$t('common.queryBtn')}}</el-button>
          </div>
        </div>
      </el-header>
      <!-- table数据表格 -->
      <el-main class="adapt-height-box">
        <el-table
          :empty-text="$t('common.noData')"
          tooltip-effect="dark"
          stripe
          header-row-class-name="table-header"
          cell-class-name="table-cell"
          class="adapt-height"
          height="auto"
          border
          ref="singleTable"
          :data="templateList"
          highlight-current-row
          @selection-change="handleSelectionChange">
          <el-table-column
            type="selection"
            width="28">
          </el-table-column>
          <el-table-column
            prop="discoveryTemplateName"
            :label="$t('ResourceManagement.templateName')"
            :show-overflow-tooltip="true">
          </el-table-column>
          <el-table-column
            prop="ips"
            width="220px"
            :label="$t('ResourceManagement.ipDomain')"
            :show-overflow-tooltip="true">
          </el-table-column>
          <el-table-column
            prop="manageType"
            width="180px"
            :show-overflow-tooltip="true"
            :formatter="formatManageType"
            :label="$t('ResourceManagement.protocolName')">
          </el-table-column>
          <el-table-column
            prop="snmpVersion"
            :label="$t('ResourceManagement.protocolVersion')"
            :formatter="formatsnmpVersion">
          </el-table-column>
          <el-table-column
            prop="snmpGroup"
            :label="$t('ResourceManagement.SNMPGroupName')"
            :show-overflow-tooltip="true">
          </el-table-column>
          <el-table-column
            prop="snmpPort"
            :label="$t('ResourceManagement.GETPortName')">
          </el-table-column>
          <el-table-column
            prop="trapPort"
            :label="$t('ResourceManagement.TRAPortName')">
          </el-table-column>
          <el-table-column
            prop="ipmiUserName"
            :label="$t('ResourceManagement.IPMIUserName')">
          </el-table-column>
          <el-table-column
            prop="ipmiPassword"
            :label="$t('ResourceManagement.IPMIPassword')">
          </el-table-column>
          <el-table-column
            prop="subnetKey"
            :formatter="formatSubnetKey"
            :label="$t('ResourceManagement.subnet')">
          </el-table-column>
          <el-table-column
            prop="station"
            :show-overflow-tooltip="true"
            :label="$t('ResourceManagement.station')">
          </el-table-column>
          <el-table-column
            width="105"
            v-if="createAndCopyCommand.visible"
            :label="$t('common.operation')">
            <template slot-scope="scope">
              <el-button
                size="mini"
                style="background: #175BE3"
                :title="$t('common.copyBtn')"
                @click="handleCopy(scope.row)">
                <svg class="icon" aria-hidden="true">
                  <use xlink:href="#icon-fuzhi"></use>
                </svg>
              </el-button>
              <el-button
                size="mini"
                style="background: #008000"
                :title="$t('common.updateBtn')"
                @click="handleUpdate(scope.row)">
                <svg class="icon" aria-hidden="true">
                  <use xlink:href="#icon-bianji"></use>
                </svg>
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-main>
    </el-container>
    <CommandExecuteContext v-bind:commands="commandContext"></CommandExecuteContext>
  </div>
</template>

<script>
import CommandExecuteContext from '@/commands/CommandExecuteContext'
import EdTemplateCommands from '@/commands/EdTemplateCommands'
import EdTemplateService from '@/domain/services/Template/EdTemplateService'
import HelperUtil from '@/utils/HelperUtil'
import loading from '../../utils/Loading'
import SubnetService from '../../domain/services/SubnetService'

export default {
  name: 'ElementDiscoveryTemplateManagement',
  components: {
    CommandExecuteContext
  },

  data: function () { // 存放数据
    return {
      templateList: [],
      TemplateName: '',
      chooseSubnet: '',
      subnetList: [],
      selectList: [],
      TemplateNameList: [],
      // 命令
      commandContext: {},
      // 为了创建复制初始化传参
      createAndCopyInitList: [],
      copyInitList: [],
      createAndCopyTitle: '',
      // 删除相关
      deleteList: [],
      // 为修改传参数
      updateInitList: [],
      fullscreenLoading: false,
      formLabelWidth: '120px',
      value: '',

      SNMPList: [
        {
          key: 0,
          label: 'v1'
        },
        {
          key: 1,
          label: 'v2c'
        },
        {
          key: 2,
          label: 'v3'
        }
      ],
      // 保存多选行数据
      multipleSelection: []
    }
  },
  // vue加载初始化函数，加载数据
  created: function () {
    this.getAllSubnetInit()
    this.getAllTemplateInit()
  },
  computed: {
    // 命令
    createAndCopyCommand () {
      return EdTemplateCommands.createAndCopyEdTemplateCommand(this.createAndCopyTitle, this.createAndCopyInitList, this.commandContext)
    },
    copyCommand () {
      return EdTemplateCommands.copyEdTemplateCommand(this.createAndCopyTitle, this.copyInitList, this.commandContext)
    },
    deleteTemplateCommand () {
      return EdTemplateCommands.deleteTemplateCommand(this.deleteList, this.commandContext)
    },
    updateTemplateCommand () {
      return EdTemplateCommands.updateTemplateCommand(this.updateInitList, this.commandContext)
    }
  },
  methods: {
    /**
     * @Description  : 创建网元发现模板初始化
     * @author       : ls
     * @date         : 2020/4/22 18:57
     * @param        :
     * @return       :
     */
    createTemplateInit: function () {
      this.createAndCopyTitle = this.$t('EdTemplateCommands.createTemplate')
      this.createAndCopyInitList = {}
      this.createAndCopyCommand.execute()
    },
    /**
     * @Description  : fuzhi
     * @author       : ls
     * @date         : 2020/4/23 18:56
     * @param        :
     * @return       :
     */
    handleCopy: function (row) {
      this.createAndCopyTitle = this.$t('EdTemplateCommands.copyTemplate')
      this.copyInitList = row
      this.copyCommand.execute()
    },
    /**
     * @Description  : 修改
     * @author       : ls
     * @date         : 2020/4/23 18:59
     * @param        :
     * @return       :
     */
    handleUpdate: function (row) {
      this.updateInitList = row
      this.updateTemplateCommand.execute()
    },
    /**
     * @Description  : 赋值
     * @author       : ls
     * @date         : 2020/5/28 16:27
     * @param        :
     * @return       :
     */
    handleSelectionChange (val) {
      this.multipleSelection = val
    },

    /**
     * @Description  : 格式化snmp
     * @author       : ls
     * @date         : 2020/5/29 12:01
     * @param        :
     * @return       :
     */
    formatsnmpVersion: function (row, column) {
      for (var j = 0; j < this.SNMPList.length; j++) {
        if (row.snmpVersion === this.SNMPList[j]['key']) {
          return this.SNMPList[j]['label']
        }
      }
    },
    /**
     * @Description  : 格式化子网
     * @author       : ls
     * @date         : 2020/5/29 12:04
     * @param        :
     * @return       :
     */
    formatSubnetKey: function (row, column) {
      for (var i = 0; i < this.subnetList.length; i++) {
        if (this.subnetList[i]['subnetKey'] === row.subnetKey) {
          return this.subnetList[i]['subnetName']
        }
      }
    },
    /**
     * @Description  : 格式化类型
     * @author       : ls
     * @date         : 2020/5/29 12:29
     * @param        :
     * @return       :
     */
    formatManageType: function (val) {
      var ret = ''
      switch (val.manageType) {
        case '001':
          ret = this.$t('ResourceManagement.IPMIProtocol')
          break
        case '010':
          ret = this.$t('ResourceManagement.ICMPProtocol')
          break
        case '100':
          ret = this.$t('ResourceManagement.SNMPProtocol')
          break
        case '110':
          ret = this.$t('ResourceManagement.SNMPProtocol').concat(',').concat(this.$t('ResourceManagement.ICMPProtocol'))
          break
        case '101':
          ret = this.$t('ResourceManagement.SNMPProtocol').concat(',').concat(this.$t('ResourceManagement.IPMIProtocol'))
          break
        case '011':
          ret = this.$t('ResourceManagement.ICMPProtocol').concat(',').concat(this.$t('ResourceManagement.IPMIProtocol'))
          break
        case '111':
          ret = this.$t('ResourceManagement.SNMPProtocol').concat(',').concat(this.$t('ResourceManagement.ICMPProtocol')).concat(',').concat(this.$t('ResourceManagement.IPMIProtocol'))
          break
      }
      return ret
    },
    /**
     * @Description  : 获取子网
     * @author       : ls
     * @date         : 2020/5/28 16:18
     * @param        :
     * @return       :
     */
    getAllSubnetInit: function () {
      let _this = this
      let loadingInstance = loading.openLoading()
      SubnetService.getAllSubnetCollection().then(result => {
        _this.subnetList = Object.values(result)
        loadingInstance.close()
      }).catch(err => {
        this.InfoTip.errorTip(this, err)
        loadingInstance.close()
      })
    },
    /**
     * @Description  : 获取所有模板
     * @author       : ls
     * @date         : 2020/5/28 16:19
     * @param        :
     * @return       :
     */
    getAllTemplateInit: function () {
      EdTemplateService.getAllTemplateCollection().then(result => {
        this.templateList = Object.values(result)
      }).catch(err => {
        this.InfoTip.errorTip(this, err)
      })
    },
    /**
     * @Description  : shanchu
     * @author       : ls
     * @date         : 2020/4/23 19:40
     * @param        :
     * @return       :
     */
    deleteTemplateInit: function () {
      if (this.multipleSelection.length === 0) {
        // 请至少选择一条信息进行删除
        this.InfoTip.warningTip(this, HelperUtil.getCheckStatusCodeObjectByCode(this.successCode.DELETE_SELECT_CODE))
      } else {
        this.deleteList = []
        for (var i = 0; i < this.multipleSelection.length; i++) {
          this.deleteList.push(this.multipleSelection[i]['discoveryTemplateKey'])
        }
        this.deleteTemplateCommand.execute()
      }
    },
    /**
     * @Description  : 设置查询条件
     * @author       : ls
     * @date         : 2020/5/28 16:25
     * @param        :
     * @return       :
     */
    setSelectList: function () {
      this.selectList = []
      if (this.TemplateName !== '' && this.TemplateName !== null) {
        this.selectList.push({
          quaryAttribute: 'discoveryTemplateName',
          compareSymbol: 'like',
          compareValue: this.TemplateName
        })
      }
      if (this.chooseSubnet !== '' && this.chooseSubnet !== null) {
        this.selectList.push({
          quaryAttribute: 'subnetKey',
          compareSymbol: '=',
          compareValue: this.chooseSubnet
        })
      }
    },
    /**
       * @Description  : 条件查询
       * @author       : ls
       * @date         : 2020/4/22 17:22
       * @param        :
       * @return       :
       */
    queryTemplateByCondition: function () {
      this.setSelectList()
      let _this = this
      let loadingInstance = _this.Loading.openLoading()
      EdTemplateService.queryTemplate(this.selectList).then(result => {
        _this.templateList = Object.values(result)
        _this.Loading.closeLoading(loadingInstance)
        if (_this.templateList.length === 0) {
          this.InfoTip.warningTip(_this, HelperUtil.getCheckStatusCodeObjectByCode(_this.successCode.QUERY_NULL_CODE))
        } else {
          this.InfoTip.successTip(_this, HelperUtil.getStatusCodeObjectByCode(_this.successCode.QUERY_CODE))
        }
      }).catch(err => {
        this.Loading.closeLoading(loadingInstance)
        this.InfoTip.errorTip(_this, err)
      })
    }
  },
  watch: {
    commandContext (newVal, oldVal) {
      if (JSON.stringify(newVal) === '{}') {
        this.TemplateName = ''
        this.chooseSubnet = ''
        this.getAllTemplateInit()
        this.$refs.singleTable.clearSelection()
      }
      deep: true
    }

  }
}
</script>

<style scoped>
</style>