<template>
  <div>
    <a-form :label-col="{ span: 5 }" :wrapper-col="{ span: 19 }">
      <a-form-item label="选择触发的动作">
        <a-radio-group v-model="config_.type">
          <a-radio value="WEBHOOK">发送网络请求</a-radio>
          <a-radio value="EMAIL">发送邮件</a-radio>
        </a-radio-group>
      </a-form-item>

      <!-- Webhook 配置 -->
      <template v-if="config_.type === 'WEBHOOK'">
        <a-form-item label="请求地址">
          <a-input-group compact>
            <a-select v-model="config_.http.method" style="width: 120px">
              <a-select-option value="GET">GET</a-select-option>
              <a-select-option value="POST">POST</a-select-option>
              <a-select-option value="PUT">PUT</a-select-option>
              <a-select-option value="DELETE">DELETE</a-select-option>
            </a-select>
            <a-input v-model="config_.http.url" placeholder="请输入URL地址" style="width: calc(100% - 120px)" />
          </a-input-group>
        </a-form-item>

        <a-form-item label="Header请求头">
          <div>
            <a-button type="dashed" size="small" @click="addItem(config_.http.headers)">
              <a-icon type="plus" /> 添加
            </a-button>
            <div v-for="(header, index) in config_.http.headers" :key="index" style="margin-top: 10px; display: flex; align-items: center;">
              <a-input v-model="header.name" placeholder="参数名" size="small" style="width: 100px" />
              <a-radio-group v-model="header.isField" size="small" style="margin: 0 5px;">
                <a-radio-button :value="true">表单</a-radio-button>
                <a-radio-button :value="false">固定</a-radio-button>
              </a-radio-group>
              <template v-if="header.isField">
                <a-select
                  v-model="header.value"
                  size="small"
                  placeholder="请选择表单字段"
                  :options="forms"
                  style="width: 180px"
                  :label-in-value="false"
                >
                  <a-select-option v-for="item in forms" :key="item.title" :value="item.title">{{ item.title }}</a-select-option>
                </a-select>
              </template>
              <a-input v-else v-model="header.value" size="small" placeholder="请设置字段值" style="width: 180px" />
              <a-icon
                type="delete"
                theme="filled"
                style="color: red; margin-left: 6px; cursor: pointer"
                @click="delItem(config_.http.headers, index)"
              />
            </div>
          </div>
        </a-form-item>

        <a-form-item label="Header请求参数">
          <div>
            <a-button type="dashed" size="small" @click="addItem(config_.http.params)">
              <a-icon type="plus" /> 添加
            </a-button>
            <span style="margin-left: 12px;">参数类型：</span>
            <a-radio-group v-model="config_.http.contentType" size="small" style="margin: 0 5px">
              <a-radio-button value="JSON">json</a-radio-button>
              <a-radio-button value="FORM">form</a-radio-button>
            </a-radio-group>

            <div v-for="(param, index) in config_.http.params" :key="index" style="margin-top: 10px; display: flex; align-items: center;">
              <a-input v-model="param.name" placeholder="参数名" size="small" style="width: 100px" />
              <a-radio-group v-model="param.isField" size="small" style="margin: 0 5px;">
                <a-radio-button :value="true">表单</a-radio-button>
                <a-radio-button :value="false">固定</a-radio-button>
              </a-radio-group>
              <template v-if="param.isField">
                <a-select
                  v-model="param.value"
                  size="small"
                  placeholder="请选择表单字段"
                  :options="forms"
                  style="width: 180px"
                >
                  <a-select-option v-for="item in forms" :key="item.title" :value="item.title">{{ item.title }}</a-select-option>
                </a-select>
              </template>
              <a-input v-else v-model="param.value" size="small" placeholder="请设置字段值" style="width: 180px" />
              <a-icon
                type="delete"
                theme="filled"
                style="color: red; margin-left: 6px; cursor: pointer"
                @click="delItem(config_.http.params, index)"
              />
            </div>
          </div>
        </a-form-item>

        <a-form-item label="请求结果处理">
          <div>
            <span style="margin-right: 8px;">自定义脚本：</span>
            <a-switch v-model="config_.http.handlerByScript" />
            <div v-if="config_.http.handlerByScript" style="margin-top: 10px;">
              <p>tip: 返回值为 <strong>true</strong> 则流程通过，为 <strong>false</strong> 则流程将被驳回</p>
              <p>
                支持函数：
                <code style="color: dodgerblue">setFormByName('表单字段名', '字段值')</code> 可改表单数据
              </p>
              <div style="margin-top: 10px;">
                <label>请求成功：</label>
                <a-textarea v-model="config_.http.success" rows="5" />
              </div>
              <div style="margin-top: 10px;">
                <label>请求失败：</label>
                <a-textarea v-model="config_.http.fail" rows="5" />
              </div>
            </div>
            <div v-else style="margin-top: 10px; color: #52c41a;">
              <a-icon type="check-circle" /> 无论请求结果如何，均通过
            </div>
          </div>
        </a-form-item>
      </template>

      <!-- Email 配置 -->
      <template v-else-if="config_.type === 'EMAIL'">
        <a-form-item label="邮件主题">
          <a-input v-model="config_.email.subject" placeholder="请输入邮件主题" />
        </a-form-item>
        <a-form-item label="收件方">
          <a-select
            v-model="config_.email.to"
            mode="multiple"
            placeholder="请输入收件人"
            :options="[]"
            style="width: 100%"
            :filterOption="true"
          />
        </a-form-item>
        <a-form-item label="邮件正文">
          <a-textarea
            v-model="config_.email.content"
            rows="4"
            placeholder="邮件内容，支持变量提取表单数据 ${表单字段名}"
          />
        </a-form-item>
      </template>
    </a-form>
  </div>
</template>

<script>
export default {
  name: 'TriggerNodeConfig',
  props: {
    config: {
      type: Object,
      default: () => ({
        type: 'WEBHOOK',
        http: {
          url: '',
          method: 'GET',
          headers: [],
          params: [],
          contentType: 'JSON',
          handlerByScript: false,
          success: '',
          fail: ''
        },
        email: {
          subject: '',
          to: [],
          content: ''
        }
      })
    }
  },
  data() {
    return {
      forms: this.$store.state.workflow.design.formItems
    };
  },
  computed: {
    config_: {
      get() {
        return this.config;
      },
      set(val) {
        this.$emit('update:config', val);
      }
    }
  },
  methods: {
    addItem(items) {
      if (items.length > 0) {
        const last = items[items.length - 1];
        if (!last.name.trim() || !last.value.trim()) {
          this.$message.warning('请完善之前项后再添加');
          return;
        }
      }
      items.push({ name: '', value: '', isField: true });
    },
    delItem(items, index) {
      items.splice(index, 1);
    }
  }
};
</script>

<style scoped>
/* 样式可根据具体项目主题进行调整 */
</style>
