<template>
  <div class="app-container " >
    <div style="background-color: #fff;padding: 20px;border-radius: 10px; padding-bottom: 0;">
      <p
        style="margin: 0; font-weight: 800;font-size: 16px;color: #343434;display: flex;align-items: center;margin-bottom: 20px;border-left: 6px solid #03BF8A;margin-left: -20px;">
        <!-- <img src="../../../assets/images/icon_htgl_btzs.png" alt="" style="width: 16px;height: 20px;"> -->
        <span style="margin-left: 10px;">搜索条件</span>
      </p>
      <div style="padding-bottom: 0;margin-bottom: 20px;">
        <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch"
          label-width="68px">
          <el-form-item label="网络名称" prop="networkName">
            <el-input v-model="queryParams.networkName" placeholder="请输入网络名称" clearable
              @keyup.enter.native="handleQuery" />
          </el-form-item>
          <el-form-item label="网卡名称" prop="networkCardName">
            <el-input v-model="queryParams.networkCardName" placeholder="请输入网卡名称" clearable
              @keyup.enter.native="handleQuery" />
          </el-form-item>

          <el-form-item>
            <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
            <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd"
          v-hasPermi="['manage:NetworkManage:add']">新增</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="success" plain icon="el-icon-edit" size="mini" :disabled="single" @click="handleUpdate"
          v-hasPermi="['manage:NetworkManage:edit']">修改</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="danger" plain icon="el-icon-delete" size="mini" :disabled="multiple" @click="handleDelete"
          v-hasPermi="['manage:NetworkManage:remove']">删除</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport"
          v-hasPermi="['manage:NetworkManage:export']">导出</el-button>
      </el-col>
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>

    <el-table :height="tableMaxHeight" v-loading="loading" :data="NetworkManageList" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column label="网络名称" align="center" prop="networkName" show-overflow-tooltip />
      <el-table-column label="网卡名称" align="center" prop="networkCardName" show-overflow-tooltip />
      <el-table-column label="网络地址" align="center" prop="networkIp" show-overflow-tooltip />
      <el-table-column label="子网掩码" align="center" prop="subnetMask" show-overflow-tooltip />
      <el-table-column label="默认网关" align="center" prop="defaultGateway" show-overflow-tooltip />
      <el-table-column label="物理地址" align="center" prop="physicalAddress" show-overflow-tooltip />
      <el-table-column label="分配方式" align="center" prop="allocationScheme" show-overflow-tooltip />
      <el-table-column label="域名服务器" align="center" prop="domainNameServer" show-overflow-tooltip />
      <!-- <el-table-column label="备注" align="center" prop="remark" /> -->
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button size="mini" style="width: 42px;height: 26px;
                                   background: #E5F9F3;
                                          border-radius: 4px;border: 1px solid #03BF8A;color: #03BF8A;
                                   " type="text" plain @click="handleUpdate(scope.row)"
            v-hasPermi="['manage:NetworkManage:edit']">修改</el-button>
          <el-button size="mini" type="text" style="width: 42px;height: 26px;background: #FFF1EA;
                                         border-radius: 4px;border: 1px solid #FE570E;color: #FE570E;"
            @click="handleDelete(scope.row)" v-hasPermi="['manage:NetworkManage:remove']">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
      @pagination="getList" />

    <!-- 添加或修改网络管理对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="800px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="100px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="网络名称" prop="networkName">
              <el-input v-model="form.networkName" placeholder="请输入网络名称" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="网卡名称" prop="networkCardName">
              <el-input v-model="form.networkCardName" placeholder="请输入网卡名称" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="网络地址" prop="networkIp">
              <el-input v-model="form.networkIp" placeholder="请输入网络地址" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="子网掩码" prop="subnetMask">
              <el-input v-model="form.subnetMask" placeholder="请输入子网掩码" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="默认网关" prop="defaultGateway">
              <el-input v-model="form.defaultGateway" placeholder="请输入默认网关" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="物理地址" prop="physicalAddress">
              <el-input v-model="form.physicalAddress" placeholder="请输入物理地址" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="分配方式" prop="allocationScheme">
              <el-input v-model="form.allocationScheme" placeholder="请输入分配方式" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="域名服务器" prop="domainNameServer">
              <el-input v-model="form.domainNameServer" placeholder="请输入域名服务器 DNS" />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="备注" prop="remark">
              <el-input v-model="form.remark" type="textarea" placeholder="请输入内容" />
            </el-form-item>
          </el-col>
        </el-row>








        <!-- <el-form-item label="删除标志" prop="delFlag">
          <el-input v-model="form.delFlag" placeholder="请输入删除标志" />
        </el-form-item> -->

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button style="background-color:#03BF8A ; border-color: #03BF8A;" type="primary" @click="submitForm">确 定</el-button>
               <el-button style="background-color:#DDEBE7 ; border-color: #DDEBE7; color: #475669;" @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import {
    listNetworkManage,
    getNetworkManage,
    delNetworkManage,
    addNetworkManage,
    updateNetworkManage
  } from "@/api/manage/NetworkManage"

  export default {
    name: "NetworkManage",
    data() {
      return {
        // 遮罩层
        loading: true,
        // 选中数组
        ids: [],
        // 非单个禁用
        single: true,
        // 非多个禁用
        multiple: true,
        // 显示搜索条件
        showSearch: true,
        // 总条数
        total: 0,
        // 网络管理表格数据
        NetworkManageList: [],
        // 弹出层标题
        title: "",
        // 是否显示弹出层
        open: false,
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          networkName: null,
          networkCardName: null,
          networkIp: null,
          subnetMask: null,
          defaultGateway: null,
          physicalAddress: null,
          allocationScheme: null,
          domainNameServer: null,
        },
        // 表单参数
        form: {},
        // 表单校验
        rules: {
          networkName: [{
            required: true,
            message: "不能为空",
            trigger: "blur"
          }],
        },
          tableMaxHeight:'200',
      }
    },
    created() {
      this.getList()
   window.onresize = () => {
     	      this.changeTableMaxHeight()
     	    }
     	    this.changeTableMaxHeight()
   },
   mounted() {
   	window.onresize = () => {
   	          this.changeTableMaxHeight()
   	        }
   	        this.changeTableMaxHeight()
   },
    methods: {
      /** 查询网络管理列表 */
      getList() {
        this.loading = true
        listNetworkManage(this.queryParams).then(response => {
          this.NetworkManageList = response.rows
          this.total = response.total
          this.loading = false
        })
      },
      // 取消按钮
      cancel() {
        this.open = false
        this.reset()
      },
      // 表单重置
      reset() {
        this.form = {
          networkId: null,
          networkName: null,
          networkCardName: null,
          networkIp: null,
          subnetMask: null,
          defaultGateway: null,
          physicalAddress: null,
          allocationScheme: null,
          domainNameServer: null,
          delFlag: null,
          createBy: null,
          createTime: null,
          updateBy: null,
          updateTime: null,
          remark: null
        }
        this.resetForm("form")
      },
      /** 搜索按钮操作 */
      handleQuery() {
        this.queryParams.pageNum = 1
        this.getList()
      },
      /** 重置按钮操作 */
      resetQuery() {
        this.resetForm("queryForm")
        this.handleQuery()
      },
      // 多选框选中数据
      handleSelectionChange(selection) {
        this.ids = selection.map(item => item.networkId)
        this.single = selection.length !== 1
        this.multiple = !selection.length
      },
      /** 新增按钮操作 */
      handleAdd() {
        this.reset()
        this.open = true
        this.title = "添加网络管理"
      },
      /** 修改按钮操作 */
      handleUpdate(row) {
        this.reset()
        const networkId = row.networkId || this.ids
        getNetworkManage(networkId).then(response => {
          this.form = response.data
          this.open = true
          this.title = "修改网络管理"
        })
      },
      /** 提交按钮 */
      submitForm() {
        this.$refs["form"].validate(valid => {
          if (valid) {
            if (this.form.networkId != null) {
              updateNetworkManage(this.form).then(response => {
                this.$modal.msgSuccess("修改成功")
                this.open = false
                this.getList()
              })
            } else {
              addNetworkManage(this.form).then(response => {
                this.$modal.msgSuccess("新增成功")
                this.open = false
                this.getList()
              })
            }
          }
        })
      },
      /** 删除按钮操作 */
      handleDelete(row) {
        const networkIds = row.networkId || this.ids
        this.$modal.confirm('是否确认删除网络管理数据项？').then(function() {
          return delNetworkManage(networkIds)
        }).then(() => {
          this.getList()
          this.$modal.msgSuccess("删除成功")
        }).catch(() => {})
      },
      /** 导出按钮操作 */
      handleExport() {
        this.download('manage/NetworkManage/export', {
          ...this.queryParams
        }, `NetworkManage_${new Date().getTime()}.xlsx`)
      },
      // 获取屏幕高度
          showFilterForm () {
                this.filterActive = !this.filterActive
                this.changeTableMaxHeight()
              },

              changeTableMaxHeight () {
                let height = document.body.offsetHeight // 网页可视区域高度

                // if (this.filterActive) {
                //   this.tableMaxHeight = height - 320
                // } else {
                  5
                  this.tableMaxHeight = height - 250
                // }
                console.log(height,this.tableMaxHeight)
              }
    }
  }
</script>
<style>
  .el-table .el-table__header-wrapper th,
  .el-table .el-table__fixed-header-wrapper th {
    background-color: #F5F6F8;
  }

  .el-checkbox__input.is-checked .el-checkbox__inner {
    background-color: #03BF8A;
    border-color: #03BF8A;
  }

  .el-checkbox__input.is-indeterminate .el-checkbox__inner {
    background-color: #03BF8A;
    border-color: #03BF8A;
  }
</style>
