<template>
  <div id="main">
    <el-container>
      <el-header style="text-align: left; font-size: 10px" height="30px">
        <!-- 通用工具栏 -->
        <el-row type="flex">
          <el-button size='mini' icon="el-icon-circle-plus-outline" type="primary" @click="createEveSubnetInit">
            {{$t('common.createBtn')}}
          </el-button>
          <el-button size='mini' icon="el-icon-document" type="primary" @click="copyEveSubnetInit">
            {{$t('common.copyBtn')}}
          </el-button>
          <el-button size='mini' icon="el-icon-edit" type="primary" @click="updateEveSubnetInit">
            {{$t('common.updateBtn')}}
          </el-button>
          <el-button size='mini' icon="el-icon-delete" type="primary" @click="deleteEveSubnetInit">
            {{$t('common.deleteBtn')}}
          </el-button>
        </el-row>
      </el-header>
      <!-- table数据表格 -->
      <el-main>
        <el-table
          :empty-text="$t('common.noData')"
          tooltip-effect="dark"
          row-style="height:22px"
          cell-style="padding:0"
          style="font-size: 10px;width:99%"
          stripe
          :height="tableHeight"
          :max-height="tableHeight"
          :header-cell-style="{height:'15px', fontSize:'10px', color:'#595959', background:'#EBEEF5'}"

          ref="singleTable"
          :data="EveSubnetList"
          highlight-current-row
          @current-change="handleCurrentChange"
          @selection-change="handleSelectionChange">

          <el-table-column
            type="selection"
            width="28">
          </el-table-column>

          <el-table-column
            prop="serviceSubnetID"
            label="主键"
            v-if="false">
          </el-table-column>
          <el-table-column
            text-align="left"
            prop="serviceSubnetName"
            label="子网名称"
            :show-overflow-tooltip="true">
          </el-table-column>
          <el-table-column
            prop="serviceSubnetTopo"
            label="子网拓扑类型"
            :formatter="formatEveSubnetTopoType"
            :show-overflow-tooltip="true">
          </el-table-column>
          <el-table-column
            prop="serviceTypeID"
            label="业务类型"
            :formatter="formatServerType"
            :show-overflow-tooltip="true">
          </el-table-column>
          <el-table-column
            label="查看">
            <template slot-scope="scope">
              <el-row type="flex">
                <el-button
                  style="margin-top:-3.8px"
                  size="mini"
                  type="text"
                  @click="handleOperateDevice(scope.$index, scope.row,scope.row.subnetDevices)">设备
                </el-button>
              </el-row>
            </template>
          </el-table-column>
        </el-table>
      </el-main>
    </el-container>

    <!-- 业务子网创建对话框 -->
    <el-dialog v-dialogDrag style="font-size: 10px;" width='800px' heigt='500px' title="业务子网创建"
               :visible.sync="dialog_eveSubnetCreate">
      <el-form :model="form" inline="true" ref="form" style="margin-bottom: -20px;margin-top:-20px;">

        <el-form-item label="业务子网ID:" :label-width="formLabelWidth" style="margin-bottom: -10px;">
          <el-input size='mini' :placeholder="$t('common.placeholder')" v-model="form.serviceSubnetID"
                    style="width:200px"
                    autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="业务子网名称:" :label-width="formLabelWidth" style="margin-bottom: -10px;">
          <el-input size='mini' :placeholder="$t('common.placeholder')" v-model="form.serviceSubnetName"  v-on:blur="serviceSubnetNameCheck"
                    style="width:200px"
                    autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="业务子网拓扑类型:" :label-width="formLabelWidth" style="margin-bottom: -10px;">
          <el-select v-model="form.serviceSubnetTopo" size="mini" :placeholder="$t('common.selectOption')" clearable="true"
                     style="width: 200px">
            <el-option
              v-for="item in EveSubnetTopoList"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="业务类型:" :label-width="formLabelWidth" style="margin-bottom: -10px;">
          <el-select size='mini' v-model="form.serviceTypeID" :placeholder="$t('common.selectOption')"  clearable="true"
                     style="width:200px">
            <el-option
              v-for="item in SeverList"
              :key="item.serviceTypeID"
              :label="item.serviceTypeName"
              :value="item.serviceTypeID">
            </el-option>
          </el-select>
        </el-form-item>


        <el-form-item label="创建附属设备" style="margin-bottom: -10px;"></el-form-item>
        <el-form-item label="" style="margin-bottom: -10px;"></el-form-item>


        <el-table
          tooltip-effect="dark"

          cell-style="padding:0;height:28px"
          style="font-size: 10px;"
          fit="true"
          height="250"
          max-height="250"
          :header-cell-style="{height:'15px', fontSize:'10px', color:'#595959', background:'#EBEEF5'}"

          ref="singleTable"
          :data="deviceList"
          align="center"
          highlight-current-row
          @current-change="handleCurrentChange"
          @selection-change="handleSelectionChangeCreate">

          <el-table-column
            type="selection"
            width="28"
            height="30px">
          </el-table-column>

          <el-table-column
            prop="deviceKey"
            label="网元名称"
            width="300px"
            height="28px"
          >
          </el-table-column>


          <el-table-column
            label="portID"
            width="350px"
            height="30px"
            visEdit="true"
          >
            <template slot-scope="scope">
              <el-input size='mini' :placeholder="$t('common.placeholder')" v-model="scope.row.port"
                        style="width:300px;height: 35px;margin-top:5px"
                        v-on:blur="portCheck(scope.row.deviceKey,scope.row.port,1)"
                        autocomplete="off"></el-input>

            </template>
          </el-table-column>

        </el-table>

      </el-form>


      <div slot="footer" class="dialog-footer">
        <!--<el-button size='mini' type="primary" @click="createSubnetDeviceInit">创建附属设备-->
        <!--</el-button>-->
        <el-button size='mini' type="primary" @click="createEveSubnet" v-loading.fullscreen.lock="fullscreenLoading">
          {{$t("common.createBtn")}}
        </el-button>
        <el-button size='mini' @click="dialog_eveSubnetCreate = false">{{$t("common.cancel")}}</el-button>
      </div>
    </el-dialog>
    <!-- 服务器修改对话框 -->
    <el-dialog v-dialogDrag style="font-size: 10px;" width='800px' heigt='500px' title="业务子网修改"
               :visible.sync="dialog_eveSubnetUpdate" @opened="checked">

      <el-form :model="form" inline="true" ref="form" style="margin-bottom: -20px;margin-top:-20px;">
        <el-row>
          <el-form-item label="业务子网ID:" :label-width="formLabelWidth" style="margin-bottom: -10px;">
            <el-input size='mini' :placeholder="$t('common.placeholder')" v-model="form.serviceSubnetID "
                      style="width:200px"  disabled="true"
                      autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="业务子网名称:" :label-width="formLabelWidth" style="margin-bottom: -10px;">
            <el-input size='mini' :placeholder="$t('common.placeholder')" v-model="form.serviceSubnetName" v-on:blur="serviceSubnetNameCheck"
                      style="width:200px"
                      autocomplete="off"></el-input>
          </el-form-item>
        </el-row>
        <el-row>
          <el-form-item label="业务子网拓扑类型:" :label-width="formLabelWidth" style="margin-bottom: -10px;">
            <el-select v-model="form.serviceSubnetTopo" size="mini" :placeholder="$t('common.selectOption')"  clearable="true"
                       style="width: 200px">
              <el-option
                v-for="item in EveSubnetTopoList"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="业务类型:" :label-width="formLabelWidth" style="margin-bottom: -10px;">
            <el-select size='mini' v-model="form.serviceTypeID" :placeholder="$t('common.selectOption')"  clearable="true"
                       style="width:200px">
              <el-option
                v-for="item in SeverList"
                :key="item.serviceTypeID"
                :label="item.serviceTypeName"
                :value="item.serviceTypeID">
              </el-option>
            </el-select>
          </el-form-item>
        </el-row>

        <el-form-item label="" style="margin-bottom: -10px;"></el-form-item>
        <el-form-item label="创建附属设备" style="margin-bottom: -10px;"></el-form-item>
        <el-form-item label="" style="margin-bottom: -10px;"></el-form-item>


        <el-table
          ref="table"
          tooltip-effect="dark"

          cell-style="padding:0;height:28px"
          style="font-size: 10px;"
          fit="true"
          height="250"
          max-height="250"
          :header-cell-style="{height:'15px', fontSize:'10px', color:'#595959', background:'#EBEEF5'}"
          :data="deviceList"
          align="center"
          highlight-current-row
          @current-change="handleCurrentChange"
          @selection-change="handleSelectionChangeCopy">

          <el-table-column
            type="selection"
            width="28"
            height="28">
          </el-table-column>

          <el-table-column
            prop="deviceKey"
            label="网元名称"
            width="300px"
            height="28px"
          >
          </el-table-column>


          <el-table-column
            label="portID"
            width="350px"
            height="28px"
            visEdit="true"
          >
            <template slot-scope="scope">
              <el-input size='mini' :placeholder="$t('common.placeholder')" v-model="scope.row.port"
                        style="width:300px;height: 35px;margin-top:5px"
                        v-on:blur="portCheck(scope.row.deviceKey,scope.row.port,2)"
                        autocomplete="off"></el-input>

            </template>
          </el-table-column>

        </el-table>


      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button size='mini' type="primary" @click="updateEveSubnet" v-loading.fullscreen.lock="fullscreenLoading">
          {{$t('common.updateBtn')}}
        </el-button>
        <el-button size='mini' @click="dialog_eveSubnetUpdate = false">{{$t("common.cancel")}}</el-button>
      </div>
    </el-dialog>
    <!-- 服务器复制对话框 -->
    <el-dialog v-dialogDrag style="font-size: 10px;" width='800px' heigt='500px' title="业务子网复制"
               :visible.sync="dialog_eveSubnetCopy" @opened="checked">

      <el-form :model="form" inline="true" ref="form" style="margin-bottom: -20px;margin-top:-20px;">
        <el-row>
          <el-form-item label="业务子网ID:" :label-width="formLabelWidth" style="margin-bottom: -10px;">
            <el-input size='mini' :placeholder="$t('common.placeholder')" v-model="form.serviceSubnetID "
                      style="width:200px"
                      autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="业务子网名称:" :label-width="formLabelWidth" style="margin-bottom: -10px;">
            <el-input size='mini' :placeholder="$t('common.placeholder')" v-model="form.serviceSubnetName" v-on:blur="serviceSubnetNameCheck"
                      style="width:200px"
                      autocomplete="off"></el-input>
          </el-form-item>
        </el-row>
        <el-row>
          <el-form-item label="业务子网拓扑类型:" :label-width="formLabelWidth" style="margin-bottom: -10px;">
            <el-select v-model="form.serviceSubnetTopo" size="mini" :placeholder="$t('common.selectOption')"  clearable="true"
                       style="width: 200px">
              <el-option
                v-for="item in EveSubnetTopoList"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="业务类型:" :label-width="formLabelWidth" style="margin-bottom: -10px;">
            <el-select size='mini' v-model="form.serviceTypeID" :placeholder="$t('common.selectOption')"  clearable="true"
                       style="width:200px">
              <el-option
                v-for="item in SeverList"
                :key="item.serviceTypeID"
                :label="item.serviceTypeName"
                :value="item.serviceTypeID">
              </el-option>
            </el-select>
          </el-form-item>
        </el-row>

        <el-form-item label="" style="margin-bottom: -10px;"></el-form-item>
        <el-form-item label="创建附属设备" style="margin-bottom: -10px;"></el-form-item>
        <el-form-item label="" style="margin-bottom: -10px;"></el-form-item>


        <el-table
          ref="table"
          tooltip-effect="dark"

          cell-style="padding:0;height:28px"
          style="font-size: 10px;"
          fit="true"
          height="250"
          max-height="250"
          :header-cell-style="{height:'15px', fontSize:'10px', color:'#595959', background:'#EBEEF5'}"
          :data="deviceList"
          align="center"
          highlight-current-row
          @current-change="handleCurrentChange"
          @selection-change="handleSelectionChangeCopy">

          <el-table-column
            type="selection"
            width="28"
            height="28">
          </el-table-column>

          <el-table-column
            prop="deviceKey"
            label="网元名称"
            width="300px"
            height="28px"
          >
          </el-table-column>


          <el-table-column
            label="portID"
            width="350px"
            height="28px"
            visEdit="true"
          >
            <template slot-scope="scope">
              <el-input size='mini' :placeholder="$t('common.placeholder')" v-model="scope.row.port"
                        style="width:300px;height: 35px;margin-top:5px"
                        v-on:blur="portCheck(scope.row.deviceKey,scope.row.port,2)"
                        autocomplete="off"></el-input>

            </template>
          </el-table-column>

        </el-table>


      </el-form>


      <div slot="footer" class="dialog-footer">
        <el-button size='mini' type="primary" @click="copyEveSubnet" v-loading.fullscreen.lock="fullscreenLoading">
          {{$t("common.createBtn")}}
        </el-button>
        <el-button size='mini' @click="dialog_eveSubnetCopy = false">{{$t("common.cancel")}}</el-button>
      </div>
    </el-dialog>
    <!-- 附属设备列表对话框 -->
    <el-dialog v-dialogDrag style="font-size: 10px" width='450px' heigt='200px' title="附属设备列表"
               :visible.sync="dialog_foreignDevice">

      <el-main style="font-size: 10px; margin-top: -30px;padding-top: 0">
        <el-table
          tooltip-effect="dark"
          row-style="height:22px"
          cell-style="padding:0"
          style="font-size: 10px;width:99%"
          stripe
          height="80%"
          :max-height="tableHeight"
          :header-cell-style="{height:'15px', fontSize:'10px', color:'#595959', background:'#EBEEF5'}"

          ref="singleTable"
          :data="currentDeviceList"
          highlight-current-row
          @current-change=""
          @selection-change="">

          <el-table-column
            type="selection"
            width="28">
          </el-table-column>

          <el-table-column
            prop="deviceKey"
            label="主键"
            v-if="false">
          </el-table-column>
          <el-table-column
            text-align="left"
            prop="deviceKey"
            label="网元ID"
            :show-overflow-tooltip="true">
          </el-table-column>
          <el-table-column
            prop="port"
            label="portID"
            :show-overflow-tooltip="true">
          </el-table-column>
        </el-table>
      </el-main>
    </el-dialog>


  </div>
</template>

<script>
  import ElRow from "element-ui/packages/row/src/row";
  import ElFormItem from "../../../node_modules/element-ui/packages/form/src/form-item.vue";
  import ElInput from "../../../node_modules/element-ui/packages/input/src/input.vue";

  let protocal = '';
  let ip = '';
  let project = '';
  let port = '';
  export default {
    components: {
      ElInput,
      ElFormItem,
      ElRow
    },
    name: 'EveSubnetConfigurationManagement',
    data: function () {   //存放数据
      return {


        //window.innerHeight:浏览器的可用高度
        tableHeight: window.innerHeight * 0.7,
        fullscreenLoading: false,

        //Btn按钮text域
        createEveSubnetBtn: "创建",
        updateEveSubnetBtn: "修改",
        copyEveSubnetBtn: "复制",
        deleteEveSubnetBtn: "删除",

        //创建修改复制窗口是否打开
        dialog_eveSubnetCreate: false,
        dialog_eveSubnetUpdate: false,
        dialog_eveSubnetCopy: false,
        dialog_foreignDevice: false,
        dialog_createSubnetDevice: false,


        //为了删除使用
        serviceSubnetIDFordel: '',
        serviceSubnetNameFordel:'',
        serviceSubnetTopoFordel: '',
        serviceTypeIDFordel: '',
        subnetDevicesFordel:[],


        formLabelWidth: '150px',

        deviceKey0: '',

        deviceList: [],// [{"deviceKey": '1',"port": '1,2'},{"deviceKey": '2',"port": '1'}],//"port": ''}],


        currentDeviceList: [],
        //服务器类型下拉列表
        EveSubnetTopoList: [
          {
            value: '0',
            label: '单设备型'
          }, {
            value: '1',
            label: '线型'
          }, {
            value: '2',
            label: '环型'
          }, {
            value: '3',
            label: '网孔型'
          }, {
            value: '4',
            label: '混合结构型'
          }],
        SelectEveSubnetTopo: '',

        //业务类型下拉列表
        SeverList: [
//          {
//            serviceTypeID: '0',
//            serviceTypeName: 'serverType1'
//          },
//          {
//            serviceTypeID: '1',
//            serviceTypeName: 'serverType2'
//          },
//          {
//            serviceTypeID: '2',
//            serviceTypeName: 'serverType3'
//          }
        ],

        //双向绑定弹出窗口input域
        form: {
          serviceSubnetID: "",
          serviceSubnetName: "",
          serviceSubnetTopo: "",
          serviceTypeID: "",

          deviceKey: '',
          port: '',


        },

        //数据中间用，隔开
        SubnetDeviceList: [
//          {
//            deviceKey:'1',
//            port:'1.1'
//          },
//          {
//            deviceKey:'2',
//            port:'2.1'
//          }
        ],
        SubnetDeviceForCreate: [],
        SubnetDeviceForCopy: [],
        SubnetDeviceForUpdate: [],


        //为了修改
        serviceSubnetIDForupdate: '',
        serviceSubnetNameForUpdate:'',

        //为了创建附属设备
        InsertSubnetDevice: [],

        //双向绑定展示数据
        EveSubnetList:[],
//        EveSubnetList:
//          [
//          {
//            serviceSubnetID: "1",
//            serviceSubnetName: "1.1",
//            serviceSubnetTopo: "0",
//            serviceTypeID: "0"
//          },
//          {
//            serviceSubnetID: "2",
//            serviceSubnetName: "2.1",
//            serviceSubnetTopo: "1",
//            serviceTypeID: "0"
//          },
//          {
//            serviceSubnetID: "3",
//            serviceSubnetName: "3.1",
//            serviceSubnetTopo: "2",
//            serviceTypeID: "1"
//          },
//          {
//            serviceSubnetID: "4",
//            serviceSubnetName: "4.1",
//            serviceSubnetTopo: "3",
//            serviceTypeID: "2"
//          }
//        ],        //保存当前行数据
        currentRow: null,
        //保存多选行数据
        multipleSelection: [],
        multipleSelectionCreate: [],
        multipleSelectionCopy: [],
        multipleSelectionUpdate: [],

        //保存附属设备表当前行数据
        currentRowDevice: null,
        //保存附属设备表多选行数据
        multipleSelectionDevice: [],

      }
    },
    //vue加载初始化函数，加载数据
    created: function () {
      console.log('业务子网管理界面初始化：')


      this.getAllEveSubnetInit()
      //额外获取所有关联机房信息
      this.getAllEvc()
    },
    computed: {
      openTab() {
        return this.$store.state.openTab;
      },
      activeIndex: {
        get() {
          return this.$store.state.activeIndex;
        },
        set(val) {
          this.$store.commit('set_active_index', val);
        }
      }
    },
    methods: {

      checked: function () {

        //初始化选中状态
        //首先el-table添加ref="tableCopy"引用标识
        for (var i = 0; i < this.currentDeviceList.length; i++) {
          for (var j = 0; j < this.deviceList.length; j++) {
            if (this.currentDeviceList[i].deviceKey == this.deviceList[j].deviceKey) {
              this.$refs.table.toggleRowSelection(this.deviceList[j], true);

            }

          }

        }
        //初始化时修改当前附属设备的port的值"复制，删除使用"
        for (var i = 0; i < this.deviceList.length; i++) {
          for (var j = 0; j < this.currentDeviceList.length; j++) {
            if (this.deviceList[i].deviceKey == this.currentDeviceList[j].deviceKey) {
              this.deviceList[i].port = this.currentDeviceList[j].port
//                console.log(this.deviceList[i].port +"+"+ this.currentDeviceList[j].port)
            }
          }
        }
      },

      // 验证附属设备portID合法性
      portCheck: function (tempDeviceKey, tempPort, flag) {
        //flag==1代表新增
        if (flag == 1) {
          this.SubnetDeviceForCreate = new Array()
          for (var i = 0; i < this.multipleSelectionCreate.length; i++) {
            if (tempDeviceKey == this.multipleSelectionCreate[i].deviceKey) {//&&tempPort!=this.multipleSelectionCreate[i].port){
              console.log('device 不同')
              this.multipleSelectionCreate[i].port = tempPort
            }
          }
          for (var i = 0; i < this.multipleSelectionCreate.length; i++) {
            this.SubnetDeviceForCreate.push({
              deviceKey: this.multipleSelectionCreate[i].deviceKey,
              port: this.multipleSelectionCreate[i].port,
            })
//          }
          }


          console.log("device", this.SubnetDeviceForCreate)

        }
        else if (flag == 2) {
          this.SubnetDeviceForCopy = new Array()
          for (var i = 0; i < this.multipleSelectionCopy.length; i++) {
            if (tempDeviceKey == this.multipleSelectionCopy[i].deviceKey) {//&&tempPort!=this.multipleSelectionCreate[i].port){
              console.log('device 不同')
              this.multipleSelectionCopy[i].port = tempPort
            }
          }
          for (var i = 0; i < this.multipleSelectionCopy.length; i++) {
            this.SubnetDeviceForCopy.push({
              deviceKey: this.multipleSelectionCopy[i].deviceKey,
              port: this.multipleSelectionCopy[i].port,
            })
          }

          console.log("device", this.SubnetDeviceForCopy)

        }
        else if (flag == 3) {
          this.SubnetDeviceForUpdate = new Array()
          for (var i = 0; i < this.multipleSelectionUpdate.length; i++) {
            if (tempDeviceKey == this.multipleSelectionUpdate[i].deviceKey) {//&&tempPort!=this.multipleSelectionCreate[i].port){
              console.log('device 不同')
              this.multipleSelectionUpdate[i].port = tempPort
            }
          }
          for (var i = 0; i < this.multipleSelectionUpdate.length; i++) {
            this.SubnetDeviceForUpdate.push({
              deviceKey: this.multipleSelectionUpdate[i].deviceKey,
              port: this.multipleSelectionUpdate[i].port,
            })
          }

          console.log("device", this.SubnetDeviceForUpdate)

        }

        if (tempPort != '' && tempPort != null) {
          var isPort = true;


          //判断“，”合法性，防止多个‘，’连接
          var tempPortList0 = new Array()
          tempPortList0 = tempPort.split('')
          for (var i = 0; i < tempPortList0.length; i++) {
            if (tempPortList0[i] == ',' && tempPortList0[i + 1] == ',') {
              isPort = false
              this.$message({
                type: 'warning',
                message: '请输入有效的portID ',
                duration: 10000,
                showClose: true,
              })
              return false
            }
          }

          var tempPortList = new Array()
          tempPortList = tempPort.split(',')
          var numReg = /^-?[0-9]\d*$/
          var numRe = new RegExp(numReg)
          for (var j = 0; j < tempPortList.length; j++) {
            if (!numRe.test(tempPortList[j])) {
              isPort = false
            }
            for (var k = 0; k < tempPortList.length; k++) {
              if (tempPortList[j] == tempPortList[k]) {
                if (j != k) {
                  isPort = false
                  this.$message({
                    type: 'warning',
                    message: '请勿输入重复的portID ',
                    duration: 10000,
                    showClose: true,
                  })
                  return false
                }
              }
            }

          }
          if (tempPortList0[tempPortList0.length - 1] == ',') {
            isPort = false
          }

          if (isPort == false) {
            this.$message({
              type: 'warning',
              message: '请输入有效的portID ',
              duration: 10000,
              showClose: true,
            })

            return false
          }
          else {
            return true
          }
        }

      },


      //对input输入内容进行校验
      /**
       * @Description  ：业务子网名称非空校验
       * @author       :
       * @param        :
       * @return       :
       * @exception    :
       * @date         : 2019/3/13
       */
      serviceSubnetNameCheck: function () {
        const _this = this;
        if (_this.form.serviceSubnetName == ''||_this.form.serviceSubnetName == null) {
          _this.$alert('业务子网名称不可为空！', '提示', {
            confirmButtonText: '确定',
            type: 'warning'
          })
          return false
        }
        return true
      },


      /**
       * @Description  ：单选一行，将所选行进行保存
       */
      handleCurrentChange(val) {
        this.currentRow = val;
      },

      /**
       * @Description  ：创建业务子网，表格多选框改变时，将所选行进行保存
       */
      handleSelectionChangeCreate(val) {
        this.SubnetDeviceForCreate = new Array()
        this.multipleSelectionCreate = val

        for (var i = 0; i < this.multipleSelectionCreate.length; i++) {
          this.SubnetDeviceForCreate.push({
            deviceKey: this.multipleSelectionCreate[i].deviceKey,
            port: this.multipleSelectionCreate[i].port,
          })
//          }
        }
        console.log("device", this.SubnetDeviceForCreate)
      },

      /**
       * @Description  ：复制业务子网，表格多选框改变时，将所选行进行保存
       */
      handleSelectionChangeCopy(val) {

        this.multipleSelectionCopy = val

      },
      /**
       * @Description  ：修改业务子网，表格多选框改变时，将所选行进行保存
       */
      handleSelectionChangeUpdate(val) {

        this.multipleSelectionUpdate = val

      },

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

      /**
       * @Description  :服务器类型过滤
       */
      formatServerType: function (row, column) {
        for (var j = 0; j < this.SeverList.length; j++) {
          if (row.serviceTypeID == this.SeverList[j]['serviceTypeID']) {
            return this.SeverList[j]['serviceTypeName']
          }
        }
      },

      /**
       * @Description  ：子网拓扑类型过滤
       */
      formatEveSubnetTopoType: function (row, column) {
        for (var i = 0; i < this.EveSubnetTopoList.length; i++) {
          if (this.EveSubnetTopoList[i]['value'] == row.serviceSubnetTopo) {
            return this.EveSubnetTopoList[i]['label']
            break;
          }
        }
      },

      /**
       * @Description  ：查看单选行的设备列表
       */
      handleOperateDevice(index, row,subnetDevices) {
        console.log(index, row);
        console.log('查看设备列表：')
        this.currentDeviceList = subnetDevices
        //弹出设备列表对话框
        this.dialog_foreignDevice = true;
      },

      /**
       * @Description  ：获取业务消息
       */
      getAllEvc: function () {
        console.log('获取全部业务信息：')
        this.$http.get(protocal + ip + port + project + 'cxf/nms/serviceType/').then(result => {
          console.log(result.body)
          if (result.body.result) {
            // 成功了！
            this.SeverList = result.body.returnValue
          } else {
            // 失败了
            this.$message.error('Error ' + result.body.faultCode + ':' + result.body.faultCause);
          }
        })
      },

      /**
       * @Description  ：获取业务子网信息
       */
      getAllEveSubnetInit: function () {
        console.log('获取全部业务子网信息：')
        const loading = this.$loading({
          lock: true,
          text: 'Loading',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)',
          target: document.querySelector('.el-row')
        });
        this.$http.get(protocal + ip + port + project + 'cxf/nms/serviceSubnet').then(result => {
          console.log(result.body)
          if (result.body.result) {
            // 成功了！
            this.EveSubnetList = result.body.returnValue
            console.log(this.EveSubnetList)
            loading.close();
          } else {
            // 失败了
            this.$alert('Error ' + result.body.faultCode + ':' + result.body.faultCause, '提示', {
              confirmButtonText: '确定',
              type: 'error'
            })
            loading.close();
          }
        }, (result => {
          loading.close();
          this.$alert('请求失败！', '提示', {
            confirmButtonText: '确定',
            type: 'error'
          })
        }))
      },

      /**
       * @Description  ：增删改后调用，重新加载table
       */
      getAllEveSubnet: function (vue) {
        console.log('获取全部服务器信息：')
        const loading = vue.$loading({
          lock: true,
          text: 'Loading',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)',
          target: document.querySelector('.el-row')
        });
        vue.$http.get(protocal + ip + port + project + 'cxf/nms/serviceSubnet').then(result => {
          console.log(result.body)
          if (result.body.result) {
            // 成功了！
            vue.EveSubnetList = result.body.returnValue
            loading.close();
          } else {
            // 失败了
            vue.$message.error('Error ' + result.body.faultCode + ':' + result.body.faultCause);
            loading.close();
          }
        }
          , (result => {
            loading.close();
            this.$alert('请求失败！', '提示', {
              confirmButtonText: '确定',
              type: 'error'
        })
          }))
      },

      /**
       * @Description  :获取的设备列表
       * @author       :
       * @param        :
       * @return       :
       * @exception    :
       * @date         :
       */
      getAllDevice: function (vue) {
        //vue.fullscreenLoading = true;
        console.log('获取全部网元信息:')
        const loading = vue.$loading({
          lock: true,
          text: 'Loading',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)',
          target: document.querySelector('.el-row')
        });
        vue.$http.get(protocal + ip + port + project + 'cxf/nms/device/').then(result => {
          console.log(result.body)
          if (result.body.result) {
            // 成功了！
            var tempDeviceList = new Array()
            this.deviceList = new Array()
            vue.tempDeviceList = result.body.returnValue


            for (var i = 0; i < this.tempDeviceList.length; i++) {
              this.deviceList.push({
                deviceKey: this.tempDeviceList[i].deviceKey,
                port: this.tempDeviceList[i].port,
              })
              loading.close();
            }
            console.log('网元信息加载成功！')
          } else {
            // 失败了
            this.$message.error('Error ' + result.body.faultCode + ':' + result.body.faultCause)
            loading.close();
          }
          vue.fullscreenLoading = false;
        }
          , (result => {
            loading.close();
            this.$alert('请求失败！', '提示', {
              confirmButtonText: '确定',
              type: 'error'
        })
          }))
      },

      /**
       * @Description  ：创建服务器初始化
       */
      createEveSubnetInit: function () {


        var idList = new Array();
        for(var i= 0;i<this.EveSubnetList.length;i++){
          idList[i]=parseInt(this.EveSubnetList[i]['serviceSubnetID']);
        }
        console.log('-------------------------------------------------------------------------------------------------------------------------------')
        console.log(idList)
        var tempid=0
        for(var j= 0;j<idList.length;j++){

          console.log(idList[j])
          if(idList[j]>tempid){
            tempid = idList[j]
          }
        }


        this.form.serviceSubnetID = tempid+1;
        this.form.serviceSubnetName = '';
        this.form.serviceSubnetTopo = '';
        this.form.serviceTypeID = '';

        //附属设备
        this.form.deviceKey = '';
        this.form.port = '',
          this.getAllEvc()
        this.getAllDevice(this)

        this.dialog_eveSubnetCreate = true;
      },

      /**
       * @Description  ：创建业务子网
       */
      createEveSubnet: function () {
        if(!this.serviceSubnetNameCheck()){
          return ;
        }
        const loading = this.$loading({
          lock: true,
          text: 'Loading',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)',
          target: document.querySelector('.el-row')
        });
        console.log('业务子网创建信息：')
        this.$http.post(protocal + ip + port + project + 'cxf/nms/serviceSubnet', {
          serviceSubnetID: this.form.serviceSubnetID,
          serviceSubnetName: this.form.serviceSubnetName,
          serviceSubnetTopo: this.form.serviceSubnetTopo,
          serviceTypeID: this.form.serviceTypeID,
          subnetDevices: this.SubnetDeviceForCreate,
        }, {'Content-Type': 'application/json', 'Encoding': 'utf-8'}).then(result => {
          console.log(result.body)
          if (result.body.result) {
            // 成功了！
            //重新刷新表格
            this.$options.methods.getAllEveSubnet(this);
            this.$alert('添加业务子网信息成功！', '提示', {
              confirmButtonText: '确定',
              type: 'success'
            })
            loading.close();
            this.dialog_eveSubnetCreate = false;
          } else {
            // 失败了
            this.$alert('Error ' + result.body.faultCode + ':' + result.body.faultCause, '提示', {
              confirmButtonText: '确定',
              type: 'error'
            })
            loading.close();
          }
        }, (result => {
          loading.close();
          this.$alert('请求失败！', '提示', {
            confirmButtonText: '确定',
            type: 'error'
          })
        }))
      },


//      /**
//       * @Description  ：创建附属设备初始化
//       */
//      createSubnetDeviceInit: function () {
//        this.form.serviceSubnetID = '';
//        this.form.deviceKey = '';
//        this.form.port = '';
//        this.dialog_createSubnetDevice = true
//      },
//
//      /**
//       * @Description  ：创建附属设备
//       */
//      createSubnetDevice: function () {
//        this.InsertSubnetDevice.push({
//          "serviceSubnetDeviceKey": "15525274206090002",
//          "serviceSubnetID": null,
//          "deviceKey": "subnetdevice1",
//          "port": "1,2,3,4,5,6,7,8"
//        })
//
//      },

      /**
       * @Description  ：修改业务子网信息初始化
       */
      updateEveSubnetInit: function () {
        if (this.multipleSelection.length == 0) {
          this.$alert('请选择一条信息进行修改！', '提示', {
            confirmButtonText: '确定',
            type: 'warning'
          })
          return;
        } else if (this.multipleSelection.length > 1) {
          this.$alert('请只选择一条信息进行修改！', '提示', {
            confirmButtonText: '确定',
            type: 'warning'
          })
          return;
        } else {
          this.getAllDevice(this)
          this.currentRow = this.multipleSelection[0];

          this.form.serviceSubnetID = this.currentRow.serviceSubnetID;
          this.form.serviceSubnetName = this.currentRow.serviceSubnetName;
          this.form.serviceSubnetTopo = this.currentRow.serviceSubnetTopo;
          this.form.serviceTypeID = this.currentRow.serviceTypeID;
          this.currentDeviceList = this.currentRow.subnetDevices
          this.serviceSubnetIDForupdate=this.currentRow.serviceSubnetID;
          this.serviceSubnetNameForUpdate=this.currentRow.serviceSubnetName;
//          this.getAllEvc()
          this.dialog_eveSubnetUpdate = true;
        }
      },

      /**
       * @Description  ：修改业务子网信息
       */
      updateEveSubnet: function () {
        if(!this.serviceSubnetNameCheck()){
          return ;
        }
        const loading = this.$loading({
          lock: true,
          text: 'Loading',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)',
          target: document.querySelector('.el-row')
        });
        console.log('修改业务子网信息：')
        this.$http.put(protocal + ip + port + project + 'cxf/nms/serviceSubnet/' + this.serviceSubnetIDForupdate + '/' + this.serviceSubnetNameForUpdate,
          {'Content-Type': 'application/json', 'Encoding': 'utf-8'}).then(result => {
          console.log(result.body)
          if (result.body.result) {
            // 成功了！
            //重新刷新表格
            this.$options.methods.getAllEveSubnet(this);
            this.$alert('修改业务子网信息成功！', '提示', {
              confirmButtonText: '确定',
              type: 'success'
            })
            loading.close();
            this.dialog_eveSubnetUpdate = false;
          } else {
            // 失败了
            this.$alert('Error ' + result.body.faultCode + ':' + result.body.faultCause, '提示', {
              confirmButtonText: '确定',
              type: 'error'
            })
            loading.close();
          }
        }, (result => {
          loading.close();
          this.$alert('请求失败！', '提示', {
            confirmButtonText: '确定',
            type: 'error'
          })
        }))
      },


      /**
       * @Description  ：复制业务子网信息初始化
       */
      copyEveSubnetInit: function () {
        this.currentDeviceList = new Array()
        if (this.multipleSelection.length == 0) {
          this.$alert('请选择一条信息进行复制！', '提示', {
            confirmButtonText: '确定',
            type: 'warning'
          })
          return;
        } else if (this.multipleSelection.length > 1) {
          this.$alert('请只选择一条信息进行复制！', '提示', {
            confirmButtonText: '确定',
            type: 'warning'
          })
          return;
        }
        else {
          this.getAllDevice(this)



          var idList = new Array();
          for(var i= 0;i<this.EveSubnetList.length;i++){
            idList[i]=parseInt(this.EveSubnetList[i]['serviceSubnetID']);
          }
          console.log('-------------------------------------------------------------------------------------------------------------------------------')
          console.log(idList)
          var tempid=0
          for(var j= 0;j<idList.length;j++){

            console.log(idList[j])
            if(idList[j]>tempid){
              tempid = idList[j]
            }
          }


          this.form.serviceSubnetID = tempid+1;


          this.currentRow = this.multipleSelection[0];
          //this.form.serviceSubnetID = this.currentRow.serviceSubnetID;
          this.form.serviceSubnetName = this.currentRow.serviceSubnetName;
          this.form.serviceSubnetTopo = this.currentRow.serviceSubnetTopo;
          this.form.serviceTypeID = this.currentRow.serviceTypeID;
          this.currentDeviceList = this.currentRow.subnetDevices//=[{"deviceKey": '1',"port": '1,2,3,4,5,6'}];


//          //初始化时修改当前附属设备的port的值
//          for (var i = 0; i < this.deviceList.length; i++) {
//            for(var j = 0;j<this.currentDeviceList.length;j++) {
//              if (this.deviceList[i].deviceKey == this.currentDeviceList[j].deviceKey) {
//                this.deviceList[i].port = this.currentDeviceList[j].port
////                console.log(this.deviceList[i].port +"+"+ this.currentDeviceList[j].port)
//              }
//            }
//          }
//          this.deviceList = this.multipleSelectionCopy


          console.log("device复制初始化", this.deviceList)


          //  this.getAllEvc()

          this.dialog_eveSubnetCopy = true;

        }
      },

      /**
       * @Description  ：复制业务子网
       */
      copyEveSubnet: function () {
        if(!this.serviceSubnetNameCheck()){
          return ;
        }
        console.log(this.deviceList)
        const loading = this.$loading({
          lock: true,
          text: 'Loading',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)',
          target: document.querySelector('.el-row')
        });
        console.log('业务子网信息复制：')
        this.$http.post(protocal + ip + port + project + 'cxf/nms/serviceSubnet', {
          serviceSubnetID: this.form.serviceSubnetID,
          serviceSubnetName: this.form.serviceSubnetName,
          serviceSubnetTopo: this.form.serviceSubnetTopo,
          serviceTypeID: this.form.serviceTypeID,
          subnetDevices: this.SubnetDeviceForCopy,
//          delFlag: 0,
//          modifyTime: ''
        }, {'Content-Type': 'application/json', 'Encoding': 'utf-8'}).then(result => {
          console.log(result.body)
          if (result.body.result) {
            // 成功了！
            //重新刷新表格
            this.$options.methods.getAllEveSubnet(this);
            this.$alert('复制业务子网信息成功！', '提示', {
              confirmButtonText: '确定',
              type: 'success'
            })
            loading.close();
            this.dialog_eveSubnetCopy = false;
          } else {
            // 失败了
            this.$alert('Error ' + result.body.faultCode + ':' + result.body.faultCause, '提示', {
              confirmButtonText: '确定',
              type: 'error'
            })
            loading.close();
          }
        }, (result => {
          loading.close();
          this.$alert('请求失败！', '提示', {
            confirmButtonText: '确定',
            type: 'error'
          })
        }))
      },

      /**
       * @Description  ：删除业务子网信息初始化（支持批量）
       */
      deleteEveSubnetInit: function () {

        if (this.multipleSelection.length == 0) {
          this.$alert('请至少选择一条信息进行删除！', '提示', {
            confirmButtonText: '确定',
            type: 'warning'
          })
          return;
        } else if (this.multipleSelection.length > 1) {
          this.$alert('请只选择一条信息进行删除！', '提示', {
            confirmButtonText: '确定',
            type: 'warning'
          })
          return;
        }
        else {
          this.$confirm('是否确定删除记录?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            //为了删除时传body使用
            this.currentRow = this.multipleSelection[0];

            this.serviceSubnetIDFordel = this.currentRow.serviceSubnetID;
            this.serviceSubnetNameFordel = this.currentRow.serviceSubnetName;
            this.serviceSubnetTopoFordel = this.currentRow.serviceSubnetTopo;
            this.serviceTypeIDFordel = this.currentRow.serviceTypeID;
            this.subnetDevicesFordel = this.currentRow.subnetDevices;

//            console.log('delete'+ this.currentRow.serviceSubnetID)
//            console.log('delete'+ this.multipleSelection[0].serviceSubnetID)
//            console.log('delete'+ this.serviceSubnetNameFordel)
//            console.log('delete'+ this.serviceSubnetTopoFordel)
//            console.log('delete'+ this.serviceTypeIDFordel)

            this.$options.methods.deleteEveSubnet(this);
          });
        }



      },

      /**
       * @Description  ：删除业务子网 信息
       */
      deleteEveSubnet: function (vue) {
        const loading = vue.$loading({
          lock: true,
          text: 'Loading',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)',
          target: document.querySelector('.el-row')
        });
        console.log("批量业务子网信息：");


        //发送请求
        vue.$http.post(protocal + ip + port + project + 'cxf/nms/serviceSubnet/delete', {
          serviceSubnetID: vue.serviceSubnetIDFordel,
          serviceSubnetName: vue.serviceSubnetNameFordel,
          serviceSubnetTopo: vue.serviceSubnetTopoFordel,
          serviceTypeID: vue.serviceTypeIDFordel,
          subnetDevices: vue.subnetDevicesFordel,

        }, {'Content-Type':'application/json','Encoding':'utf-8'}).then(result => {
            console.log(result.body)
            if (result.body.result) {
              // 成功了！
              //重新刷新表格
              vue.$options.methods.getAllEveSubnet(vue);
              vue.$alert('删除业务子网信息成功！', '提示', {
                confirmButtonText: '确定',
                type: 'success'
              })
            loading.close();
            } else {
              // 失败了
              vue.$message.error('Error ' + result.body.faultCode + ':' + result.body.faultCause);
            loading.close();
            }
          }
        ,(result => {
          loading.close();
          vue.$alert('请求失败！', '提示', {
            confirmButtonText: '确定',
            type: 'error'
          })
        })
        )
      },

    },

    beforeCreate: function () {
      $.ajax({
        url: './static/ipconfig.json',//url路径
        type: 'GET', //GET
        async: false, //或false,是否异步
        timeout: 5000, //超时时间
        dataType: 'json', //返回的数据格式：
        success: function (data, textStatus, jqXHR) {
          protocal = data.protocal;
          ip = data.ip;
          project = data.project;
          port = data.port;
        },
        error: function (xhr, textStatus) {
          console.log("ipconfig配置失败！");
        }
      })
    },
  }
</script>

<style scoped>
  /*!* 外层布局容器样式 *!*/
  .el-header {
    background-color: #f9fafc;
    color: #333;
    line-height: 40px;
  }

  /deep/ element.style {
    height: 300px;
  }
</style>
