<template>
    <el-space direction="vertical" class="background-as-card flex-fill common-padding" fill alignment="flex-start">
        <el-switch v-model="isHightLightEntity" active-text="高亮实体" @change="console.log(isHightLightEntity)" />
        <el-switch v-model="isOpenTranslation" active-text="译文" />
        <text-translate-pane :texts-raw="textEns" :texts-translate="textZns" :text-entities="textEntities"
            :is-open-translation="isOpenTranslation" :is-highlight-entity="isHightLightEntity">
        </text-translate-pane>
    </el-space>
</template>
<script lang="ts" setup>
import { ref, onMounted } from 'vue'
import TextTranslatePane from '@/components/base/texts/TextTranslatePane.vue'
import { ElSwitch, ElButton, ElSpace } from 'element-plus'
const isOpenTranslation = ref(true);
const isHightLightEntity = ref(true);
const textEntities = ref([{
    text_span: '美国',
    type: '国家'
},
{
    text_span: 'U.S.',
    type: '国家'
}]);
const textZns = ref(['华盛顿当地时间2024年7月2日，美国商务部产业与安全局（BIS）',
    '发布一项最终规则，宣布修订《出口管理条例》（EAR） ，',
    '以违反美国国家安全或外交政策利益为由在实体清单中增列来自四个国家的6个实体，其中包括2家中国企业。[1]',
    '多余段落-测试']);
const textEns = ref(['Washington local time on July 2, 2024, the U.S. Department of Commerce, Industry and Security (BIS) released a final rule, announcing the revision of the Export Administration Regulations (EAR) ,',
    'Violating the U.S. national security or diplomatic policy interests, BIS increased the list of 6 entities from four countries, including 2 Chinese companies, on the entity list. [1]',
    'Your company has a large amount of money in the U.S.',
]);

</script>
<style scoped>
:deep(.el-col) {
    border: 0px !important;
}
</style>
