<template>
<div class="translation-content" ref="translationContentRef">
    		<!-- :class="{ active: store.highlightClauseId === item.payload?.clause_number }"
		:data-clause-number="item.payload?.clause_number" -->

	<div class="translation-item" v-for="(item, index) in store.clauseTranslationMessages" :key="index">

		<div class="item-body">
            <div class="original-text" v-if="store.isShowOriginal">
                <span class="index-badge">{{item.payload?.clause_section }}</span>
                 {{ item.payload?.clause_content }}
			</div>
			<div class="translated-text">
			    <span class="clause-title">第{{ getChineseNumber(item.payload?.clause_number) }}节 </span>
                {{ item.payload?.clause_content_zh }}
            </div>
			
		</div>
	</div>
</div>

</template>

<script setup>
import { onMounted, onUnmounted, ref, nextTick ,watch} from "vue";
import { useRoute } from "vue-router";
import { ElMessage } from "element-plus";
import { useWrittingAsstaintStore } from "@/stores/writtingAsstaintStore";
import { useStream } from "@/hooks/useStream";
// 子组件直接获取Pinia Store（核心优化）
const store = useWrittingAsstaintStore();
const translationContentRef = ref(null);

// 数字转中文序号
const getChineseNumber = (num) => {
	const zh = ['零', '一', '二', '三', '四', '五', '六', '七', '八', '九', '十'];
	const n = parseInt(num);
	if (n <= 10) return zh[n];
	if (n < 20) return '十' + zh[n % 10];
	if (n < 100) {
		return zh[Math.floor(n / 10)] + '十' + (n % 10 === 0 ? '' : zh[n % 10]);
	}
	return num;
};
</script>
<style lang="scss" scoped>

.translation-content{
    overflow-y: auto;
    margin-top: 30px;
    height: calc(100% - 50px);
    .translation-item{
        margin-bottom: 24px;
        .item-body{
            display: flex;
            justify-content: space-between;
            width: 85%;
            margin: 0 auto;
            .original-text{
                min-width: 48%;
                line-height: 30px;
                margin-right: 62px;
                flex: 2;
            }
            .translated-text{
                width: 100%;
                line-height: 30px;
            }
        }
        // .item-header{
        //     width: 48%;
        // }
        // .item-body{
        //     width: 48%;
        // }
    }

}
</style>