<template>
  <n-space vertical>
    <div style="width: 500px">
      URL 地址 &请求方式 & API接口
      <n-input v-model:value.trim="data.requestUrl" :min="1" placeholder="请输入URL地址"> </n-input>
      <n-input-group style="margin-top: 10px">
        <n-select
          style="width: 120px"
          v-model:value="data.requestHttpType"
          :options="selectTypeOptions"
          default-value="get"
        />
        <n-input v-model:value.trim="data.requestApi" :min="1" placeholder="请输入API"> </n-input>
      </n-input-group>

      <!-- <div style="margin-top: 10px">
        选择方式
        <n-tabs v-model:value="data.requestContentType" type="segment" size="small">
          <n-tab :name="RequestContentTypeEnum.DEFAULT" tab="普通请求"> </n-tab>
          <n-tab :name="RequestContentTypeEnum.SQL" tab="SQL 请求"> </n-tab>
        </n-tabs>
      </div> -->

      <div
        style="margin-top: 10px"
        v-if="data.requestContentType == RequestContentTypeEnum.DEFAULT"
      >
        <n-tabs type="line" animated v-model:value="tabValue">
          <n-tab v-for="item in RequestParamsTypeEnum" :key="item" :name="item" :tab="item">
            {{ item }}
          </n-tab>
        </n-tabs>
      </div>

      <div class="go-mt-3">
        <div v-if="tabValue !== RequestParamsTypeEnum.BODY">
          <n-table class="go-request-header-table-box" :single-line="false" size="small">
            <thead>
              <tr>
                <th></th>
                <th>Key</th>
                <th>Value</th>
                <th>操作</th>
                <th>结果</th>
              </tr>
            </thead>
            <tbody>
              <tr
                v-for="(item, index) in RequestParamsTypeEnum.PARAMS == tabValue
                  ? data.requestParams.Params
                  : data.requestParams.Header"
                :key="index"
              >
                <td>
                  {{ index + 1 }}
                </td>
                <td>
                  <n-input v-model:value="item.key" type="text" size="small" @blur="blur" />
                </td>
                <td>
                  <n-input v-model:value="item.value" type="text" size="small" @blur="blur" />
                </td>
                <td>
                  <div style="width: 80px">
                    <n-button class="go-ml-2" type="primary" size="small" ghost @click="add(index)"
                      >+</n-button
                    >
                    <n-button
                      class="go-ml-2"
                      type="warning"
                      size="small"
                      ghost
                      :disabled="index === 0"
                      @click="remove(index)"
                    >
                      -
                    </n-button>
                  </div>
                </td>
                <td>
                  <n-button v-if="item.error" class="go-ml-2" text type="error">
                    格式错误
                  </n-button>
                  <n-button v-else class="go-ml-2" text type="primary"> 格式通过 </n-button>
                </td>
              </tr>
            </tbody>
          </n-table>
        </div>
        <!-- <div v-else>
          <n-radio-group v-model:value="data.requestParamsBodyType" name="radiogroup">
            <n-space>
              <n-radio v-for="bodyEnum in RequestBodyEnumList" :key="bodyEnum" :value="bodyEnum">
                {{ bodyEnum }}
              </n-radio>
            </n-space>
          </n-radio-group> -->

        <!-- 为 none 时 -->
        <!-- <n-card
            class="go-mt-3 go-pb-3"
            v-if="data.requestParamsBodyType === RequestBodyEnum['NONE']"
          >
            <n-text depth="3">该接口没有 Body 体</n-text>
          </n-card> -->

        <!-- 具有对象属性时 -->
        <!-- <template
            v-else-if="
              data.requestParamsBodyType === RequestBodyEnum['FORM_DATA'] ||
              data.requestParamsBodyType === RequestBodyEnum['X_WWW_FORM_URLENCODED']
            "
          >
            <request-header-table
              class="go-mt-3"
              :target="data.requestParams[RequestParamsTypeEnum.BODY][data.requestParamsBodyType]"
              @update="updateRequestBodyTable"
            ></request-header-table>
          </template> -->

        <!-- json  -->
        <!-- <template v-else-if="data.requestParamsBodyType === RequestBodyEnum['JSON']">
            <monaco-editor
              v-model:modelValue="
                data.requestParams[RequestParamsTypeEnum.BODY][data.requestParamsBodyType]
              "
              width="600px"
              height="200px"
              language="json"
            />
          </template> -->

        <!-- xml  -->
        <!-- <template v-else-if="data.requestParamsBodyType === RequestBodyEnum['XML']">
            <monaco-editor
              v-model:modelValue="
                data.requestParams[RequestParamsTypeEnum.BODY][data.requestParamsBodyType]
              "
              width="600px"
              height="200px"
              language="html"
            />
          </template>
        </div> -->
      </div>
    </div>
  </n-space>
</template>

<script setup lang="ts">
  import { ref, toRefs, reactive, PropType, withDefaults, onMounted, watch } from 'vue';
  import { MonacoEditor } from '@/components/Pages/MonacoEditor';
  import { RequestHeaderTable } from '@/views/chart/ContentConfigurations/components/ChartData/components/ChartDataRequest/components/RequestHeaderTable/index';
  import { SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting';
  import {
    selectTypeOptions,
    selectTimeOptions,
  } from '@/views/chart/ContentConfigurations/components/ChartData/index.d';
  import { useTargetData } from '@/views/chart/ContentConfigurations/components/hooks/useTargetData.hook';
  import {
    RequestParamsTypeEnum,
    RequestContentTypeEnum,
    RequestParamsObjType,
    RequestBodyEnumList,
    RequestBodyEnum,
    RequestHttpEnum,
  } from '@/enums/httpEnum';

  const tabValue = ref(RequestParamsTypeEnum.PARAMS);

  const emits = defineEmits(['changeCallBackEnd']);
  const props = defineProps({
    panel: {
      type: Object,
    },
    index: {
      type: Number,
    },
  });

  const data: any = ref({
    requestUrl: '',
    requestApi: '',
    requestContentType: '',
    requestDataType: 0,
    requestHttpType: '',
    requestParams: {
      Body: {
        'form-data': {},
        'x-www-form-urlencoded': {},
        json: '',
        xml: '',
      },
      Header: [
        {
          key: '',
          value: '',
          error: false,
        },
      ],
      Params: [
        {
          key: '',
          value: '',
          error: false,
        },
      ],
    },
  });

  watch(
    () => data.value,
    (newValue) => {
      emits('changeCallBackEnd', props.index, newValue);
    },
    {
      deep: true,
    },
  );

  // 新增
  const add = (index: number) => {
    if (RequestParamsTypeEnum.PARAMS == tabValue.value) {
      data.value.requestParams.Params.splice(index + 1, 0, {
        key: '',
        value: '',
        error: false,
      });
    } else {
      data.value.requestParams.Header.splice(index + 1, 0, {
        key: '',
        value: '',
        error: false,
      });
    }
  };

  // 减少
  const remove = (index: number) => {
    if (RequestParamsTypeEnum.PARAMS == tabValue.value) {
      data.value.requestParams.Params.splice(index, 1);
    } else {
      data.value.requestParams.Header.splice(index, 1);
    }
    blur();
  };

  // 失焦
  const blur = () => {
    let successNum = 0;
    let tableArray: any = [];
    if (RequestParamsTypeEnum.PARAMS == tabValue.value) {
      tableArray = data.value.requestParams.Params;
    } else {
      tableArray = data.value.requestParams.Header;
    }
    tableArray.forEach((item) => {
      if ((item.key !== '' && item.value == '') || (item.key === '' && item.value !== '')) {
        // 错误
        item.error = true;
      } else {
        // 正确
        successNum++;
        item.error = false;
      }
    });
    // 验证是否全部通过
    if (successNum == tableArray.length) {
      // 转换数据成对象
      const updateObj: any = {};
      tableArray.forEach((e) => {
        if (e.key) updateObj[e.key] = e.value;
      });
    }
  };

  onMounted(() => {
    if (!props.panel?.callBackRequest) {
      data.value = {
        requestUrl: '',
        requestApi: '',
        requestContentType: '',
        requestDataType: 0,
        requestHttpType: '',
        requestParams: {
          Body: {
            'form-data': {},
            'x-www-form-urlencoded': {},
            json: '',
            xml: '',
          },
          Header: [
            {
              key: '',
              value: '',
              error: false,
            },
          ],
          Params: [
            {
              key: '',
              value: '',
              error: false,
            },
          ],
        },
      };
    } else {
      data.value = props.panel.callBackRequest;
    }
  });
</script>

<style lang="scss" scoped>
  .select-type {
    width: 300px;
  }
</style>
