<template>
  <div class="panel-tab__content">
    <el-form
      :model="flowConditionForm"
      label-width="90px"
      size="mini"
      @submit.native.prevent
    >
      <el-form-item label="流转类型">
        <el-select v-model="flowConditionForm.type" @change="updateFlowType">
          <el-option label="普通流转路径" value="normal" />
          <el-option label="默认流转路径" value="default" />
          <el-option label="条件流转路径" value="condition" />
        </el-select>
      </el-form-item>
      <el-form-item class="text-right">
        <el-button
          v-if="flowConditionForm.type === 'condition'"
          plain
          class="mb5"
          type="primary"
          size="small"
          @click="handleAddCondition"
        >添加条件表达式</el-button>
      </el-form-item>
    </el-form>
    <!-- 条件表达式 -->
    <ConditionExpression ref="conditionExpression" :master-model="model" @conditionList="getConditionList" />

  </div>
</template>

<script>
import ConditionExpression from './ConditionExpression.vue'
export default {
  name: 'FlowCondition',
  components: {
    ConditionExpression
  },
  props: {
    // eslint-disable-next-line vue/require-default-prop
    businessObject: Object,
    // eslint-disable-next-line vue/require-default-prop
    type: String,
    model: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      flowConditionForm: {},
      condition: ''
    }
  },
  watch: {
    businessObject: {
      immediate: true,
      handler() {
        this.$nextTick(() => this.resetFlowCondition())
      }
    }
  },
  beforeDestroy() {
    this.bpmnElement = null
    this.bpmnElementSource = null
    this.bpmnElementSourceRef = null
  },
  methods: {
    resetFlowCondition() {
      this.bpmnElement = window.bpmnInstances.bpmnElement
      this.bpmnElementSource = this.bpmnElement.source
      this.bpmnElementSourceRef = this.bpmnElement.businessObject.sourceRef
      if (this.bpmnElementSourceRef && this.bpmnElementSourceRef.default && this.bpmnElementSourceRef.default.id === this.bpmnElement.id) {
        // 默认
        this.flowConditionForm = { type: 'default' }
      } else if (!this.bpmnElement.businessObject.conditionExpression) {
        // 普通
        this.flowConditionForm = { type: 'normal' }
      } else {
        // 带条件
        const conditionExpression = this.bpmnElement.businessObject.conditionExpression
        this.flowConditionForm = { ...conditionExpression, type: 'condition' }
        // resource 可直接标识 是否是外部资源脚本
        if (this.flowConditionForm.resource) {
          this.$set(this.flowConditionForm, 'conditionType', 'script')
          this.$set(this.flowConditionForm, 'scriptType', 'externalScript')
          return
        }
        if (conditionExpression.language) {
          this.$set(this.flowConditionForm, 'conditionType', 'script')
          this.$set(this.flowConditionForm, 'scriptType', 'inlineScript')
          return
        }
        this.$set(this.flowConditionForm, 'conditionType', 'expression')
      }
    },
    updateFlowType(flowType) {
      // 正常条件类
      if (flowType === 'condition') {
        this.flowConditionRef = window.bpmnInstances.moddle.create('bpmn:FormalExpression')
        window.bpmnInstances.modeling.updateProperties(this.bpmnElement, {
          conditionExpression: this.flowConditionRef
        })
        return
      }
      // 默认路径
      if (flowType === 'default') {
        window.bpmnInstances.modeling.updateProperties(this.bpmnElement, {
          conditionExpression: null
        })
        window.bpmnInstances.modeling.updateProperties(this.bpmnElementSource, {
          default: this.bpmnElement
        })
        return
      }
      // 正常路径，如果来源节点的默认路径是当前连线时，清除父元素的默认路径配置
      if (this.bpmnElementSourceRef.default && this.bpmnElementSourceRef.default.id === this.bpmnElement.id) {
        window.bpmnInstances.modeling.updateProperties(this.bpmnElementSource, {
          default: null
        })
      }
      window.bpmnInstances.modeling.updateProperties(this.bpmnElement, {
        conditionExpression: null
      })
    },
    updateFlowCondition() {
      const { conditionType, scriptType, body, resource, language } = this.flowConditionForm
      console.log(conditionType, body)
      let condition
      if (conditionType === 'expression') {
        condition = window.bpmnInstances.moddle.create('bpmn:FormalExpression', { body })
      } else {
        if (scriptType === 'inlineScript') {
          condition = window.bpmnInstances.moddle.create('bpmn:FormalExpression', { body, language })
          this.$set(this.flowConditionForm, 'resource', '')
        } else {
          this.$set(this.flowConditionForm, 'body', '')
          condition = window.bpmnInstances.moddle.create('bpmn:FormalExpression', { resource, language })
        }
      }
      window.bpmnInstances.modeling.updateProperties(this.bpmnElement, { conditionExpression: condition })
    },
    // 添加条件表达式
    handleAddCondition() {
      this.$refs.conditionExpression.sourceObject = this.bpmnElementSource
      this.$refs.conditionExpression.defaultCondition = this.businessObject
      this.$refs.conditionExpression.viewOpen = true
    },
    getConditionList(data) {
      data.forEach((condition, index) => {
        const { data, relationalOperation, value, newSplicing } = condition
        if (index > 0) {
          this.condition += ` ${newSplicing} `
        }
        this.condition += `${data} ${relationalOperation} ${value}`
      })
      const body = '${' + this.condition + '}'
      const { conditionType } = this.flowConditionForm
      let condition
      if (conditionType === 'expression') {
        condition = window.bpmnInstances.moddle.create('bpmn:FormalExpression', { body })
      }
      window.bpmnInstances.modeling.updateProperties(this.bpmnElement, { conditionExpression: condition })
    }
  }
}
</script>
