<template>
  <div class="module-cont">
    <div class="if-content ifelse-content">
      <div class="add-perate-icon" @click.stop="addOperateIf" title="If...Then...">
        <img :src="icon" alt="" title="If...Then...">
        <img v-if="typeof(stageData.enable) != 'undefined' && stageData.enable === false" class="perate-enable" :src="enable" alt="" title="禁用">
      </div>
      <div class="row-content">
        <el-row class="mb-10">
          <b>If</b>
          (
          <expression exprText="条件" :exprType="exprType" :messageExpr="stageData.contentExpr" @confirm="handleExpression" />
          <span class="isrequired">*</span>
          )
        </el-row>
        <el-row class="mb-10">then (</el-row>
        <el-row class="mb-10">
          <flow-stage ref="flowStage" :list="stageData.subNodes" />
        </el-row>
        <el-row class="mb-10">)</el-row>
      </div>
    </div>
    <div class="ifelse-content">
      <ul>
        <li v-for="(item, index1) in stageData.elseIfNodes" :key="index1">
          <else-if :stageData="item" :index="index1" :exprTypep="exprType" @confirm="addOperateElseIf" />
        </li>
      </ul>
    </div>
    <div class="ifelse-content" v-if="stageData.defaultNode">
      <div class="add-perate-icon" @click.stop="addOperateElse" title="If...Then...">
        <img :src="iconElse" alt="" title="If...Then...">
      </div>
      <div class="row-content">
        <el-row class="mb-10">
          <b>Else</b> (
        </el-row>
        <el-row class="mb-10">
          <flow-stage ref="flowStage" :list="stageData.defaultNode" />
        </el-row>
        <el-row class="mb-10">)</el-row>
      </div>
    </div>
  </div>
</template>

<script>
import icon from '@/assets/img/ifthen.gif'
import enable from '@/assets/img/enable.gif'
import iconElse from '@/assets/img/else.gif'
import Expression from '../expression'
import ElseIf from './ElseIf'
import { createNamespacedHelpers } from 'vuex'
const { mapGetters, mapMutations } = createNamespacedHelpers('app')
export default {
  name: 'IfThen',
  components: {
    Expression,
    ElseIf,
    FlowStage: () => import('../FlowStage')
  },
  data() {
    return {
      icon: icon,
      enable,
      iconElse: iconElse
    }
  },
  props: {
    index: {
      type: Number,
      default: 0
    },
    stageData: {
      type: Object,
      default() {
        return {}
      }
    },
    list: {
      type: Array,
      default() {
        return []
      }
    }
  },
  computed: {
    ...mapGetters(['currentOperate']),
    ...mapGetters(['payloadType'])
  },
  watch: {
    stageData: {
      handler: function(val) {
        if (!val.contentExpr) {
          this.$set(val, 'contentExpr', {})
        }
        if (!val.elseIfNodes) {
          this.$set(val, 'elseIfNodes', [])
        }
      },
      deep: true,
      immediate: true
    },
    payloadType: {
      handler: function(val) {
        this.exprType = val === 'xml' ? ['simple', 'jsonpath', 'xquery'] : val === 'json' ? ['simple', 'jsonpath', 'xquery'] : ['simple']
      },
      immediate: true
    }
  },
  methods: {
    ...mapMutations(['setCurrenStageList', 'setCurrenStageData']),
    handleExpression(data) {
      this.$set(this.stageData.contentExpr, 'exprType', data.exprType)
      this.$set(this.stageData.contentExpr, 'valueExpr', data.valueExpr)
      if (data.valueExpr.indexOf(':=') !== -1) {
        this.stageData.contentExpr.logicalExpr = ':='
      }
      if (data.valueExpr.indexOf(':<') !== -1) {
        this.stageData.contentExpr.logicalExpr = ':<'
      }
      if (data.valueExpr.indexOf(':>') !== -1) {
        this.stageData.contentExpr.logicalExpr = ':>'
      }
      if (data.valueExpr.indexOf(':!=') !== -1) {
        this.stageData.contentExpr.logicalExpr = ':!='
      }
      if (data.valueExpr.indexOf(':ct') !== -1) {
        this.stageData.contentExpr.logicalExpr = ':ct'
      }
    },

    addOperateIf(e) {
      console.log(this.stageData, '12')
      this.$emit('confirm', e, 'AddIfElseAll', this.index)
      this.setCurrenStageData(this.stageData)
    },

    addOperateElseIf(e, index) {
      const type = this.stageData.defaultNode ? 'OnlyAddElseIf' : 'AddIfElse'
      this.$emit('confirm', e, type, index)
      console.log(this.stageData, '12')
      this.setCurrenStageData(this.stageData)
    },
    addOperateElse(e) {
      this.$emit('confirm', e, 'DeleteCondition', this.index)
      console.log(this.stageData, '12')
      this.setCurrenStageData(this.stageData)
    }
  }
}
</script>

<style lang="scss" scoped>
  .ifelse-content {
    &:after {
      content: "";
      clear: both;
      display: block;
    }
  }
</style>
