<!--
 * @Author: your name
 * @Date: 2021-05-06 15:11:29
 * @LastEditTime: 2021-05-10 11:14:12
 * @LastEditors: your name
 * @Description: In User Settings Edit
 * @FilePath: \ESB\src\views\esb_service\message_flow\flow_stage\expression\index.vue
-->
<template>
  <span class="expression">
    <i class="el-icon-arrow-left"></i>
    <span v-if="messageExpr.valueExpr && messageExpr.exprType">{{messageExpr.exprType}}：</span>
    <el-link type="primary" class="dis-inline" @click="writeExpression">{{messageExpr.valueExpr ? messageExpr.valueExpr : exprText ? exprText : '表达式'}}</el-link>
    <i class="el-icon-arrow-right"></i>
    <write-expression :tabIndex="tabIndex" v-model="expressionVisible" @confirm="handleExpression" :exprType="exprType" :messageExprType="messageExprType" :messageExpr="messageExpr" />
  </span>
</template>
<script>
import WriteExpression from './WriteExpression'
export default {
  name: 'Expression',
  components: {
    WriteExpression
  },
  data() {
    return {
      expressionVisible: false,
      messageExprValue: ''
    }
  },
  props: {
    exprText: {
      type: String,
      default: ''
    },
    exprType: {
      type: Array,
      default() {
        return []
      }
      // 表达式类型（小类）：目前有 simple、constant、xquery、xpath、jsonpath
    },
    messageExprType: {
      type: String,
      default: 'BaseExpr'
      // 表达式类型（大类）：目前有 BaseExpr 和 ContentExpr
    },
    messageExpr: {
      type: Object,
      default() {
        return {}
      }
    },
    tabIndex: {
    }
  },
  mounted() {
  },
  methods: {
    writeExpression() {
      this.expressionVisible = true
    },
    handleExpression(data, index) {
      console.log(data, index)
      if (index || index == 0) { // 有index
        this.$emit('confirm', data, index)
      } else {
        this.$emit('confirm', data)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
  .expression {
    display: inline-block;
    line-height: 20px;
  }
  .el-icon-arrow-left, .el-icon-arrow-right {
    vertical-align: middle;
  }
</style>
