<template>
  <el-tag effect="dark" :color="color" style="border:none;cursor:pointer" @click="onClick">{{ text }}</el-tag>
</template>

<script>
export default {
  name: 'RiskTag',
  props: {
    level: {
      type: [String, Number],
      required: true
    },
    log: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    color() {
      if (this.log) {
        return this.level == '1' ? '#909399'
          : this.level == '2' ? '#1989FA'
            : this.level == '3' ? '#F4A324'
              : this.level == '4' ? '#F56C6C' : '#FF0000'
      } else {
        return this.level == '1' ? '#1989FA'
          : this.level == '2' ? '#F4A324'
            : this.level == '3' ? '#F56C6C'
              : '#FF0000'
      }
    },
    text() {
      if (this.log) {
        return this.level == '1' ? '轻微'
          : this.level == '2' ? '低危'
            : this.level == '3' ? '中危'
              : this.level == '4' ? '高危' : '危急'
      } else {
        return this.level == '1' ? '低危'
          : this.level == '2' ? '中危'
            : this.level == '3' ? '高危'
              : '危急'
      }
    }
  },
  methods: {
    onClick() {
      this.$emit('click', this.level)
    }
  }
}
</script>

<style>

</style>
