<template>
  <BasicDrawer v-bind="$attrs" @register="registerDrawer" :title="getTitle" width="30%" @ok="handleSubmit" destroyOnClose showFooter>
    <a-form ref="formRef" :label-col="labelCol" :wrapper-col="wrapperCol" :model="router" :rules="validatorRules">
      <a-form-item label="路由ID" name="routerId">
        <a-input v-model:value="router.routerId" placeholder="路由唯一ID" />
      </a-form-item>
      <a-form-item label="路由名称" name="name">
        <a-input v-model:value="router.name" placeholder="路由名称" />
      </a-form-item>
      <a-form-item label="路由URI" name="uri">
        <a-input v-model:value="router.uri" placeholder="路由URL" />
      </a-form-item>
      <a-form-item label="路由状态" name="status">
        <a-switch default-checked :checked-value="1" :un-checked-value="0" v-model:checked="router.status" />
      </a-form-item>

      <a-form-item name="predicates" label="路由条件">
        <div v-for="(item, index) in router.predicates">
          <!--当name在noKeyRouter时不需要指定key-->
          <template v-if="noKeyRouter.includes(item.name)">
            <a-divider
              >{{ item.name }}
              <DeleteOutlined size="22" @click="removePredicate(router, index)" />
            </a-divider>
            <div>
              <template v-for="(tag, tagIndx) in item.args">
                <a-input
                  ref="inputRef2"
                  v-if="tagIndx == currentTagIndex && index == currentNameIndex"
                  type="text"
                  size="small"
                  :style="{ width: '190px' }"
                  v-model:value="state.inputValue"
                  @change="handleInputChange"
                  @blur="handleInputEditConfirm(item, tag, tagIndx)"
                  @keyup.enter="handleInputEditConfirm(item, tag, tagIndx)"
                />
                <a-tag
                  v-else
                  :key="tag"
                  style="margin-bottom: 2px"
                  :closable="true"
                  @close="() => removeTag(item, tag)"
                  @click="editTag(item, tag, tagIndx, index)"
                >
                  {{ tag }}
                </a-tag>
              </template>
              <a-input
                ref="inputRef"
                v-if="state.inputVisible && index == currentNameIndex"
                type="text"
                size="small"
                :style="{ width: '100px' }"
                v-model:value="state.inputValue"
                @change="handleInputChange"
                @blur="handleInputConfirm(item)"
                @keyup.enter="handleInputConfirm(item)"
              />
              <a-tag v-else style="background: #fff; borderstyle: dashed; margin-bottom: 2px" @click="showInput(item, index)">
                <PlusOutlined size="22" />
                新建{{ item.name }}
              </a-tag>
            </div>
          </template>
          <!--当name不在noKeyRouter时需要指定key-->
          <template v-if="!noKeyRouter.includes(item.name)">
            <a-divider
              >{{ item.name }}
              <DeleteOutlined size="22" @click="removePredicate(router, index)" />
            </a-divider>
            <div>
              <template v-for="(value, key) in item.args">
                <a-row>
                  <a-col :span="5" style="margin-top: 8px">
                    <span v-if="key == 'header'">Header名称</span>
                    <span v-if="key == 'regexp'">参数值</span>
                    <span v-if="key == 'param'">参数名</span>
                    <span v-if="key == 'name'">参数名</span>
                  </a-col>
                  <a-col :span="18">
                    <a-input
                      :defaultValue="value"
                      placeholder="参数值"
                      style="width: 70%; margin-right: 8px; margin-top: 3px"
                      @change="(e) => valueChange(e, item.args, key)"
                    />
                  </a-col>
                </a-row>
              </template>
            </div>
          </template>
        </div>
        <p class="btn" style="padding-top: 10px">
          <a-dropdown trigger="click">
            <template #overlay>
              <a-menu>
                <a-menu-item :key="item.name" v-for="item in tagArray" @click="predicatesHandleMenuClick(item)">{{ item.name }}</a-menu-item>
              </a-menu>
            </template>
            <a-button type="dashed" style="margin-left: 8px; width: 100%">
              添加路由条件
              <DownOutlined :size="22" />
            </a-button>
          </a-dropdown>
        </p>
      </a-form-item>
      <a-form-item name="predicates" label="过滤器">
        <div v-for="(item, index) in router.filters">
          <a-divider
            >{{ item.name }}
            <DeleteOutlined size="22" @click="removeFilter(router, index)" />
          </a-divider>
          <div v-for="(tag, index) in item.args" :key="tag.key">
            <!-- update-begin---author:wangshuai ---date: 20230829 for：vue3.0后自定义表单重复组件要用a-form-item-rest,否则会警告提醒------------  -->
            <a-form-item-rest>
              <a-input v-model:value="tag.key" placeholder="参数键" style="width: 45%; margin-right: 8px" />
              <a-input v-model:value="tag.value" placeholder="参数值" style="width: 40%; margin-right: 8px; margin-top: 3px" />
            </a-form-item-rest>
            <!-- update-end---author:wangshuai ---date: 20230829 for：vue3.0后自定义表单重复组件要用a-form-item-rest,否则会警告提醒------------  -->
            <CloseOutlined :size="22" @click="removeFilterParams(item, index)" />
          </div>
          <a-button type="dashed" style="margin-left: 28%; width: 37%; margin-top: 5px" size="small" @click="addFilterParams(item)">
            <DownOutlined :size="22" />
            添加参数
          </a-button>
        </div>
        <p class="btn" style="padding-top: 10px">
          <a-dropdown trigger="click">
            <template #overlay>
              <a-menu @click="filterHandleMenuClick">
                <a-menu-item :key="item.key" :name="item.name" v-for="item in filterArray">{{ item.name }}</a-menu-item>
              </a-menu>
            </template>
            <a-button type="dashed" style="margin-left: 8px; width: 100%">
              添加过滤器
              <DownOutlined />
            </a-button>
          </a-dropdown>
        </p>
      </a-form-item>
    </a-form>
  </BasicDrawer>
</template>
<script lang="ts" setup>
  import { ref, computed, unref, useAttrs, reactive, nextTick } from 'vue';
  import { BasicDrawer, useDrawerInner } from '/@/components/Drawer';
  import { saveOrUpdateRoute } from './route.api';
  import { DeleteOutlined } from '@ant-design/icons-vue';
  import { PlusOutlined } from '@ant-design/icons-vue';
  import { CloseOutlined } from '@ant-design/icons-vue';
  import { DownOutlined } from '@ant-design/icons-vue';
  // 声明Emits
  const emit = defineEmits(['register', 'success']);
  const labelCol = reactive({
    xs: { span: 24 },
    sm: { span: 5 },
  });
  const wrapperCol = reactive({
    xs: { span: 24 },
    sm: { span: 16 },
  });
  const attrs = useAttrs();
  const isUpdate = ref(true);
  const inputRef = ref();
  const inputRef2 = ref();
  let state = reactive({
    inputVisible: false,
    inputValue: '',
  });
  const currentNameIndex = ref(0);
  const currentTagIndex = ref(-1);
  const validatorRules = {
    routerId: [{ required: true, message: 'routerId不能为空', trigger: 'blur' }],
    name: [{ required: true, message: '路由名称不能为空', trigger: 'blur' }],
    uri: [{ required: true, message: 'uri不能为空', trigger: 'blur' }],
  };
  const noKeyRouter = ['Path', 'Host', 'Method', 'After', 'Before', 'Between', 'RemoteAddr'];
  const filterArray = [/*{ key: 0, name: '熔断器' },*/ { key: 1, name: '限流过滤器' }];
  const tagArray = ref([
    {
      name: 'Path',
      args: [],
    },
    {
      name: 'Header',
      args: {
        header: '',
        regexp: '',
      },
    },
    {
      name: 'Query',
      args: {
        param: '',
        regexp: '',
      },
    },
    {
      name: 'Method',
      args: [],
    },
    {
      name: 'Host',
      args: [],
    },
    {
      name: 'Cookie',
      args: {
        name: '',
        regexp: '',
      },
    },
    {
      name: 'After',
      args: [],
    },
    {
      name: 'Before',
      args: [],
    },
    {
      name: 'Between',
      args: [],
    },
    {
      name: 'RemoteAddr',
      args: [],
    },
  ]);
  const formRef = ref();
  let router = reactive({});

  const [registerDrawer, { setDrawerProps, closeDrawer }] = useDrawerInner(async (data) => {
    isUpdate.value = !!data?.isUpdate;
    setDrawerProps({ confirmLoading: false });
    initRouter();
    if (unref(isUpdate)) {
      router = Object.assign(router, data.record);
    }
  });
  /**
   * 标题
   */
  const getTitle = computed(() => (!unref(isUpdate) ? '新增路由' : '编辑路由'));

  //删除路由条件配置项
  function removeTag(item, removedTag) {
    let tags = item.args.filter((tag) => tag !== removedTag);
    item.args = tags;
  }

  //初始化参数
  function initRouter() {
    router = Object.assign(router, {
      id: '',
      routerId: '',
      name: '',
      uri: '',
      status: 1,
      predicates: [],
      filters: [],
    });
  }

  //添加路由选项
  function predicatesHandleMenuClick(e) {
    router.predicates.push({
      args: e.args,
      name: e.name,
    });
  }

  /**
   * 值修改事件
   * @param e
   * @param item
   * @param key
   */
  function valueChange(e, item, key) {
    item[key] = e.target.value;
  }

  function editTag(item, tag, tagIndex, index) {
    currentNameIndex.value = index;
    currentTagIndex.value = tagIndex;
    state.inputValue = tag;
    nextTick(() => {
      inputRef2.value[0].focus();
    });
  }

  //显示输入框
  function showInput(item, index) {
    state.inputValue = '';
    state.inputVisible = true;
    currentNameIndex.value = index;
    nextTick(() => {
      inputRef.value[0].focus();
    });
  }

  //路由选项输入框改变事件
  function handleInputChange(e) {
    console.info('change', e);
    console.info('change', e.target.value);
    //state.value = e.target.value;
    //state.tag=true;
  }

  //删除路由条件
  function removePredicate(item, index) {
    item.predicates.splice(index, 1);
  }

  //删除过滤器参数
  function removeFilterParams(item, index) {
    item.args.splice(index, 1);
  }

  //删除过滤器
  function removeFilter(item, index) {
    item.filters.splice(index, 1);
  }

  //添加过滤器参数
  function addFilterParams(item) {
    item.args.push({
      key: 'key' + item.args.length + 1,
      value: '',
    });
  }

  //过滤器添加事件
  function filterHandleMenuClick(e) {
    if (e.key == 0) {
      router.filters.push({
        args: [
          {
            key: 'name',
            value: 'default',
          },
          {
            key: 'fallbackUri',
            value: 'forward:/fallback',
          },
        ],
        name: 'Hystrix',
        title: filterArray[0].name,
      });
    }
    console.info('test', router);
    if (e.key == 1) {
      router.filters.push({
        args: [
          {
            key: 'key-resolver',
            value: '#{@ipKeyResolver}',
          },
          {
            key: 'redis-rate-limiter.replenishRate',
            value: 20,
          },
          {
            key: 'redis-rate-limiter.burstCapacity',
            value: 20,
          },
        ],
        name: 'RequestRateLimiter',
        title: filterArray[0].name,
      });
    }
  }

  //输入框确认
  function handleInputConfirm(item) {
    let tags = item.args;
    const inputValue = state.inputValue;
    if (inputValue && tags.indexOf(inputValue) === -1) {
      item.args = [...tags, state.inputValue];
    }
    state.inputVisible = false;
    state.inputValue = '';
    currentTagIndex.value = -1;
    currentNameIndex.value = -1;
  }

  //输入框确认
  function handleInputEditConfirm(item, tag, index) {
    const inputValue = state.inputValue;
    if (inputValue) {
      item.args[index] = state.inputValue;
    }
    currentTagIndex.value = -1;
    currentNameIndex.value = -1;
  }

  //关闭弹窗
  function handleCancel() {}

  /**
   * 提交
   */
  async function handleSubmit() {
    await formRef.value.validate().then(() => {
      try {
        setDrawerProps({ confirmLoading: true });
        //重新构造表单提交对象,切记不可修改router对象，数组修改为字符串容易造成界面混乱
        let params = Object.assign({}, router, {
          predicates: JSON.stringify(router.predicates),
          filters: JSON.stringify(router.filters),
        });
        //提交表单
        saveOrUpdateRoute({ router: params }).then(() => {
          closeDrawer();
          //刷新列表
          emit('success');
        });
      } finally {
        setDrawerProps({ confirmLoading: false });
      }
    });
  }
</script>