<template>
  <div class="module-cont">
    <div class="add-perate-icon" @click.stop="addPerate">
      <img :src="icon" alt="" title="转换">
      <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">
        <el-select v-model="stageData.convertType" placeholder="请选择" style="width: 105px;">
          <el-option v-for="item in options" :key="item.value" :label="item.name" :value="item.value">
          </el-option>
        </el-select>
        <!--<span class="ml-5 mr-5">中<b>插入</b></span>-->
        <!--<expression :exprType="exprType" messageExprType="ContentExpr" :messageExpr="stageData.contentExpr"-->
        <!--  @confirm="handleExpression" />-->
        <!--<expression class="ml-5" :exprType="exprType2" :messageExpr="stageData.locationExpr"-->
        <!--  @confirm="handleLocationExpr" />-->
      </el-row>
      <div class="table-box">
        <div class="theader" style="border-bottom: 1px solid #8f8f8f">
          参数
        </div>
        <div class="tbody" style="border-bottom: 1px solid #8f8f8f">
          <div class="tcell">java.lang.String</div>
          <div class="tcell" style="border-left: 1px solid #8f8f8f">
            <expression
              :exprType="exprType"
              messageExprType="ContentExpr"
              :messageExpr="stageData.contentExpr"
              @confirm="handleExpression" />
            <span class="isrequired">*</span>
          </div>
        </div>
        <div class="theader" style="border-bottom: 1px solid #8f8f8f">
          结果
        </div>
        <div class="tbody">
          <div class="tcell">java.lang.String</div>
          <div class="tcell" style="border-left: 1px solid #8f8f8f">
            <el-input v-model="stageData.variable" class="ml-5 mr-5" style="width: 270px;" placeholder="变量名"></el-input>
            <span class="isrequired">*</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import icon from '@/assets/img/callout.gif'
import enable from '@/assets/img/enable.gif'
import Expression from '../expression'
import { createNamespacedHelpers } from 'vuex'

const { mapGetters } = createNamespacedHelpers('app')
export default {
  name: 'Report',
  components: {
    Expression
  },
  data() {
    return {
      icon: icon,
      enable: enable,
      exprType: [],
      exprType2: [],
      options: [
        {
          name: 'JSON转XML',
          value: 'jsonToXml'
        },
        {
          name: 'XML转JSON',
          value: 'xmlToJson'
        },
        {
          name: 'STRING转XML',
          value: 'stringToXml'
        },
        {
          name: 'XML转STRING',
          value: 'xmlToString'
        }
      ]
    }
  },
  props: {
    index: {
      type: Number,
      default: 0
    },
    stageData: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  computed: {
    ...mapGetters(['payloadType'])
  },
  watch: {
    stageData: {
      handler: function(val) {
        if (!val.convertType) {
          this.$set(val, 'convertType', 'jsonToXml')
        }
        if (!val.contentExpr) {
          this.$set(val, 'contentExpr', {})
        }
        if (!val.variable) {
          this.$set(val, 'variable', '')
        }
      },
      deep: true,
      immediate: true
    },
    payloadType: {
      handler: function(val) {
        this.exprType = val === 'xml' ? ['simple', 'xquery', 'jsonpath'] : val === 'json' ? ['simple', 'xquery', 'jsonpath'] : ['simple']
        this.exprType2 = val === 'xml' ? ['xpath'] : val === 'json' ? ['jsonpath'] : []
      },
      immediate: true
    }
  },
  methods: {
    handleExpression(data) {
      this.$set(this.stageData.contentExpr, 'exprType', data.exprType)
      this.$set(this.stageData.contentExpr, 'valueExpr', data.valueExpr)
      this.$set(this.stageData.contentExpr, 'resourcePath', data.resourcePath)
      this.$set(this.stageData.contentExpr, 'resourceId', data.resourceId)
    },
    handleLocationExpr(data) {
      this.$set(this.stageData.locationExpr, 'exprType', data.exprType)
      this.$set(this.stageData.locationExpr, 'valueExpr', data.valueExpr)
    },
    addPerate(e) {
      this.$emit('confirm', e, '0', this.index)
    }
  }
}
</script>

<style lang="scss" scoped>
  .table-box {
    width: 600px;
    border: 1px solid #8f8f8f;
    border-radius: 2px;

    .theader {
      height: 34px;
      line-height: 34px;
      background: #d7d7d7;
      padding-left: 10px;
    }

    .tbody {
      display: flex;
      height: 34px;
      line-height: 34px;
      /*align-items: center;*/
      padding-left: 10px;

      .tcell {
        flex: 1;
      }
    }
  }
</style>
