s
<template>
  <div class="flex flex-col gap-8 mb-16">
    <h1 class="">Form</h1>
    <p>Form consists of input, radio, select, checkbox and so on. With form, you can collect, verify and submit data.</p>

    <el-card>
      <template #header>Basic Form</template>
      <div class="flex flex-col gap-3 items-start">
        <p>
          It includes all kinds of input items, such as input, select, radio and checkbox. In each form component, you need a form-item field to be the container of your input
          item.
        </p>
        <div class="flex gap-2">
          <el-button @click="collapsed = !collapsed">Toggle</el-button>
          <el-menu
            id="el-menu-primary"
            ref="menuRef"
            data-testid="components-sidebar-vgcvofuzyo"
            :default-active="computedStates.active_item.to"
            class="w-full overflow-hidden !px-4 overflow-y-auto"
            :router="true"
            :unique-opened="true"
            :collapse-transition="false"
            :collapse="collapsed"
          >
            <el-menu-item v-index index="/" class="mat-grid-view" data-testid="components-sidebar-ycllqnbrv">
              <template #title>{{ $t('sidebar.dashboard.text') }}</template>
            </el-menu-item>
            <el-menu-item v-index index="/users" class="mat-person" data-testid="components-sidebar-lhxzcthocp">
              <template #title>{{ $t('sidebar.teams.text') }}</template>
            </el-menu-item>
            <el-menu-item v-index index="/devices" class="mat-devices" data-testid="components-sidebar-mpftdiklbu">
              <template #title>{{ $t('sidebar.devices.text') }}</template>
            </el-menu-item>
            <el-menu-item v-index index="/agent-configuration" class="mat-folder-eye" data-testid="sidebar-agent-configuration">
              <template #title>{{ $t('sidebar.agent_configuration.text') }}</template>
            </el-menu-item>
            <el-menu-item v-index data-testid="components-sidebar-yzjnblrbvn" index="/sites" regex="/sites" class="mat-lan">
              <template #title>{{ $t(config.TP === 'berqnet' ? 'sidebar.sites.text' : 'sites.text') }}</template>
            </el-menu-item>
            <el-sub-menu v-index index="/rules" data-testid="components-sidebar-tmdvrlndak">
              <template #title>
                <i class="mat-rule" />
                <span>{{ $t('sidebar.rules.text') }}</span>
              </template>
              <el-menu-item v-index index="/rules/firewall" data-testid="components-sidebar-pezlxnffvl">
                <template #title>{{ $t('sidebar.rules.firewall.text') }}</template>
              </el-menu-item>
              <el-menu-item v-if="config.TP === 'berqnet'" v-index index="/rules/routes/static" data-testid="components-sidebar-jvruigbwdp">
                <template #title>{{ $t('sidebar.rules.routes.text') }}</template>
              </el-menu-item>
              <el-menu-item v-index index="/rules/forwarding" data-testid="components-sidebar-iizzyuvzkh">
                <template #title>{{ $t('sidebar.rules.forwarding.text') }}</template>
              </el-menu-item>
              <!-- TODO: This feature will open after all controller versions are 14.0.0 v-if="false" <el-menu-item v-index index="/rules/qos" data-testid="components-sidebar-krxfszjkyp"> {{ $t('sidebar.rules.qos.text') }} </el-menu-item> -->
              <el-menu-item v-index index="/rules/categories" data-testid="components-sidebar-ptienrknds">
                <template #title>{{ $t('sidebar.settings.categories.text') }}</template>
              </el-menu-item>
            </el-sub-menu>
            <el-sub-menu v-index index="/ztna" data-testid="components-sidebar-bnihbcpjuh">
              <template #title>
                <i class="mat-shield" />
                <span>{{ $t('sidebar.ztna.text') }}</span>
              </template>
              <el-menu-item v-index index="/ztna/dashboard" data-testid="components-sidebar-nettrmotu">
                <template #title>{{ $t('sidebar.ztna.dashboard.text') }}</template>
              </el-menu-item>
              <el-menu-item v-index index="/ztna/behavior-detection" data-testid="components-sidebar-svzpertkjn">
                <template #title>{{ $t('sidebar.ztna.behaviors.text') }}</template>
              </el-menu-item>
              <el-menu-item v-index index="/ztna/device-posture-check" data-testid="components-sidebar-oreuewhqhj">
                <template #title>{{ $t('sidebar.ztna.device_posture_check.text') }}</template>
              </el-menu-item>
              <el-menu-item v-index index="/ztna/user-sign-on-policies" data-testid="components-sidebar-voglodqvvx">
                <template #title>{{ $t('sidebar.ztna.user_sign_on_policies.text') }}</template>
              </el-menu-item>
              <el-menu-item v-index index="/ztna/admin-sign-on-policies" data-testid="components-sidebar-vzizrrtpzn">
                <template #title>{{ $t('sidebar.ztna.admin_sign_on_policies.text') }}</template>
              </el-menu-item>
            </el-sub-menu>
            <el-sub-menu v-index index="/insights" data-testid="components-sidebar-neymnnlec">
              <template #title>
                <i class="mat-folder-open" />
                <span>{{ $t('sidebar.insights.text') }}</span>
              </template>
              <el-menu-item v-index index="/insights/alerts" data-testid="components-sidebar-mtklcicmi">
                <template #title>{{ $t('sidebar.insights.alerts.text') }}</template>
              </el-menu-item>
              <!--<el-menu-item v-index index="/insights/threats" data-testid="components-sidebar-pfrrtymjti">{{ $t('sidebar.threats.text') }}</el-menu-item>-->
              <el-menu-item v-index index="/insights/network-activity" data-testid="components-sidebar-selflhiujn">
                <template #title>{{ $t('sidebar.insights.all_traffic.text') }}</template>
              </el-menu-item>
              <el-menu-item v-index index="/insights/events" data-testid="components-sidebar-toksfhzzfq">
                <template #title>{{ $t('sidebar.insights.events.text') }}</template>
              </el-menu-item>
              <el-menu-item v-index index="/insights/blocked-ips" data-testid="components-sidebar-kvhegftktx">
                <template #title>{{ $t('sidebar.insights.blocked_ips.text') }}</template>
              </el-menu-item>
            </el-sub-menu>
            <el-sub-menu v-index index="/reports" data-testid="components-sidebar-bnihbcpjuh">
              <template #title>
                <i class="mat-bar-chart" />
                <span>{{ $t('sidebar.reports.text') }}</span>
              </template>
              <el-menu-item v-index index="/reports/automated" data-testid="components-sidebar-cnudlizsfg">
                <template #title>{{ $t('sidebar.insights.reports.text') }}</template>
              </el-menu-item>
              <el-menu-item v-index index="/reports/productivity" data-testid="components-sidebar-ewrnssadfv">
                <template #title>{{ $t('sidebar.insights.tracker.text') }}</template>
              </el-menu-item>
              <el-menu-item v-index index="/reports/device-posture" data-testid="components-sidebar-jdxrecyjwd">
                <template #title>{{ $t('sidebar.insights.device_posture_check_reports.text') }}</template>
              </el-menu-item>
            </el-sub-menu>
            <el-divider class="!my-2 !border-t-neutral-2" />
            <el-sub-menu v-index index="/settings" data-testid="components-sidebar-jcaexatpod">
              <template #title>
                <i class="mat-settings" />
                <span>{{ $t('sidebar.settings.text') }}</span>
              </template>
              <el-menu-item v-index index="/settings/cache-analytics" data-testid="components-sidebar-fswikkipil">
                <template #title>{{ $t('sidebar.settings.cache_analytics.text') }}</template>
              </el-menu-item>
              <el-menu-item v-if="config.TP !== 'timus'" v-index index="/settings/captive-portals" data-testid="components-sidebar-fswikkipil">
                <template #title>{{ $t('sidebar.settings.captive_portal.text') }}</template>
              </el-menu-item>
              <el-menu-item v-index index="/settings/integrations" data-testid="components-sidebar-integrations">
                <template #title>{{ $t('sidebar.settings.integrations.text') }}</template>
              </el-menu-item>
              <el-menu-item v-index index="/settings/configuration" data-testid="components-sidebar-zvuhmrdamh">
                <template #title>{{ $t('sidebar.settings.configuration.text') }}</template>
              </el-menu-item>
              <el-menu-item v-index index="/settings/tags" data-testid="components-sidebar-yxikpneqsi">
                <template #title>{{ $t('sidebar.settings.tags.text') }}</template>
              </el-menu-item>
              <el-menu-item v-index index="/settings/administrators" data-testid="components-sidebar-sjavprmmmj">
                <template #title>{{ $t('sidebar.settings.administrators.text') }}</template>
              </el-menu-item>
              <el-menu-item v-index index="/settings/organization" data-testid="components-sidebar-iywlhkkmta">
                <template #title>{{ $t('sidebar.settings.organization.text') }}</template>
              </el-menu-item>
              <el-menu-item v-index index="/settings/agent-deployment" data-testid="components-sidebar-yxbnijbpmj">
                <template #title>{{ $t('sidebar.settings.agent_deployment.text') }}</template>
              </el-menu-item>
            </el-sub-menu>
          </el-menu>
        </div>
      </div>

      <template #footer> <html-encode :tag="snippets.basic" /> </template>
    </el-card>
  </div>
</template>

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

  const config = useRuntimeConfig().public;
  const menuRef = ref();
  const menuIndexes = ref<{ value: string; to: string | undefined }[]>([]);
  const route = useRoute();
  const collapsed = ref(false);

  /****************************************************************************
   * Computed States
   ****************************************************************************/

  const computedStates = reactive({
    active_item: computed(() => {
      const currentPath = route.path;
      const sortedIndexes = [...menuIndexes.value].sort((a, b) => b.value.length - a.value.length);

      const matchingPath = sortedIndexes.find((pattern) => {
        if (currentPath === pattern.value) return true;
        if (currentPath.startsWith(pattern.value)) return true;

        return false;
      });

      return matchingPath || { value: '/', to: '/' };
    }),
  });

  const snippets = ref({
    basic: `
      <el-form :model="form" label-width="auto" :label-position="top" require-asterisk-position="right">
      </el-form>`,
    same_line: `
      <el-form :model="form" label-width="auto" :label-position="top" require-asterisk-position="right">
        <div class="el-form-items">
          <el-form-item label="Activity form">
            <el-input v-model="form.input" />
          </el-form-item>
          <el-form-item label="Activity zone">
            <el-select v-model="form.region" placeholder="please select your zone" class="!w-32">
              <el-option label="Zone one" value="shanghai" />
              <el-option label="Zone two" value="beijing" />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button class="isax-add" />
          </el-form-item>
        </div>
      </el-form>`,
    sticky: `
      <el-form :model="form" label-width="auto" :label-position="top" require-asterisk-position="right">
        <div class="el-form-items sticky">
          <el-form-item label="Activity form">
            <el-input v-model="form.input" />
          </el-form-item>
          <el-form-item label="Activity zone">
            <el-select v-model="form.region" placeholder="please select your zone" class="!w-32">
              <el-option label="Zone one" value="shanghai" />
              <el-option label="Zone two" value="beijing" />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button class="isax-add" />
          </el-form-item>
        </div>
      </el-form>
    `,
    validation: `
      <el-form
        ref="ruleFormRef"
        style="max-width: 600px"
        :model="ruleForm"
        :rules="rules"
        label-width="auto"
        class="demo-ruleForm"
        :size="formSize"
        status-icon
        require-asterisk-position="right"
        label-position="top"
      />`,
    size: `<el-form size="large" :model="ruleForm" label-width="auto" label-position="top"></el-form>`,
  });

  // Rules

  import type { ComponentSize, FormInstance, FormRules } from 'element-plus';

  interface RuleForm {
    name: string;
    region: string;
    count: string;
    date1: string;
    date2: string;
    delivery: boolean;
    location: string;
    type: string[];
    resource: string;
    desc: string;
  }

  const formSize = ref<ComponentSize>('default');
  const ruleFormRef = ref<FormInstance>();

  const ruleForm = reactive<RuleForm>({
    name: 'Hello',
    region: '',
    count: '',
    date1: '',
    date2: '',
    delivery: false,
    location: '',
    type: [],
    resource: '',
    desc: '',
  });

  const locationOptions = ['Home', 'Company', 'School'];

  const rules = reactive<FormRules<RuleForm>>({
    name: [
      { required: true, message: 'Please input Activity name', trigger: 'blur' },
      { min: 3, max: 5, message: 'Length should be 3 to 5', trigger: 'blur' },
    ],
    region: [
      {
        required: true,
        message: 'Please select Activity zone',
        trigger: 'change',
      },
    ],
    count: [
      {
        required: true,
        message: 'Please select Activity count',
        trigger: 'change',
      },
    ],
    date1: [
      {
        type: 'date',
        required: true,
        message: 'Please pick a date',
        trigger: 'change',
      },
    ],
    date2: [
      {
        type: 'date',
        required: true,
        message: 'Please pick a time',
        trigger: 'change',
      },
    ],
    location: [
      {
        required: true,
        message: 'Please select a location',
        trigger: 'change',
      },
    ],
    type: [
      {
        type: 'array',
        required: true,
        message: 'Please select at least one activity type',
        trigger: 'change',
      },
    ],
    resource: [
      {
        required: true,
        message: 'Please select activity resource',
        trigger: 'change',
      },
    ],
    desc: [{ required: true, message: 'Please input activity form', trigger: 'blur' }],
  });

  const submitForm = async (formEl: FormInstance | undefined) => {
    if (!formEl) return;
    await formEl.validate((valid: boolean, fields) => {
      if (valid) {
        console.log('submit!');
      } else {
        console.log('error submit!', fields);
      }
    });
  };

  const resetForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return;
    formEl.resetFields();
  };

  const options = Array.from({ length: 10000 }).map((_, idx) => ({
    value: `${idx + 1}`,
    label: `${idx + 1}`,
  }));
</script>