import { useRect } from '@vant/use'
import { defineComponent } from 'vue'
import styles from './index.module.less'

export default defineComponent({
  name: 'col-sticky',
  props: {
    position: {
      type: String,
      default: 'top' as 'top' | 'bottom'
    },
    background: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      divStyle: {} as any,
      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`
  },
  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>
    )
  }
})
