<script lang="tsx">
import { defineComponent, computed, PropType } from 'vue'

export default defineComponent({
  name: 'Anchor',
  props: {
    templateForm: {
      type: Array as PropType<any[]>,
      default: () => []
    },
    // affix固钉的位置高度   按需设置，过低会导致无法fixed
    affixOffset: {
      type: Number,
      default: 240
    }
  },
  setup(props) {
    const anchorList: any = computed(() => {
      // 一级表头展示在anchor里
      return props.templateForm.filter((i) => i.inputType === '16')
    })
    return () => (
      <el-affix offset={props.affixOffset} class="affix">
        <el-anchor
          container=".anchor-scroll-box"
          type="underline"
          onClick={(e) => e.preventDefault()}
        >
          {anchorList.value.map((item) => {
            return <el-anchor-link href={`#${item.formHead}`}>{item.formHead}</el-anchor-link>
          })}
        </el-anchor>
      </el-affix>
    )
  }
})
</script>

<style scoped lang="less">
.el-affix {
  width: 200px !important;
}
</style>
