<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
          @change=";(contentExprs = {}), (stageData.paramsMap.str = '')"
          v-model="stageData.functionName"
          placeholder="请选择"
          style="width: 120px"
        >
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.name"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-row>
      <div class="table-box">
        <div v-show="stageData.functionName === 'base64'">
          <div class="theader" style="border-bottom: 1px solid #8f8f8f">
            参数
          </div>
          <div class="tbody" style="border-bottom: 1px solid #8f8f8f">
            <div class="tcell">类型</div>
            <div class="tcell" style="border-left: 1px solid #8f8f8f">
              <el-radio
                @change="setParamsMap(stageData.paramsMap.format, 'format')"
                v-model="stageData.paramsMap.type"
                label="encoded"
                >加密</el-radio
              >
              <el-radio
                @change="setParamsMap(stageData.paramsMap.format, 'format')"
                v-model="stageData.paramsMap.type"
                label="decode"
                >解密</el-radio
              >
              <span class="isrequired">*</span>
            </div>
          </div>
          <div class="tbody" style="border-bottom: 1px solid #8f8f8f">
            <div class="tcell">变量</div>
            <div class="tcell" style="border-left: 1px solid #8f8f8f">
              <expression
                :exprType="exprType3"
                messageExprType="exprType"
                :messageExpr="contentExprs"
                @confirm="handleExpression"
              />
              <!-- <el-input @input="setParamsMap(stageData.paramsMap.str, 'str')" v-model="stageData.paramsMap.str" class="ml-5 mr-5" style="width: 270px;" placeholder="变量名"></el-input> -->
              <span class="isrequired">*</span>
            </div>
          </div>
        </div>
        <div v-show="stageData.functionName === 'sleep'">
          <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="contentExpr"
                @confirm="handleExpression"
              />
              <span class="isrequired">*</span>
            </div>
          </div>
        </div>
        <div v-show="stageData.functionName === 'judgeTimeDiff'">
          <div class="theader" style="border-bottom: 1px solid #8f8f8f">
            参数<span style="color: red; font-size: 10px">
              当前系统时间减去传入“最后时间”大于传入的“间隔时间”，则返回“Y”，否则返回“N”</span
            >
          </div>
          <div class="tbody" style="border-bottom: 1px solid #8f8f8f">
            <div class="tcell">最后时间</div>
            <div class="tcell" style="border-left: 1px solid #8f8f8f">
              <expression
                :exprType="exprType"
                messageExprType="ContentExpr"
                :messageExpr="contentExprs"
                @confirm="handleExpression"
              />
              <span class="isrequired">*</span>
            </div>
          </div>
          <div class="tbody" style="border-bottom: 1px solid #8f8f8f">
            <div class="tcell">间隔时间</div>
            <div class="tcell" style="border-left: 1px solid #8f8f8f">
              <el-input
                @change="timeChange"
                v-model="SendTimeOut"
                class="ml-5 mr-5"
                style="width: 270px"
                placeholder="变量名"
              ></el-input>
              <span class="isrequired">*</span>
            </div>
          </div>
        </div>
        <div v-show="stageData.functionName === 'md5'">
          <div class="theader" style="border-bottom: 1px solid #8f8f8f">
            参数
          </div>
          <div class="tbody" style="border-bottom: 1px solid #8f8f8f">
            <div class="tcell">大小写</div>
            <div class="tcell" style="border-left: 1px solid #8f8f8f">
              <el-radio
                @change="setParamsMap(stageData.paramsMap.format, 'format')"
                v-model="stageData.paramsMap.format"
                label="UpperCase"
                >大写</el-radio
              >
              <el-radio
                @change="setParamsMap(stageData.paramsMap.format, 'format')"
                v-model="stageData.paramsMap.format"
                label="LowerCase"
                >小写</el-radio
              >
              <el-radio
                @change="setParamsMap(stageData.paramsMap.format, 'format')"
                v-model="stageData.paramsMap.format"
                label="none"
                >不变</el-radio
              >
              <span class="isrequired">*</span>
            </div>
          </div>
          <div class="tbody" style="border-bottom: 1px solid #8f8f8f">
            <div class="tcell">加密方式</div>
            <div class="tcell" style="border-left: 1px solid #8f8f8f">
              <el-select
                @change="setParamsMap(stageData.paramsMap.md5digit, 'md5digit')"
                v-model="stageData.paramsMap.md5digit"
                placeholder="请选择"
                style="width: 105px"
              >
                <el-option
                  v-for="item in optionss"
                  :key="item.value"
                  :label="item.name"
                  :value="item.value"
                >
                </el-option>
              </el-select>
              <span class="isrequired">*</span>
            </div>
          </div>
          <div class="tbody" style="border-bottom: 1px solid #8f8f8f">
            <div class="tcell">变量</div>
            <div class="tcell" style="border-left: 1px solid #8f8f8f">
              <expression
                :exprType="exprType"
                messageExprType="exprType"
                :messageExpr="contentExprs"
                @confirm="handleExpression"
              />
              <!-- <el-input @input="setParamsMap(stageData.paramsMap.str, 'str')" v-model="stageData.paramsMap.str" class="ml-5 mr-5" style="width: 270px;" placeholder="变量名"></el-input> -->
              <span class="isrequired">*</span>
            </div>
          </div>
        </div>
        <div v-show="stageData.functionName === 'jsonFind'">
          <div class="theader" style="border-bottom: 1px solid #8f8f8f">
            参数
          </div>
          <div class="tbody" style="border-bottom: 1px solid #8f8f8f">
            <div class="tcell">字符串</div>
            <div class="tcell" style="border-left: 1px solid #8f8f8f">
              <expression
                :exprType="exprType"
                messageExprType="exprType"
                :messageExpr="contentExprss.jsonStr"
                @confirm="handleExpression1"
              />
              <span class="isrequired">*</span>
            </div>
          </div>
          <div class="tbody" style="border-bottom: 1px solid #8f8f8f">
            <div class="tcell">查找Key</div>
            <div class="tcell" style="border-left: 1px solid #8f8f8f">
              <expression
                :exprType="exprType"
                messageExprType="exprType"
                :messageExpr="contentExprss.jsonKey"
                @confirm="handleExpression2"
              />
              <span class="isrequired">*</span>
            </div>
          </div>
          <div class="tbody" style="border-bottom: 1px solid #8f8f8f">
            <div class="tcell">查找值</div>
            <div class="tcell" style="border-left: 1px solid #8f8f8f">
              <expression
                :exprType="exprType"
                messageExprType="exprType"
                :messageExpr="contentExprss.jsonValue"
                @confirm="handleExpression3"
              />
              <!-- <el-input @input="setParamsMap(stageData.paramsMap.str, 'str')" v-model="stageData.paramsMap.str" class="ml-5 mr-5" style="width: 270px;" placeholder="变量名"></el-input> -->
              <span class="isrequired">*</span>
            </div>
          </div>
        </div>
        <div v-show="stageData.functionName === 'sha'">
          <div class="theader" style="border-bottom: 1px solid #8f8f8f">
            参数
          </div>
          <!-- <div class="tbody" style="border-bottom: 1px solid #8f8f8f">
            <div class="tcell">时间戳</div>
            <div class="tcell" style="border-left: 1px solid #8f8f8f">
              <expression
                :exprType="exprType3"
                messageExprType="exprType"
                :messageExpr="contentExprss.timestamp"
                @confirm="handleExpressiono" />
              <span class="isrequired">*</span>
            </div>
          </div>
          <div class="tbody" style="border-bottom: 1px solid #8f8f8f">
            <div class="tcell">productCode</div>
            <div class="tcell" style="border-left: 1px solid #8f8f8f">
              <expression
                :exprType="exprType3"
                messageExprType="exprType"
                :messageExpr="contentExprss.productCode"
                @confirm="handleExpressiont" />
              <span class="isrequired">*</span>
            </div>
          </div> -->
          <div class="tbody" style="border-bottom: 1px solid #8f8f8f">
            <div class="tcell">str</div>
            <div class="tcell" style="border-left: 1px solid #8f8f8f">
              <expression
                :exprType="exprType3"
                messageExprType="exprType"
                :messageExpr="contentExprss.str"
                @confirm="handleExpressionth"
              />
              <!-- <el-input @input="setParamsMap(stageData.paramsMap.str, 'str')" v-model="stageData.paramsMap.str" class="ml-5 mr-5" style="width: 270px;" placeholder="变量名"></el-input> -->
              <span class="isrequired">*</span>
            </div>
          </div>
          <div class="tbody" style="border-bottom: 1px solid #8f8f8f">
            <div class="tcell">shaType</div>
            <div class="tcell" style="border-left: 1px solid #8f8f8f">
              <el-select
                @change="setParamsMap(stageData.paramsMap.shaType, 'sha')"
                v-model="stageData.paramsMap.shaType"
                placeholder="请选择"
                style="width: 105px"
              >
                <el-option
                  v-for="item in optionsss"
                  :key="item.value"
                  :label="item.name"
                  :value="item.value"
                >
                </el-option>
              </el-select>
              <span class="isrequired">*</span>
            </div>
          </div>
        </div>
        <div v-show="stageData.functionName === 'urlCode'">
          <div class="theader" style="border-bottom: 1px solid #8f8f8f">
            参数
          </div>
          <div class="tbody" style="border-bottom: 1px solid #8f8f8f">
            <div class="tcell">codeType</div>
            <div class="tcell" style="border-left: 1px solid #8f8f8f">
              <el-select
                @change="setParamsMap(stageData.paramsMap.codeType, 'urlCode')"
                v-model="stageData.paramsMap.codeType"
                placeholder="请选择"
                style="width: 105px"
              >
                <el-option
                  v-for="item in optionsss1"
                  :key="item.value"
                  :label="item.name"
                  :value="item.value"
                >
                </el-option>
              </el-select>
              <span class="isrequired">*</span>
            </div>
          </div>
          <div class="tbody" style="border-bottom: 1px solid #8f8f8f">
            <div class="tcell">enc</div>
            <div class="tcell" style="border-left: 1px solid #8f8f8f">
              <el-select
                @change="setParamsMap(stageData.paramsMap.enc, 'urlCode')"
                v-model="stageData.paramsMap.enc"
                placeholder="请选择"
                style="width: 105px"
              >
                <el-option
                  v-for="item in optionsss12"
                  :key="item.value"
                  :label="item.name"
                  :value="item.value"
                >
                </el-option>
              </el-select>
              <span class="isrequired">*</span>
            </div>
          </div>
          <div class="tbody" style="border-bottom: 1px solid #8f8f8f">
            <div class="tcell">str</div>
            <div class="tcell" style="border-left: 1px solid #8f8f8f">
              <expression
                :exprType="exprType3"
                messageExprType="exprType"
                :messageExpr="contentExprss.str"
                @confirm="handleExpressionths"
              />
              <!-- <el-input @input="setParamsMap(stageData.paramsMap.str, 'str')" v-model="stageData.paramsMap.str" class="ml-5 mr-5" style="width: 270px;" placeholder="变量名"></el-input> -->
              <span class="isrequired">*</span>
            </div>
          </div>
        </div>
        <div v-show="stageData.functionName === 'replace'">
          <div class="theader" style="border-bottom: 1px solid #8f8f8f">
            参数
          </div>
          <div class="tbody" style="border-bottom: 1px solid #8f8f8f">
            <div class="tcell">变量名</div>
            <div class="tcell" style="border-left: 1px solid #8f8f8f">
              <expression
                :exprType="exprType3"
                messageExprType="exprType"
                :messageExpr="contentExprss.replaetext"
                @confirm="handleExpressiontha"
              />
              <!-- <el-input @input="setParamsMap(stageData.paramsMap.str, 'str')" v-model="stageData.paramsMap.str" class="ml-5 mr-5" style="width: 270px;" placeholder="变量名"></el-input> -->
              <span class="isrequired">*</span>
            </div>
          </div>
          <el-row class="mb-10">
            <!-- <el-checkbox v-model="stageData.isQueryParam" @change="value => objAdd(value,'q')"> -->
            替换集合：<el-button
              type="text"
              @click="(value) => objAdd(value, 'q')"
            >
              添加
            </el-button>
            <!-- </el-checkbox>  -->
            <!-- v-if="stageData.isQueryParam" -->
            <el-table
              v-if="stageData.isQueryParam != 'false'"
              :data="queryparam"
              max-height="120"
              border
            >
              <el-table-column prop="key" label="查找值" align="center">
                <template slot-scope="scope">
                  <el-input type="text" v-model="scope.row.key"></el-input>
                </template>
              </el-table-column>
              <el-table-column prop="values" label="替换值" align="center">
                <template slot-scope="scope">
                  <el-input type="text" v-model="scope.row.values"></el-input>
                </template>
              </el-table-column>
              <el-table-column label="操作" align="center">
                <template slot-scope="scope">
                  <el-button
                    @click.native.prevent="deleteRow(scope.$index, queryparam)"
                    type="text"
                    icon="el-icon-delete"
                    circle
                  ></el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-row>
        </div>
        <div v-show="stageData.functionName !== 'sleep'">
          <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.returnParamName"
                class="ml-5 mr-5"
                style="width: 270px"
                placeholder="变量名"
              ></el-input>
            </div>
          </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 {
      SendTimeOut: null,
      lastErrorTime: null,
      icon: icon,
      enable: enable,
      vales: null,
      exprType: [],
      queryparam: [],
      exprType2: [],
      exprType3: ['simple'],
      contentExpr: {},
      contentExprs: {},
      contentExprsss: {},
      contentExprss: {
        // timestamp: {},
        // productCode: {},
        // secretKey: {},
        shaType: {},
        str: {},
        codeType: {},
        enc: {},
        replaetext: {},
        jsonStr: {},
        jsonKey: {},
        jsonValue: {}
        // strs:{}
      },
      options: [
        {
          name: '休眠',
          value: 'sleep'
        },
        {
          name: '时间判断',
          value: 'judgeTimeDiff'
        },
        {
          name: 'MD5加密',
          value: 'md5'
        },
        {
          name: 'Base64加密/解密',
          value: 'base64'
        },
        {
          name: 'sha加密',
          value: 'sha'
        },
        {
          name: '获取时间戳函数',
          value: 'timestamp'
        },
        {
          name: '生成32位uuid函数',
          value: 'uuid'
        },
        {
          name: 'url解码/编码函数',
          value: 'urlCode'
        },
        {
          name: '替换函数',
          value: 'replace'
        },
        {
          name: 'JsonFind',
          value: 'jsonFind'
        }
      ],
      optionss: [
        {
          name: '16位加密',
          value: '16'
        },
        {
          name: '32位加密',
          value: '32'
        },
        {
          name: '64位加密',
          value: '64'
        }
      ],
      optionsss: [
        {
          name: 'sha3-224',
          value: 'sha3-224'
        },
        {
          name: 'sha-256',
          value: 'sha-256'
        }
      ],
      optionsss1: [
        {
          name: 'Encode编码',
          value: 'Encode'
        },
        {
          name: 'Decode解码',
          value: 'Decode'
        },
        {
          name: '无',
          value: '无'
        }
      ],
      optionsss12: [
        {
          name: 'UTF-8',
          value: 'UTF-8'
        },
        {
          name: 'GBK',
          value: 'GBK'
        }
      ]
    }
  },
  props: {
    index: {
      type: Number,
      default: 0
    },
    stageData: {
      type: Object,
      default() {
        return {
          paramsMap: {
            millisecond: '',
            format: 'none',
            md5digit: '16',
            str: '',
            shaType: '',
            codeType: '',
            enc: '',
            jsonstr: '',
            replaetext: ''
          },
          isQueryParam: false
        }
      }
    }
  },
  computed: {
    ...mapGetters(['payloadType'])
  },
  watch: {
    stageData: {
      handler: function (val) {
        console.log(val, '1234444ashd')
        if (!val.hasOwnProperty('paramsMap')) {
          val.paramsMap = {
            millisecond: '',
            format: 'none',
            md5digit: '16',
            // str: val.str,
            shaType: val.shaType
            //  replaetext:val.replaetext
          }
        }
        if (val.functionName === 'sleep') {
          this.$set(val, 'needReturn', false)
        } else {
          this.$set(val, 'needReturn', true)
        }
        switch (val.functionName) {
          case 'judgeTimeDiff':
            this.lastErrorTime = val.paramsMap.lastErrorTime
            this.contentExprs.valueExpr = val.paramsMap.lastErrorTime
            this.SendTimeOut = val.paramsMap.SendTimeOut
            break
          case 'jsonFind':
            this.contentExprss.jsonStr.valueExpr = val.paramsMap.jsonStr
            this.contentExprss.jsonValue.valueExpr = val.paramsMap.jsonValue
            this.contentExprss.jsonKey.valueExpr = val.paramsMap.jsonKey
            break
          case 'sleep':
            this.contentExpr.valueExpr = val.hasOwnProperty('paramsMap')
              ? val.paramsMap['millisecond']
              : ''
            break
          case 'base64':
            this.contentExprs.valueExpr = val.hasOwnProperty('paramsMap')
              ? val.paramsMap['str']
              : ''
            break
          case 'md5':
            this.contentExprs.valueExpr = val.hasOwnProperty('paramsMap')
              ? val.paramsMap['str']
              : ''
            break
          case 'sha':
            this.contentExprss.shaType.valueExpr = val.hasOwnProperty(
              'paramsMap'
            )
              ? val.paramsMap['shaType']
              : ''
            this.contentExprss.str.valueExpr = val.hasOwnProperty('paramsMap')
              ? val.paramsMap['str']
              : ''
            break
          case 'urlCode':
            this.contentExprss.codeType.valueExpr = val.hasOwnProperty(
              'paramsMap'
            )
              ? val.paramsMap['codeType']
              : ''
            this.contentExprss.str.valueExpr = val.hasOwnProperty('paramsMap')
              ? val.paramsMap['str']
              : ''
            break
          case 'replace':
            this.contentExprss.replaetext.valueExpr = val.hasOwnProperty(
              'paramsMap'
            )
              ? val.paramsMap['replaetext']
              : ''
            break
        }
        if (!val.functionName) {
          this.$set(val, 'functionName', 'sleep')
        }
      },
      deep: true,
      immediate: true
    },
    vales: {
      handler: function (val) {
        if (val) {
          this.stageData.paramsMap = {
            millisecond: val
          }
        }
      },
      deep: true,
      immediate: true
    },
    queryparam: {
      handler: function (val) {
        if (val.length > 0) {
          let str = {}
          val.forEach((item, index) => {
            // console.log(2222, item);
            if (item.key && item.values) {
              // str += item.key
              // str += ':'
              // str += item.values
              // if (index !== (val.length - 1)) {
              //   str += ','
              // }
              if (item.values) {
                str[item.key] = item.values
              } else {
                str[item.key] = ''
              }
            }
          })
          // console.log(111111, str);
          this.stageData.paramsMap.jsonstr = JSON.stringify(str)
          // this.stageData.paramsMap.replaetext=JSON.stringify(this.contentExprss.replaetext)
        }
      },
      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: {
    handleExpression1(data) {
      this.contentExprss.jsonStr = {}
      this.handleExpressions('jsonStr', data)
    },
    handleExpression2(data) {
      this.contentExprss.jsonKey = {}
      this.handleExpressions('jsonKey', data)
    },
    handleExpression3(data) {
      this.contentExprss.jsonValue = {}
      this.handleExpressions('jsonValue', data)
    },
    handleExpressions(name, data) {
      console.log(
        name,
        data,
        data.valueExpr,
        this.stageData,
        this.contentExprss,
        '打印一下name跟data'
      )
      data['exprType'] && this.$set(this.contentExprss[name], 'exprType', data.exprType)
      data['valueExpr'] && this.$set(this.contentExprss[name], 'valueExpr', data.valueExpr)
      data['resourcePath'] && this.$set(this.contentExprss[name], 'resourcePath', data.resourcePath)
      data['resourceId'] && this.$set(this.contentExprss[name], 'resourceId', data.resourceId)
      this.stageData.paramsMap[name] = data.valueExpr
    },
    // handleExpressiono(data) {
    //   this.handleExpressions('timestamp', data)
    // },
    // handleExpressiont(data) {
    //   this.handleExpressions('productCode', data)
    // },
    handleExpressionth(data) {
      this.handleExpressions('str', data)
    },
    handleExpressionths(data) {
      this.handleExpressions('str', data)
    },
    handleExpressiontha(data) {
      this.handleExpressions('replaetext', data)
      console.log(data, '12312444')
    },

    setParamsMap(val, name) {
      switch (name) {
        case 'format':
          this.$set(this.stageData.paramsMap, 'format', val)
          this.$forceUpdate()
          break
        case 'md5digit':
          this.$set(this.stageData.paramsMap, 'md5digit', val)
          this.$forceUpdate()
          break
        case 'sha':
          this.$set(this.stageData.paramsMap, 'sha', val)
          this.$forceUpdate()
          break
        case 'urlCode':
          this.$set(this.stageData.paramsMap, 'urlCode', val)
          this.$forceUpdate()
          break
        // case 'replace':
        // this.$set(this.stageData.paramsMap, 'replace', val)
        // this.$forceUpdate()
        // break
      }
    },
    timeChange() {
      const vm = this
      this.stageData.paramsMap = {
        SendTimeOut: vm.SendTimeOut,
        lastErrorTime: vm.lastErrorTime
      }
      // this.stageData.paramsMap.push({
      //   'SendTimeOut': vm.SendTimeOut,
      //   'lastErrorTime': vm.lastErrorTime
      // })
    },
    handleExpression(data) {
      // console.log(data)
      this.$set(this.contentExprs, 'exprType', data.exprType)
      this.$set(this.contentExprs, 'valueExpr', data.valueExpr)
      this.$set(this.contentExprs, 'resourcePath', data.resourcePath)
      this.$set(this.contentExprs, 'resourceId', data.resourceId)
      switch (this.stageData.functionName) {
        case 'sleep':
          this.vales = data.valueExpr
          break
        case 'judgeTimeDiff':
          this.lastErrorTime = data.valueExpr
          break
        case 'md5':
          this.stageData.paramsMap.str = data.valueExpr
          break
        case 'base64':
          this.stageData.paramsMap.str = data.valueExpr
          break
        case 'urlCode':
          this.stageData.paramsMap.str = data.valueExpr
          break
        case 'urlCode':
          this.stageData.paramsMap.str = data.valueExpr
          break
      }
    },
    addPerate(e) {
      this.$emit('confirm', e, '0', this.index)
    },
    deleteRow(index, rows) {
      rows.splice(index, 1)
    },
    objAdd(val, name) {
      this.$set(this.stageData, 'isQueryParam', val)
      this.queryparam.push({})
      this.$forceUpdate()
    }
  },
  mounted() {
    // console.log(this.queryparam,1111,this.stageData.paramsMap.jsonstr,'this.queryparam')
    if (this.stageData.paramsMap['jsonstr'] && this.stageData.paramsMap.jsonstr !== '') {
      //  console.log(this.stageData.isQueryParam,'isQueryParam')
      const i = JSON.parse(this.stageData.paramsMap.jsonstr)
      // console.log(i,'iiiiiiiiiiiiiiiiiiiiiiii')
      const io = []
      for (let keys in i) {
        this.queryparam.push({
          key: keys,
          values: i[keys]
        })
      }
      this.stageData.isQueryParam = true
      // console.log(this.queryparam,'queryparam123333')
    }
  }
}
</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>
