<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-5">
        使用
        <expression />
        <b>预警</b>
        目标
      </p>
      <el-row :gutter="10">
        <el-col style="width: 70px; line-height: 28px">
          <p>及预警概要</p>
        </el-col>
        <el-col :span="10">
          <el-input v-model="textarea"></el-input>
        </el-col>
      </el-row>
      <el-row class="mt-5">
        <span>处于严重性级别</span>
        <el-select v-model="value" placeholder="请选择">
          <span slot="suffix">
            1
          </span>
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.name"
            :value="item.value">
          </el-option>
        </el-select>
      </el-row>
    </div>
  </div>
</template>

<script>
import icon from '@/assets/img/alert.gif'
import enable from '@/assets/img/enable.gif'
import Expression from '../expression'
export default {
  name: 'Report',
  components: {
    Expression
  },
  data() {
    return {
      icon: icon,
      enable: enable,
      textarea: '',
      options: [
        {
          name: '普通',
          value: '普通'
        },
        {
          name: '警告',
          value: '警告'
        },
        {
          name: '次要',
          value: '次要'
        },
        {
          name: '主要',
          value: '主要'
        },
        {
          name: '严重',
          value: '严重'
        },
        {
          name: '致命',
          value: '致命'
        }
      ],
      value: '普通'
    }
  },
  props: {
    index: {
      type: Number,
      default: 0
    }
  },
  methods: {
    addTable() {
      this.tableList.push({})
    },
    deleteTable(index) {
      this.tableList.splice(index, 1)
    },
    addPerate(e) {
      this.$emit('confirm', e, '0', this.index)
    }
  }
}
</script>

<style lang="scss" scoped>
  .row-content {
    > p {
      line-height: 22px;
    }
    .el-select {
      width: 60px;
      /deep/ .el-input {
        .el-input__inner {
          color: $active-color;
          padding: 0 10px;
          border: none;
        }
        .el-input__icon {
          width: 16px;
          color: $active-color;
        }
      }
    }
  }
</style>
