<template>
  <div>
    <el-form-item label="请求名称" label-width="120px">
      <el-input v-model="form.name"></el-input>
    </el-form-item>
    <el-form-item label="请求地址" label-width="120px">
      <el-select
          @change="changeF"
          v-model="form.url"
          placeholder="请选择请求地址"
          filterable
          allow-create
          collapse-tags>
        <el-option
            v-for="item in locationOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value">
        </el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="请求方式" label-width="120px">
      <el-select
          v-model="form.method"
          placeholder="请选择请求方式">
        <el-option label="GET" value="GET"></el-option>
        <el-option label="POST" value="POST"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="请求参数" label-width="120px">
      <el-select
          @change="changeF"
          v-model="form.params"
          placeholder="请选择请求参数"
          multiple
          value-key="id"
          collapse-tags>
        <el-option
            v-for="item in paramOptions"
            :key="item.id"
            :label="item.label"
            :value="item">
        </el-option>
      </el-select>
    </el-form-item>
  </div>
</template>
<script>

import {queryGlobalCfg} from "@/api/configure/configuration/globalCfg";

export default {
  props: ['form'],
  data() {
    return {
      locationOptions: [
        {
          label: '通用接口',
          value: 'http://124.223.15.102:9600'
        },
        {
          label: '测试接口',
          value: 'http://localhost:8080/dev-api/hwTemplateAchieve'
        },
      ],
      paramOptions: [],
    }
  },
  mounted() {
    queryGlobalCfg().then(e => {
      console.log(e)
      this.paramOptions = e.filter(v => v.globalCfgType === "fieldName").map(v => {
        return {
          id: v.globalCfgId,
          value: {[v.globalCfgDate]: v.details},
          label: v.globalCfgName
        }
      })
    })
  },
  methods: {
    changeF(e) {
      console.log(e)
    }
  }
}
</script>

<style>
</style>
