<template>
  <div class="http-pannel">
    <common-panel :panel-data="panelData" :target-node="targetNode">
      <template #input-output>
        <div class="content">
          <input-output-tab
            :input-output="panelData.inputOutput"
          ></input-output-tab>
        </div>
      </template>
      <template #function>
        <div class="content">
          <div class="panel-content">
            <!-- 请求参数 -->
            <h4 class="form-title">接口参数</h4>
            <common-form
              :forms="panelData?.function?.forms"
              :form-values="panelData?.function?.formValues"
            ></common-form>

            <!-- 请求头 -->
            <h4 class="form-title">请求头</h4>
            <add-form-item
              :datas="panelData?.function?.headers"
            ></add-form-item>
          </div>
        </div>
      </template>
    </common-panel>
  </div>
  <dialog-panel
    v-if="showSetting"
    :dialog-data="dialogData"
    @confirm-dialog="confirmSettingDialog"
    @close-dialog="closeSettingDialog"
  >
    <!-- 数据展示 -->
    <attr-info
      :table="inputOutputDialog"
      @checked-attrs="checkedAttrs"
    ></attr-info>
  </dialog-panel>
</template>

<script setup>
import { ref, watch, computed } from 'vue';
import { useRoute } from 'vue-router';
import CommonPanel from './common/CommonPanel.vue';
import AddFormItem from './common/AddFormItem.vue';
// import AttrInfo from './common/AttrInfo.vue'
import InputOutputTab from './sql-components/InputOutputTab.vue';

const route = useRoute();

const props = defineProps({
  targetNode: {
    type: Object,
    default: () => {}
  }
});
const dataBus = JSON.parse(localStorage.getItem('panelGlobal')) || {};
const flowId = computed(() => route.query.id);

const forms = ref([
  {
    name: 'protocol',
    type: 'select',
    label: '协议类型',
    value: 'HTTP',
    attrs: {
      col: 1,
      options: [
        { label: 'HTTP', value: 'HTTP' },
        { label: 'HTTPS', value: 'HTTPS' }
      ],
      clearable: true,
      placeholder: '请选择协议类型'
    }
  },
  {
    name: 'url',
    type: 'input',
    label: 'URL',
    value: '',
    attrs: {
      col: 1,
      clearable: true,
      placeholder: '请输入URL'
    }
  },
  {
    name: 'requestType',
    type: 'select',
    label: '请求方法',
    value: 'GET',
    attrs: {
      col: 1,
      options: [
        { label: 'GET', value: 'GET' },
        { label: 'POST', value: 'POST' },
        { label: 'PUT', value: 'PUT' },
        { label: 'DELETE', value: 'DELETE' },
        { label: 'PATCH', value: 'PATCH' }
      ],
      clearable: true,
      placeholder: '请选择请求方法'
    }
  },
  {
    name: 'connTimeout',
    type: 'input-num',
    label: '连接超时',
    value: 30000,
    attrs: {
      col: 1,
      clearable: true,
      placeholder: '请输入URL',
      step: 1000,
      min: 10000
    }
  },
  {
    name: 'readTimeout',
    type: 'input-num',
    label: '读取超时',
    value: 70000,
    attrs: {
      col: 1,
      clearable: true,
      placeholder: '请输入URL',
      min: 10000,
      step: 1000
    }
  }
]);

watch(
  forms.value,
  (list) => {
    list.forEach((item) => {
      panelData.value.function.formValues[item.name] = item.value;
    });
    panelData.value.function.forms = forms.value;
  },
  { deep: true }
);
const panelData = ref(
  props.targetNode.cell.getData()?.attrsData || {
    basicData: {
      name: props.targetNode.cell.getData().label,
      desc: ''
    },
    inputOutput: {
      input: {
        header: [
          // {
          //   label: '模型名称',
          //   name: 'modelName',
          //   'min-width': '150'
          // },
          // {
          //   label: '输入',
          //   name: 'input',
          //   'min-width': '150'
          // },
          {
            label: 'ID',
            name: 'id',
            'min-width': '150'
          },
          {
            label: '名称',
            name: 'name',
            'min-width': '150'
          },
          {
            label: '类型',
            name: 'type',
            'min-width': '150'
          },
          {
            label: '别名',
            name: 'alias',
            type: 'input',
            'min-width': '150'
          },
          {
            label: '操作',
            name: 'custom',
            type: 'custom',
            fixed: 'right',
            width: '100'
          }
        ],
        data: []
      },
      output: {
        header: [
          {
            label: 'ID',
            name: 'id',
            'min-width': '150'
          },
          {
            label: '别名',
            name: 'alias',
            type: 'input',
            'min-width': '150'
          },
          {
            label: '操作',
            name: 'custom',
            type: 'custom',
            fixed: 'right',
            width: '100'
          }
        ],
        data: []
      }
    },
    function: {
      formValues: {
        protocol: 'HTTP',
        url: '',
        requestType: 'GET',
        connTimeout: 30000,
        readTimeout: 70000
      },
      forms: forms.value,
      headers: [
        {
          key: '',
          value: ''
        }
      ]
    }
  }
);

function setNodeAttrData() {
  props.targetNode.cell.setData({
    attrsData: panelData.value
  });
}

watch(
  panelData.value,
  () => {
    setNodeAttrData();
  },
  { deep: true }
);

const dialogData = ref({
  title: '输入模型/属性引入'
});
const inputOutputDialog = ref({
  modelAttrs: {
    header: [{ label: '模型属性', name: 'modelAttrs', 'min-width': '150' }],
    data: dataBus[flowId.value]?.modelAttrs?.data || []
  },
  customAttrs: {
    header: [
      { label: 'ID', name: 'id', 'min-width': '150' },
      { label: '名称', name: 'name', 'min-width': '150' }
    ],
    data: dataBus[flowId.value]?.customAttrs?.data || []
  },
  models: {
    header: [{ label: '模型', name: 'model', 'min-width': '150' }],
    data: dataBus[flowId.value]?.models?.data || []
  }
});

function checkedAttrs(data) {
  console.log(data);
  panelData.value.inputOutput.output.table.data = data.customAttrs;
}
function closeSettingDialog() {
  showSetting.value = false;
}
function confirmSettingDialog() {
  closeSettingDialog();
}
const showSetting = ref(false);
</script>

<script>
export default {
  name: 'PanelHttp'
};
</script>

<style scoped lang="scss">
.form-title {
  color: rgba(0, 0, 0, 0.65);
  font-size: 16px;
  line-height: 32px;
  font-weight: 500;
  margin: 15px 0 8px;
}
.btns {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 10px 0 20px 0;
}
</style>