<template>
    <div class="app-container">
        <div class="header">
            <div class="item">
                <img :src="applocation.coverImg" class="icon">
                <div class="info">
                    <div class="name">{{ applocation.name }}</div>
                    <div class="intro">
                        {{ applocation.value }}
                    </div>
                </div>
            </div>
        </div>
        <div class="head-container">
            <div class="tab_wrap">
                <div class="tab" :style="{ '--index': tabActive }">
                    <div class="item" v-for="item in tabs" :key="item.value" @click="tabChange(item)">
                        {{ item.label }}
                    </div>
                </div>
            </div>
        </div>
        <div class="head-container">
            <winestorageRecord v-if="tabActive == 0" />
            <wineRecord v-if="tabActive == 1" />
            <winetotal v-if="tabActive == 2" />
        </div>
    </div>
</template>

<script>
import winestorageRecord from './components/winestorage/record.vue'
import wineRecord from './components/wine/record.vue'
import winetotal from './components/winetotal/winetotal.vue'
export default {
    components: {
        winestorageRecord,
        wineRecord,
        winetotal
    },
    data() {
        return {
            applocation: JSON.parse(localStorage.getItem('applocation')),
            tabActive: 0,
            tabs: [
                {
                    value: 1,
                    label: '存酒记录'
                },
                {
                    value: 2,
                    label: '可存酒管理'
                },
                {
                    value: 3,
                    label: '存酒统计'
                }
            ]
        }
    },
    mounted() {
    },
    methods: {
        tabChange(item) {
            this.tabActive = this.tabs.findIndex(i => i.value == item.value)
        }
    }
}
</script>

<style scoped lang="scss">
.header {
    display: flex;

    .item {
        flex: 1;
        background-color: #f5f5f5;
        display: flex;
        align-items: center;
        padding: 14px;

        .icon {
            width: 40px;
            height: 40px;
            object-fit: cover;
        }

        .info {
            flex: 1;
            padding-left: 10px;

            .name {
                font-weight: bold;
            }

            .intro {
                color: #999;
                margin-top: 4px;
            }
        }
    }
}

.tab_wrap {
    background-color: #f5f5f5;
    padding: 4px;
    margin-top: 20px;

    .tab {
        --w: 150px;
        height: 40px;
        display: flex;
        position: relative;


        &::after {
            content: "";
            width: var(--w);
            height: inherit;
            background-color: #fff;
            position: absolute;
            top: 0;
            left: calc(var(--index) * var(--w));
            z-index: 1;
            transition: left .3s ease-in-out;
        }

        .item {
            width: var(--w);
            height: inherit;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            z-index: 2;

            &:hover {
                cursor: pointer;
            }
        }
    }
}
</style>