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

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">
    <PageTitle>
      <template #title>IP设置</template>
    </PageTitle>
    <div class="app-container__body">
      <FormBox v-for="(item,index) in ipList" :key="index" :itemData="item"  @confirm="formConfirm" />
    </div>
  </div>
</template>

<style lang="scss" scoped>
.app-container__body {
  .contentActive {
    height: 400px;
    .item {
      display: flex;
      height: 32px;
      color: #7a8495;
      .key {
        padding-left: 5px;
        width: 300px;
        vertical-align: middle;
        float: left;
        font-size: 14px;
        font-weight: 700;
        box-sizing: border-box;
      }
      .value {
        flex: 1;
        line-height: 32px;
      }
    }
  }
  :deep(.el-collapse-item__wrap){
    border: none;
  }
  :deep(.el-collapse-item){
    margin-bottom: 6px;
  }
  :deep(.el-collapse-item__header) {
    height: 32px;
    padding-left: 20px;
    background: #7a8495;
    color: #fff;
  }
  :deep(.el-collapse-item__header.is-active) {
    background: #2c9ef7;
  }
}
</style>