<template>
  <div class="trigger-workflow pa-3 white">
    <m-card :no-title="true" :no-elevation="false" :px5="false">
      <template #autoTitle>
        <v-btn icon @click="goBack">
          <v-icon>mdi-arrow-left</v-icon>
        </v-btn>
        <span class="ml-2">触发工作流执行</span>
      </template>

      <v-form ref="form" v-model="valid">
        <v-text-field
          v-model="form.webhook_path"
          label="Webhook路径"
          :rules="rules.webhook_path"
          required
          outlined
          hint="工作流中 Webhook 节点配置的路径"
          persistent-hint
          class="mb-3"
        />

        <v-textarea
          v-model="form.dataJson"
          label="传递数据（可选）"
          outlined
          rows="8"
          hint='JSON格式，例如：{"key": "value"}'
          persistent-hint
          class="mb-3"
        />

        <div class="d-flex">
          <v-btn
            color="primary"
            :loading="loading"
            :disabled="!valid"
            @click="triggerWorkflow"
          >
            触发执行
          </v-btn>
          <v-btn
            class="ml-3"
            @click="resetForm"
          >
            重置
          </v-btn>
        </div>
      </v-form>
    </m-card>

    <!-- 执行结果 -->
    <m-card v-if="result" class="mt-4" title="执行结果" :px5="false">
      <v-alert
        :type="result.success ? 'success' : 'error'"
        prominent
      >
        <div class="text-h6 mb-2">
          {{ result.success ? '触发成功' : '触发失败' }}
        </div>
        <div>{{ result.message }}</div>
        <pre v-if="result.response" class="result-content mt-3">
          {{ JSON.stringify(result.response, null, 2) }}
        </pre>
      </v-alert>
    </m-card>
  </div>
</template>

<script>
import { triggerWorkflow } from '@/api/dataFactory'
import MCard from '@/components/MCard'

export default {
  name: 'TriggerWorkflow',
  components: {
    MCard
  },
  data () {
    return {
      valid: false,
      loading: false,
      result: null,
      form: {
        webhook_path: '',
        dataJson: ''
      },
      rules: {
        webhook_path: [
          v => !!v || '请输入Webhook路径'
        ]
      }
    }
  },
  computed: {
    workflowId () {
      return this.$route.params.id
    }
  },
  methods: {
    async triggerWorkflow () {
      if (!this.$refs.form.validate()) {
        return
      }

      // 解析JSON数据
      let data = {}
      if (this.form.dataJson) {
        try {
          data = JSON.parse(this.form.dataJson)
        } catch (e) {
          this.$snackbar.error('数据格式错误，请输入有效的JSON')
          return
        }
      }

      this.loading = true
      this.result = null

      try {
        const response = await triggerWorkflow(this.workflowId, {
          webhook_path: this.form.webhook_path,
          data: data
        })

        if (response.code === 200) {
          this.result = response.data
          this.$snackbar.success('工作流触发成功')
        } else {
          this.result = {
            success: false,
            message: response.message
          }
          this.$snackbar.error(response.message)
        }
      } catch (error) {
        this.result = {
          success: false,
          message: error.message || '触发失败'
        }
        this.$snackbar.error('触发工作流失败')
      } finally {
        this.loading = false
      }
    },
    resetForm () {
      this.$refs.form.reset()
      this.result = null
    },
    goBack () {
      this.$router.back()
    }
  }
}
</script>

<style lang="scss" scoped>
.trigger-workflow {
  height: 100%;
  width: 100%;
  background: #f0f2f5;
  box-sizing: border-box;
}

.result-content {
  background: rgba(0, 0, 0, 0.05);
  padding: 15px;
  border-radius: 4px;
  overflow-x: auto;
  text-align: left;
  font-size: 12px;
  margin: 0;
}
</style>
