<template>
	<view
		v-if="props.show"
		class="u-notice-bar"
		:style="{
			background: computeBgColor,
			padding: props.padding
		}"
		:class="[
			props.type ? `u-type-${props.type}-light-bg` : ''
		]"
	>
		<view class="u-direction-row">
			<view class="u-icon-wrap">
				<u-icon
            class="u-left-icon"
            v-if="props.volumeIcon"
            name="volume-fill"
            :size="props.volumeSize"
            :color="computeColor"
        ></u-icon>
			</view>
			<view class="u-notice-box" id="u-notice-box">
				<view
					class="u-notice-content"
					id="u-notice-content"
					:style="{
						animationDuration: state.animationDuration,
						animationPlayState: state.animationPlayState,
					}"
				>
					<text
              class="u-notice-text"
              @tap="click"
              :style="[textStyle]"
              :class="['u-type-' + props.type]"
          >
            {{ state.showText }}
          </text>
				</view>
			</view>
			<view class="u-icon-wrap">
				<u-icon
            @click="getMore"
            class="u-right-icon"
            v-if="props.moreIcon"
            name="arrow-right"
            :size="26"
            :color="computeColor"
        ></u-icon>
				<u-icon
            @click="close"
            class="u-right-icon"
            v-if="props.closeIcon"
            name="close"
            :size="24"
            :color="computeColor"
        ></u-icon>
			</view>
		</view>
	</view>
</template>

<script lang="ts">
  export default {
    name: 'u-row-notice',
  }
</script>

<script setup lang="ts">
  import {
    defineComponent,
    CSSProperties,
    getCurrentInstance,
    reactive,
    toRefs,
    computed,
    watch,
    nextTick,
    onMounted,
    withDefaults
  } from "vue";
    import { ComponentInternalInstance } from "@vue/runtime-core";

  interface URowNoticeState {
    textWidth: number; // 滚动的文字宽度
    boxWidth: number; // 供文字滚动的父盒子的宽度，和前者一起为了计算滚动速度
    animationDuration: string; // 动画执行时间
    animationPlayState: string; // 动画的开始和结束执行
    showText: string; // 显示的文本
  }
  interface URowNoticeProps {
    // 显示的内容，数组
    list: any[];
    // 显示的主题，success|error|primary|info|warning|none
    // none主题默认为透明背景，黑色(contentColor)字体
    type?: 'success'|'error'|'primary'|'info'|'warning'|'none';
    // 是否显示左侧的音量图标
    volumeIcon?: boolean;
    // 是否显示右侧的右箭头图标
    moreIcon?: boolean;
    // 是否显示右侧的关闭图标
    closeIcon?: boolean;
    // 是否自动播放
    autoplay?: boolean;
    // 文字颜色，各图标也会使用文字颜色
    color?: string;
    // 背景颜色
    bgColor?: string;
    // 是否显示
    show?: boolean;
    // 字体大小，单位rpx
    fontSize?: number | string;
    // 音量喇叭的大小
    volumeSize?: number | string;
    // 水平滚动时的滚动速度，即每秒滚动多少rpx，这有利于控制文字无论多少时，都能有一个恒定的速度
    speed?: number | string;
    // 播放状态，play-播放，paused-暂停
    playState?: 'play' | 'paused';
    // 通知的边距
    padding?: number | string;
  }

  const props = withDefaults(defineProps<URowNoticeProps>(),{
    // 显示的内容，数组
    list: () => [],
    // 显示的主题，success|error|primary|info|warning|none
    // none主题默认为透明背景，黑色(contentColor)字体
    type: 'warning',
    // 是否显示左侧的音量图标
    volumeIcon: true,
    // 是否显示右侧的右箭头图标
    moreIcon: false,
    // 是否显示右侧的关闭图标
    closeIcon: false,
    // 是否自动播放
    autoplay: true,
    // 文字颜色，各图标也会使用文字颜色
    color: '',
    // 背景颜色
    bgColor: '',
    // 是否显示
    show: true,
    // 字体大小，单位rpx
    fontSize: 26,
    // 音量喇叭的大小
    volumeSize: 34,
    // 水平滚动时的滚动速度，即每秒滚动多少rpx，这有利于控制文字无论多少时，都能有一个恒定的速度
    speed: 160,
    // 播放状态，play-播放，paused-暂停
    playState: 'play',
    // 通知的边距
    padding: '18rpx 24rpx',
  });

  const emit = defineEmits<{
    (e: 'click'): void;
    (e: 'close'): void;
    (e: 'getMore'): void;
  }>();

  const instance: ComponentInternalInstance | null = getCurrentInstance();

  const state = reactive<URowNoticeState>({
    textWidth: 0, // 滚动的文字宽度
    boxWidth: 0, // 供文字滚动的父盒子的宽度，和前者一起为了计算滚动速度
    animationDuration: '10s', // 动画执行时间
    animationPlayState: 'paused', // 动画的开始和结束执行
    showText: '' // 显示的文本
  });

  // 计算字体颜色，如果没有自定义的，就用uview主题颜色
  const computeColor = computed(() => {
    if (props.color) return props.color;
    // 如果是无主题，就默认使用content-color
    else if(props.type == 'none') return '#606266';
    else return props.type;
  });

  // 文字内容的样式
  const textStyle = computed(() => {
    let style: CSSProperties = {};
    if (props.color) style.color = props.color;
    else if(props.type == 'none') style.color = '#606266';
    style.fontSize = props.fontSize + 'rpx';
    return style;
  });

  // 计算背景颜色
  const computeBgColor = computed(() => {
    if (props.bgColor) return props.bgColor;
    else if(props.type == 'none') return 'transparent';
  });

  const initSize = () => {
    let query = [],
        boxWidth = 0,
        textWidth = 0;
    let textQuery = new Promise((resolve, reject) => {
      uni.createSelectorQuery()
          .in(instance?.proxy)
          .select(`#u-notice-content`)
          .boundingClientRect(() => {})
          .exec(ret => {
            state.textWidth = ret[0].width;
            resolve(ret);
          });
    });
    query.push(textQuery);
    Promise.all(query).then(() => {
      // 根据t=s/v(时间=路程/速度)，这里为何不需要加上#u-notice-box的宽度，因为中设置了.u-notice-content样式中设置了padding-left: 100%
      // 恰巧计算出来的结果中已经包含了#u-notice-box的宽度
      state.animationDuration = `${state.textWidth / uni.upx2px(Number(props.speed))}s`;
      // 这里必须这样开始动画，否则在APP上动画速度不会改变(HX版本2.4.6，IOS13)
      state.animationPlayState = 'paused';
      setTimeout(() => {
        if(props.playState == 'play' && props.autoplay) state.animationPlayState = 'running';
      }, 10);
    });
  };

  // 点击通告栏
  const click = (index: number) => {
    emit('click');
  };

  // 点击关闭按钮
  const close = () => {
    emit('close');
  };

  // 点击更多箭头按钮
  const getMore = () => {
    emit('getMore');
  };

  watch(() => props.list, (newValue, oldValue) => {
    state.showText = newValue.join('，');
    nextTick(() => {
      initSize();
    });
  }, {
    immediate: true,
  });

  watch(() => props.playState, (newValue, oldValue) => {
    if(newValue == 'play') state.animationPlayState = 'running';
    else state.animationPlayState = 'paused';
  });

  watch(() => props.speed, (newValue, oldValue) => {
    initSize();
  });

  onMounted(() => {
    nextTick(() => {
      initSize();
    });
  });

  defineExpose({
    ...toRefs(state),
    computeColor,
    textStyle,
    computeBgColor,
    initSize,
    click,
    close,
    getMore,
  });
</script>

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

.u-notice-bar {
	padding: 18rpx 24rpx;
	overflow: hidden;
}

.u-direction-row {
	@include vue-flex;
	align-items: center;
	justify-content: space-between;
}

.u-left-icon {
	/* #ifndef APP-NVUE */
	display: inline-flex;
	/* #endif */
	align-items: center;
}

.u-notice-box {
	flex: 1;
	@include vue-flex;
	overflow: hidden;
	margin-left: 12rpx;
}

.u-right-icon {
	margin-left: 12rpx;
	display: inline-flex;
	align-items: center;
}

.u-notice-content {
	animation: u-loop-animation 10s linear infinite both;
	text-align: right;
	// 这一句很重要，为了能让滚动左右连接起来
	padding-left: 100%;
	@include vue-flex;
	flex-wrap: nowrap;
}

.u-notice-text {
	font-size: 26rpx;
	word-break: keep-all;
	white-space: nowrap
}

@keyframes u-loop-animation {
	0% {
		transform: translate3d(0, 0, 0);
	}

	100% {
		transform: translate3d(-100%, 0, 0);
	}
}
</style>
