<template>
  <div class="module-cont">
    <!-- <div>
      <el-button type="primary" @click="deletes(index)">删除</el-button>
    </div> -->
    <div class="add-perate-icon" @click.stop="addOperate">
      <img :src="icon" alt="" title="For Each">
      <img @click.prevent="" v-if="typeof(stageData.enable) != 'undefined' && stageData.enable === false" class="perate-enable" :src="enable" alt="" title="禁用">
    </div>
    <div class="if-content ifelse-content">
      <el-row class="mb-101">
        <div>
          <b style="font-size:12px;color:#000">条件分支</b>
        </div>
        <expression
          exprText="条件"
          :exprType="exprType"
          :messageExpr="stageData.contentExpr"
          @confirm="handleExpression"
        />
        <span class="isrequired">*</span>
      </el-row>
      <div class="row-content">
        <div>
          <el-button type="primary" @click="addtest()">添加条件分支</el-button>
        </div>

        <ul>
          <li v-for="(item, index) in stageData.subNodes" :key="index">
            <if-thens
              :stageData="item"
              :index="index"
              :list="list"
              @remove="remove"
              @confirm="addOperates"
              :valueExpr="stageData.contentExpr.valueExpr"
            />
          </li>
        </ul>
      </div>
      <img
        v-if="
          typeof stageData.enable != 'undefined' && stageData.enable === false
        "
        class="perate-enable"
        :src="enable"
        alt=""
        title="禁用"
      />
    </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 IfThens from './copyThen'
import { createNamespacedHelpers } from 'vuex'
const { mapGetters, mapMutations } = createNamespacedHelpers('app')
export default {
  name: 'IfThen',
  components: {
    Expression,
    IfThens
  },
  data() {
    return {
      icon: icon,
      enable,
      addRow: {
        type: 'ConditionalBranchNodeDTO',
        flowId: '',
        enable: true,
        subNodes: [],
        elseIfNodes: [],
        contentExpr: {}
      },
      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) {
        // console.log(val, 'stageData?stageData')
        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',
      'setCurrenStageIndex'
    ]),
    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'
      }
    },
    addtest() {
      console.log(this.list, this.stageData, 'nidhsuhd')
      const obj = Object.assign({}, this.addRow)
      obj.flowId = this.stageData.flowId
      obj.type = this.stageData.type
      obj.contentExpr = {}

      if (obj.subNodes) {
        obj.subNodes = []
      }
      this.stageData.subNodes.push(obj)
    },

    deletes(n) {
      this.$emit('removelist', n)
    },
    remove(n) {
      this.stageData.subNodes.splice(n, 1)
    },

    addOperate(e) {
      console.log(e)
      this.$emit('confirm', e, '0', this.index)
    },

    addOperates(e) {
      this.$emit('confirm', e, '0', this.index)
    },

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

<style lang="scss" scoped>
.module-cont {
  height: auto;
  min-height: 100px;
  width: 100%;
  border: 1px solid gray;
}

.contents {
  height: 100%;
  padding-top: 20px;
}

.box1 {
  display: flex;
  margin-left: -10px;
}

// .box2 {
//   display: flex;
//   margin-left: 80px;
// }
.buttons {
  float: right;
}
.ifelse-content {
  margin-left: 50px;
  &:after {
    content: '';
    clear: both;
    display: block;
  }
}

.add-perate-icon {
  // display: flex;
  // transform: translateY(0px);
  // margin-right: 20px;
}

// .handle{
//   transform: translateY(20px);
//   float: left;
// }
.mb-101 {
  display: flex;
  // justify-content: center;
  align-items: center;
  margin-bottom: 15px;
}
</style>
