<template>
  <transition name="fade">
    <div :class="wrapClasses" v-if="visible" :style="wrapStyle">
      <div :class="contentClasses">
        <slot name="pre"></slot>
        <span :class="iconClasses" v-if="showIcon">
          <slot name="icon">
            <Icon :type="iconType" :color="iconColor"></Icon>
          </slot>
        </span>
        <span :class="mainClasses">
          <slot>
            <template v-if="content">
              <template v-if="typeof(content)=='string'"></template>
              <span :class="[prefix + '-ul-item']" v-else ref="scroll-ul">
                <span
                  :class="[prefix + '-li-item']"
                  v-for="(item,i) in content"
                  :key="i"
                  v-html="item"
                  @mouseenter="handleMouseSeeter"
                  @mouseleave="handleMouseLeave"
                ></span>
              </span>
            </template>
          </slot>
        </span>
        <slot name="after"></slot>
        <a :class="closeClasses" v-if="closable" @click.stop="close">
          <slot name="close">
            <Icon :type="closeIcon"></Icon>
          </slot>
        </a>
      </div>
    </div>
  </transition>
</template>

<script>
import { oneOf } from "../../utils/assist";
import Icon from "../icon";

import { prefix } from "../var";
const noticePrefix = prefix + "notice";
export default {
  name: "Notice",
  props: {
    mode: {
      type: String,
      default: "normal",
      validator(value) {
        return oneOf(value, ["normal", "fix"]);
      }
    },
    autoHidden: {
      type: Boolean,
      default: true
    },
    scrollable: {
      type: Boolean,
      default: false
    },
    duration: {
      type: Number,
      default: 1.5
    },
    value: {
      type: Boolean,
      default: true
    },
    type: {
      validator(value) {
        return oneOf(value, ["success", "info", "warn", "error"]);
      }
    },
    closable: {
      type: Boolean,
      default: false
    },
    showIcon: {
      type: Boolean,
      default: false
    },
    icon: String,
    iconTypes: Array,
    iconColor: String,
    closeIcon: {
      type: String,
      default: "close"
    },
    top: {
      type: [Number, String],
      default: 60
    },
    content: {
      type: [String, Array],
      default: ""
    }
  },
  components: {
    Icon: Icon
  },
  data() {
    return {
      prefix: noticePrefix,
      visible: this.value,
      minTime:0,
      maxTime:0,
      divTop:0,
      newTop:0,
    };
  },
  computed: {
    wrapClasses() {
      return [
        `${noticePrefix}`,
        {
          [`${noticePrefix}-${this.type}`]: !!this.type,
          [`${noticePrefix}-${this.mode}`]: !!this.mode,
          [`${noticePrefix}-with-icon`]: this.showIcon
        }
      ];
    },
    wrapStyle() {
      return {
        top: !!top ? this.top + "px" : "null"
      };
    },
    contentClasses() {
      return `${noticePrefix}-content`;
    },
    mainClasses() {
      return `${noticePrefix}-message`;
    },
    closeClasses() {
      return `${noticePrefix}-close`;
    },
    iconClasses() {
      return `${noticePrefix}-icon`;
    },
    iconType() {
      let type = "";
      let iconTypes = [
        "checkmark-circled",
        "information-circled",
        "android-alert",
        "close-circled"
      ];
      if (!!this.icon) {
        return this.icon;
      }
      if (!!this.iconTypes) {
        iconTypes = this.iconTypes;
      }
      switch (this.type) {
        case "success":
          type = iconTypes[0];
          break;
        case "info":
          type = iconTypes[1];
          break;
        case "warn":
          type = iconTypes[2];
          break;
        case "error":
          type = iconTypes[3];
          break;
      }

      return type;
    }
  },
  watch: {
    value(val) {
      this.visible = val;
    },
    visible(val) {
      if (val) {
        this.clearCloseTimer();

        if (this.autoHidden && this.duration !== 0) {
          this.closeTimer = setTimeout(() => {
            this.close();
          }, this.duration * 1000);
        }
      }
      this.$emit("input", this.visible);
    }
  },
  methods: {
      handleMouseSeeter(){

      },
      handleMouseLeave(){

      },
    close(e) {
      this.clearCloseTimer();
      this.visible = false;
      this.$emit("on-close", this.visible, e);
    },
    clearCloseTimer() {
      if (this.closeTimer) {
        clearTimeout(this.closeTimer);
        this.closeTimer = null;
      }
      if (this.scrollTimer) {
        clearTimeout(this.scrollTimer);
        this.scrollTimer = null;
      }
    },
    /**
     * @method 通知向上滚动到下一条
     */
    scrollUp(){
        this.textDiv = this.$refs['scroll-ul'];
        this.textList = this.textDiv.children;
        this.textDatH = this.textDiv.offsetHeight;
        this.MaxRoll();
    },
    MinRoll(){
        this.newTop++;
        if(this.newTop<=this.divTop+30){
            this.textDiv.style.top = "-" + this.newTop + "px";
        }else{
            clearInterval(this.minTime);
            this.maxTime = setTimeout(this.MaxRoll,2000);
        }
    },
    MaxRoll(){
        this.divTop = Math.abs(parseInt(this.textDiv.style.top));
        if(this.divTop>=0 && this.divTop<this.textDatH-30){
            this.minTime = setInterval(this.MinRoll,1);
        }else{
            // this.textDiv.style.top = 0;this.divTop = 0;this.newTop=0;
            // this.MaxRoll();
        }
    }
  },
  mounted() {
    this.clearCloseTimer();
    if(this.scrollable&&typeof(this.content)==='object'&&this.content.length&&this.content.length>2){
        this.$nextTick(()=>{
            this.scrollUp()
            // this.scrollTimer = setTimeout(()=>{
            //     this.scrollUp()
            // },2000)
        })
    }

    // if (this.autoHidden&&this.duration !== 0) {
    //     this.closeTimer = setTimeout(() => {
    //         this.close();
    //     }, this.duration * 1000);
    // }
  },
  beforeDestroy() {
    this.clearCloseTimer();
  },
  created() {
    if (this.mode === "fix") {
      this.visible = false;
    }
  }
};
</script>

<style scoped>
</style>