<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-contents">
        选择条件：
        <el-dropdown class="selects" trigger="click" @command="handleCommand">
          <span class="el-dropdown-link">
            {{ this.noyas }}<i class="el-icon-arrow-down el-icon--right"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item :command="fuhao">{{ fuhao }}</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
        (
        <expression
          exprText="条件"
          :exprType="exprType"
          :messageExpr="stageData.contentExpr"
          @confirm="handleExpression"
        />
        <span class="isrequired">*</span>
        )
      </div>
      <div class="buttons">
        <el-button
          type="primary"
          @click="deletetest(index)"
          >删除</el-button
        >
      </div>
      <div class="row-content" style="width:100%">
        <el-row class="mb-10">
          <flow-stage ref="flowStage" :list="stageData.subNodes" />
        </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 { createNamespacedHelpers } from 'vuex'
const { mapGetters, mapMutations } = createNamespacedHelpers('app')
export default {
  name: 'IfThens',
  components: {
    Expression,
    FlowStage: () => import('../FlowStage')
  },
  data() {
    return {
      icon: icon,
      enable,
      iconElse: iconElse,
      type: 'ChoiceNodeDTOs',
      fuhao: '=',
      noyas: '=',
      objectes: {
        exprType: '',
        valueExpr: '',
        logicalExpr: ''
      },
      values: ''
    }
  },
  props: {
    index: {
      type: Number,
      default: 0
    },
    stageData: {
      type: Object,
      default() {
        return {}
      }
    },
    list: {
      type: Array,
      default() {
        return []
      }
    },
    valueExpr: {
      type: String,
      default() {
        return ''
      }
    }
  },
  computed: {
    ...mapGetters(['currentOperate']),
    ...mapGetters(['payloadType'])
  },

  watch: {
    stageData: {
      handler: function(val) {
        if (!val.contentExpr) {
          this.$set(val, 'contentExpr', {})
        } else {
          if (!this.noyas && val.contentExpr['logicalExpr']) {
            this.noyas = val.contentExpr.logicalExpr.substr(1, 2)
          }
        }
        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',
      'currenStageList'
    ]),
    handleExpression(data) {
      console.log(this.stageData, 'this.stageData')
      // this.$set(this.stageData.contentExpr, 'exprType', data.exprType)
      // this.$set(this.stageData.contentExpr, 'valueExpr', data.valueExpr)

      const obj = Object.assign({}, this.stageData)
      obj.contentExpr.exprType = data.exprType
      obj.contentExpr.valueExpr = data.valueExpr
      this.objectes.valueExpr = obj.contentExpr.valueExpr
      // console.log(this.valueExpr, obj.contentExpr.valueExpr, this.objectes.valueExpr, 'eeeee')
      if (data.valueExpr.indexOf(':=') !== -1) {
        obj.contentExpr.logicalExpr = ':='
      }
      if (data.valueExpr.indexOf(':<') !== -1) {
        obj.contentExpr.logicalExpr = ':<'
      }
      if (data.valueExpr.indexOf(':>') !== -1) {
        obj.contentExpr.logicalExpr = ':>'
      }
      if (data.valueExpr.indexOf(':!=') !== -1) {
        obj.contentExpr.logicalExpr = ':!='
      }
      if (data.valueExpr.indexOf(':ct') !== -1) {
        obj.contentExpr.logicalExpr = ':ct'
      }
    },
    //   mounted(){
    //   this.stageData.contentExpr.valueExpr = objectes.valueExpr
    // },
    handleCommand(e) {
      console.log(e)
      this.stageData.contentExpr.logicalExpr = ':' + e
      this.values = this.valueExpr + '=' + this.objectes.valueExpr
      console.log(this.values, '8888888888')
      this.noyas = this.fuhao
    },
    addOperateIf(e) {
      console.log(this.stageData, this.index, '12')
      this.$emit('confirm', e, '0', null)
      // this.setCurrenStageData(this.stageData.subNodes)
    },

    deletetest(n) {
      this.$emit('remove', n)
    },

    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 {
  border: none;

  &:after {
    content: '';
    clear: both;
    display: block;
  }

  .buttons {
    position: absolute;
    right: 0;
    transform: translateY(0px);
  }

  .selects {
    width: 30px;
    //  background-color: blue;
  }

  .row-contents {
    position: absolute;
    transform: translateX(85px);
  }
  /deep/ .flow-stage-content {
    padding-left: 50px;
  }
}
</style>
