<template>
  <el-card class="panel-card">
    <div slot="header" class="clearfix">
      <span>转移条件属性</span>
    </div>
    <el-form label-width="70px">
      <el-form-item label="条件名称">
        <el-input v-model="name"></el-input>
      </el-form-item>
      <el-form-item label="条件脚本">
        <el-input type="textarea" v-model="script"></el-input>
      </el-form-item>
      <el-form-item label="条件方法">
        <el-select placeholder="请选择条件方法" v-model="action">
          <el-option v-for="item in conditionMethods" :key="item.id" :label="item.name" :value="item.id"></el-option>
        </el-select>
      </el-form-item>
    </el-form>
  </el-card>
</template>

<script>
import { setConnectionLabel } from '../canvas/connectionUtil.js'
import { getObjectValue } from './panelUtil'

export default {
  data () {
    return {
      conditionMethods: []
    }
  },
  computed: {
    name: {
      get () {
        return getObjectValue(this.$store.getters.currentConnection, 'name')
      },
      set (value) {
        const {sourceId, targetId} = this.$store.getters.operationItem

        this.$store.dispatch('updateLineField', {
          sourceId,
          targetId,
          fieldName: 'name',
          value
        })

        setConnectionLabel(window._jsPlumbInstance, sourceId, targetId, value)
      }
    },
    script: {
      get () {
        return getObjectValue(this.$store.getters.currentConnection, 'script')
      },
      set (value) {
        const {sourceId, targetId} = this.$store.getters.operationItem

        this.$store.dispatch('updateLineField', {
          sourceId,
          targetId,
          fieldName: 'script',
          value
        })
      }
    },
    action: {
      get () {
        return getObjectValue(this.$store.getters.currentConnection, 'action')
      },
      set (value) {
        const {sourceId, targetId} = this.$store.getters.operationItem

        this.$store.dispatch('updateLineField', {
          sourceId,
          targetId,
          fieldName: 'action',
          value
        })
      }
    }
  },
  props: {
    workflowType: {
      type: String,
      default: ''
    }
  },
  watch: {
    async workflowType (val) {
      if (val !== '') {
        await this.getConditionMethods()
      }
    }
  },
  methods: {
    async getConditionMethods() {
      let resp = await axios.get('/ui/workflows/conditionmethods', {
        params: {
          type: this.workflowType
        }
      })
      this.conditionMethods = resp.data.data
    }
  },
  created () {
  }
}
</script>

<style>

</style>
