<template>
    <base-container>
        <h2 class="pt-5 pb-5">tui-image-editor使用教程</h2>
        <el-button
            type="primary"
            style="width: 200px"
            @click="openImageEditor"
            >点击打开图片标注
        </el-button>
        <imageEditor
            v-if="showImageEditor"
            @close="showImageEditor = false"
            :imgList="imgList"
        />
    </base-container>
</template>

<script setup lang="jsx">
import { ref } from 'vue';
import ImageEditor from './components/image-editor.vue';

defineOptions({
    name: 'TuiImageEditor',
});

const showImageEditor = ref(false);
const imgList = ref([
    {
        path: 'http://gips3.baidu.com/it/u=3886271102,3123389489&fm=3028&app=3028&f=JPEG&fmt=auto?w=1280&h=960',
        name: '1',
    },
    {
        path: 'http://gips0.baidu.com/it/u=1690853528,2506870245&fm=3028&app=3028&f=JPEG&fmt=auto?w=1024&h=1024',
        name: '2',
    },
    {
        path: 'http://gips2.baidu.com/it/u=207216414,2485641185&fm=3028&app=3028&f=JPEG&fmt=auto?w=1280&h=720',
        name: '3',
    },
    {
        path: '/absRes/tuiImageEditor/img/test.jpg',
        name: '3',
    },
]);

const openImageEditor = () => {
    showImageEditor.value = true;
};
</script>
