<template>
  <!--
  :class={red:isRed}
    red类名是否生效 取决于 isRed是true 还是false

  写表达式可以用数组
  :class=['表达式1','表达式2']
  :class="`my-alert--${type}` + (center === true ? ' is-center' : '')"
 -->
  <div
    v-show="isShow"
    class="my-alert"
    :class="[`my-alert--${type}`, { 'is-center': center }]"
  >
    <!-- 内容 -->
    <div class="my-alert__content">
      <span class="my-alert__title">
        <!-- 插槽的后备内容 -->
        <slot>提示信息哦💋!</slot>
      </span>
      <!-- 关闭按钮 -->
      <i
        @click="isShow = false"
        v-if="closable"
        class="my-alert__closebtn iconfont icon-close"
      ></i>
    </div>
  </div>
</template>

<script>
export default {
  name: 'my-alert',
  data () {
    return {
      isShow: true
    }
  },
  props: {
    type: {
      type: String,
      default: 'info',
      // 自定义校验规则
      // value 外部传入的值
      validator (value) {
        // 判断传入的值 是否在数组中存在 只能是这4个
        const _res = ['success', 'warning', 'info', 'error'].includes(value)
        return _res
      }
    },
    // 是否允许关闭
    closable: {
      type: Boolean,
      default: true
    },
    center: {
      type: Boolean,
      default: false
    }
  }
}
</script>

<style lang="less">
.my-alert {
  width: 100%;
  padding: 8px 16px;
  margin: 0;
  box-sizing: border-box;
  border-radius: 4px;
  position: relative;
  background-color: #fff;
  overflow: hidden;
  opacity: 1;
  display: flex;
  align-items: center;
  transition: opacity 0.2s;
  // 成功
  &.my-alert--success {
    background-color: #f0f9eb;
    color: #67c23a;
  }
  // 信息
  &.my-alert--info {
    background-color: #f4f4f5;
    color: #9196a0;
  }
  // 警告
  &.my-alert--warning {
    background-color: #fdf6ec;
    color: #e6a23c;
  }
  // 错误
  &.my-alert--error {
    background-color: #fef0f0;
    color: #f56c6c;
  }
  // 是否居中
  &.is-center {
    justify-content: center;
  }
  .my-alert__content {
    display: table-cell;
    padding: 0 8px;
  }
  .my-alert__title {
    font-size: 13px;
    line-height: 18px;
  }
  .my-alert__closebtn {
    font-size: 12px;
    opacity: 1;
    position: absolute;
    top: 12px;
    right: 15px;
    cursor: pointer;
    &::before {
      color: #c0c4cc;
    }
  }
}
</style>
