<template>
    <div class="svgaContent">
        <h2>测试svga</h2>
        <button @click="paly">svga</button>
<!--        <div id="svga" class="svga" ref="svga"></div>-->


        <div class="box">
            <div id="lottie_box"></div>
            <button @click="startFun">播放</button>
            <button @click="suspendFun">暂停</button>
        </div>

        <div style="margin-top: 30px">
            <button @click="sftpGet">提交ftp</button>
        </div>
    </div>
</template>
<script>
    import Svga from 'svgaplayerweb'
    import lottie from 'lottie-web';
    import { sftpGet } from "../../api";
    import animationData from '../../assets/pinjump.json';
    export default {
        data() {
            return {
                lottie:{},
            }
        },
        // components: {
        //     lottie: lottie
        // },
        methods:{
            suspendFun:function(){
                this.lottie.pause();
            },
            startFun:function(){
                this.lottie.play()
            },
        },
        mounted(){
            this.lottie = lottie.loadAnimation({
                container: document.getElementById('lottie_box'),
                renderer: 'svg',
                loop: true,
                autoplay: false,
                path: `${process.env.VUE_APP_IMGS_URL}f833ad8c-46a8-4e34-8ebe-d2484ecb43bd.json`
                // animationData: animationData
            })
            this.lottie.play()
        },
        methods: {
            paly() {
                let palyer = new Svga.Player('#svga')
                let parser = new Svga.Parser("#svga")
                parser.load('https://operation.mige.tv/TJtest/files/svga.svga', (item) => {
                    palyer.setVideoItem(item)
                    palyer.startAnimation()
                })
            },
            sftpGet() {
                sftpGet().then((res) => {
                    console.log(res)
                })
            },



            suspendFun:function(){
                this.lottie.pause();
            },
            startFun:function(){
                this.lottie.play()
            }
        }


    }
</script>
<style lang='scss'>
    .svgaContent {
        width: 100%;
        height: 100%;
        // background-color: #000000;

        .svga {
            width: 100vw;
            height: 800px;
            margin: 50px auto;
            // border: 1px solid #ccc;
        }
    }
</style>
