<template>
  <div class="tab-layout">
    <div v-if="hasTab" class="tab-detail entrance-con">
      <div>
        <div v-if="tabHeadInfo.showTitle == 2" :style="titleStyle" ref="tabHeadTitleDom">
          <span>{{ tabHeadInfo.customTitle == 1 ? tabHeadInfo.title : list[tabIndex].title }}</span>
        </div>
        <div class="tab-list" :style="{margin:`0 ${(mode=='pc' ? 30 : 60) * ratio}px`, height: navStyle.height}">
          <navItem
            v-for="(item, index) in list"
            :key="index"
            @click.native="chooseTab(item, index)"
            :item="item"
            :spacing="layOutData.fontStyle.spacing * ratio"
            :active="tabIndex == index"
            :navStyle="navStyle"
          ></navItem>
        </div>
        <div
          :style="{
            height: list[tabIndex].height * ratio + 'px'
          }"
          class="tab-content"
        >
          <singleLayout v-bind="$attrs" v-on="$listeners" :layOutData="list[tabIndex]" :componentList="list[tabIndex].componentList" :ratio="ratio" :recordId="recordId" :mode="mode"></singleLayout>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import tabLayoutJs from './tabLayout.js'
export default tabLayoutJs
</script>

<style lang="scss" scoped>
@import 'tabLayout';
</style>
