<template>
  <!-- #ifdef APP-NVUE -->
  <header>
    <!-- #endif -->
    <view
      class="s-index-anchor"
      :ref="`s-index-anchor-${text}`"
      :style="{
			height: $s.addUnit(height),
			backgroundColor: bgColor,
		}"
      :class="{'s-index-anchor-sticky': sticky}"
    >
      <text
        class="s-index-anchor__text"
        :style="{
				fontSize: $s.addUnit(size),
				color: color
			}"
      >{{ text }}</text>
    </view>
    <!-- #ifdef APP-NVUE -->
  </header>
  <!-- #endif -->
</template>

<script>
import props from './props.js'
// #ifdef APP-NVUE
const dom = uni.requireNativePlugin('dom')
// #endif
/**
 * IndexAnchor 列表锚点
 * @description
 * @tutorial https://uviewui.com/components/indexList.html
 * @property {String | Number}	text	列表锚点文本内容
 * @property {String}			color	列表锚点文字颜色 ( 默认 '#606266' )
 * @property {String | Number}	size	列表锚点文字大小，单位默认px ( 默认 14 )
 * @property {String}			bgColor	列表锚点背景颜色 ( 默认 '#dadbde' )
 * @property {String | Number}	height	列表锚点高度，单位默认px ( 默认 32 )
 * @example <s-index-anchor :text="indexList[index]"></s-index-anchor>
 */
export default {
  name: 's-index-anchor',
  mixins: [uni.$s.mpMixin, uni.$s.mixin, props],
  data() {
    return {}
  },
  mounted() {
    this.init()
  },
  methods: {
    init() {
      // 此处会活动父组件实例，并赋值给实例的parent属性
      const indexList = uni.$s.$parent.call(this, 's-index-list')
      if (!indexList) {
        return uni.$s.error('s-index-anchor必须要搭配s-index-list组件使用')
      }
      // 将当前实例放入到s-index-list中
      indexList.anchors.push(this)
      const indexListItem = uni.$s.$parent.call(this, 's-index-item')
      // #ifndef APP-NVUE
      // 只有在非nvue下，s-index-anchor才是嵌套在s-index-item中的
      if (!indexListItem) {
        return uni.$s.error('s-index-anchor必须要搭配s-index-item组件使用')
      }
      // 设置s-index-item的id为anchor的text标识符，因为非nvue下滚动列表需要依赖scroll-view滚动到元素的特性
      indexListItem.id = this.text.charCodeAt(0)
      // #endif
    },
  },
}
</script>

<style lang="scss" scoped>
@import '../../libs/css/components.scss';

.s-index-anchor {
  @include flex;
  align-items: center;
  padding-left: 15px;
  z-index: 1;
  &-sticky {
    position: sticky;
    top: 0;
  }
  &__text {
    @include flex;
    align-items: center;
  }
}
</style>
