<script setup lang="ts">
import { onMounted, onUnmounted, ref } from 'vue';

import { ElButton, ElCard, ElCol, ElMessage, ElRow } from 'element-plus';

import { useVbenForm } from '#/adapter/form';
import { cdcmCDCMAPI } from '#/cdcm/api/api';
import req from '#/cdcm/api/req_code';

const ret = ref();

const get_system_info = async () => {
  const b = await cdcmCDCMAPI(null, req.CDCMGetNetworkInfo);
  ret.value = b;
  netAAPI.setValues(ret.value.ip[0]);
  netBAPI.setValues(ret.value.ip[1]);
  dnsAPI.setValues(ret.value.dns);
};

onMounted(() => {
  get_system_info();
});

onUnmounted(() => {});

const netConfig = {
  commonConfig: {
    componentProps: {
      class: 'w-full',
    },
  },
  showDefaultActions: false,
  schema: [
    {
      component: 'Select',
      componentProps: {
        allowClear: true,
        filterOption: true,
        options: [
          {
            label: '静态IP',
            value: 'STATIC',
          },
          {
            label: '动态IP',
            value: 'DHCP',
          },
          {
            label: '动态IP及DNS',
            value: 'DHCP_DNS',
          },
        ],
        placeholder: '请选择',
        showSearch: true,
        defaultValue: 'STATIC',
      },
      fieldName: 'mode',
      label: 'IP模式',
    },
    {
      component: 'Input',
      fieldName: 'ip',
      label: 'IP地址',
      defaultValue: 'aa',
    },
    {
      component: 'Input',
      fieldName: 'mk',
      label: '子网掩码',
      defaultValue: 'aa',
    },
    {
      component: 'Input',
      fieldName: 'gw',
      label: '网关地址',
      defaultValue: 'aa',
    },
  ],
  wrapperClass: 'grid-cols-1',
};
const dnsConfig = {
  commonConfig: {
    componentProps: {
      class: 'w-full',
    },
  },
  showDefaultActions: false,
  schema: [
    {
      component: 'Input',
      fieldName: 'dns1',
      label: '首选地址',
    },
    {
      component: 'Input',
      fieldName: 'dns2',
      label: '备用地址',
    },
  ],
  wrapperClass: 'grid-cols-1',
};
const [netA, netAAPI] = useVbenForm(netConfig);
const [netB, netBAPI] = useVbenForm(netConfig);
const [dns, dnsAPI] = useVbenForm(dnsConfig);
const set_network_info = async () => {
  // 获取所有表单数据
  const values = await netAAPI.getValues();
  const values2 = await netBAPI.getValues();
  const values3 = await dnsAPI.getValues();
  ElMessage.success(JSON.stringify(values));
  ElMessage.success(JSON.stringify(values2));
  ElMessage.success(JSON.stringify(values3));
};
</script>
<template>
  <page>
    <ElRow :gutter="20" class="equal-height-row">
      <ElCol :span="8">
        <ElCard class="equal-height-card">
          <template #header>
            <div class="card-header">
              <span>网卡A</span>
            </div>
          </template>
          <netA />
        </ElCard>
      </ElCol>
      <ElCol :span="8">
        <ElCard class="equal-height-card">
          <template #header>
            <div class="card-header">
              <span>网卡B</span>
            </div>
          </template>
          <netB />
        </ElCard>
      </ElCol>
      <ElCol :span="8">
        <ElCard class="equal-height-card">
          <template #header>
            <div class="card-header">
              <span>DNS</span>
            </div>
          </template>
          <dns />
        </ElCard>
      </ElCol>
      <ElCol :span="24" class="mt-4 text-center">
        <ElButton @click="set_network_info" type="primary" class="large-button">
          设定
        </ElButton>
      </ElCol>
    </ElRow>
  </page>
</template>

<style scoped>
.card-header {
  font-size: 32px;
  font-weight: bold;
}

.equal-height-row {
  display: flex;
  flex-wrap: wrap;
}

.equal-height-card {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.equal-height-card :deep(.el-card__body) {
  flex: 1;
  padding: 20px;
  font-size: 20px;
}

.equal-height-card :deep(.el-form-item__label) {
  font-size: 20px;
}

.equal-height-card :deep(.el-input__inner),
.equal-height-card :deep(.el-select__input) {
  height: 40px;
  font-size: 20px;
  line-height: 40px;
}

.large-button {
  padding: 12px 24px;
  font-size: 20px;
}
</style>
