<template>
  <al-card noPadding v-if="!close">
    <p :class="type">{{content}}</p>
    <div class="close-icon iconfont icon-auro-close" @click="close=true" :class="type" v-if="showClose"></div>
  </al-card>
</template>

<script>
    export default {
        name: "index",
        props:{
            content:{
                type: String,
                default:""
            },
            showClose:{
                type:Boolean,
                default:false
            },
            close:{
                type:Boolean,
                default:false
            },
            type:{
                type:String,
                default:'info'
            }
        }
    }
</script>

<style scoped lang="scss">
  .close-icon{
    position: absolute;
    top: 50%;
    right: 20px;
    font-size: 20px;
    margin-top: -12px;
    cursor: pointer;
    &.success{
      color: #67C23A;
    }
    &.error{
      color: #F56C6C;
    }
    &.warning{
      color: #E6A23C;
    }
    &.danger{
      color: #515256;
    }
  }
  p{
    font-size: 14px;
    width: 100%;
    line-height: 20px;
    padding: 14px 24px;
    box-sizing: border-box;
    padding-right: 40px;
    &.success{
      color: #67C23A;
    }
    &.error{
      color: #F56C6C;
    }
    &.warning{
      color: #E6A23C;
    }
    &.danger{
      color: #515256;
    }
  }
</style>
