<script lang="ts" setup name="countPagelist">
const list = ref([
  {
    title: '直接排放',
    child: [
      {
        title: '固定燃烧',
        point: 'fixedCombustion',
      },
      {
        title: '移动燃烧',
        point: 'mobileCombustion',
      },
      {
        title: '能源转换加工',
        point: 'energyProcessing',
      },
      // {
      //   title: '工艺排放',
      // },
    ],
  },
  {
    title: '间接排放',
    child: [
      {
        title: '购入电力',
        point: 'electric',
      },
      {
        title: '购入热力',
        point: 'heating',
      },
    ],
  },
  {
    title: '碳抵消',
    child: [
      {
        title: '分布式光伏',
        point: 'photovoltaic',
      },
    ],
  },
])
const target = (row: any) => {
  (document.querySelector(`#${row.point}`) as Element).scrollIntoView({ behavior: 'smooth', block: 'end', inline: 'nearest' })
}
</script>

<template>
  <div class="container" style="margin-top: 40px;">
    <div v-for="item in list" :key="item.title" class="item">
      {{ item.title }}
      <div v-for="child in item.child" :key="child.title" class="child" @click="target(child)">
        {{ child.title }}
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.container {
  position: fixed;
  overflow: hidden;
  border-right: 1px solid #000;
  width: 11%;
  top: 100px;

  .item {
    padding-left: 10px;
    color: goldenrod;
    line-height: 1.5;

    .child {
      padding-left: 40px;
      color: #008d68;
      line-height: 1.5;

      &:hover {
        cursor: pointer;
      }
    }
  }
}
</style>