<template>
  <div class="test">
    <ul class="album">
        <li v-for="(item, index) in imgUrl" :key="index">
            {{ item.name }}
            <img :src = item.url />
        </li>
    </ul>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import MarmosetAssetsManager from '../webgl/assets/marmosets/MarmosetAssetsManager'
import MarmosetModel from '../webgl/objects/MarmosetModel';


const examples = [
  "static/model/henrique/henrique.mview",
  "static/model/vivfox/vivfox.mview",
  "static/model/metal/metal.mview",
]


@Component
export default class TextureViewer extends Vue {

  imgUrl: { name: string, url: string } [] = []

  mounted() {

    let assetsMgr = new MarmosetAssetsManager();

    let model = new MarmosetModel();

    let index = Number(this.$route.query['index'])

    assetsMgr.load(examples[index]).then( model => {

      let textures = assetsMgr.getTextures();

      textures.forEach( item => {

        let file = assetsMgr.files.get(item.name)

        if(file ) {
            this.imgUrl.push({
              name: item.name,
              url: URL.createObjectURL(new Blob([new Uint8Array(file.data)], { type: file.type }))
            })
        }

        
      })

    })

  }
}
</script>
<style lang="less" scoped>

    .album {

        list-style: none;

        background: #ccc;

        display: flex;
        justify-content:space-around;
        flex-wrap: wrap;

        li {

          display: flex;
          justify-content:center;
          flex-direction: column;
          align-items: center;

          border-bottom: 1px solid white; 
        }

        img {
          height: 300px;
        }

    }
</style>
