<script setup name="IPTheChange">
import { onMounted, ref, toRefs } from 'vue'
import FormBox from './modules/formBox.vue'
import { show } from '@/api/systemConfig/ipTheChange.js'
import pageIcon from '@/assets/images/systemConfig/systemParamPage.png'

const ipList = ref([])

// 获取数据
const getQueryAll = async () => {
  const { data } = await show({})
  ipList.value = data
}

const formConfirm = () => {
  getQueryAll()
}

onMounted(() => {
  getQueryAll()
})
</script>

<template>
  <div class="app-container scroller">
    <div class="app-container__body">
      <IconTitle :icon="pageIcon" title="IP设置" />
      <div class="box">
        <div class="line"></div>
        <div class="content">
          <el-table ref="table" class="table" :data="ipList" stripe>
            <el-table-column type="index" label="序号" width="100" align="center"></el-table-column>
            <el-table-column prop="networkInterface" label="网卡" align="center"></el-table-column>
            <el-table-column prop="inetAddress" label="IP地址" align="center"></el-table-column>
            <el-table-column prop="subnetMask" label="子网掩码" align="center"></el-table-column>
            <el-table-column prop="gateway" label="默认网关" align="center"></el-table-column>
            <el-table-column prop="dns" label="DNS" align="center"></el-table-column>
          </el-table>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.app-container__body {

  .box {
    display: flex;
    flex-direction: column;
    flex: 1;
    overflow: hidden;
    background: #fff;

    .line {
      width: 100%;
      height: 2px;
      border-radius: 5px 5px 0px 0px;
      background: linear-gradient(90deg,
          rgba(33, 103, 217, 1) 0%,
          rgba(17, 200, 250, 1) 34.03%,
          rgba(33, 103, 217, 1) 64.58%,
          rgba(48, 128, 255, 1) 100%);
    }

    .content {
      padding: 28px 30px;
      flex: 1;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      .table{
        height: 100%;
      }
    }
  }
}
</style>