<template>
  <div class="content-layout">
    <div v-if="tabPaneList.length > 0" class="content-layout__header">
      <van-tabs
        id="vanTabs"
        v-model="activeName"
        sticky
        title-active-color="#409EFF"
        color="#409EFF"
        swipeable
        @click="handleTabClick"
      >
        <van-tab
          v-for="(pane, index) in tabPaneList"
          :key="index"
          :title="pane.label"
        >
          <div class="content-layout__main">
            <slot></slot>
          </div>
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'ContentLayout',
    props: {
      tabPaneList: {
        type: Array,
        default: () => {
          return []
        },
      },
      defaultExpandOrCollapse: {
        type: Boolean,
        default: false,
      },
      currentActiveName: {
        type: String,
        default: '',
      },
    },
    data() {
      return {
        activeName: '',
        showAside: false,
      }
    },
    computed: {
      tabActiveName() {
        return (
          this.$route.query.tabActiveName ||
          this.tabPaneList[0]?.name ||
          this.currentActiveName
        )
      },
    },
    activated() {
      this.activeName = this.tabActiveName
    },
    created() {
      this.activeName = this.tabActiveName
    },
    methods: {
      handleTabClick(tab) {
        this.$emit('tab-click', tab, this.activeName)
      },
      nodeClick(node) {
        this.$emit('node-click', node)
      },
    },
  }
</script>

<style lang="scss" scoped></style>
