<template>
    <div>
        <div class="area">
            <Box class="card" :pose="isVisible ? 'visible' : 'hidden'">
                ?
            </Box>
        </div>
        <template v-for="item, index in items" >
            <div class="item" :key="item.id">
                {{ index }}  {{ item.title }} {{ item.artist }} {{ item.duration }}
                <button :disabled="item.disabled" @click="orderItem(item)">Order</button>
            </div>
        </template>
    </div>
</template>

<script lang="ts">
import { Component, Prop, Vue } from "vue-property-decorator";
import posed from "vue-pose";
import domain from "@/domain/domain";

@Component({
    components: {
        Box: posed.div({
            visible: { rotateY: 180, transition: { duration: 300 } },
            hidden: { rotateY: 0, transition: { duration: 300 } }
        })
    }
})
export default class CardComponent extends Vue {
    private isVisible: boolean;
    public data() {
        return { isVisible: this.isVisible, items: domain.musicCatalog.get() };
    }
    public mounted() {
        setInterval(() => {
            this.isVisible = !this.isVisible;
        }, 1000);
    }
}
</script>

<style scoped lang="less">
.area {
  transform-style: preserve-3d;
  perspective: 500px;
  width: 100px;
  height: 100px;
  margin:0 auto;
}

.card {
  width: 100px;
  height: 100px;
  background: #14D790;
  box-shadow: 0 0 5px 0.5px #444;
  color:#fff;
  font-size: 90px;
  text-align: center;
}

.box {
    width: 100px;
    height: 100px;
    background: #54E365;
    display: block;
    margin: 0 auto;
}

</style>
