const MoreIndex = 999;
const ScrollImageIdPrefix = 'scroll-image-id';

Component({
  options: {
    addGlobalClass: true,
  },

  properties: {
    data: {
      type: Array,
      value: [
        {
          label: '狐妖小媚娘',
          imgUrl: 'https://bennettfeely.com/clippy/pics/pittsburgh.jpg',
        },
        {
          label: '一人之下',
          imgUrl: 'https://bennettfeely.com/clippy/pics/pittsburgh.jpg',
        },
        {
          label: '斗罗大陆',
          imgUrl: 'https://bennettfeely.com/clippy/pics/pittsburgh.jpg',
        },
        {
          label: '海贼王',
          imgUrl: 'https://bennettfeely.com/clippy/pics/pittsburgh.jpg',
        },
        {
          label: '一人之下',
          imgUrl: 'https://bennettfeely.com/clippy/pics/pittsburgh.jpg',
        },
        {
          label: '斗罗大陆',
          imgUrl: 'https://bennettfeely.com/clippy/pics/pittsburgh.jpg',
        },
        {
          label: '海贼王',
          imgUrl: 'https://bennettfeely.com/clippy/pics/pittsburgh.jpg',
        },
      ],
    },
    showMore: {
      type: Boolean,
      value: true,
    },
  },

  data: {
    toView: '', // scrollview滚动进入的id
    selectIndex: -1, // 当前选中的Index
    showDialog: false,
    moreIndex: MoreIndex,
    scrollImageId: ScrollImageIdPrefix,
    tabItemModel: {
      // “全部”静态数据
      allData: {
        label: '全部',
        index: -1,
        iconfont: {
          name: 'all',
          size: 90,
          className: 'icon-all',
        },
      },
      // “更多”静态数据
      moreData: {
        label: '更多',
        className: 'last',
        iconfont: {
          name: 'more',
          size: 90,
          className: 'icon-more',
        },
      },
    },
  },

  methods: {
    onImageItemTap(e: WechatMiniprogram.TouchEvent) {
      // 根据id来判断是点击单个还是点击全部, 点击全部也滚动到第一个
      console.log(e);
      // 点击更多
      if (e.currentTarget.dataset.index === MoreIndex) {
        this.setData({
          selectIndex: 0,
          showDialog: true,
        });
      } else {
        this.setData({
          selectIndex: e.currentTarget.dataset.index,
          showDialog: false,
          toView: e.currentTarget.id || `${ScrollImageIdPrefix}0`,
        });

        this.triggerEvent('onSelectItem', e.currentTarget.dataset.index);
      }
    },

    onClose() {
      this.setData({
        showDialog: false,
      });
    },
  },
});