<template>
  <div class="prompt-text" :class="typeClass">
    <div class="flex-text">
      <div class="flex">
        <img class="prompt-icon" :src="typeIcon" alt="">
        <span class="prompt-desc">{{ text }}</span>
      </div>
      <div class="flex">
        <slot name="next_desc" />
      </div>
    </div>
    <div class="prompt-extra">
      <slot name="desc" />
    </div>
  </div>
</template>
<script>

export default {
  name: 'PromptText',
  props: {
    text: {
      type: String,
      required: true
    },
    type: {
      type: [Number, String],
      default: 2
    },
  },
  components: {
  },
  data() {
    return {}
  },
  computed: {
    typeClass() {
      switch (parseInt(this.type)) {
        case 1: return 'info';
        case 2: return 'notice';
        case 3: return 'warning';
        default: return 'notice';
      }
    },
    typeIcon() {
      switch (parseInt(this.type)) {
        case 1: return require('../../assets/prompt-icon-1.svg');
        case 2: return require('../../assets/prompt-icon-2.svg');
        case 3: return require('../../assets/prompt-icon-3.svg');
        default: return require('../../assets/prompt-icon-2.svg');
      }
    }
  },
  methods: {

  }
}
</script>
<style scoped lang="scss">
.prompt-text {
  padding: 8px 13px;
  border-radius: 4px;
}

.flex-text {
  display: flex;
  align-items: center;
  align-self: stretch;
  justify-content: space-between;
  z-index: 1;
}

.info {
  background: #F2F7FF;
  border: 1px solid #BFDAFF;
}

.notice {
  background: #FEFCE8;
  border: 1px solid rgba(255, 140, 0, 0.3);
}

.warning {
  background: #FFF1F0;
  border: 1px solid #FFA39E;
}

.prompt-icon {
  width: 16px;
  height: 16px;
  ;
  margin-right: 8px;
}

.prompt-desc {
  color: #1E2226;
  letter-spacing: 0.08em;
}

.prompt-extra {}
</style>