<template>
  <div class="topTip" :class="[topTipClass,{active:open}]"  @click="handleClick">
    <chaos-icon style='display:inline-flex;' :icon="getIconName" class="topTipIcon left-topIcon" :color="iconColor" :size="size"></chaos-icon>
    <span class="topTipText">{{tipContent}}</span>
    <span @click='closeTopTip' class="tip-cross-box"><span class='tip-cross'></span></span>
  </div>
</template>

<script>
import chaosIcon from '../chaos-icon/ChaosIcon';
export default {
  name: 'mu-toptip',
  props: {
    size: {
      type: [String,Number],
      default:20,
    },
    tipType: {
      type: String,
    },
    tipContent: {
      type: String,
    },
    iconName:{
      type:String,
    },
    iconColor: {
      type:String,
      default:'#fff',
    },
    icon: {
      type: String,
    },
    open:Boolean,
    iconClass: {
      type: [String, Array, Object],
    },
  },
  data() {
    return {
      fixClass: false,
    }
  },
  computed: {
    topTipClass () {
      let classNames = [];
      if(this.tipType == "error") {
        classNames.push('error');
      }
      if(this.tipType == "success") {
        classNames.push('success');
      }
      if(this.tipType == "notice") {
        classNames.push('notice');
      }
      if(this.fixClass) {
        classNames.push('fixTop');
      }
      return classNames;
    },
    getIconName() {
        return {
            'm-sys-close': this.tipType == 'error',
            'm-sys-success': this.tipType == 'success',
            'upaas-icon-tip-notice':this.tipType == 'notice'
        }
    }
  },
  mounted: function() {
    this.fixTopTip();
  },
  components:{
    'chaos-icon': chaosIcon
  },
  methods: {
    handleClick (e) {
      this.$emit('click', e)
    },
    closeTopTip(e) {
        this.$emit('close-toptip', e)
    },
    fixTopTip () {

    },
  }
}
</script>

<style lang="less">
.topTip {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    padding-left: 40px;
    padding-right: 40px;
    -webkit-transition-property: all;
    transition-property: all;
    transition-property: all;
    transition-property: all, -webkit-transform;
    -webkit-transition-duration: 500ms;
    transition-duration: 500ms;
    -webkit-transform: translateY(-200%);
    transform: translateY(-200%);
    z-index:9999;
}
.topTip.active{
  height:auto;
  -webkit-transform: translateY(0px);
  transform: translateY(0px);
}
.topTip.error {
    background-color: #ff7360;
}
.topTip.success {
    background-color: #00e099;
}
.topTip.notice {
    background-color: #ff9500;
}
.topTipText {
    margin-top: 8px;
    margin-bottom: 8px;
    font-size: 16px;
    color: #ffffff;
    line-height: 24px;
}
.topTipIcon {
    top: 12px;
    position: absolute;
}
.left-topIcon {
    left: 14px;
    color:#fff;
    font-size: 16px;
}
.right-topIcon {
    right: 12px;
    top: 16px;
  &:before{
    color:#fff;
    font-size:32px;
  }
}
.fixTop {
  padding-top: 25px;
}
.fixTop .topTipIcon {
  top: 34px;
}
.fixTop .right-topIcon {
     top: 29px;
     display: inline-block!important;
     font-size: 16px;
}
.tip-cross-box {
    display: inline-block;
    width: 40px;
    height: 40px;
    position: absolute;
    line-height: 40px;
    right: 0;
    top: 0;
}
.tip-cross {
   top: 21px;
   right: 12px;
   display: inline-block;
   width: 20px;
   height: 1px;
   background: #fff;
   font-size: 0;
   line-height: 0;
   position: absolute;
   vertical-align: middle;
   -webkit-transform: rotate(45deg);
   transform: rotate(45deg);
}
.tip-cross:after {
   content: '';
   display: inline-block;
   width: 20px;
   height: 1px;
   background: #fff;
   -webkit-transform: rotate(-90deg);
   transform: rotate(-90deg);
}
</style>
