<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">
      <p class="mb-5">
        <b>传输标头</b>
      </p>
      <el-table ref="singleTable" :data="stageData.headerInfos" highlight-current-row border>
        <el-table-column>
          <template slot="header">
            <span style="color:red;">*</span>名称
          </template>
          <template slot-scope="scope">
            <el-input v-model="scope.row.headerName" style="width:98%;"></el-input>
          </template>
        </el-table-column>
        <el-table-column label="操作" show-overflow-tooltip>
          <template slot-scope="scope">
            <el-radio-group v-model="scope.row.operation">
              <el-radio label="assign">将标头设置为
                <expression
                  :exprType="exprType"
                  messageExprType="ContentExpr"
                  :messageExpr="scope.row.contentExpr"
                  @confirm="handleExpression"
                  :tabIndex="scope.$index" />
              </el-radio>
              <br />
              <el-radio label="remove">删除标头</el-radio>
            </el-radio-group>
          </template>
        </el-table-column>
        <el-table-column label="选项" width="60">
          <template slot="header">
            <el-button type="text" icon="el-icon-circle-plus-outline" @click="addrow" size="small">选项</el-button>
          </template>
          <template slot-scope="scope">
            <el-button
              type="text"
              icon="el-icon-delete"
              @click="delrow(scope.$index)"
              size="small"
              style="padding-left:15px"></el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

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

const { mapGetters } = createNamespacedHelpers('app')
export default {
  name: 'TransmissionHeader',
  components: {
    Expression
  },
  data() {
    return {
      dialogFormVisible: false,
      icon: icon,
      enable: enable,
      textarea: '',
      exprType: []
    }
  },
  props: {
    index: {
      type: Number,
      default: 0
    },
    stageData: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  methods: {
    handleExpression(data, index) {
      console.log(data)
      this.$set(this.stageData.headerInfos[index].contentExpr, 'exprType', data.exprType)
      this.$set(this.stageData.headerInfos[index].contentExpr, 'valueExpr', data.valueExpr)
      this.$set(this.stageData.headerInfos[index].contentExpr, 'resourcePath', data.resourcePath)
      this.$set(this.stageData.headerInfos[index].contentExpr, 'resourceId', data.resourceId)
    },
    delrow(index) {
      this.stageData.headerInfos.splice(index, 1)
    },
    addrow() {
      this.stageData.headerInfos.push({
        headerName: '',
        operation: 'remove',
        contentExpr: {
          exprType: '',
          valueExpr: ''
        }
      })
    },
    addPerate(e) {
      this.$emit('confirm', e, '0', this.index, this.list)
    },
    handleClose() {
      this.dialogFormVisible = false
    }
  },
  computed: {
    ...mapGetters(['payloadType'])
  },
  watch: {
    stageData: {
      handler: function(val) {
        if (!val.contentExpr) {
          this.$set(val, 'contentExpr', {})
        }
        if (!val.headerInfos) {
          this.$set(val, 'headerInfos', [])
        }
      },
      deep: true,
      immediate: true
    },
    payloadType: {
      handler: function(val) {
        this.exprType = val === 'xml' ? ['simple', 'xquery'] : val === 'json' ? ['simple', 'jsonpath'] : ['simple']
      },
      immediate: true
    }
  }
}
</script>

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