// pages/imgs/imgs.js
const app = getApp();
// const baseUrl = app.remoteConfig.baseUrl;
Component({
  /**
   * 继承父级样式
   */
  options: {
    addGlobalClass: true,
  },

  /**
   * 组件的属性列表
   */
  properties: {

  },

  /**
   * 组件的初始数据
   */
  data: {
    title: '表情包',
    loading: false,
    mode:'imgs',
    isImgsMode:true,
    searchVal: '二次元',
    emptyText:'查询为空',
    baseUrl: 'https://yongma16.xyz',
    config: {
      title: '表情包搜索',
      searchPlaceholder: '输入搜索图片',
      searchText: '查询'
    },
    // 展示的图片
    imgsArray: []
  },
  lifetimes: {
    // 生命周期函数，可以为函数，或一个在 methods 段中定义的方法名
    attached: function () {
      console.log('获取attached')
      const imgConfig = app.wxProgramConfig.imgConfig;
      if (imgConfig) {
        this.setData({
          title: imgConfig.title,
          searchVal: imgConfig.searchVal,
          config: imgConfig.config,
          emptyText:imgConfig.emptyText
        })
      }
      this.searchImg()
      wx.nextTick(()=>{
        this.scrollAction()
      })
    },
    moved: function () { },
    detached: function () {
      console.log('detached')
    },
  },

  /**
   * 组件的方法列表
   */
  methods: {
    scrollAction(){
      // const query = wx.createSelectorQuery()
      // console.log('query',query)
      // query.select('#img-list-id').boundingClientRect(function(res){
      //   res.top // #the-id 节点的上边界坐标（相对于显示区域）
      //   console.log('clientRect res',res)
      // })
      // query.selectViewport().scrollOffset(function(res){
      //   res.scrollTop // 显示区域的竖直滚动位置
      //   console.log('scroll res',res)
      // })
      // query.exec()
      // wx.pageScrollTo({
      //   duration: 0,
      // })
      // 监听
      wx.createIntersectionObserver().relativeToViewport({
        bottom:10
      }).observe('.imgs-list', (res) => {
        // res.intersectionRatio // 相交区域占目标节点的布局区域的比例
        // res.intersectionRect // 相交区域
        // res.intersectionRect.left // 相交区域的左边界坐标
        // res.intersectionRect.top // 相交区域的上边界坐标
        // res.intersectionRect.width // 相交区域的宽度
        // res.intersectionRect.height // 相交区域的高度
        console.log('res list',res)
      })
      wx.createIntersectionObserver().relativeToViewport({
        bottom:400
      }).observe('.imgs-list-content', (res) => {
        // res.intersectionRatio // 相交区域占目标节点的布局区域的比例
        // res.intersectionRect // 相交区域
        // res.intersectionRect.left // 相交区域的左边界坐标
        // res.intersectionRect.top // 相交区域的上边界坐标
        // res.intersectionRect.width // 相交区域的宽度
        // res.intersectionRect.height // 相交区域的高度
        console.log('res observe',res)
      })
    },
    bindKeyInput(e) {
      this.setData({
        searchVal: e.detail.value
      })
    },
    previewImage(e) {
      console.log('click png', e)
      const imgsArray=this.data.imgsArray
      const url = e.target.dataset.url
      wx.previewImage({
        current: url, // 当前显示图片的http链接
        urls: imgsArray.map(item=>{return item.src}) // 需要预览的图片http链接列表
      })
    },
    searchImg() {
      if (!this.data.searchVal) {
        return wx.showModal({
          cancelColor: 'cancelColor',
          title: '查询不能为空！'
        })
      }
      this.setData({
        loading: true
      })
      const prefix = '/api/emoji/get/' + this.data.searchVal
      const remotePath = this.data.baseUrl + prefix
      const thisBack = this
      wx.request({
        url: remotePath,
        method: 'GET',
        success: (res) => {
          console.log('res', res)
          let imgData = []
          if (res.data) {
            const { data } = res.data
            imgData = data.map(url => {
              return {
                mode: 'aspectFill',
                title: '图片',
                src: url
              }
            })
          }
          thisBack.setData({
            loading: false,
            imgsArray: imgData
          })
        },
        fail: () => {
          thisBack.setData({
            loading: false,
            imgsArray: []
          })
        }
      })
    }
  }
})