<template>
  <div id="main">
    <el-container>
      <el-header style="text-align: left; font-size: 10px" height="160px">
        <!-- 通用工具栏 -->
        <el-row type="flex">
          <el-button size='mini' icon="el-icon-circle-plus-outline" type="primary" @click="createElineTemplateInit">
            {{$t('common.createBtn')}}
          </el-button>
          <el-button size='mini' icon="el-icon-document" type="primary" @click="copyElineTemplateInit">
            {{$t('common.copyBtn')}}
          </el-button>
          <el-button size='mini' icon="el-icon-edit" type="primary" @click="updateElineTemplateInit">
            {{$t('common.updateBtn')}}
          </el-button>
          <el-button size='mini' icon="el-icon-delete" type="primary" @click="deleteElineTemplateInit">
            {{$t('common.deleteBtn')}}
          </el-button>
        </el-row>
        <!-- 条件查询工具栏 -->
        <el-row :gutter="20">
          <el-col :span="1.5"><label style="font-size: 10px; align-content: right"
                                     :label-width="formLabelWidth">模板名称：</label></el-col>
          <el-col :span="4">
            <el-input size='mini' :placeholder="$t('common.placeholder')" v-model="queryElineTemplateName"
                      clearable></el-input>
          </el-col>
          <el-col :span="1.5"><label style="font-size: 10px" :label-width="formLabelWidth">业务类型：</label></el-col>
          <el-col :span="4">
            <el-select v-model="queryServiceType" size="mini" placeholder="请选择" style="width: 100%" :clearable="true">
              <el-option
                v-for="item in ServiceTypeList"
                :key="item.serviceTypeID"
                :label="item.serviceTypeName"
                :value="item.serviceTypeID">
              </el-option>
            </el-select>
          </el-col>
          <el-col :span="1.5"><label style="font-size: 10px" :label-width="formLabelWidth">保护模式：</label></el-col>
          <el-col :span="4">
            <el-select v-model="queryProtectionMode" size="mini" placeholder="请选择" style="width: 100%"
                       :clearable="true">
              <el-option
                v-for="item in protectionModeList"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-col>
          <!--<el-col :span="1.5"><label style="font-size: 10px" :label-width="formLabelWidth">是否回滚：</label></el-col>-->
          <!--<el-col :span="4">-->
          <!--<el-select v-model="queryReversionFlag" size="mini" placeholder="请选择" style="width: 100%" :clearable="true" @change = "">-->
          <!--<el-option-->
          <!--v-for="item in reversionFlag"-->
          <!--:key="item.value"-->
          <!--:label="item.label"-->
          <!--:value="item.value">-->
          <!--</el-option>-->
          <!--</el-select>-->
          <!--</el-col>-->
        </el-row>
        <el-row :gutter="20">
          <el-col :span="1.5"><label style="font-size: 10px" :label-width="formLabelWidth">vlan类别：</label></el-col>
          <el-col :span="4">
            <el-select v-model="queryEncapsulationType" size="mini" placeholder="请选择" style="width: 100%"
                       :clearable="true">
              <el-option
                v-for="item in encapsulationTypeList"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-col>
          <el-col :span="1.5"><label style="font-size: 10px" :label-width="formLabelWidth">vlan方式：</label></el-col>
          <el-col :span="4">
            <el-select v-model="queryVlanAccess" size="mini" placeholder="请选择" style="width: 100%" :clearable="true">
              <el-option
                v-for="item in vlanAccessList"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-col>
          <el-col :span="1.5"><label style="font-size: 10px" :label-width="formLabelWidth">最高带宽：</label></el-col>
          <el-col :span="4">
            <el-input size='mini' :placeholder="$t('common.placeholder')" v-model="queryLimitedBandwidth"
                      clearable></el-input>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="1.5"><label style="font-size: 10px" :label-width="formLabelWidth">&nbsp;cos-ID：</label>
          </el-col>
          <el-col :span="4">
            <el-select v-model="queryCosId" size="mini" placeholder="请选择" style="width: 100%" :clearable="true">
              <el-option
                v-for="item in cosIdList"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-col>
          <el-col :span="1.5"><label style="font-size: 10px" :label-width="formLabelWidth">策略名称：</label></el-col>
          <el-col :span="4">
            <el-select v-model="queryqosProfile" size="mini" placeholder="请选择" style="width: 100%" :clearable="true">
              <el-option
                v-for="item in CDPProfileCreationList"
                :key="item.profileName"
                :label="item.profileName"
                :value="item.profileName">
              </el-option>
            </el-select>
          </el-col>
          <el-col :span="4">
            <el-button icon="el-icon-search" type="primary" size='mini' @click="queryElineTemplateByCondition"
                       v-loading.fullscreen.lock="fullscreenLoading">{{$t('common.queryBtn')}}
            </el-button>
          </el-col>
        </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="ElineTemplateList"
          highlight-current-row
          @current-change="handleCurrentChange"
          @selection-change="handleSelectionChange">

          <el-table-column
            type="selection"
            width="28">
          </el-table-column>
          <el-table-column
            prop="vpnId"
            label="业务ID"
            v-if="false">
          </el-table-column>
          <!-- 新增一列 ，查看路由视图 -->
          <el-table-column
            fixed
            label="路由视图"
            width="100">
            <template slot-scope="scope">
              <el-button
                style="margin-top:-3.8px"
                @click.native.prevent="handleRouteView(scope.$index, scope.row)"
                type="text"
                size="small">
                点击查看
              </el-button>
            </template>
          </el-table-column>
          <el-table-column
            text-align="left"
            prop="serviceName"
            label="业务名称"
            width="100"
            :show-overflow-tooltip="true">
          </el-table-column>
          <el-table-column
            text-align="left"
            prop="serviceTypeID"
            label="业务类型"
            :formatter="formatServerType"
            :show-overflow-tooltip="true">
          </el-table-column>
          <el-table-column
            prop="protectionMode"
            label="保护模式"
            :formatter="formatProtectionMode"
            width="120"
            :show-overflow-tooltip="true">
          </el-table-column>
          <el-table-column
            prop="reversion"
            label="是否回滚"
            :formatter="formatReversionFlag"
            :show-overflow-tooltip="true">
          </el-table-column>
          <el-table-column
            prop="wtr"
            label="回滚等待时间"
            width="100"
            :show-overflow-tooltip="true">
          </el-table-column>
          <el-table-column
            prop="oamInfo"
            label="oam选项"
            :formatter="formatOamInfo"
            :show-overflow-tooltip="true">
          </el-table-column>
          <el-table-column
            prop="ccmInterval"
            label="ccm间隔时间"
            width="100"
            :show-overflow-tooltip="true">
          </el-table-column>
          <el-table-column
            prop="encapsulationType"
            label="vlan类别"
            width="100"
            :formatter="formatEncapsulationType"
            :show-overflow-tooltip="true">
          </el-table-column>
          <el-table-column
              prop="l2AccessType"
              label="vlan协议"
              width="100"
              :formatter="formatL2AccessType"
              :show-overflow-tooltip="true">
          </el-table-column>
          <el-table-column
            prop="startDeviceId"
            label="业务起点设备"
            width="100"
            :show-overflow-tooltip="true">
          </el-table-column>
          <el-table-column
            prop="startDevicePort"
            label="业务起点设备端口"
            width="120"
            :show-overflow-tooltip="true">
          </el-table-column>
          <el-table-column
            prop="startDeviceId"
            label="业务终点设备"
            width="100"
            :show-overflow-tooltip="true">
          </el-table-column>
          <el-table-column
            prop="startDevicePort"
            label="业务终点设备端口"
            width="120"
            :show-overflow-tooltip="true">
          </el-table-column>
          <el-table-column
            prop="isDualHomed"
            label="是否双归模式"
            width="100"
            :formatter="formatIsDualHomed"
            :show-overflow-tooltip="true">
          </el-table-column>
          <el-table-column
            prop="startDeviceId"
            label="第二个业务终点设备"
            width="140"
            :show-overflow-tooltip="true">
          </el-table-column>
          <el-table-column
            prop="startDevicePort"
            label="第二个业务终点设备端口"
            width="160"
            :show-overflow-tooltip="true">
          </el-table-column>
          <el-table-column
            prop="vlanAccess"
            label="vlan设置方式"
            width="100"
            :formatter="formatVlanAccess"
            :show-overflow-tooltip="true">
          </el-table-column>
          <el-table-column
            prop="vlanRangeStart"
            label="vlan-rang起点"
            width="120"
            :show-overflow-tooltip="true">
          </el-table-column>
          <el-table-column
            prop="vlanRangeEnd"
            label="vlan-rang终点"
            width="120"
            :show-overflow-tooltip="true">
          </el-table-column>
          <el-table-column
            prop="vlanSet"
            label="vlan-set集合"
            width="120"
            :show-overflow-tooltip="true">
          </el-table-column>
          <el-table-column
            prop="cosId"
            label="cos-Id"
            :show-overflow-tooltip="true">
          </el-table-column>
          <el-table-column
            prop="limitedBandwidth"
            label="最高带宽"
            :show-overflow-tooltip="true">
          </el-table-column>
          <el-table-column
            prop="qosProfile"
            label="qos策略名称"
            width="100"
            :show-overflow-tooltip="true">
          </el-table-column>
          <el-table-column
            prop="startTime"
            label="开站时间"
            width="100"
            :show-overflow-tooltip="true">
          </el-table-column>
          <el-table-column
            prop="elineStatus"
            label="业务状态"
            width="100"
            :show-overflow-tooltip="true">
          </el-table-column>
        </el-table>
      </el-main>
    </el-container>

    <!-- 以太网E-Line业务创建对话框 -->
    <el-dialog v-dialogDrag
               style="font-size: 10px;" width='1200px' heigt='700px'
               :title="$t('EthernetELineServiceConfigurationManagement.creatE_Line')"
               :visible.sync="dialog_elineTemplateCreate">
      <el-row>
        <el-form :model="form" inline="true" ref="form" style="margin-bottom: -20px;margin-top:-20px;width:1100px">
          <el-form-item style="margin-bottom: -10px; float:left">
            <el-form-item label="业务ID:" :label-width="formLabelWidth" style="margin-bottom: -10px;margin-top: -10px;">
              <el-input size='mini' :placeholder="$t('common.placeholder')" v-model="form.vpnId"
                        autocomplete="off" style="width:150px"></el-input>
            </el-form-item>
            <el-form-item label="业务名称:" :label-width="formLabelWidth" style="margin-bottom: -10px;margin-top: -10px;">
              <el-input size='mini' :placeholder="$t('common.placeholder')" v-model="form.serviceName"
                        autocomplete="off" style="width:150px"></el-input>
            </el-form-item>
            <el-form-item label="业务类型:" :label-width="formLabelWidth" style="margin-bottom: -10px;margin-top: -10px;">
              <el-select size='mini' v-model="form.serviceTypeID" :placeholder="$t('common.selectOption')"
                         autocomplete="off" style="width:150px" v-on:change="serviceTypeChange">
                <el-option
                  v-for="item in ServiceTypeList"
                  :key="item.serviceTypeID"
                  :label="item.serviceTypeName"
                  :value="item.serviceTypeID">
                </el-option>
              </el-select>
            </el-form-item>
          </el-form-item>
          <el-form-item style="margin-bottom: -10px; float:left">
            <el-form-item label="保护模式:" :label-width="formLabelWidth" style="margin-bottom: -10px;margin-top: -10px;">
              <el-select v-model="form.protectionMode" size="mini" placeholder="请选择" style="width: 150px"
                         :clearable="true" v-on:change="protectionModeCheck">
                <el-option
                  v-for="item in protectionModeList"
                  :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;margin-top: -10px;">
              <el-select size='mini' v-model="form.reversion" :placeholder="$t('common.selectOption')"
                         autocomplete="off" v-on:change="reversionCheck" style="width:150px">
                <el-option
                  v-for="item in reversionFlag"
                  :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;margin-top: -10px;">
              <el-input size='mini' :placeholder="$t('common.placeholder')" v-model="form.wtr" autocomplete="off"
                        :disabled="wtr_input_disable" style="width:150px"></el-input>
            </el-form-item>
          </el-form-item>
          <el-form-item style="margin-bottom: -10px; float:left">
            <el-form-item label="oam选项:" :label-width="formLabelWidth" style="margin-bottom: -10px;margin-top: -10px;">
              <el-select size='mini' v-model="form.oamInfo" :placeholder="$t('common.selectOption')" autocomplete="off"
                         v-on:change="oamInfoCheck" style="width:150px" :disabled="oaminfo_select_disable">
                <el-option
                  v-for="item in oamInfoFlag"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="ccm间隔时间:" :label-width="formLabelWidth"
                          style="margin-bottom: -10px;margin-top: -10px;">
              <el-select v-model="form.ccmInterval" size="mini" placeholder="请选择" style="width: 150px"
                         :disabled="ccmInterval_select_disable" :clearable="true">
                <el-option
                  v-for="item in ccmIntervalList"
                  :key="item.value"
                  :label="item.ccmIntervalTime"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="vlan类别:" :label-width="formLabelWidth" style="margin-bottom: -10px;margin-top: -10px;">
              <el-select size='mini' v-model="form.encapsulationType" :placeholder="$t('common.selectOption')"
                         autocomplete="off" v-on:change="encapsulationTypeCheck" style="width:150px" >
                <el-option
                  v-for="item in encapsulationTypeList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-form-item>
          <el-form-item style="margin-bottom: -10px; float:left">
            <el-form-item label="vlan协议:" :label-width="formLabelWidth" style="margin-bottom: -10px;margin-top: -10px;">
              <el-select size='mini' v-model="form.l2AccessType" :placeholder="$t('common.selectOption')"
                         :disabled="l2AccessType_select_disable" autocomplete="off" style="width:150px">
                <el-option
                  v-for="item in l2AccessTypeList"
                  :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;margin-top: -10px;">
              <el-select size='mini' v-model="form.startDeviceId" :placeholder="$t('common.selectOption')"
                         autocomplete="off" style="width:150px" v-on:change="startDeviceIdChange">
                <el-option
                  v-for="item in startDeviceIdList"
                  :key="item.deviceKey"
                  :label="item.deviceName"
                  :value="item.deviceKey">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="业务起点设备端口:" :label-width="formLabelWidth"
                          style="margin-bottom: -10px;margin-top: -10px;">
              <el-select size='mini' v-model="form.startDeviceIdPort" :placeholder="$t('common.selectOption')"
                         autocomplete="off" style="width:150px">
                <el-option
                  v-for="item in startDeviceIdPortList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-form-item>
          <el-form-item style="margin-bottom: -10px; float:left">
            <el-form-item label="业务终点设备:" :label-width="formLabelWidth" style="margin-bottom: -10px;margin-top: -10px;">
              <el-select size='mini' v-model="form.end1DeviceId" :placeholder="$t('common.selectOption')"
                         autocomplete="off" style="width:150px" v-on:change="end1DeviceIdChange">
                <el-option
                  v-for="item in end1DeviceIdList"
                  :key="item.deviceKey"
                  :label="item.deviceName"
                  :value="item.deviceKey">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="业务终点设备端口:" :label-width="formLabelWidth"
                          style="margin-bottom: -10px;margin-top: -10px;">
              <el-select size='mini' v-model="form.end1DeviceIdPort" :placeholder="$t('common.selectOption')"
                         autocomplete="off" style="width:150px">
                <el-option
                  v-for="item in end1DeviceIdPortList"
                  :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;margin-top: -10px;">
              <el-select size='mini' v-model="form.isDualHomed" :placeholder="$t('common.selectOption')"
                         autocomplete="off" v-on:change="isDualHomedCheck" style="width:150px">
                <el-option
                  v-for="item in isDualHomedList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-form-item>
          <el-form-item style="margin-bottom: -10px; float:left">
            <el-form-item :label="$t('EthernetELineServiceConfigurationManagement.end2DeviceId')+':'"
                          :label-width="formLabelWidth" style="margin-bottom: -10px;margin-top: -10px;">
              <el-select size='mini' v-model="form.end2DeviceId" :placeholder="$t('common.selectOption')"
                         :disabled="end2DeviceIdList_disable" autocomplete="off" style="width:150px" v-on:change="end2DeviceIdChange">
                <el-option
                  v-for="item in end2DeviceIdList"
                  :key="item.deviceKey"
                  :label="item.deviceName"
                  :value="item.deviceKey">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item :label="$t('EthernetELineServiceConfigurationManagement.end2DevicePort')+':'"
                          :label-width="formLabelWidth" style="margin-bottom: -10px;margin-top: -10px;">
              <el-select size='mini' v-model="form.end2DeviceIdPort" :placeholder="$t('common.selectOption')"
                         autocomplete="off" :disabled="end2DeviceIdPortList_disable" style="width:150px">
                <el-option
                  v-for="item in end2DeviceIdPortList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="vlan设置方式:" :label-width="formLabelWidth"
                          style="margin-bottom: -10px;margin-top: -10px;">
              <el-select size='mini' v-model="form.vlanAccess" :placeholder="$t('common.selectOption')"
                         autocomplete="off" style="width:150px" v-on:change="vlanAccessCheck">
                <el-option
                  v-for="item in vlanAccessList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-form-item>
          <el-form-item style="margin-bottom: -10px; float:left">
            <el-form-item label="vlan-rang起点:" :label-width="formLabelWidth"
                          style="margin-bottom: -10px;margin-top: -10px;">
              <el-input size='mini' :placeholder="$t('common.placeholder')" v-model="form.vlanRangeStart"
                        autocomplete="off" style="width:150px" :disabled="vlanRangeStart_input_disable"></el-input>
            </el-form-item>
            <el-form-item label="vlan-rang终点:" :label-width="formLabelWidth"
                          style="margin-bottom: -10px;margin-top: -10px;">
              <el-input size='mini' :placeholder="$t('common.placeholder')" v-model="form.vlanRangeEnd"
                        autocomplete="off" style="width:150px" :disabled="vlanRangeEnd_input_disable"></el-input>
            </el-form-item>
            <el-form-item label="vlan-set集合:" :label-width="formLabelWidth"
                          style="margin-bottom: -10px;margin-top: -10px;">
              <el-input size='mini' :placeholder="$t('common.placeholder')" v-model="form.vlanSet" autocomplete="off"
                        style="width:150px" :disabled="vlanRangeSet_input_disable"></el-input>
            </el-form-item>
          </el-form-item>
          <el-form-item style="margin-bottom: -10px; float:left">
            <el-form-item label="cos-Id:" :label-width="formLabelWidth" style="margin-bottom: -10px;margin-top: -10px;">
              <el-select size='mini' v-model="form.cosId" :placeholder="$t('common.selectOption')" autocomplete="off"
                         style="width:150px">
                <el-option
                  v-for="item in cosIdList"
                  :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;margin-top: -10px;">
              <el-input size='mini' :placeholder="$t('common.placeholder')" v-model="form.limitedBandwidth"
                        autocomplete="off" style="width:150px"></el-input>
            </el-form-item>
            <el-form-item label="qos策略名称:" :label-width="formLabelWidth"
                          style="margin-bottom: -10px;margin-top: -10px;">
              <el-select v-model="form.qosProfile" size="mini" placeholder="请选择" style="width: 150px" :clearable="true">
                <el-option
                  v-for="item in CDPProfileCreationList"
                  :key="item.profileName"
                  :label="item.profileName"
                  :value="item.profileName">
                </el-option>
              </el-select>
            </el-form-item>
          </el-form-item>
          <el-form-item style="margin-bottom: -10px; float:left">
            <el-form-item label="开站时间 :" :label-width="formLabelWidth" style="margin-bottom: -10px;margin-top: -10px;">
              <el-date-picker
                v-model="form.startTime"
                type="datetime"
                size="mini"
                style="width: 150px"
                format="yyyy-MM-dd HH:mm"
                :clearable="false"
                align="center"
                :picker-options="startDatePicker"
                @change="beginDateChange"
                placeholder="选择开始时间">
              </el-date-picker>
            </el-form-item>
          </el-form-item>
        </el-form>
      </el-row>
      <el-row style="margin-bottom: 0px;" slot="footer" class="dialog-footer">
        <el-button size='mini' type="primary" @click="createElineTemplate"
                   v-loading.fullscreen.lock="fullscreenLoading">{{$t("common.createBtn")}}
        </el-button>
        <el-button size='mini' @click="dialog_elineTemplateCreate = false">{{$t("common.cancel")}}</el-button>
      </el-row>
    </el-dialog>
    <!-- 以太网E-Line业务修改对话框 -->
    <el-dialog v-dialogDrag style="font-size: 10px;" width='1200px' heigt='700px' title="以太网E-Line业务修改"
               :visible.sync="dialog_elineTemplateUpdate">
      <el-form :model="form" inline="true" ref="form" style="margin-bottom: -20px;margin-top:-20px;width:1100px">
        <el-form-item style="margin-bottom: -10px; float:left">
          <el-form-item label="业务ID:" :label-width="formLabelWidth" style="margin-bottom: -10px;margin-top: -10px;">
            <el-input size='mini' :placeholder="$t('common.placeholder')" v-model="form.vpnId"
                      autocomplete="off" style="width:150px"></el-input>
          </el-form-item>
          <el-form-item label="业务名称:" :label-width="formLabelWidth" style="margin-bottom: -10px;margin-top: -10px;">
            <el-input size='mini' :placeholder="$t('common.placeholder')" v-model="form.serviceName"
                      autocomplete="off" style="width:150px"></el-input>
          </el-form-item>
          <el-form-item label="业务类型:" :label-width="formLabelWidth" style="margin-bottom: -10px;margin-top: -10px;">
            <el-select size='mini' v-model="form.serviceTypeID" :placeholder="$t('common.selectOption')"
                       autocomplete="off" style="width:150px" v-on:change="serviceTypeChange">
              <el-option
                v-for="item in ServiceTypeList"
                :key="item.serviceTypeID"
                :label="item.serviceTypeName"
                :value="item.serviceTypeID">
              </el-option>
            </el-select>
          </el-form-item>
        </el-form-item>
        <el-form-item style="margin-bottom: -10px; float:left">
          <el-form-item label="保护模式:" :label-width="formLabelWidth" style="margin-bottom: -10px;margin-top: -10px;">
            <el-select v-model="form.protectionMode" size="mini" placeholder="请选择" style="width: 150px"
                       :clearable="true" v-on:change="protectionModeCheck">
              <el-option
                v-for="item in protectionModeList"
                :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;margin-top: -10px;">
            <el-select size='mini' v-model="form.reversion" :placeholder="$t('common.selectOption')"
                       autocomplete="off" v-on:change="reversionCheck" style="width:150px">
              <el-option
                v-for="item in reversionFlag"
                :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;margin-top: -10px;">
            <el-input size='mini' :placeholder="$t('common.placeholder')" v-model="form.wtr" autocomplete="off"
                      :disabled="wtr_input_disable" style="width:150px"></el-input>
          </el-form-item>
        </el-form-item>
        <el-form-item style="margin-bottom: -10px; float:left">
          <el-form-item label="oam选项:" :label-width="formLabelWidth" style="margin-bottom: -10px;margin-top: -10px;">
            <el-select size='mini' v-model="form.oamInfo" :placeholder="$t('common.selectOption')" autocomplete="off"
                       v-on:change="oamInfoCheck" style="width:150px" :disabled="oaminfo_select_disable">
              <el-option
                v-for="item in oamInfoFlag"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="ccm间隔时间:" :label-width="formLabelWidth"
                        style="margin-bottom: -10px;margin-top: -10px;">
            <el-select v-model="form.ccmInterval" size="mini" placeholder="请选择" style="width: 150px"
                       :disabled="ccmInterval_select_disable" :clearable="true">
              <el-option
                v-for="item in ccmIntervalList"
                :key="item.value"
                :label="item.ccmIntervalTime"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="vlan类别:" :label-width="formLabelWidth" style="margin-bottom: -10px;margin-top: -10px;">
            <el-select size='mini' v-model="form.encapsulationType" :placeholder="$t('common.selectOption')"
                       autocomplete="off" v-on:change="encapsulationTypeCheck" style="width:150px" >
              <el-option
                v-for="item in encapsulationTypeList"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
        </el-form-item>
        <el-form-item style="margin-bottom: -10px; float:left">
          <el-form-item label="vlan协议:" :label-width="formLabelWidth" style="margin-bottom: -10px;margin-top: -10px;">
            <el-select size='mini' v-model="form.l2AccessType" :placeholder="$t('common.selectOption')"
                       :disabled="l2AccessType_select_disable" autocomplete="off" style="width:150px">
              <el-option
                v-for="item in l2AccessTypeList"
                :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;margin-top: -10px;">
            <el-select size='mini' v-model="form.startDeviceId" :placeholder="$t('common.selectOption')"
                       autocomplete="off" style="width:150px" v-on:change="startDeviceIdChange">
              <el-option
                v-for="item in startDeviceIdList"
                :key="item.deviceKey"
                :label="item.deviceName"
                :value="item.deviceKey">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="业务起点设备端口:" :label-width="formLabelWidth"
                        style="margin-bottom: -10px;margin-top: -10px;">
            <el-select size='mini' v-model="form.startDeviceIdPort" :placeholder="$t('common.selectOption')"
                       autocomplete="off" style="width:150px">
              <el-option
                v-for="item in startDeviceIdPortList"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
        </el-form-item>
        <el-form-item style="margin-bottom: -10px; float:left">
          <el-form-item label="业务终点设备:" :label-width="formLabelWidth" style="margin-bottom: -10px;margin-top: -10px;">
            <el-select size='mini' v-model="form.end1DeviceId" :placeholder="$t('common.selectOption')"
                       autocomplete="off" style="width:150px" v-on:change="end1DeviceIdChange">
              <el-option
                v-for="item in end1DeviceIdList"
                :key="item.deviceKey"
                :label="item.deviceName"
                :value="item.deviceKey">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="业务终点设备端口:" :label-width="formLabelWidth"
                        style="margin-bottom: -10px;margin-top: -10px;">
            <el-select size='mini' v-model="form.end1DeviceIdPort" :placeholder="$t('common.selectOption')"
                       autocomplete="off" style="width:150px">
              <el-option
                v-for="item in end1DeviceIdPortList"
                :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;margin-top: -10px;">
            <el-select size='mini' v-model="form.isDualHomed" :placeholder="$t('common.selectOption')"
                       autocomplete="off" v-on:change="isDualHomedCheck" style="width:150px">
              <el-option
                v-for="item in isDualHomedList"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
        </el-form-item>
        <el-form-item style="margin-bottom: -10px; float:left">
          <el-form-item :label="$t('EthernetELineServiceConfigurationManagement.end2DeviceId')+':'"
                        :label-width="formLabelWidth" style="margin-bottom: -10px;margin-top: -10px;">
            <el-select size='mini' v-model="form.end2DeviceId" :placeholder="$t('common.selectOption')"
                       autocomplete="off" style="width:150px" v-on:change="end2DeviceIdChange">
              <el-option
                v-for="item in end2DeviceIdList"
                :key="item.deviceKey"
                :label="item.deviceName"
                :value="item.deviceKey">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item :label="$t('EthernetELineServiceConfigurationManagement.end2DevicePort')+':'"
                        :label-width="formLabelWidth" style="margin-bottom: -10px;margin-top: -10px;">
            <el-select size='mini' v-model="form.end2DeviceIdPort" :placeholder="$t('common.selectOption')"
                       autocomplete="off" style="width:150px">
              <el-option
                v-for="item in end2DeviceIdPortList"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="vlan设置方式:" :label-width="formLabelWidth"
                        style="margin-bottom: -10px;margin-top: -10px;">
            <el-select size='mini' v-model="form.vlanAccess" :placeholder="$t('common.selectOption')"
                       autocomplete="off" style="width:150px" v-on:change="vlanAccessCheck">
              <el-option
                v-for="item in vlanAccessList"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
        </el-form-item>
        <el-form-item style="margin-bottom: -10px; float:left">
          <el-form-item label="vlan-rang起点:" :label-width="formLabelWidth"
                        style="margin-bottom: -10px;margin-top: -10px;">
            <el-input size='mini' :placeholder="$t('common.placeholder')" v-model="form.vlanRangeStart"
                      autocomplete="off" style="width:150px" :disabled="vlanRangeStart_input_disable"></el-input>
          </el-form-item>
          <el-form-item label="vlan-rang终点:" :label-width="formLabelWidth"
                        style="margin-bottom: -10px;margin-top: -10px;">
            <el-input size='mini' :placeholder="$t('common.placeholder')" v-model="form.vlanRangeEnd"
                      autocomplete="off" style="width:150px" :disabled="vlanRangeEnd_input_disable"></el-input>
          </el-form-item>
          <el-form-item label="vlan-set集合:" :label-width="formLabelWidth"
                        style="margin-bottom: -10px;margin-top: -10px;">
            <el-input size='mini' :placeholder="$t('common.placeholder')" v-model="form.vlanSet" autocomplete="off"
                      style="width:150px" :disabled="vlanRangeSet_input_disable"></el-input>
          </el-form-item>
        </el-form-item>
        <el-form-item style="margin-bottom: -10px; float:left">
          <el-form-item label="cos-Id:" :label-width="formLabelWidth" style="margin-bottom: -10px;margin-top: -10px;">
            <el-select size='mini' v-model="form.cosId" :placeholder="$t('common.selectOption')" autocomplete="off"
                       style="width:150px">
              <el-option
                v-for="item in cosIdList"
                :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;margin-top: -10px;">
            <el-input size='mini' :placeholder="$t('common.placeholder')" v-model="form.limitedBandwidth"
                      autocomplete="off" style="width:150px"></el-input>
          </el-form-item>
          <el-form-item label="qos策略名称:" :label-width="formLabelWidth"
                        style="margin-bottom: -10px;margin-top: -10px;">
            <el-select v-model="form.qosProfile" size="mini" placeholder="请选择" style="width: 150px" :clearable="true">
              <el-option
                v-for="item in CDPProfileCreationList"
                :key="item.profileName"
                :label="item.profileName"
                :value="item.profileName">
              </el-option>
            </el-select>
          </el-form-item>
        </el-form-item>
        <el-form-item style="margin-bottom: -10px; float:left">
          <el-form-item label="开站时间 :" :label-width="formLabelWidth" style="margin-bottom: -10px;margin-top: -10px;">
            <el-date-picker
              v-model="form.startTime"
              type="datetime"
              size="mini"
              style="width: 150px"
              format="yyyy-MM-dd HH:mm"
              :clearable="false"
              align="center"
              :picker-options="startDatePicker"
              @change="beginDateChange"
              placeholder="选择开始时间">
            </el-date-picker>
          </el-form-item>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size='mini' type="primary" @click="updateElineTemplate"
                   v-loading.fullscreen.lock="fullscreenLoading">{{$t('common.updateBtn')}}
        </el-button>
        <el-button size='mini' @click="dialog_elineTemplateUpdate = false">{{$t("common.cancel")}}</el-button>
      </div>
    </el-dialog>
    <!-- 业务模板复制对话框 -->
    <el-dialog v-dialogDrag style="font-size: 10px;" width='1200px' heigt='700px' title="业务模板复制"
               :visible.sync="dialog_elineTemplateCopy">
      <el-form :model="form" inline="true" ref="form" style="margin-bottom: -20px;margin-top:-20px;width:1100px">
        <el-form-item style="margin-bottom: -10px; float:left">
          <el-form-item label="业务ID:" :label-width="formLabelWidth" style="margin-bottom: -10px;margin-top: -10px;">
            <el-input size='mini' :placeholder="$t('common.placeholder')" v-model="form.vpnId"
                      autocomplete="off" style="width:150px"></el-input>
          </el-form-item>
          <el-form-item label="业务名称:" :label-width="formLabelWidth" style="margin-bottom: -10px;margin-top: -10px;">
            <el-input size='mini' :placeholder="$t('common.placeholder')" v-model="form.serviceName"
                      autocomplete="off" style="width:150px"></el-input>
          </el-form-item>
          <el-form-item label="业务类型:" :label-width="formLabelWidth" style="margin-bottom: -10px;margin-top: -10px;">
            <el-select size='mini' v-model="form.serviceTypeID" :placeholder="$t('common.selectOption')"
                       autocomplete="off" style="width:150px" v-on:change="serviceTypeChange">
              <el-option
                v-for="item in ServiceTypeList"
                :key="item.serviceTypeID"
                :label="item.serviceTypeName"
                :value="item.serviceTypeID">
              </el-option>
            </el-select>
          </el-form-item>
        </el-form-item>
        <el-form-item style="margin-bottom: -10px; float:left">
          <el-form-item label="保护模式:" :label-width="formLabelWidth" style="margin-bottom: -10px;margin-top: -10px;">
            <el-select v-model="form.protectionMode" size="mini" placeholder="请选择" style="width: 150px"
                       :clearable="true" v-on:change="protectionModeCheck">
              <el-option
                v-for="item in protectionModeList"
                :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;margin-top: -10px;">
            <el-select size='mini' v-model="form.reversion" :placeholder="$t('common.selectOption')"
                       autocomplete="off" v-on:change="reversionCheck" style="width:150px">
              <el-option
                v-for="item in reversionFlag"
                :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;margin-top: -10px;">
            <el-input size='mini' :placeholder="$t('common.placeholder')" v-model="form.wtr" autocomplete="off"
                      :disabled="wtr_input_disable" style="width:150px"></el-input>
          </el-form-item>
        </el-form-item>
        <el-form-item style="margin-bottom: -10px; float:left">
          <el-form-item label="oam选项:" :label-width="formLabelWidth" style="margin-bottom: -10px;margin-top: -10px;">
            <el-select size='mini' v-model="form.oamInfo" :placeholder="$t('common.selectOption')" autocomplete="off"
                       v-on:change="oamInfoCheck" style="width:150px" :disabled="oaminfo_select_disable">
              <el-option
                v-for="item in oamInfoFlag"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="ccm间隔时间:" :label-width="formLabelWidth"
                        style="margin-bottom: -10px;margin-top: -10px;">
            <el-select v-model="form.ccmInterval" size="mini" placeholder="请选择" style="width: 150px"
                       :disabled="ccmInterval_select_disable" :clearable="true">
              <el-option
                v-for="item in ccmIntervalList"
                :key="item.value"
                :label="item.ccmIntervalTime"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="vlan类别:" :label-width="formLabelWidth" style="margin-bottom: -10px;margin-top: -10px;">
            <el-select size='mini' v-model="form.encapsulationType" :placeholder="$t('common.selectOption')"
                       autocomplete="off" v-on:change="encapsulationTypeCheck" style="width:150px" >
              <el-option
                v-for="item in encapsulationTypeList"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
        </el-form-item>
        <el-form-item style="margin-bottom: -10px; float:left">
          <el-form-item label="vlan协议:" :label-width="formLabelWidth" style="margin-bottom: -10px;margin-top: -10px;">
            <el-select size='mini' v-model="form.l2AccessType" :placeholder="$t('common.selectOption')"
                       :disabled="l2AccessType_select_disable" autocomplete="off" style="width:150px">
              <el-option
                v-for="item in l2AccessTypeList"
                :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;margin-top: -10px;">
            <el-select size='mini' v-model="form.startDeviceId" :placeholder="$t('common.selectOption')"
                       autocomplete="off" style="width:150px" v-on:change="startDeviceIdChange">
              <el-option
                v-for="item in startDeviceIdList"
                :key="item.deviceKey"
                :label="item.deviceName"
                :value="item.deviceKey">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="业务起点设备端口:" :label-width="formLabelWidth"
                        style="margin-bottom: -10px;margin-top: -10px;">
            <el-select size='mini' v-model="form.startDeviceIdPort" :placeholder="$t('common.selectOption')"
                       autocomplete="off" style="width:150px">
              <el-option
                v-for="item in startDeviceIdPortList"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
        </el-form-item>
        <el-form-item style="margin-bottom: -10px; float:left">
          <el-form-item label="业务终点设备:" :label-width="formLabelWidth" style="margin-bottom: -10px;margin-top: -10px;">
            <el-select size='mini' v-model="form.end1DeviceId" :placeholder="$t('common.selectOption')"
                       autocomplete="off" style="width:150px" v-on:change="end1DeviceIdChange">
              <el-option
                v-for="item in end1DeviceIdList"
                :key="item.deviceKey"
                :label="item.deviceName"
                :value="item.deviceKey">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="业务终点设备端口:" :label-width="formLabelWidth"
                        style="margin-bottom: -10px;margin-top: -10px;">
            <el-select size='mini' v-model="form.end1DeviceIdPort" :placeholder="$t('common.selectOption')"
                       autocomplete="off" style="width:150px">
              <el-option
                v-for="item in end1DeviceIdPortList"
                :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;margin-top: -10px;">
            <el-select size='mini' v-model="form.isDualHomed" :placeholder="$t('common.selectOption')"
                       autocomplete="off" v-on:change="isDualHomedCheck" style="width:150px">
              <el-option
                v-for="item in isDualHomedList"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
        </el-form-item>
        <el-form-item style="margin-bottom: -10px; float:left">
          <el-form-item :label="$t('EthernetELineServiceConfigurationManagement.end2DeviceId')+':'"
                        :label-width="formLabelWidth" style="margin-bottom: -10px;margin-top: -10px;">
            <el-select size='mini' v-model="form.end2DeviceId" :placeholder="$t('common.selectOption')"
                       autocomplete="off" style="width:150px" v-on:change="end2DeviceIdChange">
              <el-option
                v-for="item in end2DeviceIdList"
                :key="item.deviceKey"
                :label="item.deviceName"
                :value="item.deviceKey">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item :label="$t('EthernetELineServiceConfigurationManagement.end2DevicePort')+':'"
                        :label-width="formLabelWidth" style="margin-bottom: -10px;margin-top: -10px;">
            <el-select size='mini' v-model="form.end2DeviceIdPort" :placeholder="$t('common.selectOption')"
                       autocomplete="off" style="width:150px">
              <el-option
                v-for="item in end2DeviceIdPortList"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="vlan设置方式:" :label-width="formLabelWidth"
                        style="margin-bottom: -10px;margin-top: -10px;">
            <el-select size='mini' v-model="form.vlanAccess" :placeholder="$t('common.selectOption')"
                       autocomplete="off" style="width:150px" v-on:change="vlanAccessCheck">
              <el-option
                v-for="item in vlanAccessList"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
        </el-form-item>
        <el-form-item style="margin-bottom: -10px; float:left">
          <el-form-item label="vlan-rang起点:" :label-width="formLabelWidth"
                        style="margin-bottom: -10px;margin-top: -10px;">
            <el-input size='mini' :placeholder="$t('common.placeholder')" v-model="form.vlanRangeStart"
                      autocomplete="off" style="width:150px" :disabled="vlanRangeStart_input_disable"></el-input>
          </el-form-item>
          <el-form-item label="vlan-rang终点:" :label-width="formLabelWidth"
                        style="margin-bottom: -10px;margin-top: -10px;">
            <el-input size='mini' :placeholder="$t('common.placeholder')" v-model="form.vlanRangeEnd"
                      autocomplete="off" style="width:150px" :disabled="vlanRangeEnd_input_disable"></el-input>
          </el-form-item>
          <el-form-item label="vlan-set集合:" :label-width="formLabelWidth"
                        style="margin-bottom: -10px;margin-top: -10px;">
            <el-input size='mini' :placeholder="$t('common.placeholder')" v-model="form.vlanSet" autocomplete="off"
                      style="width:150px" :disabled="vlanRangeSet_input_disable"></el-input>
          </el-form-item>
        </el-form-item>
        <el-form-item style="margin-bottom: -10px; float:left">
          <el-form-item label="cos-Id:" :label-width="formLabelWidth" style="margin-bottom: -10px;margin-top: -10px;">
            <el-select size='mini' v-model="form.cosId" :placeholder="$t('common.selectOption')" autocomplete="off"
                       style="width:150px">
              <el-option
                v-for="item in cosIdList"
                :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;margin-top: -10px;">
            <el-input size='mini' :placeholder="$t('common.placeholder')" v-model="form.limitedBandwidth"
                      autocomplete="off" style="width:150px"></el-input>
          </el-form-item>
          <el-form-item label="qos策略名称:" :label-width="formLabelWidth"
                        style="margin-bottom: -10px;margin-top: -10px;">
            <el-select v-model="form.qosProfile" size="mini" placeholder="请选择" style="width: 150px" :clearable="true">
              <el-option
                v-for="item in CDPProfileCreationList"
                :key="item.profileName"
                :label="item.profileName"
                :value="item.profileName">
              </el-option>
            </el-select>
          </el-form-item>
        </el-form-item>
        <el-form-item style="margin-bottom: -10px; float:left">
          <el-form-item label="开站时间 :" :label-width="formLabelWidth" style="margin-bottom: -10px;margin-top: -10px;">
            <el-date-picker
              v-model="form.startTime"
              type="datetime"
              size="mini"
              style="width: 150px"
              format="yyyy-MM-dd HH:mm"
              :clearable="false"
              align="center"
              :picker-options="startDatePicker"
              @change="beginDateChange"
              placeholder="选择开始时间">
            </el-date-picker>
          </el-form-item>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size='mini' type="primary" @click="copyElineTemplate" v-loading.fullscreen.lock="fullscreenLoading">
          {{$t("common.createBtn")}}
        </el-button>
        <el-button size='mini' @click="dialog_elineTemplateCopy = false">{{$t("common.cancel")}}</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
  import ElRow from "element-ui/packages/row/src/row";
  import ElDialog from "../../../node_modules/element-ui/packages/dialog/src/component.vue";
  let protocal = '';
  let ip = '';
  let project = '';
  let port = '';
  export default {
    components: {
      ElDialog,
      ElRow,
    },
    name: 'EthernetELineServiceConfigurationManagement',
    data: function () {   //存放数据
      return {
        //window.innerHeight:浏览器的可用高度
        tableHeight: window.innerHeight * 0.7,
        fullscreenLoading: false,

        //创建修改复制窗口是否打开
        dialog_elineTemplateCreate: false,
        dialog_elineTemplateUpdate: false,
        dialog_elineTemplateCopy: false,
        formLabelWidth: '180px',

        //业务类型过滤
        ServiceTypeList: [
          {
            serviceTypeID: '0',
            serviceTypeName: 'serviceType1'
          },
          {
            serviceTypeID: '1',
            serviceTypeName: 'serviceType2'
          },
          {
            serviceTypeID: '2',
            serviceTypeName: 'serviceType3'
          }
        ],
        //保护模式过滤
        protectionModeList: [
          {
            value: 0,
            label: 'unprotected'
          },
          {
            value: 1,
            label: 'one2one'
          },
          {
            value: 2,
            label: 'lsp-one2one'
          },
        ],
        //是否回滚过滤
        reversionFlag: [
          {
            value: 0,
            label: '是'
          },
          {
            value: 1,
            label: '否'
          }
        ],
        //oam选项过滤
        oamInfoFlag: [
          {
            value: 0,
            label: '是'
          },
          {
            value: 1,
            label: '否'
          }
        ],
        //vlan设置方式过滤
        vlanAccessList: [
          {
            value: 0,
            label: 'vlan-range'
          },
          {
            value: 1,
            label: 'vlan-set'
          }
        ],
        //vlan类别过滤
        encapsulationTypeList: [
          {
            value: 0,
            label: 'ethernet-type'
          },
          {
            value: 1,
            label: 'vlan-type'
          }
        ],
        //l2AccessType类别过滤
        l2AccessTypeList:[
          {
            value: 0,
            label: "untag"
          },
          {
            value: 1,
            label: "dot1q"
          },
          {
            value: 2,
            label: "qinq"
          },
        ],
        cosIdList: [
          {
            value: '0',
            label: '0'
          },
          {
            value: '1',
            label: '1'
          },
          {
            value: '2',
            label: '2'
          },
          {
            value: '3',
            label: '3'
          },
          {
            value: '4',
            label: '4'
          },
          {
            value: '5',
            label: '5'
          },
          {
            value: '6',
            label: '6'
          },
          {
            value: '7',
            label: '7'
          },
        ],
        //是否默认
        defaultFlagList: [
          {
            value: 1,
            label: '默认'
          },
          {
            value: 0,
            label: '非默认'
          }
        ],
        //qos策略名称下拉框列表绑定
        CDPProfileCreationList: [
          {
            profileName: 'profileName1'
          },
          {
            profileName: 'profileName2'
          }
        ],
        //ccm间隔时间下拉框列表绑定
        ccmIntervalList: [
          {
            ccmIntervalTime: '3.3min',
            value:1
          },
          {
            ccmIntervalTime: '10min',
            value:2
          },
          {
            ccmIntervalTime: '60min',
            value:3
          },
          {
            ccmIntervalTime: '100min',
            value:4
          },
          {
            ccmIntervalTime: '600min',
            value:5
          },
          {
            ccmIntervalTime: '6000min',
            value:6
          }
        ],
        //业务起点设备下拉框列表
        startDeviceIdList: [],
        //业务起点设备端口下拉框列表
        startDeviceIdPortList: [],
        //业务终点设备下拉框列表
        end1DeviceIdList: [],
        //业务终点设备端口下拉框列表
        end1DeviceIdPortList: [],
        //是否双规模式列表
        isDualHomedList:[
          {
            value: 1,
            label: '否'
          },
          {
            value: 0,
            label: '是'
          }
        ],
        //第二个业务终点设备下拉框列表
        end2DeviceIdList: [],
        //第二个业务终点设备端口下拉框列表
        end2DeviceIdPortList: [],
        //业务状态下拉框列表
        elineStatusList: [
          {
            value: "submitted",
            label: 'submitted'
          },
          {
            value: "success",
            label: 'success'
          },
          {
            value: "failure",
            label: 'failure'
          },
        ],
        //获取的eline设备列表（第一个string是子网ID，第二个就是对应的设备）
        elineDeviceList: [],

        //条件查询
        queryElineTemplateName: '',//模板名称
        queryServiceType: '',   //业务类型
        queryProtectionMode: '',//保护模式
        queryEncapsulationType: '',//vlan类别
        queryVlanAccess: '',  //vlan设置方式
        queryCosId: '',  //cosId
        queryLimitedBandwidth: '',//最高带宽
        queryqosProfile: '',  //策略名称
        queryReversionFlag: 1,  //是否回滚


        //弹框中的窗口是否可输入约束
        wtr_input_disable: 'true',
        oaminfo_select_disable: 'true',
        vlanRangeStart_input_disable: 'true',
        vlanRangeEnd_input_disable: 'true',
        vlanRangeSet_input_disable: 'true',
        ccmInterval_select_disable: 'true',
        defaultFlag_select_disable: 'true',
        l2AccessType_select_disable: 'true',    //vlan协议，vlan类别为vlan-type，可选
        end2DeviceIdList_disable: 'true',   //第二个业务终点设备；是否双规模式为true，可选
        end2DeviceIdPortList_disable: 'true',   //第二个业务终点设备端口；是否双规模式为true，可选

        //双向绑定弹出窗口input域
        form: {
          vpnId:"",
          serviceName: "",
          serviceTypeID: "",
          protectionMode: "",
          reversion: "",
          wtr: "",
          oamInfo: "",
          ccmInterval: "",
          encapsulationType: "",
          l2AccessType: "",
          startDeviceId: "",
          startDeviceIdPort: "",
          end1DeviceId: "",
          end1DeviceIdPort: "",
          isDualHomed:"",
          end2DeviceId: "",
          end2DeviceIdPort: "",
          vlanAccess: "",
          vlanRangeStart: "",
          vlanRangeEnd: "",
          vlanSet: "",
          cosId: "",
          limitedBandwidth: "",
          qosProfile: "",
          startTime: "",
          elineStatus: "submitted",
          serviceSubnetID: "",
        },
        //双向绑定展示数据
        ElineTemplateList: [{
          "vpnId": "service-1",
          "serviceName": "service-1",
          "serviceTypeID": "",
          "protectionMode": 0,
          "reversion": 1,
          "wtr": 2,
          "oamInfo": 1,
          "ccmInterval": 1,
          "encapsulationType": 1,
          "l2AccessType": 1,
          "startDeviceId": "of:0000001e080e180b",
          "startDevicePort": 1,
          "end1DeviceId": "of:0000001e080c900c",
          "end1DevicePort": 1,
          "isDualHomed": 1,
          "end2DeviceId": "of:0000001e080d4a06",
          "end2DevicePort": 2,
          "vlanAccess": 0,
          "vlanRangeStart": 2,
          "vlanRangeEnd": 12,
          "vlanSet": "",
          "cosId": 3,
          "limitedBandwidth": 1000,
          "qosProfile": "Default",
          "startTime": "",
          "elineStatus": "submitted",
          "serviceSubnetID": ""
        }],
        //保存当前行数据
        currentRow: null,
        //保存多选行数据
        multipleSelection: [],
        //设备列表
        deviceList: [],

      }
    },
    //vue加载初始化函数，加载数据
    created: function () {
      console.log('业务模板管理界面初始化：')
      this.getAllElineTemplateInit()
      //获取下拉框业务类型信息
      this.getAllServiceType()
      //获取下拉框qos信息
      this.getAllCDPProfileCreation()
    },
    computed: {
      openTab() {
        return this.$store.state.openTab;
      },
      activeIndex: {
        get() {
          return this.$store.state.activeIndex;
        },
        set(val) {
          this.$store.commit('set_active_index', val);
        }
      }
    },

    methods: {

      /******************************************************For Test Route View********************************************************************/
      handleRouteView(index, row) {
        //TODO:1.获取到当前点击行的ID。
        //TODO:2.实例化一个service,调用getRouteViewObject(id)，返回一个该ID的Object,里面带有id,带宽,pathList。
        //TODO:3.实例化一个manager，调用handleRoutePathList(pathList),返回一个带有source/target属性值为deviceObject的routePathList
        //TODO:4.实例化一个manager,调用getRouteDeviceList(),返回一个该pathList中经过的routeDeviceList，
        //TODO: 并且该deviceList中的device加一个字段：deviceRouteType： 0--path起点 | 1--path终点 | 2--workPath经过的设备 | 3--ProPath经过的设备。
        //TODO:5.将routePathList、routeDeviceList通过组件调用传给子组件dialog.
        //TODO:6.实际上这个路由视图显示和折线图有什么区别吗？本质上完全相同，只不过把圆点改成了图片。
        //TODO:7.子组件接收到两个list，先对deviceList进行device的坐标赋值，先画设备，在画链路。（预留按钮，切换主备路径）
        console.log('当前行的ID是：' + row.vpnId);
        this.routeViewDialogShow = true;
      },

      /**----------触发方法------------------------------------------------------*/
      //根据是否回滚限制回滚时间是否可填
      reversionCheck: function () {
        if (this.form.reversion == 1) {
          this.wtr_input_disable = true
          this.form.wtr = ''
        } else {
          this.wtr_input_disable = false
        }
        return
      },

      //根据保护模式处理oaminfo字段
      protectionModeCheck: function () {
        if (this.form.protectionMode == 0) {
          this.form.oamInfo = 1
          this.form.ccmInterval = ''
          this.oaminfo_select_disable = false
          this.ccmInterval_select_disable = true
        } else {
          this.form.oamInfo = 0
          if (this.form.protectionMode == 1) {
            this.form.ccmInterval = 2
          }
          if (this.form.protectionMode == 2) {
            this.form.ccmInterval = 1
          }
          this.oaminfo_select_disable = true
          this.ccmInterval_select_disable = false
        }
        return
      },

      //根据业务类型的改变，获得业务起点设备列表
      serviceTypeChange: function () {
        this.getElineDeviceList();
      },

      //业务起点设备改变，获得对应设备的设备端口(设备端口是以逗号为隔断的string)
      startDeviceIdChange: function () {
        for (let i = 0; i < this.elineDeviceList.length; i++) {
          if (this.elineDeviceList[i].deviceKey === this.form.startDeviceId) {
            this.form.serviceSubnetID = this.elineDeviceList[i].serviceSubnetID;  //在这里把起点设备所属的设备子网当作设备子网ID
            this.startDeviceIdPortList = this.elineDeviceList[i].port.split(',');
            break;
          }
        }
      },

      //业务终点设备改变，获得对应设备的设备端口(设备端口是以逗号为隔断的string)
      end1DeviceIdChange: function () {
        for (let i = 0; i < this.elineDeviceList.length; i++) {
          if (this.elineDeviceList[i].deviceKey === this.form.end1DeviceId) {
            this.end1DeviceIdPortList = this.elineDeviceList[i].port.split(',');
            break;
          }
        }
      },

      //双规模式下，第二个业务终点设备改变，获得对应设备的设备端口(设备端口是以逗号为隔断的string)
      end2DeviceIdChange: function () {
        for (let i = 0; i < this.elineDeviceList.length; i++) {
          if (this.elineDeviceList[i].deviceKey === this.form.end2DeviceId) {
            this.end2DeviceIdPortList = this.elineDeviceList[i].port.split(',');
            break;
          }
        }
      },

      //根据vlan设置方式修改start-range、endrange、vlan-set是否可disable
      vlanAccessCheck: function () {
        if (this.form.vlanAccess == 0) {
          this.form.vlanSet = ''
          this.vlanRangeStart_input_disable = false
          this.vlanRangeEnd_input_disable = false
          this.vlanRangeSet_input_disable = true
        } else {
          this.form.vlanRangeStart = ''
          this.form.vlanRangeEnd = ''
          this.vlanRangeStart_input_disable = true
          this.vlanRangeEnd_input_disable = true
          this.vlanRangeSet_input_disable = false
        }
        return
      },

      //根据vlan类别，确定vlan协议是否可选，encapsulationType为vlan-tye时可选
      encapsulationTypeCheck:function () {
        if(this.form.encapsulationType === 1){    //encapsulationType为vlan-tye
          this.l2AccessType_select_disable = false;
        }else{
          this.l2AccessType_select_disable = true;
        }
      },

      //根据oam选项设置ccm间隔时间
      oamInfoCheck: function () {
        if (this.form.oamInfo == 1) {
          this.ccmInterval_select_disable = true
        } else {
          this.ccmInterval_select_disable = false
          this.form.ccmInterval = ''
        }
      },

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

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

      /**
       * @Description  ：是否双规模式触发第二的双规模式是否
       */
      isDualHomedCheck:function () {
        if(this.form.isDualHomed === 1){
          this.end2DeviceIdList_disable = true;
          this.end2DeviceIdPortList_disable = true;
        }else{
          this.end2DeviceIdList_disable = false;
          this.end2DeviceIdPortList_disable = false;
        }
      },

      /**----------过滤方法------------------------------------------------------*/

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

      /**
       * @Description  ：保护模式过滤
       */
      formatProtectionMode: function (row, column) {
        for (var i = 0; i < this.protectionModeList.length; i++) {
          if (this.protectionModeList[i]['value'] == row.protectionMode) {
            return this.protectionModeList[i]['label']
            break;
          }
        }
      },

      /**
       * @Description  ：是否回滚过滤
       */
      formatReversionFlag: function (row, column) {
        for (var i = 0; i < this.reversionFlag.length; i++) {
          if (this.reversionFlag[i]['value'] == row.reversion) {
            return this.reversionFlag[i]['label']
            break;
          }
        }
      },
      /**
       * @Description  ：oamInfo选项过滤
       */
      formatOamInfo: function (row, column) {
        for (var i = 0; i < this.oamInfoFlag.length; i++) {
          if (this.oamInfoFlag[i]['value'] == row.oamInfo) {
            return this.oamInfoFlag[i]['label']
            break;
          }
        }
      },

      /**
       * @Description  ：vlan设置方式过滤
       */
      formatVlanAccess: function (row, column) {
        for (var i = 0; i < this.vlanAccessList.length; i++) {
          if (this.vlanAccessList[i]['value'] == row.vlanAccess) {
            return this.vlanAccessList[i]['label']
            break;
          }
        }
      },

      /**
       * @Description  ：vlan类别过滤
       */
      formatEncapsulationType: function (row, column) {
        for (var i = 0; i < this.encapsulationTypeList.length; i++) {
          if (this.encapsulationTypeList[i]['value'] == row.encapsulationType) {
            return this.encapsulationTypeList[i]['label']
            break;
          }
        }
      },

      /**
       * @Description  ：vlan协议过滤
       */
      formatL2AccessType:function (row, column) {
        for (let i = 0; i < this.l2AccessTypeList.length; i++) {
          if (this.l2AccessTypeList[i]['value'] === row.l2AccessType) {
            return this.l2AccessTypeList[i]['label'];
            break;
          }
        }
      },

      /**
       * @Description  ：是否为双规模式选项过滤
       */
      formatIsDualHomed:function (row, column) {
        for (let i = 0; i < this.isDualHomedList.length; i++) {
          if (this.isDualHomedList[i]['value'] === row.isDualHomed) {
            return this.isDualHomedList[i]['label'];
            break;
          }
        }
      },


      /**----------获取处理数据方法------------------------------------------------------*/

      /***
       * @Description  : 获取所有设备列表
       * @author       : lxy
       * @date         : 2018/12/24 11:29
       */
      getAllDevice: function () {
        this.$http.get(protocal + ip + port + project + 'cxf/nms/device').then(result => {
          if (result.body.result) {
            // 成功了！
            this.optionsDeviceName = result.body.returnValue;
            this.deviceList = result.body.returnValue;
          } else {
            // 失败了
            this.$message.error('Error ' + result.body.faultCode + ':' + result.body.faultCause)
          }
        })
      },

      /**
       * @Description  ：获取下拉框所有业务类型消息（已调通）
       * @date         : 2019/03/19 15:20
       */
      getAllServiceType: function () {
        console.log('获取全部业务类型信息：')
        this.$http.get(protocal + ip + port + project + 'cxf/nms/serviceType').then(result => {
          console.log(result.body)
          if (result.body.result) {
            // 成功了！
            this.ServiceTypeList = result.body.returnValue
            console.log(this.ServiceTypeList)
          } else {
            // 失败了
            this.$message.error('Error ' + result.body.faultCode + ':' + result.body.faultCause);
          }
        })
      },

      /**
       * @Description  ：获取下拉框所有qosfile消息（已调通）
       * @date         : 2019/03/19 16:56
       */
      getAllCDPProfileCreation: function () {
        console.log('获取全部qosfile信息：')
        this.$http.get(protocal + ip + port + project + 'cxf/nms/qos').then(result => {
          console.log(result.body)
          if (result.body.result) {
            // 成功了！
            this.CDPProfileCreationList = result.body.returnValue
          } else {
            // 失败了
            this.$message.error('Error ' + result.body.faultCode + ':' + result.body.faultCause);
          }
        })
      },

      /**
       * @Description  ：获取设备列表（第一个string是子网ID，第二个就是对应的设备拿的是deviceKey,port）
       * @date         : 2019/03/19 16:56
       */
      getElineDeviceList: function () {
        this.elineDeviceList = [];
        this.$http.put(protocal + ip + port + project + 'cxf/nms/eline/getList' + this.form.serviceTypeID).then(result => {
          if (result.body.result) {
            // 成功了！
            this.elineDeviceList = result.body.returnValue
          } else {
            // 失败了
            this.$message.error('Error ' + result.body.faultCode + ':' + result.body.faultCause);
          }
          this.handleElineDeviceList();
        });
      },

      /**
       * @Description  ：处理设备列表的信息
       * @date         : 2019/03/19 16:56
       */
      handleElineDeviceList: function () {
        this.startDeviceIdList = [];
        this.end1DeviceIdList = [];
        this.end2DeviceIdList = [];
        for (let i = 0; i < this.elineDeviceList.length; i++) {  //遍历设备列表
          let elineDevice1 = this.elineDeviceList[i].value;
          elineDevice1.deviceName = this.handleDeviceKeys(this.elineDeviceList[i].value.deviceKey);
          this.startDeviceIdList.push(elineDevice1);
          this.end1DeviceIdList.push(elineDevice1);
          this.end2DeviceIdList.push(elineDevice1);
        }
      },

      /***
       * @Description  : 设备名称处理
       * @author       : zf
       * @date         : 2018/12/24 16:07
       */
      handleDeviceKeys: function (deviceKey) {
        //获取设备列表
        this.$http.get(protocal + ip + port + project + 'cxf/nms/device').then(result => {
          if (result.body.result) {
            // 成功了！
            this.deviceList = result.body.returnValue;
          } else {
            // 失败了
            this.$message.error('Error ' + result.body.faultCode + ':' + result.body.faultCause)
          }
        });
//        let flag = 0;//标记是否查到，0未查到，1查到
        for (let i = 0; i < this.deviceList.length; i++) {
          if (deviceList[i].deviceKey === deviceKey) {
            return deviceList[i].deviceName;
          }
        }
        return deviceKey;
      },

      /**
       * @Description  ：获取业务模板信息
       * @date         : 2019/03/19 15:22
       */
      getAllElineTemplateInit: 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/eline').then(result => {
          console.log(result.body);
          if (result.body.result) {
            // 成功了！
            this.ElineTemplateList = result.body.returnValue;
            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
       * @date         : 2019/03/19 15:24
       */
      getAllElineTemplate: function (vue) {
        console.log('获取全部服务器信息：')
        vue.$http.get(protocal + ip + port + project + 'cxf/nms/eline/').then(result => {
          console.log(result.body)
          if (result.body.result) {
            // 成功了！
            vue.ElineTemplateList = result.body.returnValue
          } else {
            // 失败了
            vue.$message.error('Error ' + result.body.faultCode + ':' + result.body.faultCause);
          }
        })
      },

      /**----------业务处理方法------------------------------------------------------*/

      /**
       * @Description  ：创建业务模板初始化
       * @date         : 2019/03/19 15:54
       */
      createElineTemplateInit: function () {
        this.wtr_input_disable = false
        this.oaminfo_select_disable = false
        this.vlanRangeStart_input_disable = false
        this.vlanRangeEnd_input_disable = false
        this.vlanRangeSet_input_disable = false
        this.ccmInterval_select_disable = false
        this.defaultFlag_select_disable = false
        this.l2AccessType_select_disable = false;

        this.form.vpnId = '';
        this.form.serviceName = '';
        this.form.serviceTypeID = '';
        this.form.protectionMode = '';
        this.form.reversion = '';
        this.form.wtr = '';
        this.form.oamInfo = '';
        this.form.ccmInterval = '';
        this.form.encapsulationType = '';
        this.form.l2AccessType = '';
        this.form.startDeviceId = '';
        this.form.startDeviceIdPort = '';
        this.form.end1DeviceId = '';
        this.form.end1DeviceIdPort = '';
        this.form.isDualHomed = 1;
        this.form.end2DeviceId = '';
        this.form.end2DeviceIdPort = '';
        this.form.vlanAccess = '';
        this.form.vlanRangeStart = '';
        this.form.vlanRangeEnd = '';
        this.form.vlanSet = '';
        this.form.cosId = '';
        this.form.limitedBandwidth = '';
        this.form.qosProfile = '';
        this.form.startTime = '';
        this.form.elineStatus = 'submitted';
        this.form.serviceSubnetID = '';
        this.dialog_elineTemplateCreate = true;
      },

      /**
       * @Description  ：创建业务模板
       * @date         : 2019/03/19 15:59
       */
      createElineTemplate: function () {
        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/eline', {
          vpnId: this.form.vpnId,
          serviceName: this.form.serviceName,
          serviceTypeID: this.form.serviceTypeID,
          protectionMode: this.form.protectionMode,
          reversion: this.form.reversion,
          wtr: this.form.wtr,

          oamInfo: this.form.oamInfo,
          ccmInterval: this.form.ccmInterval,
          encapsulationType: this.form.encapsulationType,
          l2AccessType: this.form.l2AccessType,
          startDeviceId: this.form.startDeviceId,
          startDevicePort: this.form.startDeviceIdPort,
          end1DeviceId: this.form.end1DeviceId,
          end1DevicePort: this.form.end1DeviceIdPort,
          isDualHomed:this.form.isDualHomed,
          end2DeviceId: this.form.end2DeviceId,
          end2DevicePort: this.form.end2DeviceIdPort,

          vlanAccess: this.form.vlanAccess,
          vlanRangeStart: this.form.vlanRangeStart,
          vlanRangeEnd: this.form.vlanRangeEnd,
          vlanSet: this.form.vlanSet,
          cosId: this.form.cosId,
          limitedBandwidth: this.form.limitedBandwidth,
          qosProfile: this.form.qosProfile,
          startTime: this.form.startTime,
          elineStatus: this.form.elineStatus,

          serviceSubnetID: '',
        }, {'Content-Type': 'application/json', 'Encoding': 'utf-8'}).then(result => {
          console.log(result.body);
          if (result.body.result) {
            // 成功了！
            //重新刷新表格
            this.$options.methods.getAllElineTemplate(this);
            this.$alert('添加业务模板信息成功！', '提示', {
              confirmButtonText: '确定',
              type: 'success'
            });
            loading.close();
            this.dialog_elineTemplateCreate = 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  ：修改业务模板信息初始化
       * @date         : 2019/03/19 16:03
       */
      updateElineTemplateInit: 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.currentRow = this.multipleSelection[0];

          this.wtr_input_disable = false
          this.vlanRangeStart_input_disable = false
          this.vlanRangeEnd_input_disable = false
          this.vlanRangeSet_input_disable = false
          this.oaminfo_select_disable = false
          this.ccmInterval_select_disable = false;
          this.defaultFlag_select_disable = false;
          this.l2AccessType_select_disable = false;

          //根据vlan设置方式设置range、set字段是否变灰
          if (this.currentRow.vlanAccess == 0) {
            this.vlanRangeSet_input_disable = true
          } else {
            this.vlanRangeStart_input_disable = true
            this.vlanRangeEnd_input_disable = true
          }
          //根据是否回滚设置回滚时间字段是否变灰
          if (this.currentRow.reversion == 1) {
            this.wtr_input_disable = true
          }
          //根据保护模式设置oam是否可选
          if (this.currentRow.protectionMode != 0) {
            this.oaminfo_select_disable = true
          }
          //根据ocm选项设置ccm间隔时间
          if (this.currentRow.oamInfo == 1) {
            this.ccmInterval_select_disable = true
          }

          this.form.vpnId = this.currentRow.vpnId;
          this.form.serviceName = this.currentRow.serviceName;
          this.form.serviceTypeID = this.currentRow.serviceTypeID;
          this.form.protectionMode = this.currentRow.protectionMode;
          this.form.reversion = this.currentRow.reversion;
          this.form.wtr = this.currentRow.wtr;
          this.form.oamInfo = this.currentRow.oamInfo;
          this.form.ccmInterval = this.currentRow.ccmInterval;
          this.form.encapsulationType = this.currentRow.encapsulationType;
          this.form.l2AccessType = this.currentRow.l2AccessType;
          this.form.startDeviceId = this.currentRow.startDeviceId;
          this.form.startDeviceIdPort = this.currentRow.startDeviceIdPort;
          this.form.end1DeviceId = this.currentRow.end1DeviceId;
          this.form.end1DeviceIdPort = this.currentRow.end1DeviceIdPort;
          this.form.isDualHomed = this.currentRow.isDualHomed;
          this.form.end2DeviceId = this.currentRow.end2DeviceId;
          this.form.end2DeviceIdPort = this.currentRow.end2DeviceIdPort;
          this.form.vlanAccess = this.currentRow.vlanAccess;
          this.form.vlanRangeStart = this.currentRow.vlanRangeStart;
          this.form.vlanRangeEnd = this.currentRow.vlanRangeEnd;
          this.form.vlanSet = this.currentRow.vlanSet;
          this.form.cosId = this.currentRow.cosId;
          this.form.limitedBandwidth = this.currentRow.limitedBandwidth;
          this.form.qosProfile = this.currentRow.qosProfile;
          this.form.startTime = this.currentRow.startTime;
          this.form.elineStatus = this.currentRow.elineStatus;
          this.dialog_elineTemplateUpdate = true;
        }
      },

      /**
       * @Description  ：修改业务模板信息
       * @date         : 2019/03/19 16:30
       */
      updateElineTemplate: function () {
        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/eline/', {
          vpnId: this.currentRow.vpnId,
          serviceName: this.form.serviceName,
          serviceTypeID: this.form.serviceTypeID,
          protectionMode: this.form.protectionMode,
          reversion: this.form.reversion,
          wtr: this.form.wtr,

          oamInfo: this.form.oamInfo,
          ccmInterval: this.form.ccmInterval,
          encapsulationType: this.form.encapsulationType,
          l2AccessType: this.form.l2AccessType,

          startDeviceId: this.form.startDeviceId,
          startDeviceIdPort: this.form.startDeviceIdPort,
          end1DeviceId: this.form.end1DeviceId,
          end1DeviceIdPort: this.form.end1DeviceIdPort,
          isDualHomed: this.form.isDualHomed,
          end2DeviceId: this.form.end2DeviceId,
          end2DeviceIdPort: this.form.end2DeviceIdPort,

          vlanAccess: this.form.vlanAccess,
          vlanRangeStart: this.form.vlanRangeStart,

          vlanRangeEnd: this.form.vlanRangeEnd,
          vlanSet: this.form.vlanSet,
          cosId: this.form.cosId,
          limitedBandwidth: this.form.limitedBandwidth,
          qosProfile: this.form.qosProfile,
          startTime: this.form.startTime,
          elineStatus: this.form.elineStatus,

        }, {'Content-Type': 'application/json', 'Encoding': 'utf-8'}).then(result => {
          console.log(result.body)
          if (result.body.result) {
            // 成功了！
            //重新刷新表格
            this.$options.methods.getAllElineTemplate(this);
            this.$alert('修改业务模板信息成功！', '提示', {
              confirmButtonText: '确定',
              type: 'success'
            })
            loading.close();
            this.dialog_elineTemplateUpdate = 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  ：复制业务模板信息初始化
       * @date         : 2019/03/19 16:31
       */
      copyElineTemplateInit: 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.currentRow = this.multipleSelection[0];

          this.wtr_input_disable = false;
          this.vlanRangeStart_input_disable = false;
          this.vlanRangeEnd_input_disable = false;
          this.vlanRangeSet_input_disable = false;
          this.oaminfo_select_disable = false;
          this.ccmInterval_select_disable = false;
          this.defaultFlag_select_disable = false;
          this.l2AccessType_select_disable = false;

          //根据vlan设置方式设置range、set字段是否变灰
          if (this.currentRow.vlanAccess == 0) {
            this.vlanRangeSet_input_disable = true
          } else {
            this.vlanRangeStart_input_disable = true
            this.vlanRangeEnd_input_disable = true
          }
          //根据是否回滚设置回滚时间字段是否变灰
          if (this.currentRow.reversion == 1) {
            this.wtr_input_disable = true
          }
          //根据保护模式设置oam是否可选
          if (this.currentRow.protectionMode != 0) {
            this.oaminfo_select_disable = true
          }
          //根据ocm选项设置ccm间隔时间
          if (this.currentRow.oamInfo == 1) {
            this.ccmInterval_select_disable = true
          }

          this.form.vpnId = this.currentRow.vpnId;
          this.form.serviceName = this.currentRow.serviceName;
          this.form.serviceTypeID = this.currentRow.serviceTypeID;
          this.form.protectionMode = this.currentRow.protectionMode;
          this.form.reversion = this.currentRow.reversion;
          this.form.wtr = this.currentRow.wtr;
          this.form.oamInfo = this.currentRow.oamInfo;
          this.form.ccmInterval = this.currentRow.ccmInterval;
          this.form.encapsulationType = this.currentRow.encapsulationType;
          this.form.l2AccessType = this.currentRow.l2AccessType;
          this.form.startDeviceId = this.currentRow.startDeviceId;
          this.form.startDeviceIdPort = this.currentRow.startDeviceIdPort;
          this.form.end1DeviceId = this.currentRow.end1DeviceId;
          this.form.end1DeviceIdPort = this.currentRow.end1DeviceIdPort;
          this.form.isDualHomed = this.currentRow.isDualHomed;
          this.form.end2DeviceId = this.currentRow.end2DeviceId;
          this.form.end2DeviceIdPort = this.currentRow.end2DeviceIdPort;
          this.form.vlanAccess = this.currentRow.vlanAccess;
          this.form.vlanRangeStart = this.currentRow.vlanRangeStart;
          this.form.vlanRangeEnd = this.currentRow.vlanRangeEnd;
          this.form.vlanSet = this.currentRow.vlanSet;
          this.form.cosId = this.currentRow.cosId;
          this.form.limitedBandwidth = this.currentRow.limitedBandwidth;
          this.form.qosProfile = this.currentRow.qosProfile;
          this.form.startTime = this.currentRow.startTime;
          this.form.elineStatus = this.currentRow.elineStatus;
          this.dialog_elineTemplateCopy = true;
        }
      },

      /**
       * @Description  ：复制业务模板
       * @date         : 2019/03/19 16:33
       */
      copyElineTemplate: function () {
        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/elineTemplate/', {
          vpnId: this.currentRow.vpnId,
          serviceName: this.form.serviceName,
          serviceTypeID: this.form.serviceTypeID,
          protectionMode: this.form.protectionMode,
          reversion: this.form.reversion,
          wtr: this.form.wtr,

          oamInfo: this.form.oamInfo,
          ccmInterval: this.form.ccmInterval,
          encapsulationType: this.form.encapsulationType,

          startDeviceId: this.form.startDeviceId,
          startDeviceIdPort: this.form.startDeviceIdPort,
          end1DeviceId: this.form.end1DeviceId,
          end1DeviceIdPort: this.form.end1DeviceIdPort,
          end2DeviceId: this.form.end2DeviceId,
          end2DeviceIdPort: this.form.end2DeviceIdPort,

          vlanAccess: this.form.vlanAccess,
          vlanRangeStart: this.form.vlanRangeStart,
          vlanRangeEnd: this.form.vlanRangeEnd,
          vlanSet: this.form.vlanSet,
          cosId: this.form.cosId,
          limitedBandwidth: this.form.limitedBandwidth,
          qosProfile: this.form.qosProfile,
          startTime: this.form.startTime,
          elineStatus: this.form.elineStatus,
        }, {'Content-Type': 'application/json', 'Encoding': 'utf-8'}).then(result => {
          console.log(result.body)
          if (result.body.result) {
            // 成功了！
            //重新刷新表格
            this.$options.methods.getAllElineTemplate(this);
            this.$alert('创建业务模板信息成功！', '提示', {
              confirmButtonText: '确定',
              type: 'success'
            })
            loading.close();
            this.dialog_elineTemplateCopy = 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  ：删除业务模板信息初始化（支持批量）
       * @date         : 2019/03/19 16:36
       */
      deleteElineTemplateInit: function () {
        if (this.multipleSelection.length == 0) {
          this.$alert('请至少选择一条信息进行删除！', '提示', {
            confirmButtonText: '确定',
            type: 'warning'
          })
          return;
        } else {
          this.$confirm('是否确定删除记录?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            this.$options.methods.deleteElineTemplate(this);
          });
        }
      },

      /**
       * @Description  ：删除服务器信息
       * @date         : 2019/03/19 16:37
       */
      deleteElineTemplate: 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("批量业务模板信息：");
        //获取多条删除记录的Key值
        var delList = new Array();
        for (var i = 0; i < vue.multipleSelection.length; i++) {
          delList[i] = vue.multipleSelection[i]['vpnId'];
        }
        //发送请求
        vue.$http.delete(protocal + ip + port + project + 'cxf/nms/eline/', {body: delList}, {
          'Content-Type': 'application/json',
          'Encoding': 'utf-8'
        }).then(result => {
          console.log(result.body)
          if (result.body.result) {
            // 成功了！
            //重新刷新表格
            vue.$options.methods.getAllElineTemplate(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'
          })
        }))
      },

      /**
       * @Description  ：条件查询
       * @date         : 2019/03/19 17:06
       */
      queryElineTemplateByCondition: function () {
        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('业务模板信息按条件查询：')


        if (this.queryElineTemplateName == '' && this.queryServiceType == '' && (parseInt(this.queryProtectionMode).toString() == "NaN") &&
          parseInt(this.queryEncapsulationType).toString() == "NaN" && parseInt(this.queryVlanAccess).toString() == "NaN" && this.queryCosId == ''
          && this.queryLimitedBandwidth == '' && this.queryqosProfile == '') {
          //所有查询条件为空点击查询--》重新刷新表格
          this.$options.methods.getAllElineTemplate(this);
          loading.close();
          return;
        }
        var selectList = new Array();
        if (this.queryElineTemplateName != '') {
          selectList.push({
            quaryAttribute: 'serviceName',
            compareSymbol: "like",
            compareValue: this.queryElineTemplateName,
          })
        }
        if (this.queryServiceType != '') {
          selectList.push({
            quaryAttribute: 'serviceTypeID',
            compareSymbol: "==",
            compareValue: this.queryServiceType,
          })
        }
        if (parseInt(this.queryProtectionMode).toString() != "NaN") {
          selectList.push({
            quaryAttribute: 'protectionMode',
            compareSymbol: "==",
            compareValue: this.queryProtectionMode,
          })
        }
        if (parseInt(this.queryEncapsulationType).toString() != "NaN") {
          selectList.push({
            quaryAttribute: 'encapsulationType',
            compareSymbol: "==",
            compareValue: this.queryEncapsulationType,
          })
        }
        if (parseInt(this.queryVlanAccess).toString() != "NaN") {
          selectList.push({
            quaryAttribute: 'vlanAccess',
            compareSymbol: "==",
            compareValue: this.queryVlanAccess,
          })
        }
        if (this.queryCosId != '') {
          selectList.push({
            quaryAttribute: 'cosId',
            compareSymbol: "==",
            compareValue: this.queryCosId,
          })
        }
        if (this.queryLimitedBandwidth != '') {
          selectList.push({
            quaryAttribute: 'limitedBandwidth',
            compareSymbol: "==",
            compareValue: this.queryLimitedBandwidth,
          })
        }
        if (this.queryqosProfile != '') {
          selectList.push({
            quaryAttribute: 'qosProfile',
            compareSymbol: "==",
            compareValue: this.queryqosProfile,
          })
        }
        console.log(selectList)
        //按条件查询
        this.$http.put(protocal + ip + port + project + 'cxf/nms/eline/queryterms/', selectList
          , {'Content-Type': 'application/json', 'Encoding': 'utf-8'}).then(result => {
          console.log(result.body)
          if (result.body.result) {
            // 成功了！
            this.ElineTemplateList = result.body.returnValue
            if (this.ElineTemplateList.length == 0) {
              this.$message({
                type: 'warning',
                message: '无符合条件查询数据！ ',
                duration: 10000,
                showClose: true,
              })
            } else {
              this.$message({
                type: 'success',
                message: '查询成功！ ',
                duration: 10000,
                showClose: true,
              })
            }
            loading.close();
          } else {
            // 失败了
            this.$message.error('Error ' + result.body.faultCode + ':' + result.body.faultCause);
            loading.close();
          }
          loading.close();
        }, (result => {
          loading.close();
          this.$message.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;
  }
</style>
