import { PropType, defineComponent } from 'vue'
import styles from './index.module.less'
import { useResizeObserver } from '@vueuse/core'

export default defineComponent({
  name: 'col-sticky',
  props: {
    position: {
      type: String,
      default: 'top' as 'top' | 'bottom'
    },
    background: {
      type: String,
      default: ''
    },
    mode: {
      type: String as PropType<'fixed' | 'sticky'>,
      default: 'fixed'
    },
    offsetTop: {
      type: String,
      default: '0px'
    },
    offsetBottom: {
      default: '0px'
    },
    // 变量名
    varName: {
      type: String,
      default: '--header-height'
    }
  },
  emits: ['getHeight'],
  data() {
    return {
      divStyle: {} as any,
      heightV: 0,
      sectionStyle: {
        width: '100%',
        height: 'auto'
      }
    }
  },
  mounted() {
    // if (this.position === 'top') {
    //   this.divStyle.top = '0px'
    // } else {
    //   this.divStyle.bottom = '0px'
    // }
    // const { height } = useRect((this as any).$refs.div)
    // this.sectionStyle.height = `${height}px`

    // this.$nextTick(() => {
    //   setTimeout(() => {
    //     const { height } = useRect((this as any).$refs.div)
    //     this.sectionStyle.height = `${height}px`
    //     this.$emit('getHeight', height)
    //   }, 100)
    // })

    if (this.position === 'top') {
      this.divStyle.top = this.offsetTop || '0px'
    } else {
      this.divStyle.bottom = this.offsetBottom || '0px'
    }
    try {
      useResizeObserver((this as any).$refs.div2, (entries: any) => {
        const entry = entries[0]
        const { height } = entry.contentRect
        if (Math.abs(height - this.heightV) > 1) {
          setTimeout(() => {
            this.__initHeight(height)
          }, 10)
        }
      })
    } catch (e) {
      //
      console.log(e, 'error useResizeObserver')
    }
  },
  methods: {
    __initHeight(height: any) {
      this.sectionStyle.height = `${height}px`
      this.heightV = height
      document.documentElement.style.setProperty(this.varName, `${height}px`)
      this.$emit('getHeight', height)
    }
  },
  watch: {
    offsetTop() {
      this.divStyle.top = this.offsetTop
    },
    offsetBottom() {
      this.divStyle.bottom = this.offsetBottom
    }
  },
  render() {
    return (
      // <div style={this.sectionStyle}>
      //   <div
      //     ref="div"
      //     class={['van-sticky van-sticky--fixed', styles[this.background]]}
      //     style={[this.divStyle, this.sectionStyle]}
      //   >
      //     {this.$slots.default && this.$slots.default()}
      //   </div>
      // </div>

      <div
        style={[this.sectionStyle]}
        class={this.mode === 'sticky' && styles.sticky}
      >
        <div
          ref="div"
          class={[
            'van-sticky',
            this.mode === 'fixed' ? 'van-sticky--fixed' : '',
            styles[this.background]
          ]}
          style={[this.divStyle, this.sectionStyle]}
        >
          <div ref="div2">
            <div class={styles.pad}>
              {this.$slots.default && this.$slots.default()}
            </div>
          </div>
        </div>
      </div>
    )
  }
})
