<template>
    <div>

        <div class="bkh">
            <div style="font-size:1.5rem;">upload</div>
            <a href="//yuda-lyu.github.io/w-threejs-vue/examples/ex-AppBasicBackgroundColor.html" target="_blank" class="item-link">example</a>
            <a href="//github.com/yuda-lyu/w-threejs-vue/blob/master/docs/examples/ex-AppBasicBackgroundColor.html" target="_blank" class="item-link">code</a>
        </div>

        <div class="bkp">

            <div v-if="!loading">
                <button style="margin:0px 3px 3px 0px;" @click="cleanAll">clean all</button>
                <button style="margin:0px 3px 3px 0px;" @click="upload">upload</button>
            </div>

            <div style="display:flex; padding-bottom:40px; overflow-x:auto;">

                <div style="position:relative;">
                    <WThreejsVue
                        ref="thr"
                        :opt="opt"
                        @init="loading=false"
                    ></WThreejsVue>
                </div>

                <div style="padding:0px 20px;">

                    <div :style="`border:1px solid #ddd; width:590px; min-width:590px; height:${opt.height}px; overflow-y:auto;`">
                        <div style="padding-left:5px;">
                            <div id="optjson" style="font-size:10pt;"></div>
                        </div>
                    </div>

                </div>

            </div>

        </div>

    </div>
</template>

<script>
import domShowInputAndGetFiles from 'wsemi/src/domShowInputAndGetFiles.mjs'
import getFileNameExt from 'wsemi/src/getFileNameExt.mjs'
import blob2u8arr from 'wsemi/src/blob2u8arr.mjs'
import WThreejsVue from './components/WThreejsVue.vue'
import jv from 'w-jsonview-tree'

export default {
    components: {
        WThreejsVue,
    },
    data: function() {
        return {
            'loading': true,
            'opt': {
                width: 800,
                height: 600,
                items: [
                    {
                        url: 'https://cdn.jsdelivr.net/npm/w-demores/res/model/stl/3d_wheel-hub.stl',
                        name: 'Wheel Hub',
                        color: 'rgba(214, 92, 92, 0.9)',
                    },
                    {
                        url: 'https://cdn.jsdelivr.net/npm/w-demores/res/model/stl/3d_ushape-connector.stl',
                        name: 'Ushape Connector',
                        color: 'rgba(214, 214, 92, 0.9)',
                    },
                    // {
                    //     url: 'https://cdn.jsdelivr.net/npm/w-demores/res/model/stl/3d_bowl-short.stl',
                    //     name: 'Bowl Short',
                    //     color: 'rgba(92, 214, 92, 0.9)',
                    // },
                ],
            },
            'action': [
            ],
        }
    },
    mounted: function() {
        let vo = this
        vo.showOptJson()
    },
    watch: {
        opt: {
            handler: function() {
                let vo = this
                vo.showOptJson()
            },
            deep: true,
        },
    },
    methods: {
        showOptJson: function() {
            let vo = this
            jv(vo.opt, document.querySelector('#optjson'), { expanded: true })
        },
        cleanAll: function() {
            let vo = this
            try {
                vo.$refs.thr.getInst().cleanMeshs()
            }
            catch (err) {}
        },
        upload: function() {
            let vo = this

            async function core() {

                let res = await domShowInputAndGetFiles({ multiple: true })
                // console.log('res', res)
                let files = res && res.files ? res.files : []
                if (files.length === 0) {
                    return
                }

                let ms = []
                let objectUrls = []
                for (let i = 0; i < files.length; i++) {

                    let file = files[i]
                    console.log('file', file)

                    //type
                    let type = getFileNameExt(file.name)
                    type = type.toLowerCase()
                    console.log('type', type)

                    //後端若傳u8a時, 先轉blob再轉url即可給STLLoader讀取
                    let u8a = await blob2u8arr(file)
                    console.log('u8a', u8a)

                    let bb = new Blob([u8a]) //type:'model/stl', type:'application/octet-stream'
                    console.log('bb', bb)

                    // let url = window.URL.createObjectURL(file)
                    let url = window.URL.createObjectURL(bb)
                    objectUrls.push(url)
                    console.log('url', url)

                    let m = {
                        type,
                        url,
                        name: file.name,
                        color: 'rgba(92, 214, 92, 0.9)',
                    }
                    console.log('stl mesh', m)

                    ms.push(m)

                    // try {
                    //     vo.$refs.thr.getInst().addMesh(m)
                    // }
                    // catch (err) {}

                }
                // console.log('ms', ms)

                try {
                    if (ms.length > 0) {
                        await vo.$refs.thr.getInst().addMeshs(ms)
                    }
                }
                finally {
                    objectUrls.forEach((url) => {
                        window.URL.revokeObjectURL(url)
                    })
                }

            }

            //core
            core()
                .catch((err) => {
                    console.log(err)
                })

        },
    },
}
</script>

<style>
</style>
