<template>
    <div class="seq-analysis">
        <el-header height="70px">
            <span class="asis-title">{{ asisName }}&nbsp;{{$t('asis.MainStore')}}</span>
            <span class="more-option-wrapper" @click="showCollapse">
                <span class="more-option-text">{{$t('asis.moreOp')}}</span>
                <i :class="moreOptVisible ? 'el-icon-arrow-down more-option-arrow' : 'el-icon-arrow-down more-option-arrow more-option-up'"></i>
            </span>
        </el-header>
        <seq-option v-show="moreOptVisible" ref="init" :mallData="mallData" @reportTime="reportHandler" @initData="initTab"></seq-option> 
        <div class="element-main seq-main">
            <router-view :propparam="propParams"></router-view>
        </div>
    </div> 
</template>

<script>
import seqOption from '../common/option/mainStoreMoreOption'
export default {
    data() {
        return {
            moreOptVisible: false,
            mallData: [],
            asisName: '',
            // kpiType: '',    // 指标
            // asisLevel: '',
            // emitData: [],
            propParams: {}
        }
    },
    components: {
        'seq-option': seqOption,
    },
    mounted() {
        // this.router.push('/analysis/seqAnalysis/daily')
        this.getMall();
        this.showCollapse()
    },
    methods: {
        showCollapse() {
            // 获取上面元素的高度
            let headerH = '', titleH = '', collapseH = '', mt = '';
                headerH = this.getStyleFn('.el-header', 'height');
                titleH = this.getStyleFn('.analysis-wrapper .el-header', 'height');
            if(this.moreOptVisible) {
                this.moreOptVisible = false;
                mt = headerH + titleH + 8 + 'px';
                $('.seq-main').animate({ marginTop: mt })
            } else {
                this.moreOptVisible = true;
                setTimeout(() => {
                    collapseH = this.getStyleFn('.analysis-option-wrapper', 'height');
                    mt = headerH + titleH + collapseH + 8 + 'px';
                    $('.seq-main').animate({ marginTop: mt });
                }, 100);
            }
        },
        getMall() {
            this.$api.base.mall({
                accountId: this.$cookie.get('accountId'),
                status: 1,
                // _t: Date.parse(new Date()) / 1000
            }).then(res => {
                let titleName = '', refMallId = null;
                let localMallId = window.sessionStorage.getItem('mallId');
                    localMallId ? Number(localMallId) : false;
                if(res.data.data.length >= 1) {
                    res.data.data.forEach((item, index) => {
                        this.mallData.push(item);
                        if(localMallId) {
                            if(item.id == localMallId) {
                                titleName = item.name;
                            }
                        }
                    });
                    this.asisName = titleName ? titleName : res.data.data[0].name;
                    refMallId = localMallId ? Number(localMallId) : res.data.data[0].id;
                    this.$refs.init.initAsis(refMallId);
                }
            })
        },
        initTab(data) {
            this.$router.push('/analysis/mainstore/msreport')
            this.propParams = {
                dateType: '/mainstore/msreport',
                data: data
            }
        },
        reportHandler(emitData) {
            this.asisName = emitData.asis_tit;
            this.$router.push('/analysis/mainstore/msreport');
            this.propParams = {
                dateType: '/mainstore/msreport',
                data: emitData
            }
        },
    }
}
</script>

<style scoped>
    .seq-analysis {
        width: 100%;
    }
</style>