<template>
  <el-card class="panel-card">
    <div slot="header" class="clearfix">
      <span>节点动作</span>
    </div>
    <el-form >
      <el-form-item label="前置脚本" v-show="type === 'Node' || type === 'EndNode'">
        <el-tooltip class="item" effect="dark" content="可执行相应的javascript脚本，该脚本可包含缓存(com.zving.framework.cache)、工具类(com.zving.framework.utility)中的对象、工作流上下文对象context。" placement="right">
          <i class="fa fa-lightbulb-o" aria-hidden="true"></i>
        </el-tooltip>
        <el-input type="textarea" v-model="preScript"></el-input>
      </el-form-item>
      <el-form-item label="前置方法" v-show="type === 'Node' || type === 'EndNode'">
        <el-select v-model="preAction" placeholder="请选择前置方法">
          <el-option v-for="item in nodeMethods" :key="item.id" :label="item.name" :value="item.id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="后置脚本" v-show="type === 'ActionNode' || type === 'StartNode' || type === 'Node'">
        <el-tooltip class="item" effect="dark" content="可执行相应的javascript脚本，该脚本可包含缓存(com.zving.framework.cache)、工具类(com.zving.framework.utility)中的对象、工作流上下文对象context。" placement="right">
          <i class="fa fa-lightbulb-o" aria-hidden="true"></i>
        </el-tooltip>
        <el-input type="textarea" v-model="postScript"></el-input>
      </el-form-item>
      <el-form-item label="后置方法" v-show="type === 'ActionNode' || type === 'StartNode' || type === 'Node'">
        <el-select v-model="postAction" placeholder="请选择后置方法">
          <el-option v-for="item in nodeMethods" :key="item.id" :label="item.name" :value="item.id"></el-option>
        </el-select>
      </el-form-item>
    </el-form>
  </el-card>
</template>

<script>
import { getObjectValue } from './panelUtil'

export default {
  data() {
    return {
      nodeMethods: [] // 后置方法
    }
  },
  computed: {
    type: {
      get() {
        return getObjectValue(this.$store.getters.currentNode, 'type')
      }
    },
    preScript: {
      get() {
        return getObjectValue(this.$store.getters.currentNode, 'preScript')
      },
      set(value) {
        const { id } = this.$store.getters.currentNode

        this.$store.dispatch('updateNodeField', {
          id,
          fieldName: 'preScript',
          value
        })
      }
    },
    preAction: {
      get() {
        return getObjectValue(this.$store.getters.currentNode, 'preAction')
      },
      set(value) {
        const { id } = this.$store.getters.currentNode

        this.$store.dispatch('updateNodeField', {
          id,
          fieldName: 'preAction',
          value
        })
      }
    },
    postScript: {
      get() {
        return getObjectValue(this.$store.getters.currentNode, 'postScript')
      },
      set(value) {
        const { id } = this.$store.getters.currentNode

        this.$store.dispatch('updateNodeField', {
          id,
          fieldName: 'postScript',
          value
        })
      }
    },
    postAction: {
      get() {
        return getObjectValue(this.$store.getters.currentNode, 'postAction')
      },
      set(value) {
        const { id } = this.$store.getters.currentNode

        this.$store.dispatch('updateNodeField', {
          id,
          fieldName: 'postAction',
          value
        })
      }
    }
  },
  props: {
    workflowType: {
      type: String,
      default: ''
    }
  },
  watch: {
    async workflowType(val) {
      if (val !== '') {
        await this.getNodeMethods()
      }
    }
  },
  methods: {
    async getNodeMethods() {
      let resp = await axios.get('/ui/workflows/nodemethods', {
        params: {
          type: this.workflowType
        }
      })
      this.nodeMethods = resp.data.data
    }
  },
  created() {}
}
</script>

<style>

</style>
