<template>
  <transition name="cj-fade">
    <div class="panel">
      <div class="alert-bg" :class="type"><i class="iconfont" :class="('icon-' + type)" v-if="icon"></i><slot></slot></div>
    </div>
  </transition>
</template>
<script>
export default{
  name: 'CjAlert',
  props:{
    type: {
      type: String,
      default: 'info'
    },
    icon:{
      type: Boolean,
      default: false
    }
  },
  data(){
    return {
    }
  }
}
</script>
<style scoped lang="scss">
.alert-bg{
  display: block;
  width: calc(100% - 18px);
  padding: 8px;
  color: #909399;
  font-size: 13px;
  font-weight: 500;
  border: 1px solid #909399;
  border-radius: 5px;
  i{
    font-size: 13px;
    font-weight: 500;
    line-height: 13px;
    margin: 0px 5px;
  }
}
.info{
  border: 1px solid #909399;
  background-color: #e9e9eb;
}
.icon-info::before{
  content: '\e91a';
  color: #909399;
}
.primary{
  border: 1px solid #409EFF;
  background-color: #dcecfd;
}
.icon-primary::before{
  content: '\e916';
  color: #409EFF;
}
.success{
  border: 1px solid #67C23A;
  background-color: #e4f2da;
}
.icon-success::before{
  content: '\e916';
  color: #67C23A;
}
.warning{
  border: 1px solid #E6A23C;
  background-color: #f8ecda;
}
.icon-warning::before{
  content: '\e91f';
  color: #E6A23C;
}
.danger{
  border: 1px solid #F56C6C;
  background-color: #f9e3e3;
}
.icon-danger::before{
  content: '\e919';
  color: #F56C6C;
}
</style>
