<template>
    <page-meta page-style="overflow: hidden" />
    <page title="仓库" ref="pageRef" nav-color="#fff" custom-class="paddingB25">
        <tabbar
            :data="tabbarData"
            custom-class="paddingX20 marginB7"
            @change="onChange"
            ref="tabRef"
        />
        <no-use
            v-if="index === 0"
            ref="noUseRef"
            @convert-success="onConvertSuccess"
            @take-success="onTakeSuccess"
            :type="type"
        />
        <safe v-if="index === 1" />
        <pick-up v-if="index === 2" ref="pickUpRef" />
        <convert v-if="index === 3" ref="convertRef" />
        <goods-gift v-if="index === 4" />
    </page>
</template>
<script>
    import tabbar from '@/components/tabbar'
    import noUse from './no_use.vue'
    import pickUp from './pick_up'
    import convert from './convert'
    import goodsGift from './goods_gift.vue'
    import safe from './safe'
    import loginMixin from '@/mixin/login'

    export default {
        mixins: [loginMixin],
        components: { tabbar, noUse, pickUp, convert, safe, goodsGift },
        data() {
            return {
                tabbarDataHide: ['未使用', '保险柜', '已提货', '已兑换', '已转赠'],
                tabbarData: ['未使用', '保险柜', '已提货'],
                index: 0,
                type: 0
            }
        },
        onLoad(options) {
            this.type = options.type
            this.$event.on(this.$event.key.STORE_REFRESH, this.refresh)
        },
        onUnload() {
            this.$event.off(this.$event.key.STORE_REFRESH)
        },
        onShow(){
          if(this.index == 0){
            this.$refs.noUseRef.refresh(true)

          }
        },
        computed: {
            hide() {
                return !this.$store.state.hide
            }
        },
        methods: {
            init() {
                let index = this.index
                this.index = -1
                this.$nextTick(() => {
                    this.index = index
                })
            },
            refresh() {
                if (this.index === 0) {
                    this.$refs.noUseRef &&
                        this.$refs.noUseRef.refresh &&
                        this.$refs.noUseRef.refresh(true)
                }
            },
            onChange(index) {
                this.index = index
            },
            onConvertSuccess() {
                // this.$refs.tabRef.change(2)
            },
            onTakeSuccess() {
                // this.$refs.tabRef.change(1)
            }
        }
    }
</script>
<style></style>

<style lang="scss" scoped>
    .bg {
        position: fixed;
        z-index: -1;
        left: 0;
        right: 0;
        top: 0;
        width: 100%;
        height: 100%;
        opacity: 0.3;
    }
</style>
