<template>
  <el-tabs v-model="activeName" class="paragraph-tabs">
    <template v-for="(item, index) in newData" :key="index">
      <el-tab-pane :label="item.name" :name="index">
        <template #label>
          <div class="flex-center">
            <img :src="getImgUrl(item && item?.name)" alt="" height="16" />
            <span class="ml-4">{{ item?.name }}</span>
          </div>
        </template>
        <div class="mb-16">
          <el-text type="info">{{ item.content.length }} 段落</el-text>
        </div>
        <div class="paragraph-list" v-if="activeName == index">
          <el-scrollbar>
            <ParagraphList v-model="item.content" :isConnect="isConnect"> </ParagraphList>
          </el-scrollbar>
        </div>
      </el-tab-pane>
    </template>
  </el-tabs>
</template>
<script setup lang="ts">
import { ref, onMounted, watch } from 'vue'
import { getImgUrl } from '@/utils/utils'
import ParagraphList from './ParagraphList.vue'

const props = defineProps({
  data: {
    type: Array<any>,
    default: () => []
  },
  isConnect: Boolean
})

const emit = defineEmits(['update:data'])

const activeName = ref(0)

const newData = ref<any[]>([])

watch(
  () => props.data,
  (value) => {
    newData.value = value
  },
  {
    immediate: true
  }
)

onMounted(() => {})
</script>
<style scoped lang="scss">
.paragraph-tabs {
  :deep(.el-tabs__item) {
    background: var(--app-text-color-light-1);
    margin: 4px;
    border-radius: 4px;
    padding: 5px 10px 5px 8px !important;
    height: auto;
    &:nth-child(2) {
      margin-left: 0;
    }
    &:last-child {
      margin-right: 0;
    }
    &.is-active {
      border: 1px solid var(--el-color-primary);
      background: var(--el-color-primary-light-9);
      color: var(--el-text-color-primary);
    }
  }
  :deep(.el-tabs__nav-wrap::after) {
    display: none;
  }
  :deep(.el-tabs__active-bar) {
    display: none;
  }
}
.paragraph-list {
  height: calc(var(--create-dataset-height) - 101px);
}
</style>
