<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>
        <expression
          :exprType="['simple']"
          :messageExpr="{
          valueExpr: stageData.messageExpr,
          exprType: this.exprTypeValue
        }"
          @confirm="handleExpression" />
        <br />
        带批注
      </p>
      <el-row :gutter="20">
        <el-col :span="10">
          <el-input
            type="textarea"
            :rows="2"
            v-model="stageData.label">
          </el-input>
        </el-col>
      </el-row>
      <el-row class="mt-5">
        <span>处于严重性级别</span>
        <el-select v-model="stageData.level" placeholder="请选择">
          <el-option
            v-for="item in logLevelList"
            :key="item.value"
            :label="item.key"
            :value="item.value">
          </el-option>
        </el-select>
        <span class="isrequired">*</span>
      </el-row>
    </div>
  </div>
</template>

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

const { mapGetters, mapMutations } = createNamespacedHelpers('app')
export default {
  name: 'Report',
  components: {
    Expression
  },
  data() {
    return {
      icon: icon,
      enable: enable,
      textarea: '',
      options: [
        {
          key: '调试',
          value: '调试'
        },
        {
          key: '信息',
          value: '信息'
        },
        {
          key: '警告',
          value: '警告'
        },
        {
          key: '错误',
          value: '错误'
        }
      ],
      exprTypeValue: 'simple'
    }
  },
  props: {
    index: {
      type: Number,
      default: 0
    },
    stageData: {
      type: Object,
      default() {
        return {}
      }
    },
    list: {
      type: Array,
      default() {
        return []
      }
    }
  },
  computed: {
    ...mapGetters(['logLevelList'])
    // ...mapGetters(['logLevelList','operatePanelData', 'operateNode','currenStageIndex','currenStageList']),
  },
  watch: {
    stageData: {
      handler: function(val) {
        this.$nextTick(() => {
          if (!val.level) {
            this.$set(val, 'level', 'DEBUG')
          }
        })
      },
      deep: true,
      immediate: true
    }
  },
  mounted() {
  },
  methods: {
    ...mapMutations(['setLogLevelList']),
    listLogLevelget() {
      listLogLevelget().then((rt) => {
        if (rt.status === '200' && rt.data) {
          this.options = rt.data
          this.setLogLevelList(rt.data)
        }
      }).catch(() => {
      })
    },
    handleExpression(data) {
      this.$set(this.stageData, 'messageExpr', data.valueExpr)
      this.exprTypeValue = data.exprType
    },
    addPerate(e) {
      this.$emit('confirm', e, '0', this.index, this.list)
    }
  }
}
</script>

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