<template>
  <div>
    <el-form label-position="top" label-width="90px">
      <el-form-item label="选择触发的动作" prop="text" class="user-type">
        <el-radio-group v-model="config.type">
          <el-radio label="WEBHOOK">发送网络请求</el-radio>
          <el-radio label="EMAIL">发送邮件</el-radio>
        </el-radio-group>
      </el-form-item>
      <div v-if="config.type === 'WEBHOOK'">
        <el-form-item label="请求地址" prop="text">
          <el-input placeholder="请输入URL地址" v-model="config.http.url">
            <el-select v-model="config.http.method" style="width: 85px;" slot="prepend" placeholder="URL" filterable>
              <el-option label="GET" value="GET"></el-option>
              <el-option label="POST" value="POST"></el-option>
              <el-option label="PUT" value="PUT"></el-option>
              <el-option label="DELETE" value="DELETE"></el-option>
            </el-select>
          </el-input>
        </el-form-item>
        <el-form-item label="Header请求头" prop="text">
          <div slot="label">
            <span style="margin-right: 10px">Header请求头</span>
            <el-button type="primary" @click="addItem(config.http.headers)" link> + 添加</el-button>
          </div>
          <div v-for="(header, index) in config.http.headers" :key="index">
            -
            <el-input placeholder="参数名" style="width: 100px;" v-model="header.name"/>
            <el-radio-group v-model="header.isField">
              <el-radio-button :label="true">表单</el-radio-button>
              <el-radio-button :label="false">固定</el-radio-button>
            </el-radio-group>
            <el-select v-if="header.isField" style="width: 180px;" v-model="header.value"
                       placeholder="请选择表单字段" filterable>
              <el-option v-for="form in forms" :key="form.id" :label="form.title" :value="form.title"></el-option>
            </el-select>
            <el-input v-else placeholder="请设置字段值" v-model="header.value" style="width: 180px;"/>
            <el-icon class="el-icon-delete" @click="delItem(config.http.headers, index)"
                     style="margin-left: 5px; color: #c75450; cursor: pointer"/>
          </div>
        </el-form-item>
        <el-form-item label="Header请求参数" prop="text">
          <div slot="label">
            <span style="margin-right: 10px">请求参数   </span>
            <el-button style="margin-right: 20px" type="primary" @click="addItem(config.http.params)" link> + 添加</el-button>
            <span>参数类型 - </span>
            <el-radio-group style="margin: 0 5px;" v-model="config.http.contentType">
              <el-radio-button label="JSON">json</el-radio-button>
              <el-radio-button label="FORM">form</el-radio-button>
            </el-radio-group>
          </div>
          <div v-for="(param, index) in config.http.params" :key="index">
            -
            <el-input placeholder="参数名" style="width: 100px;" v-model="param.name"/>
            <el-radio-group style="margin: 0 5px;" v-model="param.isField">
              <el-radio-button :label="true">表单</el-radio-button>
              <el-radio-button :label="false">固定</el-radio-button>
            </el-radio-group>
            <el-select v-if="param.isField" style="width: 180px;" v-model="param.value"
                       placeholder="请选择表单字段" filterable>
              <el-option v-for="form in forms" :key="form.id" :label="form.title" :value="form.id"></el-option>
            </el-select>
            <el-input v-else placeholder="请设置字段值" v-model="param.value" style="width: 180px;"/>
            <el-icon class="el-icon-delete" @click="delItem(config.http.params, index)"
                     style="margin-left: 5px; color: #c75450; cursor: pointer"/>
          </div>
          <div>

          </div>
        </el-form-item>
        <!--        <el-form-item label="请求结果处理" prop="text">-->
        <div slot="label">
          <span>请求结果处理</span>
          <span style="margin-left: 20px">自定义脚本: </span>
          <el-switch v-model="config.http.handlerByScript"></el-switch>
        </div>
        <span class="item-desc" v-if="config.http.handlerByScript">
          <p>👉 返回值为 ture 则流程通过，为 false 则流程将被驳回</p>
          <p>👉 (上线注意)占不支持ES高级语法</p>
          <p>👉 (上线注意)不支持浏览器的内置函数</p>
          <!--          <div>支持函数-->
          <!--            <span style="color: dodgerblue">setFormByName(-->
          <!--              <span style="color: #939494">'表单字段名', '表单字段值'</span>-->
          <!--              )</span>-->
          <!--            可改表单数据-->
          <!--          </div>-->
        </span>
        <span class="item-desc" v-else>👉 无论请求结果如何，均通过</span>
        <div v-if="config.http.handlerByScript">
          <div>
            <el-button @click="requestTestHandler">测试</el-button>
          </div>
          <div>
            <span>请求成功😀：</span>
            <js-code-edit v-model="config.http.success" :editor-placeholder="'请输入js代码'"
                          :editor-height="250" :tab-size="2"/>
          </div>
          <div>
            <span>请求失败😥：</span>
            <js-code-edit v-model="config.http.fail" :editor-placeholder="'请输入js代码'"
                          :editor-height="250" :tab-size="2"/>
          </div>
        </div>
        <!--        </el-form-item>-->
      </div>
      <div v-else-if="config.type === 'EMAIL'">
        <el-form-item label="邮件主题" prop="text">
          <el-input placeholder="请输入邮件主题" v-model="config.email.subject"/>
        </el-form-item>
        <el-form-item label="收件方" prop="text">
          <el-select style="width: 100%;" v-model="config.email.to" filterable multiple allow-create
                     default-first-option placeholder="请输入收件人">
            <el-option v-for="sender in config.email.to" :key="sender" :label="sender" :value="sender"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="抄送方" prop="text">
          <el-select style="width: 100%;" v-model="config.email.cc" filterable multiple allow-create
                     default-first-option placeholder="请输入收件人">
            <el-option v-for="item in config.email.cc" :key="item" :label="item" :value="item"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="邮件正文" prop="text">
          <el-input type="textarea" v-model="config.email.content" :rows="4"
                    placeholder="邮件内容，支持变量提取表单数据 ${表单字段名} "></el-input>
        </el-form-item>
      </div>
    </el-form>
  </div>
</template>

<script setup>
import {computed, defineProps} from 'vue'
import {ElMessage, ElMessageBox} from 'element-plus'
import axios from "axios";
import {useProcessStore} from '@/stores/processStore.js'
import JsCodeEdit from "@/components/codeEdit/JsCodeEdit.vue";

const processStore = useProcessStore()
const props = defineProps({
  config: {
    type: Object,
    default: () => {
      return {}
    }
  }
})
const forms = computed(() => {
  return processStore.getDesign().formItems || []
})

const addItem = (items) => {
  if (items.length > 0 && (items[items.length - 1].name.trim() === ''
      || items[items.length - 1].value.trim() === '')) {
    ElMessage.warning("请完善之前项后在添加")
    return;
  }
  items.push({name: '', value: '', isField: true})
}


const delItem = (items, index) => {
  items.splice(index, 1)
}
//url规范性检查
const restfulCheck = (url) => {
  const httpProtocolPattern = /^http:/;
  const httpsProtocolPattern = /^https:/;
  const restfulUrlPattern = /\/\w+\/\w+(\/\{[^}]+\})*/;
  if (httpProtocolPattern.test(url) || httpsProtocolPattern.test(url)) {
    return restfulUrlPattern.test(url);
  } else {
    return false;
  }
}
//是否含有动态参数
const hasUrlParams = (url) => {
  const pattern = /{[^{}]+}/g;
  let match;
  while ((match = pattern.exec(url)) !== null) {
    return true;
  }
  return false;
}
//获取到动态参数的名称
const getDynamicParamNames = (url) => {
  const pattern = /{([^{}]+)}/g;
  let match;
  const paramNames = [];
  while ((match = pattern.exec(url)) !== null) {
    if (match[0].startsWith('{') && match[0].endsWith('}')) {
      const paramName = match[1];
      paramNames.push(paramName);
    }
  }
  return paramNames;
}
//替换rul动态参数
const replaceDynamicParams = (url, params) => {
  const dynamicParamPattern = /{\s*(\w+)\s*}/g;
  return url.replace(dynamicParamPattern, (match, param) => {
    return params[param] || '0';
  });
}
//获取到参数值
const getParamsValue = (params, paramName) => {
  for (let param of params) {
    if (param.name === paramName) {
      return param.value
    }
  }
  return null;
}
//设置头部
const setHeaders = (http) => {
  let headers = {}
  for (let header of http.headers) {
    if (header.isField) {
      ElMessage.error("测试只支持固定参数")
      return
    }
    if (header.name !== "" && header.value !== "") {
      this.$set(headers, header.name, header.value);
    }
  }
  if (http.contentType === "FORM") {
    this.$set(headers, "Content-Type", "multipart/form-data")
  } else {
    this.$set(headers, "Content-Type", "application/json")
  }
  return headers;
}
//设置post和put参数
const setPostAndPutParams = (http) => {
  let params = {}
  for (let param of http.params) {
    params[param.name] = param.value
  }
  return params;
}
//设置get和delete的参数
const setGetAndDeleteParams = (http) => {
  let dynamicParams = []
  let url = http.url
  let hasParams = hasUrlParams(url)
  if (hasParams) {
    dynamicParams = getDynamicParamNames(url);
    let replaceParams = {}
    for (let paramsName of dynamicParams) {
      let value = getParamsValue(http.params, paramsName)
      if (null == value) {
        ElMessage.error(paramsName + '参数未设置')
        return;
      }
      replaceParams[paramsName] = value
    }
    url = replaceDynamicParams(url, replaceParams);
  }
  if (http.method === "DELETE") {
    return url;
  }
  let getParams = []
  for (let param of http.params) {
    if (dynamicParams.indexOf(param.name) === -1 && param.name !== '' && param.value !== '') {
      getParams.push(param.name + "=" + param.value)
    }
  }
  if (getParams.length > 0) {
    url += "?"
    for (let i = 0; i < getParams.length; i++) {
      if (i !== getParams.length - 1) {
        url += getParams[i] + "&";
      } else {
        url += getParams[i];
      }
    }
  }
  return url;
}
//请求测试

const requestTestHandler = () => {
  let http = props.config.http;
  if (http.url == null || http.url === '') {
    ElMessage.error("请填写请求路径!")
    return
  }
  if (!restfulCheck(http.url)) {
    ElMessage.error("当前只支持 RESTful URL!")
    return
  }
  let headers = setHeaders(http)
  let request
  switch (http.method) {
    case "GET":
    case "DELETE":
      let url = setGetAndDeleteParams(http)
      if (null == url) {
        return;
      }
      request = axios.request({
        method: http.method,
        url: url,
        headers: headers,
      });
      break;
    case "POST":
    case "PUT":
      request = axios.request({
        method: http.method,
        url: http.url,
        headers: headers,
        data: setPostAndPutParams(http)
      });
      break;
    default:
      break;
  }
  // console.log("==================[测试打印内容]==================")
  request.then(res => {
    console.log(res)
    if (res.status === 200) {
      let data = res.data
      console.log(data)
      let successFun = eval("(false ||" + http.success + ")");
      let result = successFun(data);
      console.log(result, "成功函数执行的返回结果")
    } else {
      let failFun = eval("(false ||" + http.fail + ")");
      let result = failFun(res);
      console.log(result, "失败函数执行的返回结果")
    }
  }).finally(() => {
    console.log("==================[测试打印结束]==================")
  })
}
</script>

<style lang="scss" scoped>
.item-desc {
  color: #939494;
}
</style>
