<template>
  <el-card class="multi-open-restriction" shadow="never">
    <div class="header">
      <h3 class="title">限制多开说明</h3>
    </div>

    <div class="description">
      <p>开启后游戏盾会在本地进行连接数限制。可抵御传统的修改窗口IP，机器码等方式绕过多开限制。当连接数达到预设上限后，游戏盾会弹出提示并阻止其新建连接。</p>
      <br />
      <p>限制模式说明：</p>
      <p>1、全局模式：限制所有过盾连接的总数(适合多开类型游戏)</p>
      <p>2、单IP模式：限制对每个本地IP(例127.0.12.10)的连接数上限数量</p>
      <p>3、规则模式：限制单条转发规则的连接数上限(适合单区类型游戏)</p>
      <p>4、独立模式：指定单独的盾IP进行限制(适合单窗口多连接的游戏，只限公用的端口)</p>
      <p>特别注意:部分游戏会同时连接多个端口，可通过火绒或其他TCP查看工具进行溯源。</p>
    </div>

    <div class="divider"></div>

    <el-form class="setting-form" label-position="top">
      <el-row :gutter="40">
        <el-col :span="12">
          <el-form-item label="限制模式">
            <el-select v-model="form.mode" placeholder="请选择限制模式" style="width: 100%">
              <el-option label="全局模式" value="global" />
              <el-option label="单IP模式" value="single_ip" />
              <el-option label="规则模式" value="rule" />
              <el-option label="独立模式" value="independent" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="限制数量">
            <el-input v-model="form.count" type="number" placeholder="0" />
          </el-form-item>
        </el-col>
      </el-row>

      <div class="form-actions">
        <el-button type="primary" class="is-gradient" @click="handleUpdate">更新设置</el-button>
      </div>
    </el-form>
  </el-card>
</template>

<script setup lang="ts">
import { reactive } from 'vue'

const form = reactive({
  mode: 'global',
  count: 0
})

const handleUpdate = () => {
  console.log('Update settings:', form)
}
</script>

<style lang="scss" scoped>
.multi-open-restriction {
  background-color: var(--admin-card-bg);
  border: 1px solid var(--admin-border-color);
  border-radius: 8px;
  color: var(--admin-text-primary);

  :deep(.el-card__body) {
    padding: 32px;
  }

  .header {
    margin-bottom: 24px;

    .title {
      font-size: 16px;
      font-weight: 500;
      margin: 0;
      color: var(--admin-text-primary);
    }
  }

  .description {
    font-size: 13px;
    color: var(--admin-text-secondary);
    line-height: 1.8;

    p {
      margin: 0;
    }
  }

  .divider {
    height: 1px;
    background-color: var(--admin-border-color);
    margin: 32px 0;
  }

  .setting-form {
    .form-actions {
      display: flex;
      justify-content: flex-end;
      margin-top: 24px;

    }
  }
}
</style>