import { logger } from '../../utils/logger'

// 日志模块名
const LOG = 'navigation-bar'

Component({
  options: {
    multipleSlots: true // 在组件定义时的选项中启用多slot支持
  },
  /**
   * 组件的属性列表
   */
  properties: {
    extClass: {
      type: String,
      value: ''
    },
    title: {
      type: String,
      value: ''
    },
    background: {
      type: String,
      value: ''
    },
    color: {
      type: String,
      value: ''
    },
    back: {
      type: Boolean,
      value: true
    },
    loading: {
      type: Boolean,
      value: false
    },
    homeButton: {
      type: Boolean,
      value: false,
    },
    animated: {
      // 显示隐藏的时候opacity动画效果
      type: Boolean,
      value: true
    },
    show: {
      // 显示隐藏导航，隐藏的时候navigation-bar的高度占位还在
      type: Boolean,
      value: true,
      observer: '_showChange'
    },
    // back为true的时候，返回的页面深度
    delta: {
      type: Number,
      value: 1
    },
  },
  /**
   * 组件的初始数据
   */
  data: {
    displayStyle: '',
    ios: false,
    innerPaddingRight: '',
    leftWidth: '',
    safeAreaTop: ''
  },
  lifetimes: {
    attached() {
      const rect = wx.getMenuButtonBoundingClientRect()
      const apply = (windowWidth: number, platform: string, safeTop: number) => {
        const isAndroid = platform === 'android'
        const isDevtools = platform === 'devtools'
        this.setData({
          ios: !isAndroid,
          innerPaddingRight: `padding-right: ${windowWidth - rect.left}px`,
          leftWidth: `width: ${windowWidth - rect.left}px`,
          safeAreaTop: isDevtools || isAndroid ? `height: calc(var(--height) + ${safeTop}px); padding-top: ${safeTop}px` : ``
        })
      }

      // wx.getSystemInfo 已废弃（基础库 2.20.1+ 拆分接口），改用同步的 window/device 接口
      const wxAny = wx as any
      if (typeof wxAny.getWindowInfo === 'function') {
        const win = wxAny.getWindowInfo()
        const dev = typeof wxAny.getDeviceInfo === 'function' ? wxAny.getDeviceInfo() : {}
        apply(win.windowWidth, dev.platform || win.platform || '', win.safeArea ? win.safeArea.top : 0)
        logger.debug(LOG, '布局计算完成, 窗口宽=', win.windowWidth, '平台=', dev.platform || win.platform)
        return
      }
      // 低版本基础库走废弃接口兜底
      logger.warn(LOG, 'getWindowInfo 不可用，降级到已废弃的 wx.getSystemInfo')
      wx.getSystemInfo({
        success: (res) => apply(res.windowWidth, res.platform, res.safeArea ? res.safeArea.top : 0)
      })
    },
  },
  /**
   * 组件的方法列表
   */
  methods: {
    _showChange(show: boolean) {
      const animated = this.data.animated
      let displayStyle = ''
      if (animated) {
        displayStyle = `opacity: ${
          show ? '1' : '0'
        };transition:opacity 0.5s;`
      } else {
        displayStyle = `display: ${show ? '' : 'none'}`
      }
      this.setData({
        displayStyle
      })
    },
    back() {
      const data = this.data
      if (data.delta) {
        // 从分享卡片等场景直接打开时页面栈仅一层，navigateBack 无上一页可退，
        // 此时兜底 switchTab 回衣橱，避免点击返回毫无反应。
        const pages = typeof getCurrentPages === 'function' ? getCurrentPages() : []
        if (pages.length > data.delta) {
          logger.debug(LOG, '返回上一页, delta=', data.delta)
          wx.navigateBack({
            delta: data.delta,
            fail: (e) => logger.warn(LOG, 'navigateBack 失败, err=', e && e.errMsg)
          })
        } else {
          logger.warn(LOG, '页面栈不足，switchTab 回衣橱兜底, 栈深=', pages.length)
          wx.switchTab({
            url: '/pages/wardrobe/wardrobe',
            fail: (e) => logger.warn(LOG, 'switchTab 衣橱失败, err=', e && e.errMsg)
          })
        }
      }
      this.triggerEvent('back', { delta: data.delta }, {})
    }
  },
})