<template>
	<view class="container">

		<!--
		 marign与transform的区别:

		 marign:外边距可以改变元素的位移。
		浏览器页面渲染时margin可以控制元素的位置,
		同时会改变render tree的结构,会引起页面layout回流和repaint重绘。
		从浏览器性能考虑,transform会比margin更省时间。
		transform实际上也是用到了GPU加速,占用了内存,
		合成器会负责将层合成绘制为最终的屏幕画面。在硬件加速体系结构，合成由GPU负责。
		在chrome浏览器多进程模型中，有一个专门的进程来负责传递Render进程的命令，即GPU进程。
		Render进程和GPU进程是通过共享内存传递的。
		Render进程可以快速的将命令发给命令缓冲区,
		并且返回到CPU密集的render活动中,留给GPU进程去处理这些命令。
		我们可以充分利用多内核机器上的GPU进程和CPU进程。
		这也是为什么GPU会加速渲染,使transform渲染速度更快的又一原因。


		浏览器取回代码后,首先会构造DOM树,根据HTML标签,构造DOM树。
		之后会解析CSS样式,
		1、解析的顺序是浏览器的样式 ->
		2、用户自定义的样式 ->
		3、页面的link标签等引进来的样式 ->
		4、写在style标签里面的内联样式

		最后根据DOM树以及解析的CSS样式,
		构造RENDER树,在RENDER树中,会把DOM树中没有的元素给去除,
		比如head标签以及里面的内容,以及display:none的元素也会被去除。

		重绘(repaint)和重排(reflow):
		当DOM的变化影响了元素的几何属性（宽或高）,
		浏览器需要重新计算元素的几何属性,
		同样其他元素的几何属性和位置也会因此受到影响。
		浏览器会使渲染树中受到影响的部分失效,并重新构造渲染树。这个过程称为重排。
		完成重排后,浏览器会重新绘制受影响的部分到屏幕,该过程称为重绘。
		并不是所有的DOM变化都会影响几何属性,比如改变一个元素的背景色并不会影响元素的宽和高,
		这种情况下只会发生重绘。
		重排必然导致重绘,所以重排更加恶心。其实我们一直研究的应该是怎么避免触发多次重排。

		transform是否可以避免重排重绘问题:
		那么使用CSS3的transform来实现动画是否可以避免重排问题？或者说浏览器针对这一部分做了其他优化？

		CSS的最终表现分为以下四步：Recalculate Style -> Layout -> Paint Setup and Paint -> Composite Layers
		按照中文的意思大致是 查找并计算样式 -> 排布 -> 绘制 -> 组合层
		这上面的几个步骤有点类似于上文说到的重排必定导致重绘，而查询属性会强制发生重排。
		所以上文提到的重排重绘内容可以结合这里进行理解。
		由于transform是位于Composite Layers层,而width、left、margin等则是位于Layout层,在Layout层发生的改变必定导致Paint Setup and Paint -> Composite Layers
		所以相对而言使用transform实现的动画效果肯定比left这些更加流畅。
		而且就算抛开这一角度，在另一方面浏览器也会针对transform等开启GPU加速。
	-->

		<!-- <view class="emojiList"
		        :style="[{'margin-left': emojiMarginLeft + 'px'},{'width':emojiWidth+'px'},{'transition': transition }]"
			    @touchstart="gtouchstart($event)"
				@touchmove="gtouchmove($event)"
				@touchend="gtouchend($event)"> -->

		<view class="emojiList" :style="[{'transform': 'translateX(' + emojiMarginLeft + 'px)'},{'width':emojiWidth+'px'},{'transition': transition }]" @touchstart="gtouchstart($event)" @touchmove="gtouchmove($event)" @touchend="gtouchend($event)">
			<view class="item">
				<view v-for="(item1,index1) in beforeList" :key="index1">
					<image v-if="item1.url!=''" :src="items[groupIndex -1].minEmoji && index1===beforeList.length -1  ? item1.url : items[groupIndex -1].emojiPath + item1.url " class="emojiImg" :class="[{ 'minImg' : items[groupIndex-1].minEmoji },{'bigImg' : !items[groupIndex-1].minEmoji }]" />

					<view v-else class="emojiImg" :class="[{ 'minImg' : items[groupIndex-1].minEmoji },{'bigImg' : !items[groupIndex-1].minEmoji }]">
					</view>

				</view>
			</view>


			<view class="item" v-for="(item3,index3) in items[groupIndex].emojiList" :key="index3">
				<view v-for="(em4,index4) in item3" :key="index4">
					<image :src="items[groupIndex].minEmoji && index4 === item3.length-1 ? em4.url : items[groupIndex].emojiPath + em4.url " class="emojiImg" :class="[{ 'minImg' : items[groupIndex].minEmoji },{'bigImg' : !items[groupIndex].minEmoji }]" @tap="imgClick($event,items[groupIndex],em4,groupIndex)" />

					<!-- <img src="https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/0.gif"/> -->
				</view>
			</view>
			<!-- 最后一个 -->
			<view class="item">
				<view v-for="(item5,index5) in nextList" :key="index5">
					<image v-if="item5.url!=''" :src="items[groupIndex +1].minEmoji && index5 === nextList.length -1  ? item5.url : items[groupIndex +1].emojiPath + item5.url " class="emojiImg" :class="[{ 'minImg' : items[groupIndex+1].minEmoji },{'bigImg' : !items[groupIndex+1].minEmoji }]" />

					<view v-else class="emojiImg" :class="[{ 'minImg' : items[groupIndex+1].minEmoji },{'bigImg' : !items[groupIndex+1].minEmoji }]">
					</view>
				</view>

			</view>

		</view>

		<view class="point">
			<view class="point-item" v-for="(item7,index7) in pointItemList" :key="index7" :class="{'active':activeIndex -1 ===index7}"></view>
		</view>

		<block v-if="false">
			<image src="https://media-mall-prod-1259811287.cos.ap-guangzhou.myqcloud.com/static/xcxfile/appicon/im/img/tab/add2.png" @tap="addEmojiPackage" style="float:left;margin-top: -64px; margin-left: 12px; width: 32px;height: 32px;" />
			<scroll-view class="scroll-view_H" scroll-x="true" @scroll="scroll" scroll-left="120">

				<view class="scroll-view-item_H" v-for="(emoji,index) in items" :key="index" v-if="index!==0 && index!==items.length-1">
					<image style="width: 32px;height: 32px;" @tap="selectTab(1,index)" :src="emoji.emojiPath + emoji.emojiList[0][0].url" :class="{'activeEmojiTab':activeEmojiTab ===index}" />
				</view>

			</scroll-view>

			<image src="https://media-mall-prod-1259811287.cos.ap-guangzhou.myqcloud.com/static/xcxfile/appicon/im/img/tab/setting.png" @tap="settingEmoji" style="float:left;margin-top: -64px; margin-left: 320px; width: 32px;height: 32px;">
		</block>

		<view class="toast" v-show="toastShow">
			{{toastText}}
		</view>

	</view>
</template>

<script>
import emojiData from "@/im/static/emoji/emojiData.js";
var windowWidth = 0;
uni.getSystemInfo({
  success: function (res) {
    windowWidth = res.windowWidth;
  },
});

export default {
  // 接受父组件参数，单向数据流
  props: {},
  data() {
    return {
      scrollTop: 0,
      old: {
        scrollTop: 0,
      },
      emojiWidth: windowWidth * 8,
      emojiMarginLeft: -windowWidth,
      transition: "transform 0 ease-in 0",

      toastShow: false,
      toastText: "",
      beginX: 0,
      beforeList: [{}],
      nextList: [{}],
      nowX: 0,
      endX: 0,
      activeEmojiTab: 1,
      activeIndex: 1,
      groupSize: emojiData.imgArr.length, // 表情包的组的个数
      groupIndex: 1, // 当前整个表情包的所在位置索引
      items: emojiData.imgArr,
      pointItemList: 0,
      // list: [
      // 	['微笑', '撇嘴', '色', '发呆', '得意', '流泪', '害羞', '闭嘴'],
      // 	['睡', '大哭', '尴尬', '发怒', '调皮', '呲牙', '惊讶', '难过'],
      // 	['酷', '冷汗', '抓狂', '吐', '偷笑', '可爱', '白眼', '傲慢'],
      // 	['饥饿', '困', '惊恐', '流汗', '憨笑', '大兵', '奋斗', '咒骂'],
      // 	['疑问', '嘘', '晕', '折磨', '衰', '骷髅', '敲打', '再见'],
      // 	['擦汗', '抠鼻', '鼓掌', '糗大了', '坏笑', '左哼哼', '右哼哼', '哈欠'],
      // 	['鄙视', '委屈', '快哭了', '阴险', '亲亲', '吓', '可怜', '菜刀'],
      // 	['西瓜', '啤酒', '篮球', '乒乓', '咖啡', '饭', '猪头', '玫瑰'],
      // 	['凋谢', '示爱', '爱心', '心碎', '蛋糕', '闪电', '炸弹', '刀'],
      // 	['足球', '瓢虫', '便便', '月亮', '太阳', '礼物', '拥抱', '强'],
      // 	['弱', '握手', '胜利', '抱拳', '勾引', '拳头', '差劲', '爱你'],
      // 	['NO', 'OK', '爱情', '飞吻', '跳跳', '发抖', '怄火', '转圈'],
      // 	['磕头', '回头', '跳绳', '挥手', '激动', '街舞', '左太极', '右太极']
      // ],
      // reg: /\S{1,3}/gi,
      // item: []
    };
  },
  created() {
    this.emojiWidth =
      windowWidth * (this.items[this.groupIndex].emojiList.length + 2);
    this.emojiMarginLeft = -windowWidth * this.activeIndex;
    // this.transition='none'

    // // 初始化
    this.pointItemList = this.items[this.groupIndex].emojiList.length;
    // console.log(this.pointItemList)
    this.beforeList =
      this.items[this.groupIndex - 1].emojiList[
        this.items[this.groupIndex - 1].emojiList.length - 1
      ];
    this.nextList = this.items[this.groupIndex + 1].emojiList[0];
  },

  onLoad: function () {
    const res = uni.getSystemInfoSync();
    this.style.pageHeight = res.windowHeight;
    // console.log(uni.getSystemInfoSync().screenWidth)
    this.style.contentViewHeight =
      res.windowHeight - (uni.getSystemInfoSync().screenWidth / 750) * 100; //像素
  },
  methods: {
    selectTab: function (activeIndex, index) {
      // this.toast("选择表情包:" + index + "激活索引:"+activeIndex)

      this.activeIndex = activeIndex;
      this.groupIndex = index;
      this.activeEmojiTab = index;

      this.emojiWidth =
        windowWidth * (this.items[this.groupIndex].emojiList.length + 2);
      this.emojiMarginLeft = -windowWidth * this.activeIndex;
      // this.transition="none"
      this.beforeList =
        this.items[this.groupIndex - 1].emojiList[
          this.items[this.groupIndex - 1].emojiList.length - 1
        ];
      this.nextList = this.items[this.groupIndex + 1].emojiList[0];
      this.pointItemList = this.items[this.groupIndex].emojiList.length;
    },
    addEmojiPackage: function () {
      this.toast("添加表情包");
    },
    settingEmoji: function () {
      this.toast("设置表情");
    },
    scroll: function (e) {
      // console.log(e)
      this.old.scrollTop = e.detail.scrollTop;
    },
    goTop: function (e) {
      this.scrollTop = this.old.scrollTop;
      this.$nextTick(function () {
        this.scrollTop = 0;
      });
      uni.showToast({
        icon: "none",
        title: "纵向滚动 scrollTop 值已被修改为 0",
      });
    },
    // 开始触摸
    gtouchstart: function (e) {
      this.beginX = e.touches[0].clientX;
      // this.toast('开始: ' + this.beginX + '')
    },
    // 移动
    gtouchmove: function (e) {
      this.nowX = e.changedTouches[0].clientX;
      // console.log(e)
      // this.toast('移动: ' + this.nowX + '')
      this.slice();
    },
    // 结束触摸
    gtouchend: function (e) {
      this.endX = e.changedTouches[0].clientX;
      // this.toast('结束: ' + this.endX + '')
      this.judgeMove();
    },

    /**
     * 计算偏移量
     */
    judgeMove: function () {
      var deltaX = this.endX - this.beginX;
      if (deltaX >= (windowWidth * 3) / 5) {
        // 右移
        // this.toast('上一张')
        // [1]小点指示器 减去 1
        this.activeIndex--;
        // [2]小点指示器边界判断, 小于等于 0, 重新赋值为 1
        if (this.activeIndex <= 0) {
          // [3]当 activeIndex 小于等于0 时, 组的索引 减去 1
          this.groupIndex--;
          var transition = "";
          // [4]groupIndex 组的边界判断 小于等于 0, 重新赋值为 1,并且指示器 activeIndex 为 1
          if (this.groupIndex <= 0) {
            this.groupIndex = 1;
            this.pointItemList = this.items[1].emojiList.length;
            this.activeIndex = 1;
            // transition='margin-left .2s ease-out'
          } else {
            this.pointItemList = this.items[this.groupIndex].emojiList.length;
            this.activeIndex = this.items[this.groupIndex].emojiList.length;
            // transition='none'
            this.selectTab(this.activeIndex, this.groupIndex);
          }

          this.beforeList =
            this.items[this.groupIndex - 1].emojiList[
              this.items[this.groupIndex - 1].emojiList.length - 1
            ];
          this.nextList = this.items[this.groupIndex + 1].emojiList[0];

          this.emojiWidth =
            windowWidth * (this.items[this.groupIndex].emojiList.length + 2);
          this.emojiMarginLeft = -windowWidth * this.activeIndex;
          // this.transition=transition
        } else {
          this.emojiWidth =
            windowWidth * (this.items[this.groupIndex].emojiList.length + 2);
          this.emojiMarginLeft = -windowWidth * this.activeIndex;
          // this.transition='none'
        }
      } else if (deltaX <= (-windowWidth * 3) / 5) {
        // 左移
        // this.toast('下一张')
        // [1]小点指示器 加 1
        ++this.activeIndex;
        // [2]小点指示器边界判断, 大于等于 items.length -2, 重新赋值为 items.length -2
        if (this.activeIndex > this.items[this.groupIndex].emojiList.length) {
          // 最后一次改变 组的值
          ++this.groupIndex;
          var transition = "";
          // this.toast("组数:"+vm.groupIndex +",组个数:" + vm.groupSize)
          // 判断是否是最后一组
          if (this.groupIndex > this.groupSize - 2) {
            // 等于1 是循环,等于 vm.groupSize 是结束, 去掉前一个和后一个为空的列表
            this.groupIndex = this.groupSize - 2;
            this.pointItemList = this.items[this.groupIndex].emojiList.length;
            this.activeIndex = this.items[this.groupIndex].emojiList.length;
            // transition='margin-left .2s ease-out'
          } else {
            this.pointItemList = this.items[this.groupIndex].emojiList.length;
            this.activeIndex = 1;
            // transition='none'
            this.selectTab(1, this.groupIndex);
          }

          this.beforeList =
            this.items[this.groupIndex - 1].emojiList[
              this.items[this.groupIndex - 1].emojiList.length - 1
            ];
          this.nextList = this.items[this.groupIndex + 1].emojiList[0];

          this.emojiWidth =
            windowWidth * (this.items[this.groupIndex].emojiList.length + 2);
          this.emojiMarginLeft = -windowWidth * this.activeIndex;
          // this.transition=transition
        } else {
          this.emojiWidth =
            windowWidth * (this.items[this.groupIndex].emojiList.length + 2);
          this.emojiMarginLeft = -windowWidth * this.activeIndex;
          // this.transition='none'
        }
      } else {
        // this.toast('不动')
        this.reset();
      }
    },

    /**
     * 计算起始位置
     */
    slice: function () {
      var deltaX = this.nowX - this.beginX;

      this.emojiWidth =
        windowWidth * (this.items[this.groupIndex].emojiList.length + 2);
      this.emojiMarginLeft = -windowWidth * this.activeIndex + deltaX;
      // this.transition='none'
    },
    /**
     * 重置
     */
    reset: function () {
      this.emojiWidth =
        windowWidth * (this.items[this.groupIndex].emojiList.length + 2);
      this.emojiMarginLeft = -windowWidth * this.activeIndex;
      // this.transition='all .2s ease-out'
    },

    imgClick: function (e, emojiList, emojiItem, groupIndex) {
      // this.toast('表情: ' + emojiItem.alt + ':' + emojiItem.url)
      // let emotion = '<img src="' + emojiPath + emojiItem.url + '"/>'
      this.$emit("addEmoji", {
        emojiPath: emojiList.emojiPath,
        minEmoji: emojiList.minEmoji,
        emojiItem: emojiItem,
        groupIndex: groupIndex,
      });
    },
    // 自定义 toast 弹窗
    toast: function (str) {
      let me = this;
      if (str.length > 0) {
        me.toastText = str;
        me.toastShow = true;
        setTimeout(function () {
          me.toastShow = false;
          me.toastText = "";
        }, 1500);
      }
    },
    // clickHandler(i) {

    // 	let emotion = `#${i};`
    // 	this.$emit('emotion', emotion)
    // },
    // emotion(res) {
    // 	//let word = res.replace(/\#|\;/gi,'')
    // 	const list = ['微笑', '撇嘴', '色', '发呆', '得意', '流泪', '害羞', '闭嘴', '睡', '大哭', '尴尬', '发怒', '调皮', '呲牙', '惊讶', '难过', '酷', '冷汗', '抓狂', '吐', '偷笑', '可爱', '白眼', '傲慢', '饥饿', '困', '惊恐', '流汗', '憨笑', '大兵', '奋斗', '咒骂', '疑问', '嘘', '晕', '折磨', '衰', '骷髅', '敲打', '再见', '擦汗', '抠鼻', '鼓掌', '糗大了', '坏笑', '左哼哼', '右哼哼', '哈欠', '鄙视', '委屈', '快哭了', '阴险', '亲亲', '吓', '可怜', '菜刀', '西瓜', '啤酒', '篮球', '乒乓', '咖啡', '饭', '猪头', '玫瑰', '凋谢', '示爱', '爱心', '心碎', '蛋糕', '闪电', '炸弹', '刀', '足球', '瓢虫', '便便', '月亮', '太阳', '礼物', '拥抱', '强', '弱', '握手', '胜利', '抱拳', '勾引', '拳头', '差劲', '爱你', 'NO', 'OK', '爱情', '飞吻', '跳跳', '发抖', '怄火', '转圈', '磕头', '回头', '跳绳', '挥手', '激动', '街舞', '献吻', '左太极', '右太极']
    // 	let index = list.indexOf(res)
    // 	return `<img src="https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/${index}.gif" align="middle">`
    // }
  },
};
</script>

<style scoped>
@import url("@/static/css/vue-emoji.css");

.scroll-view_H {
  /* border:2px solid red; */
  white-space: nowrap;
  width: 76%;
  margin-top: -128rpx;
  margin-left: 96rpx;
}

.scroll-view-item_H {
  display: inline-block;
  width: 20%;
  height: 100rpx;
  line-height: 100rpx;
  text-align: center;
  font-size: 16rpx;
}

.activeEmojiTab {
  background-color: gray;
  opacity: 0.8;
  border-radius: 20rpx;
}
</style>