<template>
    <div class="content-box">
        <div class="container">
            <el-form ref="sizeForm" :model="sizeForm" :rules="rules" label-width="140px">
                <p class="title">界面</p>
                <el-form-item label="界面：" class="formItem">
                    <el-col :span="6">
                        <el-select v-model="sizeForm.name" placeholder="请选择"  @change="changeName($event)">
                            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </el-option>
                        </el-select>
                    </el-col>
                </el-form-item>
                <el-form-item label="MAC地址：" class="formItem">
                    <el-col :span="6">
                        <el-input v-model="sizeForm.mac"  disabled></el-input>
                    </el-col>
                </el-form-item>
                <el-form-item label="MTU：" class="formItem">
                    <el-col :span="6">
                        <el-input v-model="sizeForm.mtu"  disabled></el-input>
                    </el-col>
                </el-form-item>
                <el-form-item label="网络速度：" class="formItem">
                    <el-col :span="6">
                        <el-input v-model="sizeForm.speed"  disabled></el-input>
                    </el-col>
                </el-form-item>
                <p class="title">运行状态</p>
                <el-form-item label="启用：" class="formItem">
                    <el-col :span="0.9" style="diaplay: flex">
                        <div  :class="gernerateClass(sizeForm.status)"></div>
                    </el-col>
                    <el-col :span="2" style="diaplay: flex">
                        <span style="margin-left: 10px">{{sizeForm.status}}</span>
                    </el-col>
                </el-form-item>
                <!-- <el-form-item label="连接：">
                    <el-col :span="0.9" style="diaplay: flex">
                        <div class="status" style="width: 10px; height: 10px; border-radius: 50%; background: green"></div>
                    </el-col>
                    <el-col :span="2" style="diaplay: flex">
                        <span style="margin-left: 10px">接通</span>
                    </el-col>
                </el-form-item> -->
                <div style="margin-bottom: 24px;">
                <p class="title">dhcp4</p>
                <el-switch
                  v-model="dhcp4"
                  active-text="开"
                  inactive-text="关">
                </el-switch>
              </div>
                <div v-show="dhcp4">
                <p class="title">静态地址</p>
                 <el-button type="primary" @click="addRowsTableData()" style="margin-bottom:10px" v-if="!disable">新增</el-button>
                <el-table :data="sizeForm.tableData" border style="width: 95%">
                    <el-table-column prop="address" label="地址">
                      <template slot-scope="scope">
                        <!-- <el-input v-model="scope.row.address" @change="changeVal(scope.row,scope.$index)"></el-input> -->
                        <el-form-item :prop="'tableData.'+ scope.$index + '.address'" :rules="rules.address" class="tableFormItem">
                                <el-input v-model.trim="scope.row.address"
                                   placeholder="例：172.1.1.16/24"  :disabled="disable"/>
                            </el-form-item>
                      </template>
                    </el-table-column>
                    <!-- <el-table-column prop="agreement" label="DHCP"> 
                      <template slot-scope="scope">
                        <el-input v-model="scope.row.agreement" @change="changeVal(scope.row,scope.$index)"></el-input>
                      </template>
                    </el-table-column>
                    <el-table-column prop="Range" label="范围">
                      <template slot-scope="scope">
                      <el-select v-model="scope.row.Range" placeholder="请选择" @change="changeVal(scope.row,scope.$index)">
                            <el-option v-for="item in optionsa" :key="item.value" :label="item.label" :value="item.value"> </el-option>
                        </el-select>
                      </template>
                    </el-table-column>
                    <el-table-column prop="term" label="期限"> 
                      <template slot-scope="scope">
                        <el-input v-model="scope.row.term" @change="changeVal(scope.row,scope.$index)"></el-input>
                      </template>
                    </el-table-column> -->
                    <el-table-column
                      fixed="right"
                      label="操作"
                      width="350"
                      >
                   <template slot-scope="scope">
                             <!-- <el-button @click="deleteRowsTableData(scope)" v-if="scope.$index < sizeForm.tableData.length-1" type="text" size="small">删除行
                            </el-button> -->
                             <el-button @click="deleteRowsTableData(scope)" v-if="scope.$index != 0" type="text" size="small" :disabled="disable">删除行
                            </el-button>
                        </template>
                  </el-table-column>
                </el-table>
              </div>
                <!-- <p style="margin-top: 10px" class="title">DHCP</p>
                <el-form-item label="启用：">
                    <el-col :span="2" style="diaplay: flex">
                        <el-switch v-model="sizeForm.desc" active-color="#13ce66" inactive-color="#ff4949"> </el-switch>
                    </el-col>
                </el-form-item>
                <el-form-item label="网关：">
                    <el-col :span="6">
                        <el-input v-model="sizeForm.gateway"></el-input>
                    </el-col>
                </el-form-item>
                <el-form-item label="分配IP：">
                    <el-col :span="6">
                        <el-input v-model="sizeForm.ip"></el-input>
                    </el-col>
                </el-form-item> -->
                <div style="width:100%" v-if="sizeForm.desc == true">
                    <!-- <p class="title">静态地址</p>
                    <el-form-item label="IP1：">
                        <el-col :span="6">
                            <el-input v-model="sizeForm.ip1"></el-input>
                        </el-col>
                    </el-form-item>
                    <el-form-item label="IP2：">
                        <el-col :span="6">
                            <el-input v-model="sizeForm.ip2"></el-input>
                        </el-col>
                    </el-form-item>
                    <el-form-item label="IP3：">
                        <el-col :span="6">
                            <el-input v-model="sizeForm.ip3"></el-input>
                        </el-col>
                    </el-form-item>
                    <el-form-item label="IP4：">
                        <el-col :span="6">
                            <el-input v-model="sizeForm.ip4"></el-input>
                        </el-col>
                    </el-form-item> -->
                     <!-- <el-form-item >
                        <el-col :span="6">
                            <el-button type="primary" size="small" @click="commit()">保存</el-button>
                        </el-col>
                    </el-form-item> -->
                    <p class="title">默认网关</p>
                      <el-form-item label="默认网关：" prop="gateway4" class="formItem">
                        <el-col :span="6">
                            <el-input v-model="sizeForm.gateway4" :disabled="disable"></el-input>
                        </el-col>
                    </el-form-item>
                    <p class="title">静态路由</p>
                     <el-button type="primary" @click="addRows()" style="margin-bottom:10px" v-if="!disable">新增</el-button>
                    <el-table :data="sizeForm.tableRouter" border style="width: 95%">
                        <!-- <el-table-column prop="name" label="名称">
                          <template slot-scope="scope">
                            <el-input v-model="scope.row.name" @change="changeValT(scope.row,scope.$index)"></el-input>
                          </template>
                        </el-table-column> -->
                         <!-- <el-table-column type="index" label="序号" fixed align='center'>
                    </el-table-column> -->
                        <el-table-column prop="to" label="to" > 
                          <template slot-scope="scope" >
                            <!-- <el-input v-model="scope.row.to" @change="changeValT(scope.row,scope.$index)"></el-input> -->
                            <el-form-item :prop="'tableRouter.'+ scope.$index + '.to'" :rules="rules.to" class="tableFormItem">
                                <el-input v-model.trim="scope.row.to"
                                   placeholder="例：172.1.1.16/24" :disabled="disable" />
                            </el-form-item>
                          </template>
                        </el-table-column>
                        <el-table-column prop="via" label="via" >
                          <template slot-scope="scope">
                            <!-- <el-input v-model="scope.row.via" @change="changeValT(scope.row,scope.$index)"></el-input> -->
                             <el-form-item :prop="'tableRouter.'+ scope.$index + '.via'" :rules="rules.via" class="tableFormItem">
                                <el-input v-model.trim="scope.row.via"
                                   placeholder="例：172.1.1.16"  :disabled="disable"/>
                            </el-form-item>
                          </template>
                        </el-table-column>
                        <el-table-column prop="metric" label="metric">
                          <template slot-scope="scope">
                            <!-- <el-input v-model="scope.row.metric" @change="changeValT(scope.row,scope.$index)"></el-input> -->
                              <el-form-item :prop="'tableRouter.'+ scope.$index + '.metric'" :rules="rules.metric" class="tableFormItem">
                                <el-input v-model.trim="scope.row.metric"
                                   placeholder="例：100"  :disabled="disable"/>
                            </el-form-item>
                          </template>
                        </el-table-column>
                        <el-table-column
                            fixed="right"
                            label="操作"
                            width="350"
                            >
                        <!-- <template slot-scope="scope" >
                            <el-button @click="handleClick(scope.row)" type="primary" :disabled="scope.row.disabled" size="small">确认</el-button>
                        </template> -->
                         <template slot-scope="scope">
                             <el-button @click="deleteRows(scope)" v-if="scope.$index < sizeForm.tableRouter.length" type="text" size="small" :disabled="disable">删除行
                            </el-button>
                        </template>
                        </el-table-column>
                    </el-table>
                    <p style="margin-top: 10px" class="title">DNS服务</p>
                 
                    <!-- <el-form-item  v-for="(item,index) in sectionals" :label="DNS"+index :key="item">
                        <el-col :span="6">
                            <el-input v-model="sizeForm.dns1"></el-input>
                        </el-col>
                    </el-form-item>
                    <el-form-item label="DNS2：">
                        <el-col :span="6">
                            <el-input v-model="sizeForm.dns2"></el-input>
                        </el-col>
                    </el-form-item>
                    <el-form-item label="DNS3：">
                        <el-col :span="6">
                            <el-input v-model="sizeForm.dns3"></el-input>
                        </el-col>
                    </el-form-item> -->
                    <el-button type="primary" @click="addRowsDNS()" style="margin-bottom:10px" v-if="!disable">新增</el-button>
                <el-table :data="sizeForm.tableDataDNS" border style="width: 95%">
                      
                    <el-table-column prop="address" label="地址">
                      <template slot-scope="scope">
                        <!-- <el-input v-model="scope.row.address" @change="changeVal(scope.row,scope.$index)"></el-input> -->
                         <el-form-item :prop="'tableDataDNS.'+ scope.$index + '.address'" :rules="rules.addressDNS" class="tableFormItem">
                                <el-input v-model.trim="scope.row.address"
                                   placeholder="例：172.1.1.16" :disabled="disable" />
                            </el-form-item>
                      </template>
                    </el-table-column>
                    <el-table-column
                      fixed="right"
                      label="操作"
                      width="350"
                      >
                  <template slot-scope="scope" >
                      <el-button @click="deleteRowsDNS(scope)" v-if="scope.$index < sizeForm.tableDataDNS.length" type="text" size="small" :disabled="disable">删除行
                            </el-button>
                  </template>
                  </el-table-column>
                </el-table>
                     <!-- <el-form-item >
                        <el-col :span="6"> -->
                            <el-button type="primary" @click="commit(sizeForm.tableRouter,sizeForm.tableData,sizeForm.tableDataDNS,sizeForm)" style="margin-top:10px" v-if="!disable">保存</el-button>
                        <!-- </el-col>
                    </el-form-item> -->
                </div>
            </el-form>
        </div>
    </div>
</template>
  
  <script>
  
export default {
    data() {
        let validateIPAddress = (rule, value, callback) => {
      if (value == null) {
        return callback(new Error('IP地址不能为空'));
      }
      let regexp = /^((2(5[0-5]|[0-4]\d))|[0-1]?\d{1,2})(\.((2(5[0-5]|[0-4]\d))|[0-1]?\d{1,2})){3}$/;
      let valdata = value.split(',');
      let isCorrect = true;
      if (valdata.length) {
        for (let i = 0; i < valdata.length; i++) {
          if (regexp.test(valdata[i]) == false) {
            isCorrect = false;
          }
        }
      }
      if (!isCorrect) {
        callback(new Error('请输入正确的IP地址'));
      } else {
        callback()
      }
    }
    let validateIPAddressYes = (rule, value, callback) => {
      if (value == null) {
        return callback(new Error('IP地址不能为空'));
      }
      let regexp = /^((2(5[0-5]|[0-4]\d))|[0-1]?\d{1,2})(\.((2(5[0-5]|[0-4]\d))|[0-1]?\d{1,2})){3}$/;
    //   value.split("/")[0]
      let valdata = value.split('/')[0];
      let valdata2 = value.split('/')[1];
       let valdata3 = value.split('/')[2];
      let isCorrect = true;
      if (valdata.length) {
        for (let i = 0; i < valdata.length; i++) {
            if(valdata3){
                isCorrect = false;
                 callback(new Error('请输入正确的IP地址'));
            }else{
                  if (regexp.test(valdata) == false) {
                   isCorrect = false;
                 callback(new Error('请输入正确的IP地址'));   
          }else{
            if (!Number(valdata2)) {
            // callback(new Error('请输入整数，值为[1,32]'));
                isCorrect = false;
                 callback(new Error('请输入正确的IP地址'));
            } else {
                 const re = /^[0-9]*[1-9][0-9]*$/;
                const rsCheck = re.test(valdata2);
            if (valdata2 < 1 || valdata2 > 32|| !rsCheck) {
                callback(new Error('请输入整数，值为[1,32]'));
                isCorrect = false;
                }
        }
          }
            }
        
        }
      }
    }
   let metric = (rule, value, callback)  =>{
  if (!value) {
    return callback(new Error('输入不可以为空'));
  }
  setTimeout(() => {
    if (!Number(value)) {
      callback(new Error('请输入正整数'));
    } else {
      const re = /^[0-9]*[1-9][0-9]*$/;
      const rsCheck = re.test(value);
      if (!rsCheck) {
        callback(new Error('请输入正整数'));
      } else {
        callback();
      }
    }
  }, 0);
}

        return {
          dhcp4:false,
              columnLabel: '', //要增加的列名
      columnPropIndex: 0, //列属性自增
      columnData: [],//列标题数组
        rules: {
        gateway4: [{ required: true, pattern: /^(?:(?:1[0-9][0-9]\.)|(?:2[0-4][0-9]\.)|(?:25[0-5]\.)|(?:[1-9][0-9]\.)|(?:[0-9]\.)){3}(?:(?:1[0-9][0-9])|(?:2[0-4][0-9])|(?:25[0-5])|(?:[1-9][0-9])|(?:[0-9]))$/,message: "请输入正确的IP地址", trigger: "blur"}],
         via: [{ required: true, pattern: /^(?:(?:1[0-9][0-9]\.)|(?:2[0-4][0-9]\.)|(?:25[0-5]\.)|(?:[1-9][0-9]\.)|(?:[0-9]\.)){3}(?:(?:1[0-9][0-9])|(?:2[0-4][0-9])|(?:25[0-5])|(?:[1-9][0-9])|(?:[0-9]))$/,message: "请输入正确的IP地址", trigger: "blur"}],
        // via:[{ required: true, validator: validateIPAddress, trigger: "blur" }]
         addressDNS:[{ required: true, validator: validateIPAddress, trigger: "blur" }], 
         address:[{ required: true, validator: validateIPAddressYes, trigger: "blur" }],
         to:[{ required: true, validator: validateIPAddressYes, trigger: "blur" }],
         metric:[{ required: true, validator: metric, trigger: "blur" }],
        },    
       

          optionsa:[
              {
                    value: '1',
                    label: '全局'
                } 
              ],
            tableRouter: [
                {
                    name: 'Router0',
                    metric: '',
                    to:'e.g.10.0.0.0/8',
                    via:'e.g.192.168.0.1',
                    disabled:true
                },
                {
                    name: 'Router0',
                    metric: '',
                    to:'e.g.10.0.0.0/8',
                    via:'e.g.192.168.0.1',
                    disabled:true
                },
                {
                     name: 'Router0',
                    metric: '',
                    to:'e.g.10.0.0.0/8',
                    via:'e.g.192.168.0.1',
                    disabled:true
                },
                {
                    name: 'Router0',
                    metric: '',
                    to:'e.g.10.0.0.0/8',
                    via:'e.g.192.168.0.1',
                    disabled:true
                }
            ],
            sizeForm: {
                name: '',
                region: '00:11:14:1a:62:fe',
                MTU: '1500',
                date2: '',
                delivery: false,
                type: [],
                resource: '',
                desc: true,
                ip: '192.168.1.5/24',
                ip1: '192.168.50.10/24',
                ip2: 'e.g.192.168.50.10/24',
                ip3: 'e.g.192.168.50.10/24',
                ip4: 'e.g.192.168.50.10/24',
                dns1: 'e.g.1.1.1.1',
                dns2: 'e.g.1.0.0.1',
                dns3: 'e.g.1.0.0.1',
                status:'NO',
                // mtu:'00:11:14:1a:62:fe',
                // mac:'00:11:14:1a:62:fe',
                // moren:'e.g.1.0.0.1',
                // speed:'1000',
                gateway4: '',
                 mtu:'',
                mac:'',
                moren:'',
                speed:'',
                tableRouter: [
                // {
                //     name: 'Router0',
                //     metric: '',
                //     to:'',
                //     via:'',
                //     disabled:true
                // },
                // {
                //     name: 'Router0',
                //     metric: '',
                //     to:'',
                //     via:'',
                //     disabled:true
                // },
            ],
              tableData: [
                // {
                //     id:'',
                //     address: '',
                // },
                // {

                //     id:'',
                //     address: '',
                // },
                //  {
                //     id:'',
                //     address: '',
                // }
            ],
            tableDataDNS: [
                // {
                //     id:'',
                //     address: '',
                // },
                // {
                //     id:'',
                //     address: '',
                // }
            ],
            },
            options: [
                {
                    value: '',
                    label: ''
                },
                //  {
                //     value: 'wlan0',
                //     label: 'wlan0'
                // }
            ],
            //数据获取
            netWork:[
               {
                    name: '',
                region: '00:11:14:1a:62:fe',
                MTU: '1500',
                date2: '',
                delivery: false,
                type: [],
                resource: '',
                desc: true,
                ip: '192.168.1.5/24',
                gateway4: '192.168.1.5',
                ip1: '192.168.50.10/24',
                ip2: 'e.g.192.168.50.10/24',
                ip3: 'e.g.192.168.50.10/24',
                ip4: 'e.g.192.168.50.10/24',
                dns1: 'e.g.1.1.1.1',
                dns2: 'e.g.1.0.0.1',
                dns3: 'e.g.1.0.0.1',
                status:'YES',
                mtu:'00:11:14:1a:62:fe',
                mac:'00:11:14:1a:62:fe',
                moren:'e.g.1.0.0.1',
                 speed:'1000'
                },
                 {
                    name: 'wlan0',
                 region: '00:11:14:1a:62:fe',
                MTU: '1500',
                date2: '',
                delivery: false,
                type: [],
                resource: '',
                desc: true,
                ip: '192.168.1.5/24',
                gateway4: '192.168.1.5',
                ip1: '192.168.50.10/24',
                ip2: 'e.g.192.168.50.10/24',
                ip3: 'e.g.192.168.50.10/24',
                ip4: 'e.g.192.168.50.10/24',
                dns1: 'e.g.1.1.1.1',
                dns2: 'e.g.1.0.0.1',
                dns3: 'e.g.1.0.0.1',
                status:'YES',
                mtu:'00:11:14:1a:62:fe',
                mac:'00:11:14:1a:62:fe',
                moren:'e.g.1.0.0.1',
                 speed:'1000'
                } 
            ],
            tableData: [
                {
                    // agreement: 'NO',
                    // Range: '1',
                    id:'',
                    address: '192.168.50.10/24',
                    // term: '永久',
                    // disabled:true
                },
                {
                    // agreement: 'YES',
                    // Range: '1',
                    id:'',
                    address: '192.168.1.5/24',
                    // term: '17小时',
                    // disabled:true
                },
                 {
                    // agreement: 'YES',
                    // Range: '1',
                    id:'',
                    address: '192.168.1.5/24',
                    // term: '17小时',
                    // disabled:true
                }
            ],
            tableDataDNS: [
                {
                    // agreement: 'NO',
                    // Range: '1',
                    id:'',
                    address: '192.168.50.10/24',
                    // term: '永久',
                    // disabled:true
                },
                {
                    // agreement: 'YES',
                    // Range: '1',
                    id:'',
                    address: '192.168.1.5/24',
                    // term: '17小时',
                    // disabled:true
                }
            ],
            tableDataPanduan:[],
            optionsData:'eth0',
            disable:false, //权限禁用
        };
    },
    watch: {
     
    },
      created() {
 this.createMqtt()
  setTimeout(() => {
                this.publishClient()
                    }, 1000 * 3 );
},
  mounted() {
   if (localStorage.getItem('roleName') == '系统管理员') {
            this.disable = false
        }else{
            this.disable = true
        }
  },
    methods:{
        //点击保存
        commit(tableRouter,tableData,tableDataDNS,sizeForm){
             console.log("tableData",tableData)
              console.log("tableDataDNS",tableDataDNS)
                   console.log("sizeForm",sizeForm)
        var  tableRouterN = tableRouter.map(value => {
                         return  value.to+','+value.via+','+value.metric
            })
            var  tableDataN = tableData.map(item => {
                         return  item.address
            })
             var  tableDataDNSN = tableDataDNS.map(item => {
                         return  item.address
            })
           
           var ner = {
            type:"netplanSet",
            ethName:sizeForm.name,
            dhcp4: this.dhcp4,
            addresses:tableDataN,//静态地址
            gateway4:sizeForm.gateway4,
            nameservers:tableDataDNSN,//DNS
            routes:tableRouterN//静态路由
            }
             this.$confirm('此操作将重新设置网络, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            })
                .then(() => {
                    this.$message({
                      type: 'success',
                      message: '设置成功!'
                    });
                    console.log("JSON.stringify(ner)",JSON.stringify(ner))
        window.publish('Contorl_client',JSON.stringify(ner)); 
        this.sizeForm={
                name: '',
                region: '00:11:14:1a:62:fe',
                MTU: '1500',
                date2: '',
                delivery: false,
                type: [],
                resource: '',
                desc: true,
                ip: '192.168.1.5/24',
                ip1: '192.168.50.10/24',
                ip2: 'e.g.192.168.50.10/24',
                ip3: 'e.g.192.168.50.10/24',
                ip4: 'e.g.192.168.50.10/24',
                dns1: 'e.g.1.1.1.1',
                dns2: 'e.g.1.0.0.1',
                dns3: 'e.g.1.0.0.1',
                status:'NO',
                gateway4: '',
                 mtu:'',
                mac:'',
                moren:'',
                speed:'',
                tableRouter: [],
              tableData: [],
            tableDataDNS: [],
            }
        const loading = this.$loading({
          lock: true,
          text: 'Loading',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        });
        setTimeout(() => {
          loading.close();
            this.publishClient()
            }, 5000);  
                })
                .catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消'
                    });
                });
        //  
        },
        //添加行静态路由
    addRows() {
      const circle = this.sizeForm.tableRouter[0]; //取出数组中第一个对象
      if (circle) {
        const newObj = {};
        for (let key in circle) { //把第一个对象的属性都赋值给新对象newObj  然后每个属性的值都设置为空；
          newObj[key] = '';
        }
        this.sizeForm.tableRouter.splice(this.sizeForm.tableRouter.length, 0, newObj);
      }else{
        const newObj = {};
        for (let key in circle) { //把第一个对象的属性都赋值给新对象newObj  然后每个属性的值都设置为空；
          newObj[key] = '';
        }
        this.sizeForm.tableRouter.splice(this.sizeForm.tableRouter.length, 0, newObj);
      }
    },
 
    //删除行静态路由
    deleteRows(scope) {
      this.sizeForm.tableRouter.splice(scope.$index, 1);
    },
    //添加行静态地址
    addRowsTableData(){
          const circle = this.sizeForm.tableData[0]; //取出数组中第一个对象
      if (circle) {
        const newObj = {};
        for (let key in circle) { //把第一个对象的属性都赋值给新对象newObj  然后每个属性的值都设置为空；
          newObj[key] = '';
        }
        // this.sizeForm.tableData.splice(this.sizeForm.tableData.length-1, 0, newObj);
        this.sizeForm.tableData.splice(this.sizeForm.tableData.length, 0, newObj);
      }
    },
    deleteRowsTableData(scope){
         this.sizeForm.tableData.splice(scope.$index, 1);
    },
    //添加DNS
     addRowsDNS(){
          const circle = this.sizeForm.tableDataDNS[0]; //取出数组中第一个对象
      if (circle) {
        const newObj = {};
        for (let key in circle) { //把第一个对象的属性都赋值给新对象newObj  然后每个属性的值都设置为空；
          newObj[key] = '';
        }
        this.sizeForm.tableDataDNS.splice(this.sizeForm.tableDataDNS.length, 0, newObj);
      }else{
        const newObj = {};
        for (let key in circle) { //把第一个对象的属性都赋值给新对象newObj  然后每个属性的值都设置为空；
          newObj[key] = '';
        }
        this.sizeForm.tableDataDNS.splice(this.sizeForm.tableDataDNS.length, 0, newObj);
      }
    },
    deleteRowsDNS(scope){
         this.sizeForm.tableDataDNS.splice(scope.$index, 1);
    },
               /** 创建mqtt */
    createMqtt() {
        //  window.publish('Contorl_client',JSON.stringify({"type":"getNet"})); 
      //创建链接，接收数据
        var topicSends = ['Contorl_server'];
         window.PubScribe(topicSends,-1,this.realInfo);
       
   },
   publishClient(){
     window.publish('Contorl_client',JSON.stringify({"type":"getNet"})); 
   },
    /** 实时数据分类 */
    realInfo(topic, message) {
        // console.log("topic",topic)
      switch (topic) {
          case "Contorl_server":
             try {
              const utf8decoder = new TextDecoder()
              const u8arr = new Uint8Array(message)
              const temp = utf8decoder.decode(u8arr)	// 将二进制数据转为字符串
              const msg = JSON.parse(temp)		//这一步报错则返回的是二进制流图片，不报错则返回的是JSON的错误提示数据
             
             if(msg.type=='getNet'){
                console.log("msg",msg)
                // const netaddres = JSON.parse(msg.netaddres)
                // console.log("netaddres",netaddres)
                // const netstates = JSON.parse(msg.netstates)
               
                this.changeNetstates(msg)
             }
       
          } catch (error) {

          }
          break;
      }
    },
    changeNetstates(msg){
         console.log("msg",msg)
        //  var optionsDataN = this.optionsData
        console.log(" msg.netstates[this.optionsData]",this.optionsData)
        if(msg.netplan[this.optionsData]!=undefined){
          this.dhcp4 = msg.netplan[this.optionsData].dhcp4||false
        }
        
        if(msg.netstates[this.optionsData]!=undefined){
            this.sizeForm.name = this.optionsData
             this.sizeForm.mtu = msg.netstates[this.optionsData].mtu
         var data = msg.netaddres[this.optionsData]
         this.sizeForm.speed = msg.netstates[this.optionsData].speed
         this.tableDataPanduan = []
           var optionN =  Object.keys(msg.netplan)
            var  optionNrr = optionN.map((value, index) => {
                         return {
                            value: value,
                            label: value
                          }  
        })
        console.log("optionNrr",optionNrr)
        this.options = optionNrr
         if(msg.netstates[this.optionsData].isup==true){
            this.sizeForm.status='YES'
         }else{
            this.sizeForm.status='NO'
         }
         for (let i = 0; i < data.length; i++) {
            if(data[i].family==17){
                 this.sizeForm.mac =data[i].address
            }else if(data[i].family==2){
                this.tableDataPanduan.push(data[i])
            }
        }
        if(this.tableDataPanduan.length==msg.netplan[this.optionsData].addresses.length){
             for (let i = 0;i < this.tableDataPanduan.length; i++) {
                for (let b= 0;b < msg.netplan[this.optionsData].addresses.length; b++) {
                    //    console.log("str1",netstates.netplan.eth0.addresses[b].substring(0,netstates.netplan.eth0.addresses[b].indexOf("/")))
                     var ipos = msg.netplan[this.optionsData].addresses[b].indexOf("/");//指定开始的字符串
                    let str1=msg.netplan[this.optionsData].addresses[b].substring(0,ipos);
                    if(this.tableDataPanduan[i].address == str1){   
                    
                    }else{
                    //     this.$message({
                    //     message: '静态地址有误',
                    //     type: 'warning'
                    // });
                    }
            }  
            }
        }
        var  addressesN = msg.netplan[this.optionsData].addresses.map((value, index) => {
                         return {
                            address: value,
                            id: index
                          }  
        })
        this.sizeForm.tableData = addressesN 
        //获取静态路由
        var dataJ = msg.netplan[this.optionsData].routes
        this.sizeForm.tableRouter=[]
         for (let r= 0;r < dataJ.length; r++) {
                this.sizeForm.tableRouter.push(dataJ[r])
        }
        this.sizeForm.gateway4 = msg.netplan[this.optionsData].gateway4
        var  legend = msg.netplan[this.optionsData].nameservers.addresses.map((value, index) => {
                         return {
                            address: value,
                            id: index
                          }  
        })
       this.sizeForm.tableDataDNS = legend 
        }else {  
            this.sizeForm= {
                name: this.optionsData,
                region: '00:11:14:1a:62:fe',
                MTU: '1500',
                date2: '',
                delivery: false,
                type: [],
                resource: '',
                desc: true,
                status:'NO',
                gateway4: msg.netplan[this.optionsData].gateway4,
                 mtu:'',
                mac:'',
                moren:'',
                speed:'',
            }
             //获取静态路由
        var dataJ = msg.netplan[this.optionsData].routes
        this.sizeForm.tableRouter=[]
         for (let r= 0;r < dataJ.length; r++) {
                this.sizeForm.tableRouter.push(dataJ[r])
        }
        var  addressesN = msg.netplan[this.optionsData].addresses.map((value, index) => {
                         return {
                            address: value,
                            id: index
                          }  
        })
        this.sizeForm.tableData = addressesN 
         var  legend = msg.netplan[this.optionsData].nameservers.addresses.map((value, index) => {
                         return {
                            address: value,
                            id: index
                          }  
        })
       this.sizeForm.tableDataDNS = legend 
            }
         
    },
    changeName(val){
       console.log("val",val) 
    this.sizeForm.name = val
    this.optionsData =  val
    this.publishClient()
    },
    gernerateClass(status){
        console.log("status",status)
        if(status=='YES'){
            return 'status'
        }else {
             return 'statusNo'
        }
    },

      changeVal(val,e){
        this.sizeForm.tableData[e].disabled = false
      },
      changeValT(val,e){
        this.sizeForm.tableRouter[e].disabled = false
      },
      handleClick(scope,e){
        console.log(scope,'scope');
      }
    }
};
</script>
  
  <style>
.test-div i {
    font-size: 25px;
}
</style>
  <style lang="scss" scoped>
.formItem /deep/ .el-form-item__content {
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
}
.formItem /deep/ .el-form-item__label {
    text-align: left;
    font-size: 15px;
}
.formItem .el-form-item{
    margin-bottom: 15px;
}
.tableFormItem  {
    margin-bottom: 15px!important;
} 
.tableFormItem /deep/ .el-form-item__content{
       margin-left: 0px!important;
}
.container {
    width: 100%;
    height: 100%;
    overflow-y: scroll;
    &::-webkit-scrollbar {
        width: 0;
    }
    .title {
        width: 95%;
        font-size: 25px;
        text-align: left;
        border-bottom: 1px solid black;
        margin-bottom: 20px;
    }
    .el-col-6{
        padding-left: 0;
        padding-top: 0;
    }
}
.status{
    width: 10px; height: 10px; border-radius: 50%; background: green
}
.statusNo{
     width: 10px; height: 10px; border-radius: 50%; background: red
}
</style>
  