<template>
  <div class="module-cont">
    <div class="add-perate-icon" @click.stop="addOperate">
      <img :src="icon" alt="" title="For Each">
      <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>For Each</b>
        <expression :exprType="['simple', 'constant', 'xquery']" :messageExpr="stageData.loopRuleExpr" @confirm="handleExpression" />
        <span class="isrequired">*</span>
      </el-row>
      <el-row class="mb-10">
        <el-checkbox v-model="stageData.enableCopyMode">是否打开复制模式</el-checkbox>
      </el-row>
      <el-row class="mb-10">
        <el-col style="width: 68px;">
          循环模式：
        </el-col>
        <el-col :span="20">
          <p class="mb-10"><el-radio v-model="stageData.loopMode" label="simple">simple</el-radio></p>
          <p><el-radio v-model="stageData.loopMode" label="do_while">do_while</el-radio></p>
        </el-col>
      </el-row>
      <el-row class="mb-10">Do (</el-row>
      <el-row class="mb-10">
        <flow-stage ref="flowStage" :list="stageData.subNodes" :stageData="stageData" />
      </el-row>
      <el-row class="mb-10">)</el-row>
    </div>
  </div>
</template>

<script>
import icon from '@/assets/img/foreach.gif'
import enable from '@/assets/img/enable.gif'
import Expression from '../expression'
export default {
  name: 'ForEach',
  components: {
    Expression,
    FlowStage: () => import('../FlowStage')
  },
  data() {
    return {
      icon: icon,
      enable
    }
  },
  props: {
    index: {
      type: Number,
      default: 0
    },
    stageData: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  watch: {
    stageData: {
      handler: function(val) {
        if (!val.loopMode) {
          this.$set(val, 'loopMode', 'simple')
        }
        if (!val.enableCopyMode) {
          this.$set(val, 'enableCopyMode', false)
        }
        if (!val.loopRuleExpr) {
          this.$set(val, 'loopRuleExpr', {})
        }
      },
      deep: true,
      immediate: true
    }
  },
  methods: {
    handleExpression(data) {
      this.$set(this.stageData.loopRuleExpr, 'exprType', data.exprType)
      this.$set(this.stageData.loopRuleExpr, 'valueExpr', data.valueExpr)
    },
    addOperate(e) {
      this.$emit('confirm', e, '0', this.index)
    }
  }
}
</script>

<style lang="scss" scoped>
</style>
