<template>
  <s-transition mode="fade" :show="show">
    <view
      class="s-alert"
      :class="[border? `s-alert--${type}--${border}`:`s-alert--${type}--${effect}`,title ? 's-alert--title-padding': '']"
      @tap.stop="clickHandler"
      :style="[$s.addStyle(customStyle)]"
    >
      <view class="s-alert__icon" v-if="showIcon">
        <s-icon name="bell-fill" size="18" :color="iconColor"></s-icon>
      </view>
      <view class="s-alert__content" :style="[{
					paddingRight: closable ? '20px' : 0
				}]">
        <text
          class="s-alert__content__title"
          v-if="title"
          :style="[{
						fontSize: $s.addUnit(fontSize),
						textAlign: center ? 'center' : 'left'
					}]"
          :class="[!border && `s-alert__text--${type}--light`]"
        >{{ title }}</text>
        <text
          class="s-alert__content__desc"
          v-if="description"
          :style="[{
						fontSize: $s.addUnit(fontSize),
						textAlign: center ? 'center' : 'left',
            lineHeight: $s.addUnit(lineHeight)
					}]"
          :class="[border? `s-alert__text--${border}--${type}`: effect === 'dark' ? 's-alert__text--dark' : `s-alert__text--${type}--light`]"
        >{{ description }}</text>
      </view>
      <view class="s-alert__close" v-if="closable" @tap.stop="closeHandler">
        <s-icon name="close-circle-fill" :color="iconColor" size="18"></s-icon>
      </view>
    </view>
  </s-transition>
</template>

<script>
import props from './props.js'
/**
 * Alert  警告提示
 * @description 警告提示，展现需要关注的信息。
 * @tutorial https://www.uviewui.com/components/alertTips.html
 *
 * @property {String}			title       显示的文字
 * @property {String}			type        使用预设的颜色  （默认 'warning' ）
 * @property {String}			description 辅助性文字，颜色比title浅一点，字号也小一点，可选
 * @property {Boolean}			closable    关闭按钮(默认为叉号icon图标)  （默认 false ）
 * @property {Boolean}			showIcon    是否显示左边的辅助图标   （ 默认 false ）
 * @property {String}			effect      多图时，图片缩放裁剪的模式  （默认 'light' ）
 * @property {Boolean}			center		文字是否居中  （默认 false ）
 * @property {String | Number}	fontSize    字体大小  （默认 14 ）
 * @property {Object}			customStyle	定义需要用到的外部样式
 * @event    {Function}        click       点击组件时触发
 * @example  <s-alert :title="title"  type = "warning" :closable="closable" :description = "description"></s-alert>
 */
export default {
  name: 's-alert',
  mixins: [uni.$s.mpMixin, uni.$s.mixin, props],
  data() {
    return {
      show: true,
    }
  },
  computed: {
    iconColor() {
      const type = this.border ? this.type : ''
      switch (type) {
        case 'success':
          return '#55BB5A'
          break
        case 'error':
          return '#D81307'
          break
        case 'warning':
          return '#F5BA42'
          break
        case 'info':
          return ''
          break
        case 'primary':
          return '#597EF7'
          break
        default:
          return '#ffffff'
      }
    },
    // 不同主题对应不同的图标
    iconName() {
      switch (this.type) {
        case 'success':
          return 'checkmark-circle-fill'
          break
        case 'error':
          return 'close-circle-fill'
          break
        case 'warning':
          return 'error-circle-fill'
          break
        case 'info':
          return 'info-circle-fill'
          break
        case 'primary':
          return 'more-circle-fill'
          break
        default:
          return 'error-circle-fill'
      }
    },
  },
  methods: {
    // 点击内容
    clickHandler() {
      this.$emit('click')
    },
    // 点击关闭按钮
    closeHandler() {
      this.show = false
    },
  },
}
</script>

<style lang="scss" scoped>
@import '../../libs/css/components.scss';

.s-alert {
  position: relative;
  background-color: $s-primary;
  padding: 20rpx 24rpx;
  @include flex(row);
  align-items: center;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
  &--title-padding {
    padding: 32rpx 24rpx;
  }
  &--primary--dark {
    background-color: $s-primary;
  }

  &--primary--light {
    background-color: #597ef7;
  }

  &--error--dark {
    background-color: $s-error;
  }

  &--error--light {
    background-color: #d81307;
  }

  &--success--dark {
    background-color: $s-success;
  }

  &--success--light {
    background-color: #55bb5a;
  }

  &--warning--dark {
    background-color: $s-warning;
  }

  &--warning--light {
    background-color: #ff8f00;
  }

  &--info--dark {
    background-color: $s-info;
  }

  &--info--light {
    background-color: #f4f4f5;
  }
  &--primary--solid {
    border: 1px solid #597ef7;
    background-color: #d8e1ff;
    color: #597ef7;
  }
  &--primary--dashed {
    border: 1px dashed #597ef7;
    background-color: #fff;
    color: #597ef7;
  }
  &--warning--solid {
    border: 1px solid #f5ba42;
    background-color: #fdf6ec;
    color: #ff8f00;
  }
  &--warning--dashed {
    border: 1px dashed #f5ba42;
    background-color: #fff;
    color: #ff8f00;
  }
  &--error--solid {
    border: 1px solid #d81307;
    background-color: #fff2f1;
    color: #d81307;
  }
  &--error--dashed {
    border: 1px dashed #d81307;
    background-color: #fff;
    color: #d81307;
  }
  &--success--solid {
    border: 1px solid #56bb5b;
    background-color: #ecffed;
    color: #55bb5a;
  }
  &--success--dashed {
    border: 1px dashed #56bb5b;
    background-color: #fff;
    color: #55bb5a;
  }

  &__icon {
    margin-right: 5px;
  }

  &__content {
    @include flex(column);
    flex: 1;

    &__title {
      //color: $s-main-color;
      font-size: 14px;
      font-weight: bold;
      // color: #fff;
      margin-bottom: 16rpx;
    }

    &__desc {
      color: $s-main-color;
      font-size: 14px;
      flex-wrap: wrap;
      color: #fff;
    }
  }

  &__title--dark,
  &__desc--dark {
    color: #ffffff;
  }

  &__text--primary--light,
  &__text--primary--light {
    color: #fff;
  }

  &__text--success--light,
  &__text--success--light {
    // color: $s-success;
    color: #fff;
  }

  &__text--warning--light,
  &__text--warning--light {
    // color: $s-warning;
    color: #fff;
  }

  &__text--error--light,
  &__text--error--light {
    // color: $s-error;
    color: #fff;
  }

  &__text--info--light,
  &__text--info--light {
    color: $s-info;
  }

  &__close {
    position: absolute;
    top: 11px;
    right: 10px;
    line-height: 80rpx;
  }
  &__text--solid--primary {
    color: #597ef7;
  }
  &__text--dashed--primary {
    color: #597ef7;
  }
  &__text--solid--warning {
    color: #ff8f00;
  }
  &__text--dashed--warning {
    color: #ff8f00;
  }
  &__text--solid--error {
    color: #d81307;
  }
  &__text--dashed--error {
    color: #d81307;
  }
  &__text--solid--success {
    color: #55bb5a;
  }
  &__text--dashed--success {
    color: #55bb5a;
  }
}
</style>
