<template>
    <div class="heatmap-analysis">
        <el-header height="70px">
            <span class="asis-title">{{ asisName }} {{$t('asis.HeatMap')}}</span>
        </el-header>
        <heatmap-option ref="init" :mallData="mallData" @reportTime="reportHandler" @initData="initTab"></heatmap-option> 
        <div class="element-main heatmap-main">
            <router-view :propparam="propParams"></router-view>
        </div>
    </div> 
</template>

<script>
import heatmapOption from '../common/option/flowheatMoreOption'
export default {
    data() {
        return {
            mallData: [],
            asisName: '',
            // kpiType: '',    // 指标
            // asisLevel: '',
            // emitData: [],
            propParams: {}
        }
    },
    components: {
        'heatmap-option': heatmapOption,
    },
    mounted() {
        this.$router.push('/customer/flowheat/trafficheat')
        this.getMall();
    },
    methods: {
        getGatesFilterMall(mallStatus) {
            this.$api.base.gate({
                accountId: this.$cookie.get('accountId'),
                status: 1,
                // _t: Date.parse(new Date()) / 1000
            })
            .then(res => {
                let result = res.data.data;
                let titleName = '', refMallId = null,idArr = [];
                let localMallId = window.sessionStorage.getItem('mallId');
                    localMallId ? Number(localMallId) : false;
                result.forEach((item,index) => {
                    if(item.type == 4){
                        let mallObj = {};
                        mallObj.name = item.mall.name;
                        mallObj.id = item.mallId;
                        if(idArr.indexOf(mallObj.id) === -1 && mallStatus.indexOf(mallObj.id) != -1){
                            if(localMallId){
                                if(mallObj.id == localMallId){
                                    titleName = mallObj.name;
                                }
                            }
                            this.mallData.push(mallObj);
                            idArr.push(item.mallId)
                        }
                    }
                })
                this.asisName = titleName ? titleName : this.mallData[0].name;
                refMallId = titleName ? Number(localMallId) : this.mallData[0].id;
                this.$refs.init.initAsis(refMallId);
            })
            .catch(err => {

            })
        },
        getMall() {
            this.$api.base.mall({
                accountId: this.$cookie.get('accountId'),
                status: 1,
                // _t: Date.parse(new Date()) / 1000
            }).then(res => {
                let mallList = res.data.data,mallStatus = [];
                mallList.forEach(item => {
                    mallStatus.push(item.id)
                })
                this.getGatesFilterMall(mallStatus);
                // 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) {
            switch (data.asis_date) {
                case 'day':
                    this.$router.push('/customer/flowheat/trafficheat')
                    this.propParams = {
                        dateType: '/flowheat/trafficheat',
                        data: data
                    };
                    break;
                default:
                    break;
            }
        },
        reportHandler(emitData) {
            this.asisName = emitData.asis_tit;
            switch (emitData.asis_date) {
                case 'day':
                    this.$router.push('/customer/flowheat/trafficheat');
                    this.propParams = {
                        dateType: '/flowheat/trafficheat',
                        data: emitData
                    };
                    break;
                default:
                    break;
            }
            // setTimeout(() => {
            //     this.$refs.takeTime.refreshHandle(emitData);
            // }, 200);
        }
    },
}
</script>

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