areaHeatmapMoreOption.vue

<template>
    <div class="analysis-option-wrapper">
        <div class="analysis-level-wrapper">
            <div class="analysis-level-left">
                <i class="el-icon-search"></i>
                <span class="analysis-level-text">{{$t('asisTab.level')}}</span>
            </div>
            <div class="analysis-level-right">
                <ul class="analysis-type-box">
                    <li :class="item.className" v-for="(item, index) in tabItem" :key="item.value" @click="tabClickHandle(index)">
                        <span class="analysis-item-title">{{ i18nFormatter(item.label) }}</span>
                    </li>
                </ul>
            </div>
        </div>
        <div class="panels-content">
            <div class="panels-main-top">
                <!-- 商场检索选项 -->
                <ul class="condition-box" v-if="panelObj.mallPanel">
                    <li class="condition-item">
                        <span class="condition-item-text">{{$t('asisTab.mallT')}}</span>
                        <div class="condition-item-option">
                            <el-select v-model="mallVal" filterable :placeholder="$t('pholder.shopSelect')" class="mall-sel-box" @change="mallChange">
                                <el-option v-for="item in mallData" :key="item.id" :label="item.name" :value="item.id"></el-option>
                            </el-select>
                        </div>
                    </li>
                    <li class="condition-item">
                        <span class="condition-item-text">{{$t('asisTab.date')}}</span>
                        <div class="condition-item-option">
                            <!-- <el-date-picker
                                class="date-input analysis-date-input times-box"
                                v-model="customTime"
                                value-format="yyyy-MM-dd"
                                align="right"
                                type="daterange"
                                size="mini"
                                :picker-options="pickerOptions1"
                                range-separator="-"
                                :start-placeholder="$t('table.startTime')"
                                :end-placeholder="$t('table.endTime')">
                            </el-date-picker>  -->
                            <el-date-picker
                              class="date-input analysis-date-input date-day-box"
                              v-model="dayTime"
                              value-format="yyyy-MM-dd"
                              align="right"
                              type="date"
                              size="mini"
                              :placeholder="$t('pholder.date')"
                              :picker-options="pickerOptions1">
                            </el-date-picker>
                        </div>
                    </li>
                </ul>
            </div>
            <div class="panels-main-bottom">
                <ul class="condition-box">
                    <li class="condition-item">
                        <span class="condition-item-text">{{$t("asisTab.heatmapShowWay")}}</span>
                        <div class="condition-item-option">
                            <ul class="show-method-box">
                                <li @click="showMethodHandle(index)" v-for="(item, index) in methodList" :key="item.label" :class="item.active ? 'show-method-item is-active' : 'show-method-item'">
                                    <span class="show-method-type">{{ i18nFormatter(item.label)}}</span>
                                </li>
                            </ul>
                        </div>
                    </li>
                    <li class="condition-item">
                        <el-button type="primary" class="primary-btn analysis-collapse-btn" size="samll"
                            :disabled="!dayTime" 
                            @click="confirmCondition">{{$t('button.confirm')}}</el-button>
                        <!-- <el-button class="reset-btn analysis-collapse-btn" size="samll" @click="resetRefresh">{{$t('button.reset')}}</el-button> -->
                    </li>
                </ul>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    props: {
        mallData: Array
    },
    data() {
        return {
            pickerOptions1: {
                disabledDate(time) {
                    return time.getTime() > Date.now();
                }
            },
            weekPickerOpt: {
                firstDayOfWeek: window._vionConfig.firstDayOfWeek ? window._vionConfig.firstDayOfWeek : 1
            },
            tabItem: [],
            panelObj: {
                mallPanel: false,
            },
            // customTime: [],
            dayTime: '',
            mallVal: '',
            paramId: '',  // 需要传的orgId
            methodList: [{
                label: 'manNum',
                value: 'TAB_INNUM',
                active: false
            }, {
                label: 'residenceTime',
                value: 'TAB_RESIDENCE',
                active: false
            },  {
                label: 'comprehensive',
                value: 'TAB_AVERAGE',
                active: false
            }],
            showMethodVal: '',
        }
    },
    created() {
        this.tabItem = [];
        // if(this.$Project === 'mall') {
            this.tabItem.push({
                label: 'mall',
                value: 'mall',
                className: 'analysis-item'
            })
        // } else {
        //     this.tabItem.push({
        //         label: 'mall',
        //         value: 'mall',
        //         className: 'analysis-item'
        //     })
        // }
    },
    watch: {
        dayTime(val) {
            this.sessionDate('dayDate', val);
        },
    },
    mounted() {
        this.showMethodHandle(0);
        let {dayDate} = this.createDate();
        this.dayTime = dayDate;
    },
    methods: {
        i18nFormatter(label){
            let langeLabel = 'asisTab.' + label;
            return this.$t(langeLabel)
        },
        initAsis(id) {
            this.paramId = id||this.mallData[0].id;
            this.mallVal = id||this.mallData[0].id;
            this.tabClickHandle(0);
            let data = {
                asis_time: this.dayTime,
                asis_org: this.paramId,
                asis_option: this.showMethodVal,
                asis_tit: this.getItemName(this.mallData, this.mallVal)
            }
            // console.log('initAsis', data)
            this.$emit('initData', data);
        },
        // 切换条件
        tabClickHandle(index) {
            if (this.tabItem[index].className === 'analysis-item') {
                this.tabItem.forEach(element => {
                    element.className = 'analysis-item';
                });
                this.tabItem[index].className = 'analysis-item tabs-active';
                for (let i in this.panelObj) {
                    this.panelObj[i] = false;
                }
                this.asisLevel = '';
                switch (this.tabItem[index].value) {
                    case 'mall':
                        this.panelObj.mallPanel = true;
                        this.asisLevel = 'mall';
                        break;
                    default:
                        break;
                }
            }
        },
        showMethodHandle(index) {
            if(!this.methodList[index].active) {
                this.methodList.forEach(item => {
                    item.active = false;
                })
                this.methodList[index].active = true;
                this.showMethodVal = this.methodList[index].value;
            }
        },
        mallChange() {
            window.sessionStorage.setItem('mallId',this.mallVal)
        },
        confirmCondition() {
            let emitObj = {
                // 'asis_level': '',
                'asis_time': '',
                'asis_org': '',
                'asis_option': '',
                'asis_tit': ''
            };
            if(!this.mallVal) return;
            emitObj['asis_option'] = this.showMethodVal;
            emitObj['asis_time'] = this.dayTime;
            emitObj['asis_org'] = this.mallVal;
            emitObj['asis_tit'] = this.getItemName(this.mallData, this.mallVal);
            // console.log('confirmCondition', emitObj)
            this.$emit('reportTime', emitObj);
        },
        getItemName(array, val) {
            let filterName = '';
            let firstItem = val && val.toString().split(',')[0];
            array.forEach(item => {
                if(item.id == firstItem) {
                    filterName = item.name;
                }
            })
            return filterName;
        },
        resetRefresh() {
            this.tabClickHandle(0);
            this.mallVal = this.mallData[0].id;
            this.dayTime = dateUnit.dateFormat(new Date(), 'yyyy-MM-dd');
        }
    },
}
</script>

<style scoped>
    .show-method-box {
        display: inline-block;
    }
    /* .show-method-box:after,
    .show-method-box:before {
        content: "";
        display: table;
    }
    .show-method-box:after {
        clear: both;
    } */
    .show-method-item {
        display: inline-block;
        border-radius: 2px;
        font-size: 12px;
        border: 1px solid #e5e5e5;
        background-color: #fff;
        cursor: pointer;
    }
    .show-method-item + .show-method-item {
        margin-left: 10px;
    }

    .show-method-item.is-active,
    .show-method-item:hover {
        background-color: rgb(0, 105, 255);
        color: #fff;
        box-shadow: 0 1px 4px 0 rgba(0, 105, 255, .1);
    }
    .show-method-type {
        display: inline-block;
        padding: 4px 15px;
        text-align: center;
        -webkit-appearance: none;
        box-sizing: border-box;
        margin: 0;
    }
</style>