<template>
  <div class="ip-set h-full">
    <div class="flex flex-col h-full justify-between">
      <div class="level1">
        <div class="title">设置</div>
        <div class="tip">输入服务器IP地址</div>
        <div class="flex items-center">
          <a-input v-model:value="ipData.ip1" class="ip-num" />
          <span class="dian">●</span>
          <a-input v-model:value="ipData.ip2" class="ip-num" />
          <span class="dian">●</span>
          <a-input v-model:value="ipData.ip3" class="ip-num" />
          <span class="dian">●</span>
          <a-input v-model:value="ipData.ip4" class="ip-num" />
          <img class="maohao" src="../../assets/imgs/maohao.png" />
          <a-input v-model:value="ipData.port" class="ip-num" />
        </div>
        <div class="pt-20px flex items-center">
          <!-- <a-tag color="success" class="tag check-tag" v-if="showCheckResult">
            <template #icon>
              <check-circle-filled />
            </template>
            验证通过
          </a-tag> -->
          <a-tag color="error" class="tag check-tag" v-if="showCheckResult">
            <template #icon>
              <close-circle-filled />
            </template>
            验证失败，重新输入
          </a-tag>
        </div>
      </div>
      <div class="level2">
        <div class="text-right">
          <qm-button type="primary" @click="nextStep"
            >下一步 <template #icon> <SwapRightOutlined /> </template
          ></qm-button>
        </div>
        <footer-info></footer-info>
      </div>
    </div>
  </div>
</template>
<script name="IpSet" lang="ts" setup>
import { ref, computed, reactive } from "vue";
import {
  CheckCircleFilled,
  CloseCircleFilled,
  SwapRightOutlined,
} from "@ant-design/icons-vue";
import FooterInfo from "@/components/FooterInfo/index.vue";
import { local } from "@/utils/tool";

const emit = defineEmits(["next"]);
const ipData = reactive({
  ip1: "",
  ip2: "",
  ip3: "",
  ip4: "",
  port: "",
});
const checkClicked = ref(false);

const IPV4Single = () => {
  const ipStr = `${ipData.ip1}.${ipData.ip2}.${ipData.ip3}.${ipData.ip4}:${ipData.port}`;
  const IPV4 =
    /^((25[0-5]|2[0-4]\d|[01]?\d\d?)\.){3}(25[0-5]|2[0-4]\d|[01]?\d\d?):\d{1,5}$/;
  return IPV4.test(ipStr);
};

const showCheckResult = computed(() => {
  return checkClicked.value && !IPV4Single();
});

const nextStep = () => {
  checkClicked.value = true;
  if (IPV4Single()) {
    local.set(
      "baseUrl",
      `http://${ipData.ip1}.${ipData.ip2}.${ipData.ip3}.${ipData.ip4}:${ipData.port}`
    );
    emit("next");
  }
};
</script>
<style lang="less" scoped>
.ip-set {
  padding-top: 120px;
  .level2 {
    .text-right {
      padding-right: 24px;
      padding-bottom: 24px;
    }
  }
  .level1 {
    padding: 0 24px;
    .tag {
      margin-left: 10px;
    }
    .ip-num {
      height: 60px;
      font-size: 20px;
      text-align: center;
      background: #f3f4f6;
    }
    .title {
      color: @text-color1;
      font-weight: bold;
      line-height: 32px;
      font-size: 24px;
    }
    .tip {
      color: @text-color3;
      line-height: 26px;
      font-size: 18px;
      margin-top: 4px;
      margin-bottom: 24px;
    }
    .maohao {
      height: 20px;
      margin-left: 3px;
      margin-right: 3px;
    }
    .dian {
      padding: 0 4px;
    }
  }
}
</style>
