<template>
  <div class="module-cont">
    <div class="add-perate-icon" @click.stop="addPerate">
      <img :src="icon" alt="">
      <!-- <img v-if="typeof(stageData.enable) != 'undefined' && stageData.enable === false" class="perate-enable" :src="enable" alt="" title="禁用"> -->
    </div>
    <div class="row-content">
      <!-- <p class="mb-10">
        具有搜索关键字<b>报告</b>
        <expression />：
      </p> -->
      <p class="mb-10">
        <el-radio v-model="stageData.delNodeType" label="delVariable">变量</el-radio>
        <el-input :disabled="stageData.delNodeType === 'delDataNode'" @input="$forceUpdate()" v-model="stageData.delVariable"></el-input>
        <span class="isrequired">*</span>
      </p>
      <p class="mb-10">
        <el-radio v-model="stageData.delNodeType" label="delDataNode">变量</el-radio>
        <el-input :disabled="stageData.delNodeType === 'delVariable'" @input="$forceUpdate()" v-model="stageData.delDataNode"></el-input><span class="isrequired">*</span>中的
        <expression
            :exprType="exprType"
            messageExprType="exprType"
            :messageExpr="contentExpr"
            @confirm="handleExpression" />
        <span class="isrequired">*</span>
      </p>
      <!-- <el-table
        border
        :data="tableList"
        :header-cell-style="{'text-align':'center'}"
        :cell-style="{'text-align':'center'}"
        style="width: 100%; margin-bottom: 10px"
        size="mini">
        <el-table-column
          prop="name"
          label="关键字名称"
          show-overflow-tooltip>
          <template slot-scope="scope">
            <el-input v-model="scope.row.name"></el-input>
          </template>
        </el-table-column>
        <el-table-column
          prop="name1"
          label="关键字值"
          show-overflow-tooltip>
          <template slot-scope="scope">
            <span class="mr-10">变量</span><el-input v-model="scope.row.name1" style="width: calc(100% - 40px)"></el-input>
          </template>
        </el-table-column>
        <el-table-column
          prop="type"
          label="选项"
          width="100"
          show-overflow-tooltip>
          <template slot-scope="scope">
            <el-button type="text" icon="el-icon-delete" @click="deleteTable(scope.$index)" title="单击此项可删除此关键字"></el-button>
          </template>
        </el-table-column>
        <template slot="append">
          <el-link type="primary" @click="addTable">添加关键字</el-link>
        </template>
      </el-table> -->
    </div>
  </div>
</template>

<script>
import icon from '@/assets/img/icon_report.gif'
import enable from '@/assets/img/enable.gif'
import Expression from '../expression'
export default {
  name: 'Report',
  components: {
    Expression
  },
  data() {
    return {
      icon: icon,
      exprType: ['xquery', 'jsonpath'],
      enable: enable,
      contentExpr: {
        valueExpr: ''
      },
      tableList: []
    }
  },
  props: {
    index: {
      type: Number,
      default: 0
    },
    stageData: {
      type: Object,
      default() {
        return {
          delNodeType: 'yes'
        }
      }
    }
  },
  watch: {
    stageData: {
      handler: function(val) {
        if (val['locationExpr']) {
          this.contentExpr = val.locationExpr
        }
        if (val.delNodeType === 'delVariable') {
          this.$set(this.stageData, 'delDataNode', '')
          console.log(this.stageData,'this.stageData')
        } else {
          this.$set(this.stageData, 'delVariable', '')
          console.log(this.stageData,'this.stageData')
        }
      },
      deep: true,
      immediate: true
    }
  },
  methods: {
    handleExpression(data) {
      this.stageData.locationExpr = data
      this.$set(this.contentExpr, 'exprType', data.exprType)
      this.$set(this.contentExpr, 'valueExpr', data.valueExpr)
    },
    addPerate(e) {
      this.$emit('confirm', e, '0', this.index)
    }
  },
  mounted(){
     console.log(this.stageData,'123')
  }
}
</script>

<style lang="scss" scoped>
  .row-content {
    > p {
      line-height: 30px;
    }
  }
</style>
