<template>
  <div id="main" style="width: 100%">
    <el-container>
      <el-header style="text-align: left; font-size: 10px" height="70px" >
        <el-row type="flex">
          <el-button size = 'mini' icon="el-icon-upload2" type="primary" @click="importToExcelInit">{{$t("common.importBtn")}}</el-button>
          <el-button size = 'mini' icon="el-icon-download" type="primary" @click="exportToExcelInit" v-loading.fullscreen.lock="fullscreenLoading">{{$t("common.exportBtn")}}</el-button>
          <el-button size = 'mini' icon="el-icon-circle-plus-outline"  type="primary" @click="createSubnetInit">{{$t("common.createBtn")}}</el-button>
          <el-button size = 'mini' icon="el-icon-document" type="primary" @click="copySubnetInit">{{$t("common.copyBtn")}}</el-button>
          <el-button size = 'mini' icon="el-icon-edit" type="primary" @click="updateSubnetInit">{{$t("common.updateBtn")}}</el-button>
          <el-button size = 'mini' icon="el-icon-delete" type="primary" @click="deleteSubnetInit">{{$t("common.deleteBtn")}}</el-button>
        </el-row>
        <el-row :gutter="10" type="flex">
          <label style="font-size: 10px" >{{ $t('SubnetConfigurationManagement.subnetName') }}:</label>
          <el-input width="200" size = 'mini' :placeholder="$t('common.placeholder')" v-model="querySubnetNameInput" clearable style="margin-left: 10px;"></el-input>
          <label style="font-size: 10px;margin-left: 10px;">{{ $t('SubnetConfigurationManagement.domain') }}:</label>
          <el-input size = 'mini' :placeholder="$t('common.placeholder')"  v-model="queryDomainInput" clearable style="margin-left: 10px;"></el-input>
          <el-col :span="4"><el-button icon="el-icon-search"  type="primary" size = 'mini' @click="querySubnetByCondition" v-loading.fullscreen.lock="fullscreenLoading">{{ $t("common.queryBtn")}}</el-button></el-col>
          <!--<el-col :span="1.5"><label v-text="querySubnetName" style="font-size: 10px" ></label></el-col>-->
          <!--<el-col :span="2"><el-input size = 'mini' :placeholder="$t('common.placeholder')" v-model="querySubnetNameInput" clearable></el-input></el-col>-->
          <!--<el-col :span="1.5"><label v-text="queryDomain" style="font-size: 10px" ></label></el-col>-->
          <!--<el-col :span="3"><el-input size = 'mini' :placeholder="$t('common.placeholder')"  v-model="queryDomainInput" clearable></el-input></el-col>-->
          <!--<el-col :span="4"><el-button icon="el-icon-search"  type="primary" size = 'mini' @click="querySubnetByCondition">{{ querySubnetBtn}}</el-button></el-col>-->
        </el-row>
      </el-header>

      <el-main>
        <el-table
          :empty-text="$t('common.noData')"
          tooltip-effect="dark"
          :row-style="rowStyleClass"
          :cell-style="cellStyleClass"
          ref="singleTable"
          :data="subnetList"
          style="width: 100%"
          stripe
          :height="tableHeight"
          :max-height="tableHeight"
          :header-cell-style="{height:'15px', fontSize:'10px', color:'#595959', background:'#EBEEF5'}"
          :header-row-style="{height:'22px'}"
          @selection-change="handleSelectionChange">
          <el-table-column
            type="selection"
            width="28">
          </el-table-column>
          <el-table-column
            prop="subnetKey"
            v-if="false"
            :label="$t('SubnetConfigurationManagement.subnetID')">
          </el-table-column>
          <el-table-column
            prop="subnetName"
            width="400"
            :label="$t('SubnetConfigurationManagement.subnetName')"
            :show-overflow-tooltip="true">
          </el-table-column>
          <el-table-column
            prop="domain"
            :label="$t('SubnetConfigurationManagement.domain')"
            :show-overflow-tooltip="true">
          </el-table-column>
          <el-table-column
            width="200"
            :label="$t('common.look')">
            <template slot-scope="scope">
              <el-row type="flex" justify="left">
                <el-button
                  style="margin-top:-3.8px"
                  size="mini"
                  type="text"
                  @click="handleSelectDevice(scope.$index, scope.row)">{{ $t("common.device") }}</el-button>
              </el-row>
            </template>
          </el-table-column>
        </el-table>
      </el-main>
    </el-container>
    <!-- 子网创建对话框 -->
    <el-dialog  v-dialogDrag style="font-size: 10px;" width='450px' heigt='700px' :title="$t('SubnetConfigurationManagement.createSubnetInfo')" :visible.sync="dialog_subnetCreate">
      <el-form :model="form" inline="true" style="margin-bottom: -20px;margin-top:-20px">
        <el-form-item :label="'*'+ $t('SubnetConfigurationManagement.subnetName')+':'" :label-width="formLabelWidth" style="margin-bottom: -10px;">
          <el-input size = 'mini' :placeholder="$t('common.placeholder')" v-model="form.subnetName" v-on:blur="subnetNameCheck" autocomplete="off" style="width: 152px;"></el-input>
        </el-form-item>
        <el-form-item :label="$t('SubnetConfigurationManagement.domain')+':'"  :label-width="formLabelWidth" style="margin-bottom: -10px; margin-left: 0px;">
          <el-input type="textarea" :rows="4" :placeholder="$t('common.placeholder')" v-model="form.domain" autocomplete="off" style="width: 152px; margin-top: 10px;"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size = 'mini' type="primary" @click="createSubnet" v-loading.fullscreen.lock="fullscreenLoading">{{$t("common.createBtn")}}</el-button>
        <el-button size = 'mini' @click="dialog_subnetCreate = false">{{$t("common.cancel")}}</el-button>
      </div>
    </el-dialog>
    <!-- 子网修改对话框 -->
    <el-dialog v-dialogDrag  width='450px' heigt='700px' :title="$t('SubnetConfigurationManagement.updateSubnetInfo')" :visible.sync="dialog_subnetUpdate">
      <el-form :model="form" inline="true" style="margin-bottom: -20px;margin-top:-20px">
        <el-form-item :label="'*'+ $t('SubnetConfigurationManagement.subnetName')+':'" :label-width="formLabelWidth" style="margin-bottom: -10px;">
          <el-input size = 'mini' :placeholder="$t('common.placeholder')" v-model="form.subnetName" v-on:blur="subnetNameCheck" autocomplete="off" style="width: 152px;"></el-input>
        </el-form-item>
        <el-form-item :label="$t('SubnetConfigurationManagement.domain')+':'" :label-width="formLabelWidth" style="margin-bottom: -10px;margin-left: 0px;">
          <el-input type="textarea" :rows="4"  :placeholder="$t('common.placeholder')" v-model="form.domain" autocomplete="off" style="width: 152px; margin-top: 10px;"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size = 'mini' type="primary" @click="updateSubnet" v-loading.fullscreen.lock="fullscreenLoading">{{$t("common.updateBtn")}}</el-button>
        <el-button size = 'mini' @click="dialog_subnetUpdate = false">{{$t("common.cancel")}}</el-button>
      </div>
    </el-dialog>
    <!-- 子网复制对话框 -->
    <el-dialog  v-dialogDrag width='450px' heigt='700px' :title="$t('SubnetConfigurationManagement.copySubnetInfo')" :visible.sync="dialog_subnetCopy">
      <el-form :model="form" inline="true" style="margin-bottom: -20px;margin-top:-20px">
        <el-form-item :label="'*'+ $t('SubnetConfigurationManagement.subnetName')+':'" :label-width="formLabelWidth" style="margin-bottom: -10px;">
          <el-input size = 'mini' :placeholder="$t('common.placeholder')" v-model="form.subnetName" v-on:blur="subnetNameCheck" autocomplete="off" style="width: 152px"></el-input>
        </el-form-item>
        <el-form-item :label="$t('SubnetConfigurationManagement.domain')+':'" :label-width="formLabelWidth" style="margin-bottom: -10px;margin-left: 0px;">
          <el-input type="textarea" :rows="4"  :placeholder="$t('common.placeholder')" v-model="form.domain" autocomplete="off" style="width: 152px; margin-top: 10px;"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size = 'mini' type="primary" @click="copySubnet" v-loading.fullscreen.lock="fullscreenLoading">{{$t("common.createBtn")}}</el-button>
        <el-button size = 'mini' @click="dialog_subnetCopy = false">{{$t("common.cancel")}}</el-button>
      </div>
    </el-dialog>
    <!--导入文件对话框-->
    <el-dialog v-dialogDrag style="font-size: 10px;" width='450px' heigt='700px' :title="$t('SubnetConfigurationManagement.importSubnetData')" :visible.sync="dialog_importFile">
      <el-upload
        action="doUpload"
        :limit="1"
        :before-upload="beforeUpload">
        <el-button slot="trigger" size="small" type="primary">{{$t('common.selectFileBtn')}}</el-button>
        <div slot="tip" class="el-upload__tip">只能上传excel文件，且不超过5MB</div>
        <div slot="tip" class="el-upload-list__item-name">{{fileName}}</div>
      </el-upload>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitUpload()">{{$t('common.ok')}}</el-button>
       <el-button @click="dialog_importFile = false">{{$t('common.cancel')}}</el-button>
      </span>
    </el-dialog>


  </div>
</template>

<script>
  let protocal = '';
  let ip = '';
  let project = '';
  let port= '';
  export default {
    name: 'ServiceTypeConfigurationManagement',
    data: function () {   //存放 数据
      return {
        tableHeight: window.innerHeight * 0.7,
        //条件查询输入框
        querySubnetNameInput: null,
        queryDomainInput: null,

        dialog_subnetCreate: false,
        dialog_subnetCopy: false,
        dialog_subnetUpdate: false,
        dialog_importFile: false,
        formLabelWidth: '120px',
        form:{
          subnetName: null,
          domain:null,
        },
        subnetList: [],
        multipleSelection: [],
        //与导入文件有关
        fileName: '',
        files: '',
        // 数据加载过程中，覆盖界面
        fullscreenLoading: false,
      }
    },

    computed: {
      openTab () {
        return this.$store.state.openTab;
      },
      activeIndex:{
        get () {
          return this.$store.state.activeIndex;
        },
        set (val) {
          this.$store.commit('set_active_index', val);
        }
      }
    },

    methods: {
      rowStyleClass: function ({row, rowIndex}) {
        return {"height":"20px"};
      },
      cellStyleClass: function ({row, rowIndex}) {
        return {"padding":"0"};
      },

      /**
       * @Description  ：子网名称校验： 不能为空
       * @author       : bjh
       * @param        :
       * @return       :
       * @exception    :
       * @date         : 2019/1/14 14:12
       */
      subnetNameCheck: function () {
        if (this.form.subnetName === '') {
          this.$message({
            type: 'warning',
            message: '子网名称不可为空！ ',
            duration: 10000,
            showClose: true,
          });
        }
        this.textLengthCheck(this.form.subnetName);
      },

      /**
       * @Description  ：文本框所输入的字符长度校验： 控制在20之内
       * @author       : bjh
       * @param        :
       * @return       :
       * @exception    :
       * @date         : 2019/1/15 16:09
       */
      textLengthCheck: function (checkString) {
        if (checkString.length > 20) {
          this.$message({
            type: 'warning',
            message: '所输文本长度必须控制在20之内！',
            duration: 10000,
            showClose: true,
          });
        }
      },

      /**
       * @Description  ：导出文件之前执行
       * @author       : bjh
       * @param        :
       * @return       :
       * @exception    :
       * @date         : 2018/12/25 21:39
       */
      beforeUpload(file){
        console.log(file,'文件');
        this.files = file;
        const extension = file.name.split('.')[1] === 'xls'
        const extension2 = file.name.split('.')[1] === 'xlsx'
        const isLt2M = file.size / 1024 / 1024 < 5
        if (!extension && !extension2) {
          this.$message.warning('上传文件只能是 xls、xlsx格式!')
          return
        }
        if (!isLt2M) {
          this.$message.warning('上传文件大小不能超过 5MB!')
          return
        }
        this.fileName = file.name;
        return false // 返回false不会自动上传
      },

      /**
       * @Description  ：提交导出(未完待续)
       * @author       : bjh
       * @param        :
       * @return       :
       * @exception    :
       * @date         : 2018/12/25 21:40
       */
      submitUpload: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')
        });
        //debugger
        console.log(this.files)
        console.log('上传'+this.files.name)
        if(this.fileName == ""){
          this.$message.warning('请选择要上传的文件！')
          return false
        }

        let fileFormData = new FormData();
        console.log(this.files)
        fileFormData.append('file',this.files,this.files.name);
        //fileFormData.append('fileMetaData',this.files);
        let requestConfig = {
          headers: {
            'Content-Type': 'multipart/form-data',
            'Accept': 'application/json'
          },
        }
        this.$http.post(protocal+ip+port+project+`cxf/nms/subnet/upload/`, fileFormData, requestConfig).then(result => {
          console.log(result.body)
          if (result.body.result) {
            // 成功了！
            this.$message({
              type: 'success',
              message: '导入成功！ ',
              duration: 10000,
              showClose: true,
            })
            this.dialog_importFile = false;
            //重新刷新表格
            this.$options.methods.getAllSubnet(this);
          } else {
            // 失败了
            this.$message.error( 'Error ' + result.body.faultCode + ':' + result.body.faultCause);
          }
          loading.close();
        }).catch(() => {
          console.log("请求失败！")
          loading.close();
        });
      },
      /**
       * @Description  ：单选一行，跳转设备配置界面，初始化加载该子网数据
       * @author       : bjh
       * @param        :
       * @return       :
       * @exception    :
       * @date         : 2018/12/20 11:02
       */
      handleSelectDevice(index,row){
        console.log('查看设备：')
        let flag = false;
        for (let item of this.openTab) {
          console.log("item.name", item.name)
          if (item.name === '网元配置') {
            this.$store.commit('delete_keepAliveRouter', 'DeviceConfigurationManagement')
            this.$store.commit('delete_tabs', '/TheLayout/DeviceConfigurationManagement')
            this.$store.commit('add_tabs', {route: '/TheLayout/DeviceConfigurationManagement', name: '网元配置'})
            this.$store.commit('set_active_index', '/TheLayout/DeviceConfigurationManagement')
            this.$store.commit('add_keepAliveRouter', 'DeviceConfigurationManagement');
            this.$router.push({path: '/TheLayout/DeviceConfigurationManagement',query:{subnetKey:row.subnetKey}});
            flag = true;
            break;
          }
        }
        if(!flag){
          this.$store.commit('add_tabs', {route: '/TheLayout/DeviceConfigurationManagement', name: '网元配置'})
          this.$store.commit('add_keepAliveRouter', 'DeviceConfigurationManagement');
          this.$store.commit('set_active_index', '/TheLayout/DeviceConfigurationManagement')
          this.$router.push({path: '/TheLayout/DeviceConfigurationManagement',query:{subnetKey:row.subnetKey}});
        }
      },
      /**
       * @Description  ：表格多选框改变时，将所选行进行保存
       * @author       : bjh
       * @param        :
       * @return       :
       * @exception    :
       * @date         : 2018/12/7 13:48
       */
      handleSelectionChange(val) {
        this.multipleSelection = val;
      },

      /**
       * @Description  ：在表格数据重新载入时，对条件查询框进行清空
       * @author       : bjh
       * @param        :
       * @return       :
       * @exception    :
       * @date         : 2019/1/10 19:03
       */
      clearQueryInput: function () {
        this.querySubnetNameInput = '';
        this.queryDomainInput = '';
      },

      /**
       * @Description  ：获取全部子网信息
       * @author       : bjh
       * @param        :
       * @return       :
       * @exception    :
       * @date         : 2018/12/7 14:06
       */
      getAllSubnetInit: function () {
        console.log('获取全部子网信息：')
        this.$http.get(protocal+ip+port+project+'cxf/nms/subnet/').then(result => {
          console.log(result.body)
          if (result.body.result) {
            // 成功了！
            this.subnetList = result.body.returnValue
            this.clearQueryInput();
          } else {
            // 失败了
            this.$message.error( 'Error ' + result.body.faultCode + ':' + result.body.faultCause);
          }
        })
      },

      /**
       * @Description  ：增删改后调用，重新加载table
       * @author       : bjh
       * @param        :
       * @return       :
       * @exception    :
       * @date         : 2018/12/7 14:06
       */
      getAllSubnet: function (vue) {
        console.log('获取全部子网信息：')
        vue.$http.get(protocal+ip+port+project+'cxf/nms/subnet/').then(result => {
          console.log(result.body)
          if (result.body.result) {
            // 成功了！
            vue.subnetList = result.body.returnValue
            this.clearQueryInput();
          } else {
            // 失败了
            this.$message.error( 'Error ' + result.body.faultCode + ':' + result.body.faultCause);
          }
        })
      },
      /**
       * @Description  ：创建子网初始化
       * @author       : bjh
       * @param        :
       * @return       :
       * @exception    :
       * @date         : 2018/12/7 13:29
       */
      createSubnetInit:function () {
        this.form.subnetName = ''
        this.form.domain = ''
        this.dialog_subnetCreate = true;
      },
      /**
       * @Description  ：创建子网
       * @author       : bjh
       * @param        :
       * @return       :
       * @exception    :
       * @date         : 2018/12/7 9:02
       */
      createSubnet: 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.form.subnetName === ''){
          this.$message({
            type: 'warning',
            message: '子网名称不能为空！ '
          })
          loading.close();
          return;
        }
        this.$http.post(protocal+ip+port+project+'cxf/nms/subnet', {
          subnetKey: '',
          subnetName: this.form.subnetName,
          domain: this.form.domain,
          delFlag: 0,
          modifyTime: ''
        },{'Content-Type':'application/json','Encoding':'utf-8'}).then(result => {
          console.log(result.body)
          if (result.body.result) {
            // 成功了！
            //重新刷新表格
            this.$options.methods.getAllSubnet(this);

            this.$message({
              type: 'success',
              message: '添加子网信息成功！ '
            })
            this.dialog_subnetCreate = false;
          } else {
            // 失败了
            this.$message.error( 'Error ' + result.body.faultCode + ':' + result.body.faultCause);
          }
          loading.close();
        }).catch(() => {
          console.log("请求失败！")
          loading.close();
        });
      },
      /**
       * @Description  ：复制子网信息初始化
       * @author       : bjh
       * @param        :
       * @return       :
       * @exception    :
       * @date         : 2018/12/22 12:20
       */
      copySubnetInit: function () {
        if(this.multipleSelection.length == 0){
          this.$message({
            type: 'warning',
            message: '请选择一条信息进行复制！ ',
            duration: 10000,
            showClose: true,
          })
          return;
        }else if(this.multipleSelection.length > 1){
          this.$message({
            type: 'warning',
            message: '请只选择一条信息进行复制！ ',
            duration: 10000,
            showClose: true,
          })
          return;
        }else{
          this.form.subnetName = this.multipleSelection[0].subnetName;
          this.form.domain = this.multipleSelection[0].domain;
          this.dialog_subnetCopy = true;
        }
      },

      /**
       * @Description  ：复制子网
       * @author       : bjh
       * @param        :
       * @return       :
       * @exception    :
       * @date         : 2018/12/22 13:30
       */
      copySubnet: 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.form.subnetName === '' || this.form.subnetName === null){
          this.$message({
            type: 'warning',
            message: '子网名称不能为空！ '
          })
          loading.close();
          return;
        }
        this.$http.post(protocal+ip+port+project+'cxf/nms/subnet', {
          subnetKey: '',
          subnetName: this.form.subnetName,
          domain: this.form.domain,
          delFlag: 0,
          modifyTime: ''
        },{'Content-Type':'application/json','Encoding':'utf-8'}).then(result => {
          console.log(result.body)
          if (result.body.result) {
            // 成功了！
            //重新刷新表格
            this.dialog_subnetCopy = false;
            this.$options.methods.getAllSubnet(this);
            this.$message({
              type: 'success',
              message: '添加子网信息成功！ '
            })
          } else {
            // 失败了
            this.$message.error( 'Error ' + result.body.faultCode + ':' + result.body.faultCause);
          }
          loading.close();
        }).catch(() => {
          console.log("请求失败！")
          loading.close();
        });

      },
      /**
       * @Description  ：修改子网信息初始化
       * @author       : bjh
       * @param        :
       * @return       :
       * @exception    :
       * @date         : 2018/12/7 9:03
       */
      updateSubnetInit: function () {
        if(this.multipleSelection.length === 0){
          this.$message({
            type: 'warning',
            message: '请选择一条信息进行修改！ '
          })
          return;
        }else if(this.multipleSelection.length > 1){
          this.$message({
            type: 'warning',
            message: '请只选择一条信息进行修改！ '
          })
          return;
        }else{
          this.form.subnetName = this.multipleSelection[0].subnetName;
          this.form.domain = this.multipleSelection[0].domain;
          this.dialog_subnetUpdate = true;
        }
      },
      /**
       * @Description  ：修改子网信息
       * @author       : bjh
       * @param        :
       * @return       :
       * @exception    :
       * @date         : 2018/12/7 9:03
       */
      updateSubnet: 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.form.subnetName === '' || this.form.subnetName === null){
          this.$message({
            type: 'warning',
            message: '子网名称不能为空！ '
          })
          loading.close();
          return;
        }
        this.$http.put(protocal+ip+port+project+'cxf/nms/subnet', {
          subnetKey: this.multipleSelection[0].subnetKey,
          subnetName: this.form.subnetName,
          domain: this.form.domain,
          delFlag: 0,
          modifyTime: ''
        },{'Content-Type':'application/json','Encoding':'utf-8'}).then(result => {
          console.log(result.body)
          if (result.body.result) {
            // 成功了！
            //重新刷新表格
            this.$options.methods.getAllSubnet(this);
            this.$message({
              type: 'success',
              message: '修改子网信息成功！ '
            })
            this.dialog_subnetUpdate = false;
          } else {
            // 失败了
            this.$message.error( 'Error ' + result.body.faultCode + ':' + result.body.faultCause);
          }
          loading.close();
        }).catch(() => {
          console.log("请求失败！")
          loading.close();
        });

      },
      /**
       * @Description  ：删除子网信息初始化(支持批量)
       * @author       : bjh
       * @param        :
       * @return       :
       * @exception    :
       * @date         : 2018/12/7 13:32
       */
      deleteSubnetInit:function () {
        if(this.multipleSelection.length == 0){
          this.$message({
            type: 'warning',
            message: '请至少选择一条信息进行删除！ '
          })
          return;
        }else{
          this.$confirm('是否确定删除记录?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            this.$options.methods.deleteSubnet(this);
          });

        }
      },
      /**
       * @Description  ：删除子网信息
       * @author       : bjh
       * @param        :
       * @return       :
       * @exception    :
       * @date         : 2018/12/7 9:03
       */
      deleteSubnet: 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]['subnetKey'];
        }
        vue.$http.delete(protocal+ip+port+project+'cxf/nms/subnet/' ,{body:delList}, {
          'Content-Type': 'application/json',
          'Encoding': 'utf-8'
        }).then(result => {
          console.log(result.body)
          if (result.body.result) {
            // 成功了！
            //重新刷新表格
            vue.$options.methods.getAllSubnet(vue)
            vue.$message({
              type: 'success',
              message: '删除子网信息成功！ '
            })
          } else {
            // 失败了
            vue.$message.error('Error ' + result.body.faultCode + ':' + result.body.faultCause)
          }
          loading.close();
        }).catch(() => {
          console.log("请求失败！")
          loading.close();
        });
      },

      /**
       * @Description  ：条件查询
       * @author       : bjh
       * @param        :
       * @return       :
       * @exception    :
       * @date         : 2018/12/7 23:06
       */
      querySubnetByCondition: 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('子网信息按条件查询：')
        var selectList = new Array();
        if((this.querySubnetNameInput === null || this.querySubnetNameInput === '') && (this.queryDomainInput === null || this.queryDomainInput === '')){
          // selectList.push({
          //   quaryAttribute:'subnetName',
          //   compareSymbol:"like",
          //   compareValue:'',});
          // selectList.push({
          //   quaryAttribute:'domain',
          //   compareSymbol:"like",
          //   compareValue:'',});
          this.$options.methods.getAllSubnet(this);
          loading.close();
          return;
        }else{
          if(this.querySubnetNameInput === null){
            this.querySubnetNameInput = '';
          }
          if(this.queryDomainInput === null){
            this.queryDomainInput = ''
          }
          if(this.querySubnetNameInput != '' || this.querySubnetNameInput != null){
            selectList.push({
              quaryAttribute:'subnetName',
              compareSymbol:"like",
              compareValue:this.querySubnetNameInput,})
          }
          if(this.queryDomainInput != '' || this.queryDomainInput != null){
            selectList.push({
              quaryAttribute:'domain',
              compareSymbol:"like",
              compareValue:this.queryDomainInput,})
          }
        }
        //按条件查询
        this.$http.put(protocal+ip+port+project+'cxf/nms/subnet/querysubnet',selectList,
          {'Content-Type':'application/json','Encoding':'utf-8'}).then(result => {
          console.log(result.body)
          if (result.body.result) {
            // 成功了！
            this.subnetList = result.body.returnValue
            this.$message({
              type: 'success',
              message: '查询成功！ '
            })
          } else {
            // 失败了
            this.$message.error( 'Error ' + result.body.faultCode + ':' + result.body.faultCause);
          }
          loading.close();
        }).catch(() => {
          console.log("请求失败！")
          loading.close();
        });

      },
      /**
       * @Description  ：导入文件
       * @author       : bjh
       * @param        :
       * @return       :
       * @exception    :
       * @date         : 2018/12/19 18:39
       */
      importToExcelInit:function () {
        console.log('导入文件：')
        this.fileName = '';
        this.dialog_importFile = true;
      },

      /**
       * @Description  ：导出文件
       * @author       : bjh
       * @param        :
       * @return       :
       * @exception    :
       * @date         : 2018/12/19 18:39
       */
      exportToExcelInit: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('导出文件：')
        var jsonStr1 = JSON.stringify(port)
        var jsonStr2 = jsonStr1.substring(2)
        var jsonStr3 = jsonStr2.substring(0,jsonStr2.length-1)
        let port2 = JSON.parse(jsonStr3)

        //传参
        var selectList = new Array();
        if((this.querySubnetNameInput === null || this.querySubnetNameInput === '') && (this.queryDomainInput === null || this.queryDomainInput === '')){
          selectList.push({
            quaryAttribute:'subnetName',
            compareSymbol:"like",
            compareValue:'',});
          selectList.push({
            quaryAttribute:'domain',
            compareSymbol:"like",
            compareValue:'',});
        }else{
          if(this.querySubnetNameInput === null){
            this.querySubnetNameInput = '';
          }
          if(this.queryDomainInput === null){
            this.queryDomainInput = ''
          }
          if(this.querySubnetNameInput != '' || this.querySubnetNameInput != null){
            selectList.push({
              quaryAttribute:'subnetName',
              compareSymbol:"like",
              compareValue:this.querySubnetNameInput,})
          }
          if(this.queryDomainInput != '' || this.queryDomainInput != null){
            selectList.push({
              quaryAttribute:'domain',
              compareSymbol:"like",
              compareValue:this.queryDomainInput,})
          }
        }

        //传参需转换成JSON格式
        var stringParams = JSON.stringify(selectList)
        var https = require('http');
        //请求域、header头设置值
        var options = {
          'method': 'PUT',
          'hostname': ip,
          'port':port2,
          'path': project + 'cxf/nms/subnet/download',
          'headers': {
            'Content-Type': 'application/json'
          }
        };
        //定义请求结果执行事件
        var req = https.request(options, function (res) {
          var chunks = [];
          //将请求返回的数据封装到chunks数组
          res.on("data", function (chunk) {
            chunks.push(chunk);
          });
          //请求结束将而返回二进制流数据转出excel
          res.on("end", function (chunk) {
            var body = Buffer.concat(chunks);
            console.log(body.toString());
            let url = window.URL.createObjectURL(new Blob([body]))
            let link = document.createElement('a')
            link.style.display = 'none'
            link.href = url
            link.setAttribute('download', '子网数据.xls')
            document.body.appendChild(link)
            link.click()
          });
          //请求失败
          res.on("error", function (error) {
            console.error(error);
          });
        });

        //请求传送参数，需以流的形式写入request请求
        //var postData =  "[{\"quaryAttribute\":\"cabinetName\",\"compareSymbol\":\"like\",\"compareValue\":\"机架1\"}]";
        req.write(stringParams);
        req.end();
        loading.close();
      },
    },

    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配置失败！");
        }
      })
    },
    created: function () {
    },
    //初始化函数，加载数据
    mounted:function(){
      console.log("初始化加载数据")
      this.getAllSubnetInit()
    },
  }
</script>

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

  .el-input {
    width: 330px;
  }

  /deep/ .el-textarea__inner{
    font-size: 12px;
  }
</style>
