<template>
  <div
    style="
      margin-top: -5vh;
      border: 0.5px solid gray;
      margin-left: 0.1vw;
      border-radius: 5px;
      padding-left: 1.5vw;
    "
  >
    <div style="margin-top: 1.2vh">
      <BasicForm :showResetButton="false" :showSubmitButton="false" @register="register">
        <template #add>
          <div>
            <template v-for="(item, index) in scopeData" :key="item.id1">
              <span style="display: none">{{ item }}</span>
              <div
                style="
                  display: flex;
                  width: 45vw;
                  flex-direction: row;
                  border: 0.5px solid gray;
                  border-radius: 5px;
                  margin-left: -1.5vw;
                "
              >
                <div
                  style="
                    width: 14vw;
                    border: 0.5px solid gray;
                    border-radius: 5px;
                    margin-left: -2vw;
                  "
                >
                  <BasicForm
                    :showResetButton="false"
                    :showSubmitButton="false"
                    @register="registerLeft"
                  />
                </div>
                <div style="width: 29.3vw; border: 0.5px solid gray; border-radius: 5px">
                  <BasicForm
                    :showResetButton="false"
                    :showSubmitButton="false"
                    @register="registerRight"
                  />
                  <div>
                    <template v-for="(item1, index1) in item.mappings" :key="item1.id2">
                      <span style="display: none">{{ index1 }}</span>
                      <span style="display: none">{{ item1 }}</span>
                      <KeyAndValVue @clear="clearFun(index, index1)" />
                    </template>
                    <div
                      style="
                        margin-top: -3.8vh;
                        margin-left: 2.3vw;
                        position: relative;
                        top: -1.5vh;
                      "
                    >
                      <a-button size="small" type="default" @click="handleAddMapping(index)">
                        Add mapping
                      </a-button>
                    </div>
                  </div>
                </div>
                <div style="width: 1vw; margin-top: 8.5vh; margin-left: 0.5vw">
                  <span @click="handleDelScope(index)" style="color: red; cursor: pointer">X</span>
                </div>
              </div>
              <div style="height: 2vh"></div>
            </template>
            <div style="margin-left: -1vw">
              <a-button size="small" type="default" @click="handleAddScope">
                Add communication config
              </a-button>
            </div>
          </div>
        </template>
      </BasicForm>
    </div>
  </div>
</template>
<script lang="ts">
  import { defineComponent, ref } from 'vue';
  import { BasicForm, useForm } from '/@/components/Form';
  import { snmpSchemas, snmpLeftSchemas, snmpRightSchemas } from './index';
  import { Alert, Divider, Descriptions } from 'ant-design-vue';
  import KeyAndValVue from './cpns/KeyAndVal.vue';

  export default defineComponent({
    components: {
      BasicForm,
      [Alert.name]: Alert,
      [Divider.name]: Divider,
      [Descriptions.name]: Descriptions,
      [Descriptions.Item.name]: Descriptions.Item,
      KeyAndValVue,
    },

    emits: ['next', 'prev', 'register'],
    setup() {
      const scopeData: any = ref([
        {
          id1: 1,
          mappings: [
            {
              id2: 2,
            },
          ],
        },
      ]);

      const [register] = useForm({
        labelWidth: 150,
        schemas: snmpSchemas,
        actionColOptions: {
          span: 14,
        },
      });
      const [registerLeft] = useForm({
        labelWidth: 100,
        schemas: snmpLeftSchemas,
        actionColOptions: {
          span: 14,
        },
      });
      const [registerRight] = useForm({
        labelWidth: 150,
        schemas: snmpRightSchemas,
        actionColOptions: {
          span: 14,
        },
      });

      const handleAddMapping = (i) => {
        scopeData.value[i].mappings.push({
          id2: Date.now() + 3,
        });
      };
      const clearFun = (i1, i2) => {
        scopeData.value[i1].mappings.splice(i2, 1);
      };

      const handleDelScope = (i) => {
        scopeData.value.splice(i, 1);
      };

      const handleAddScope = () => {
        if (scopeData.value.length < 4) {
          scopeData.value.push({
            id1: Date.now() + 1,
            mappings: [
              {
                id2: Date.now() + 2,
              },
            ],
          });
        }
      };

      return {
        register,
        registerLeft,
        registerRight,
        handleAddMapping,
        scopeData,
        handleDelScope,
        handleAddScope,
        clearFun,
      };
    },
  });
</script>
<style lang="less" scoped></style>