basicAsisOption.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="['analysis-item', { 'tabs-active': asisLevel === item.value }]" v-for="item in tabItem" :key="item.value" @click="tabClickHandle(item.value)">
            <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">
          <li class="condition-item">
            <span class="condition-item-text">{{$t('asisTab.objectNum')}}:</span>
            <div class="condition-item-option object-select">
              <el-select v-model="objectVal" :placeholder="$t('pholder.shopSelect')" class="mall-sel-box">
                <el-option :label="$t('asisTab.singleObj')" :value="1">{{$t('asisTab.singleObj')}}</el-option>
                <el-option :label="$t('asisTab.multipleObj')" :value="2">{{$t('asisTab.multipleObj')}}</el-option>
              </el-select>
            </div>
          </li>
        </ul>
      </div>
      <div class="panels-main-top panels-main-center">
        <!-- 商场检索选项 多选-->
        <ul class="condition-box" v-show="asisLevel === 'mall'">
          <li class="condition-item">
            <span class="condition-item-text">{{$t('asisTab.mallT')}}</span>
            <div class="condition-item-option" v-show="objectVal === 1">
              <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>
            <div class="condition-item-option" v-show="objectVal === 2">
              <!-- @visible-change="visibleHandle" @focus="mallFocus" -->
              <el-select v-model="mutiMallVal" filterable :placeholder="$t('pholder.shopSelect')" class="mall-sel-box" multiple collapse-tags @change="mallChangeHandle">
                <!-- v-show="isFocus"  -->
                <div :class="isMallSelAll ? 'sel-all-box selected' : 'sel-all-box'" @click="selAllHandle('Mall', mallData)">
                  <span class="custom-checkbox__input">
                    <span class="custom-checkbox__inner"></span>
                  </span>
                  <span style="padding-left: 5px;">{{$t('allPages.all')}}</span>
                </div>
                <el-option v-for="item in mallData" :key="item.id" :label="item.name" :value="item.id">
                  <span class="custom-checkbox__input">
                    <span class="custom-checkbox__inner"></span>
                  </span>
                  <span style="padding-left: 5px;">{{ item.name }}</span>
                </el-option>
              </el-select>
            </div>
          </li>
        </ul>
        <!-- 楼层检索选项 多选 -->
        <ul class="condition-box" v-show="asisLevel === 'floor'">
          <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="mutiMallChange">
                <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.floorT')}}</span>
            <div class="condition-item-option" v-show="objectVal === 1">
              <el-select v-model="floorVal" filterable :placeholder="$t('pholder.floorSelect')" class="floor-sel-box format-sel-box">
                <el-option v-for="item in floorData" :key="item.id" :label="item.name" :value="item.id"></el-option>
              </el-select>
            </div>
            <div class="condition-item-option" v-show="objectVal === 2">
              <el-select v-model="mutiFloorVal" filterable :placeholder="$t('pholder.floorSelect')" class="floor-sel-box format-sel-box" multiple collapse-tags @change="floorChangeHandle">
                <div :class="isFloorSelAll ? 'sel-all-box selected' : 'sel-all-box'" @click="selAllHandle('Floor',floorData)">
                  <span class="custom-checkbox__input">
                    <span class="custom-checkbox__inner"></span>
                  </span>
                  <span style="padding-left: 5px;">{{$t('allPages.all')}}</span>
                </div>
                <el-option v-for="item in floorData" :key="item.id" :label="item.name" :value="item.id">
                  <span class="custom-checkbox__input">
                    <span class="custom-checkbox__inner"></span>
                  </span>
                  <span style="padding-left: 5px;">{{ item.name }}</span>
                </el-option>
              </el-select>
            </div>
          </li>
        </ul>
        <!-- 业态检索选项 -->
        <ul class="condition-box" v-show="asisLevel === 'format'">
          <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>
          <format-option-content :objectVal="objectVal" @formatValWatch="formatValReceive"></format-option-content>
        </ul>
        <!-- 出入口检索选项 多选 -->
        <ul class="condition-box" v-show="asisLevel === 'gate'">
          <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 gate-level-item">
            <span class="condition-item-text">{{$t('asisTab.inOutLev')}}</span>
            <div class="condition-item-option">
              <el-select v-model="gateLevel" :placeholder="$t('pholder.gateLevel')" class="floor-sel-box" @change="gateLevelChange">
                <el-option v-for="item in gateLevelList" :key="item.value" :label="$t('asisTab.' + item.label)" :value="item.value"></el-option>
              </el-select>
              <span v-if="gateLevel === 'floor' || gateLevel === 'zone'">-</span>
              <el-select v-if="gateLevel === 'floor'" v-model="floorItem" filterable multiple collapse-tags :placeholder="$t('pholder.floorSelect')" class="zone-sel-box" @change="levelFloorChange">
                <div :class="isFloorSelAll ? 'sel-all-box selected' : 'sel-all-box'" @click="levelFloorChange('select')">
                  <span class="custom-checkbox__input">
                    <span class="custom-checkbox__inner"></span>
                  </span>
                  <span style="padding-left: 5px;">{{$t('allPages.all')}}</span>
                </div>
                <el-option v-for="item in floorList" :key="item.id" :label="item.name" :value="item.id">
                  <span class="custom-checkbox__input">
                    <span class="custom-checkbox__inner"></span>
                  </span>
                  <span style="padding-left: 5px;">{{ item.name }}</span>
                </el-option>
              </el-select>
              <el-select v-if="gateLevel === 'zone'" v-model="zoneItem" filterable multiple collapse-tags :placeholder="$t('pholder.zoneSelect')" class="zone-sel-box" @change="levelZoneChange">
                <div :class="isGateSelAll ? 'sel-all-box selected' : 'sel-all-box'" @click="levelZoneChange('select')">
                  <span class="custom-checkbox__input">
                    <span class="custom-checkbox__inner"></span>
                  </span>
                  <span style="padding-left: 5px;">{{$t('allPages.all')}}</span>
                </div>
                <el-option v-for="item in zoneList" :key="item.id" :label="item.name" :value="item.id">
                  <span class="custom-checkbox__input">
                    <span class="custom-checkbox__inner"></span>
                  </span>
                  <span style="padding-left: 5px;">{{ item.name }}</span>
                </el-option>
              </el-select>
            </div>
          </li>
          <li class="condition-item">
            <span class="condition-item-text">{{$t('asisTab.inOutT')}}</span>
            <div class="condition-item-option" v-show="objectVal === 1">
              <el-select v-model="gateVal" :placeholder="$t('pholder.gateType')" filterable class="mall-sel-box">
                <el-option v-for="item in gateData" :key="item.id" :label="item.name" :value="item.id">
                </el-option>
              </el-select>
            </div>
            <div class="condition-item-option" v-show="objectVal === 2">
              <el-select v-model="mutiGateVal" :placeholder="$t('pholder.gateType')" filterable class="mall-sel-box" multiple collapse-tags @change="gateChangeHandle">
                <div :class="isGateSelAll ? 'sel-all-box selected' : 'sel-all-box'" @click="selAllHandle('Gate',gateData)">
                  <span class="custom-checkbox__input">
                    <span class="custom-checkbox__inner"></span>
                  </span>
                  <span style="padding-left: 5px;">{{$t('allPages.all')}}</span>
                </div>
                <el-option v-for="item in gateData" :key="item.id" :label="item.name" :value="item.id">
                  <span class="custom-checkbox__input">
                    <span class="custom-checkbox__inner"></span>
                  </span>
                  <span style="padding-left: 5px;">{{ item.name }}</span>
                </el-option>
              </el-select>
            </div>
          </li>
        </ul>
        <!-- 店铺检索选项 多选 -->
        <ul class="condition-box" v-show="asisLevel === 'zone'">
          <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>
          <store-level-content :shopFloorVal="shopFloorVal" :shopFloorData="shopFloorData" @storelevel="storeLevelReceive"></store-level-content>
          <li class="condition-item">
            <span class="condition-item-text">{{$t('asisTab.storeT')}}</span>
            <div class="condition-item-option" v-show="objectVal === 1">
              <el-select v-model="zoneVal" filterable :placeholder="$t('pholder.areaSelect')" class="shop-sel-box">
                <el-option v-for="item in zoneData" :key="item.id" :label="item.name" :value="item.id">
                </el-option>
              </el-select>
            </div>
            <div class="condition-item-option" v-show="objectVal === 2">
              <el-select v-model="mutiZoneVal" filterable :placeholder="$t('pholder.areaSelect')" class="shop-sel-box" multiple collapse-tags @change="zoneChangeHandle">
                <div :class="isZoneSelAll ? 'sel-all-box selected' : 'sel-all-box'" @click="selAllHandle('Zone',zoneData)">
                  <span class="custom-checkbox__input">
                    <span class="custom-checkbox__inner"></span>
                  </span>
                  <span style="padding-left: 5px;">{{$t('allPages.all')}}</span>
                </div>
                <el-option v-for="item in zoneData" :key="item.id" :label="item.name" :value="item.id">
                  <span class="custom-checkbox__input">
                    <span class="custom-checkbox__inner"></span>
                  </span>
                  <span style="padding-left: 5px;">{{ item.name }}</span>
                </el-option>
              </el-select>
            </div>
          </li>
        </ul>
      </div>
      <div :class="['panels-main-bottom', { 'multi-line-bottom': asisLevel === 'gate' || asisLevel === 'zone' || asisLevel === 'format' }]">
        <ul class="condition-box">
          <li class="condition-item">
            <span class="condition-item-text spe-item-text">{{$t('asisTab.date')}}</span>
            <div class="condition-item-option">
              <div class="time-wrapper">
                <el-select v-model="ReportVal" :placeholder="$t('pholder.select')">
                  <el-option v-for="item in analyasisTime" :key="item.value" :label="i18nFormatter(item.label)" :value="item.value">
                  </el-option>
                </el-select>
              </div>
            </div>
          </li>
          <li class="condition-item analysis-date-condition">
            <div class="condition-item-option">
              <el-date-picker class="date-input analysis-date-input" v-show="ReportVal === 'day'" v-model="dayTime" value-format="yyyy-MM-dd" align="right" type="date" size="mini" :placeholder="$t('pholder.date')" :picker-options="pickerOptions1">
              </el-date-picker>
              <el-date-picker class="date-input analysis-date-input date-week-box" v-show="ReportVal === 'week'" v-model="weekTime" align="right" type="week" :format="datePickerFormatter('week')" size="mini" :placeholder="$t('pholder.week')" :picker-options="weekPickerOpt">
              </el-date-picker>
              <el-date-picker class="date-input analysis-date-input date-month-box" v-show="ReportVal === 'month'" v-model="monthTime" align="right" type="month" :format="datePickerFormatter('month')" size="mini" :placeholder="$t('pholder.month')" :picker-options="pickerOptions1">
              </el-date-picker>
              <el-date-picker class="date-input analysis-date-input" v-show="ReportVal === 'year'" v-model="yearTime" align="right" type="year" :format="datePickerFormatter('year')" size="mini" :placeholder="$t('pholder.year')" :picker-options="pickerOptions1">
              </el-date-picker>
              <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="-" v-show="ReportVal === 'custom'" :start-placeholder="$t('table.startTime')" :end-placeholder="$t('table.endTime')">
              </el-date-picker>
            </div>
          </li>
          <li class="condition-item" v-if="false">
            <span class="condition-item-text">{{$t('asisTab.index')}}</span>
            <div class="condition-item-option">
              <el-select v-model="kpiVal" :placeholder="$t('pholder.kpi')" class="indicator-sel-box">
                <el-option v-for="kpiItem in kpiOpt" :key="kpiItem.value" :label="kpiItem.label" :value="kpiItem.value"></el-option>
              </el-select>
            </div>
          </li>
          <li class="condition-item btn-condition-item">
            <el-button type="primary" class="primary-btn analysis-collapse-btn" size="samll" @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>
import Treeselect from '@riophae/vue-treeselect'
import { LOAD_CHILDREN_OPTIONS } from '@riophae/vue-treeselect'
const simulateAsyncOperation = fn => {
  setTimeout(fn, 2000);
}
const analyasisTime = ['day', 'week', 'month', 'year', 'custom'].map(item => ({ label: item, value: item }))
export default {
  data() {
    return {
      pickerOptions1: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        }
      },
      weekPickerOpt: {
        firstDayOfWeek: window._vionConfig.firstDayOfWeek ? window._vionConfig.firstDayOfWeek : 1
      },
      tabItem: [],
      analyasisTime,
      ReportVal: 'day',
      dayTime: '',
      weekTime: '',
      monthTime: '',
      yearTime: '',
      customTime: '',
      mallVal: '',    // 单选商场
      floorItem: '',  // 出入口级别 楼层
      zoneItem: '',   // 出入口级别 店铺
      asisLevel: 'mall',
      // kpiVal: 'TRAFFIC',
      // kpiOpt: [],  // kpi指标
      floorList: [],  // 出入口级别楼层下拉
      zoneData: [],   // 店铺下拉
      zoneList: [],   // 出入口级别店铺下拉
      // ioData: [], // 出入口下拉
      gateData: [],    // 选择级别后的出入口下拉
      paramId: '',  // 需要传的orgId
      shopFloorData: [],  // 级别楼层下拉
      shopFloorVal: '',   // 单选楼层下拉值
      floorVal: '',
      mutiMallVal: [],    // 多选商场下拉值
      mutiFloorVal: [],    // 多选楼层下拉值
      floorData: [],  // 多选楼层下拉
      gateVal: '',
      mutiGateVal: [],    // 多选出入口下拉值
      zoneVal: '',
      mutiZoneVal: [],    // 多选店铺下拉值
      mallId: '', // 组件全局商场ID
      floorId: '', //
      zoneId: '',
      formatId: '',
      gateLevel: 'all',
      // isMultiple: false,
      gateLevelList: [],
      isMallSelAll: false,
      isFloorSelAll: false,
      isGateSelAll: false,
      isZoneSelAll: false,
      isFormatSelAll: false,
      // isFocus: true,
      objectVal: 2,
      mallData: [],
      mutiFormatVal: [],
      mutiFormatTwoVal: [],    // 多选业态下拉值
      formatVal: '',
      formatTwoVal: '',
      formatLevel: 1,
    }
  },
  components: {
    'treeselect': Treeselect
  },
  watch: {
    asisLevel(asisLevelVal) {
      // if (asisLevelVal === 'gate' || asisLevelVal === 'zone' || asisLevelVal === 'format') {
      this.$emit('childByValue', asisLevelVal)
      // }
    },
    dayTime(val) {
      this.sessionDate('dayDate', val);
    },
    weekTime(val) {
      this.sessionDate('weekDate', val);
    },
    monthTime(val) {
      this.sessionDate('monthDate', val);
    },
    yearTime(val) {
      this.sessionDate('yearDate', val);
    },
    customTime(val) {
      this.sessionDate('customDate', val);
    }
  },
  created() {
    this.tabItem = ['mall'].map(item => ({ label: item, value: item }))
    this.gateLevelList = ['all', 'mall'].map(item => ({ label: item, value: item }))
  },
  mounted() {
    this.tabClickHandle('mall');
  },
  methods: {
    // mallFocus() {
    //     console.log('focus', this.mutiMallVal)
    //     this.isFocus = false;
    // },
    // visibleHandle(isVisible) {
    //     this.isFocus = isVisible ? true : false;
    //     console.log('blur', this.mutiMallVal, isVisible);
    // },
    i18nFormatter(label) {
      let langeLabel = 'asisTab.' + label;
      return this.$t(langeLabel)
    },
    initAsis(id, mall_data) {
      this.mallData = mall_data;
      this.paramId = id.mallId;
      this.mallId = id.mallId;
      this.mallVal = id.mallId;
      this.mutiMallVal = id.multiMallId;
      this.isMallSelAll = this.mutiMallVal.length < this.mallData.length ? false : true;
      this.getFloorOpt(id.mallId);
      this.gateLevelChange();
      // this.getMulFloorOpt(id);
      this.ReportVal = 'day'
      this.tabClickHandle('mall')
      // this.confirmCondition();
      let data = {
        asis_level: this.asisLevel,
        asis_date: 'day',
        asis_time: this.dayTime,
        asis_org: this.mutiMallVal.join(','),
        asis_object: this.objectVal,
        asis_tit: this.getItemName(this.mallData, this.mutiMallVal.toString()),
        // asis_kpi: this.kpiVal,
        // asis_org_name: []
      }
      this.$emit('initData', data);
    },
    // 切换条件
    tabClickHandle(value) {
      this.asisLevel = value
      let handler = {
        'mall': () => {
          this.mutiMallVal = this.mallId ? [this.mallId] : [];
          this.isMallSelAll = this.mutiMallVal.length == this.mallData.length ? true : false;
        },
        'floor': () => {
          this.mutiFloorVal = this.floorId ? [this.floorId] : [];
          this.isFloorSelAll = this.mutiFloorVal.length == this.floorData.length ? true : false;
        },
        'format': () => {
          this.mallVal = this.mallId;
          this.shopFloorVal = this.floorId;
        },
        'gate': () => {
          this.mallVal = this.mallId;
          this.shopFloorVal = this.floorId;
        },
        'zone': () => {
          this.mallVal = this.mallId;
          this.shopFloorVal = '';
          this.mutiZoneVal = this.zoneId ? [this.zoneId] : '';
          this.isZoneSelAll = this.mutiZoneVal.length == this.zoneData.length ? true : false;
        }
      }
      handler[value]()
    },
    // 获取楼层下拉
    async getFloorOpt(mall_id) {
      this.mutiFloorVal = [];
      this.floorVal = '',
      this.floorData = [];
      // 单选
      this.shopFloorData = [];
      this.shopFloorVal = '';
      this.floorId = '';
      this.isFloorSelAll = false;
      let { data: { data } } = await this.floorFetch(mall_id)
      if (data.length) {
        let result = JSON.parse(JSON.stringify(data))
        const hasAllFloorData = JSON.parse(JSON.stringify(result))
        hasAllFloorData.unshift({
          name: this.$t('asisTab.all'),
          id: ''
        })
        this.shopFloorData = hasAllFloorData;
        this.floorData = result;
        this.mutiFloorVal = [result[0].id];
        this.floorVal = result[0].id;
        this.isFloorSelAll = this.mutiFloorVal.length == this.floorData.length ? true : false;
        // 单选
        this.floorId = this.asisLevel === 'floor' ? result[0].id : result[0].id;
        this.shopFloorVal = result[0].id;
        this.getZoneOpt(mall_id, this.shopFloorVal);
      } else {
        this.getZoneOpt(mall_id);
      }
    },
    async getMutiFloor(mall_id) {
      this.mutiFloorVal = [];
      this.floorVal = '',
      this.floorData = [];
      let { data: { data } } = await this.floorFetch(mall_id)
      if (data.length) {
        this.floorData = data;
        this.mutiFloorVal = [data[0].id];
        this.floorVal = data[0].id;
        this.isFloorSelAll = this.mutiFloorVal.length === this.floorData.length;
      }
    },
    async getZoneOpt(mall_id, floor_id, format) {
        if(!mall_id) return;
      this.zoneData = [];
      this.mutiZoneVal = [];
      this.zoneId = '';
      this.isZoneSelAll = false;
      let params = {
        mallId: mall_id,
        accountId: this.$cookie.get('accountId'),
        status: 1,
        sortName: '"floor".name, "zone".name',
      }
      this.storeLevel === 'format' ? (this.storeformatLevel === 1 ? params.FormatId_arr = this.storemutiFormatVal.toString() :
        params.SubFormatId_arr = this.storemutiFormatTwoVal.toString()) :
        params.floorId = floor_id ? floor_id : this.storeFloorVal;
      let { data: { data } } = await this.zoneFetch(params)
      if (data.length) {
        this.zoneData = data;
        this.zoneId = data[0].id;
        this.mutiZoneVal = [data[0].id];
        this.zoneVal = data[0].id;
        this.isZoneSelAll = this.mutiZoneVal.length === this.zoneData.length;
      }
    },
    loadOptions({ action, parentNode, callback }) {
      if (action === LOAD_CHILDREN_OPTIONS) {
        // 获取子节点
        this.$api.base.format({
          // _t: Date.parse(new Date()) / 1000
        })
        switch (parentNode.id) {
          case 'success':
            simulateAsyncOperation(() => {
              parentNode.children = [{
                id: 'child',
                label: 'Child option'
              }]
              callback()
            })
            break;
          case 'no-children':
            simulateAsyncOperation(() => {
              parentNode.children = [];
              callback()
            })
            break;
          case 'failure':
            simulateAsyncOperation(() => {
              callback(new Error('Failed to load option: network error.'))
            })
            break;
          default:
            break;
        }
      }
    },
    buildChild(data, childObj) {
      data.forEach(item => {
        if (item.id == childObj.id) { }
      })
    },
    gateLevelChange() {
      this.isFloorSelAll = false;
      this.isGateSelAll = false;
      this.isZoneSelAll = false;
      if (this.gateLevel === 'all') {
        this.getAllGates();
      } else if (this.gateLevel === 'mall') {
        this.getMallGates();
      } else if (this.gateLevel === 'floor') {
        this.getFloorList();
      } else {
        this.getZoneList();
      }
    },
    async getAllGates() {
      this.mutiGateVal = [];
      this.gateData = [];
      let { data: { data } } = await this.gateFetch({
        accountId: this.$cookie.get('accountId'),
        mallId: this.mallVal,
        status: 1,
        type_arr: '1,3',
        // _t: Date.parse(new Date()) / 1000
      })
      if (data.length) {
        data.forEach(item => {
          window.sessionStorage.setItem('gate-' + item.id, item.name);
        })
        this.mutiGateVal = [data[0].id];
        this.gateVal = data[0].id;
        this.gateData = data;
        if (this.mutiGateVal.length == this.gateData.length) {
          this.isGateSelAll = true;
        }
      }
    },
    async getMallGates() {
      this.mutiGateVal = [];
      this.gateData = [];
      let { data: { data } } = await this.gateFetch({
        mallId: this.mallVal,
        isMallGate: 1,
        status: 1,
        type_arr: '1,3',
      })
      if (data.length) {
        this.mutiGateVal = [data[0].id]
        this.gateVal = data[0].id;
        this.gateData = data;
        if (this.mutiGateVal.length == this.gateData.length) {
          this.isGateSelAll = true;
        }
      }
    },
    async getFloorList() {
      this.mutiGateVal = [];
      this.gateData = [];
      this.floorList = [];
      let { data: { data } } = await this.floorFetch(this.mallVal)
      if (data.length) {
        this.floorItem = [data[0].id];
        this.getFloorGate(this.floorItem.join(','));
        this.floorList = data;
        this.isFloorSelAll = this.floorItem.length === this.floorList.length;
      }
    },
    async getZoneList() {
      this.mutiGateVal = [];
      this.gateData = [];
      this.zoneList = [];
      let { data: { data } } = await this.zoneFetch({
        mallId: this.mallVal,
        status: 1,
        sortName: '"floor".name, "zone".name',
        // _t: Date.parse(new Date()) / 1000
      })
      if (data.length) {
        this.zoneItem = [data[0].id];
        this.getZoneGate(this.zoneItem.join(','));
        this.zoneList = data;
      }
    },
    levelFloorChange(type) {
      if (type == 'select') {
        if (this.isFloorSelAll) {
          this.isFloorSelAll = false;
          if (this.floorItem.length == this.floorList.length) {
            this.floorItem = [];
          }
        } else {
          this.isFloorSelAll = true;
          if (this.floorItem.length == this.floorList.length) {
            this.floorItem = [];
          } else {
            this.floorItem = [];
            this.floorList.forEach(item => {
              this.floorItem.push(item.id);
            })
            this.getFloorGate(this.floorItem.join(','));
          }
        }
      } else {
        this.isFloorSelAll = this.isFloorSelAll ?
          (this.floorItem.length < this.floorList.length ? false : true) :
          this.floorItem.length < this.floorList.length ? false : true;
        if (this.floorItem.length) {
          this.getFloorGate(this.floorItem.join(','));
        } else {
          this.mutiGateVal = [];
          this.gateData = [];
        }
      }
    },
    getFloorGate(floor_id) {
      this.mutiGateVal = [];
      this.gateData = [];
      this.$api.base.floorGate({
        FloorId_arr: floor_id,
        // _t: Date.parse(new Date()) / 1000
      })
        .then(res => {
          if (res.data.data.length > 0) {
            let result = res.data.data;
            result.forEach(item => {
              item['id'] = item.gateId;
              item['name'] = window.sessionStorage.getItem('gate-' + item.gateId);
            })
            this.mutiGateVal = [result[0].id];
            this.gateVal = result[0].id;
            this.gateData = result;
            if (this.mutiGateVal.length == this.gateData.length) {
              this.isGateSelAll = true;
            }
          }
        })
    },
    levelZoneChange(type) {
      if (type == 'select') {
        if (this.isGateSelAll) {
          this.isGateSelAll = false;
          if (this.zoneItem.length == this.zoneList.length) {
            this.zoneItem = [];
          }
        } else {
          this.isGateSelAll = true;
          if (this.zoneItem.length == this.zoneList.length) {
            this.zoneItem = [];
          } else {
            this.zoneItem = [];
            this.zoneList.forEach(item => {
              this.zoneItem.push(item.id);
            })
            this.getZoneGate(this.zoneItem.join(','));
          }
        }
      } else {
        this.isGateSelAll = this.isGateSelAll ?
          (this.mutiGateVal.length < this.gateData.length ? false : true) :
          this.mutiGateVal.length < this.gateData.length ? false : true;
        if (this.zoneItem.length) {
          this.getZoneGate(this.zoneItem.join(','));
        } else {
          this.mutiGateVal = [];
          this.gateData = [];
        }
      }
    },
    getZoneGate(zone_id) {
      this.mutiGateVal = [];
      this.gateData = [];
      this.$api.base.zoneGate({
        ZoneId_arr: zone_id,
        // _t: Date.parse(new Date()) / 1000
      })
        .then(res => {
          if (res.data.data.length > 0) {
            let result = res.data.data;
            result.forEach(item => {
              item['id'] = item.gateId;
              item['name'] = window.sessionStorage.getItem('gate-' + item.gateId);
            })
            this.mutiGateVal = [result[0].id];
            this.gateVal = result[0].id;
            this.gateData = result;
            if (this.mutiGateVal.length == this.gateData.length) {
              this.isGateSelAll = true;
            }
          }
        })
    },
    mallChange() {
      this.mallId = this.mallVal;
      window.sessionStorage.setItem('mallId', this.mallVal)
      if (this.asisLevel === 'gate') {
        this.gateLevel = 'all';
        this.gateLevelChange()
      } else {
        this.getFloorOpt(this.mallVal);
      }
    },
    mallChangeHandle() {
      this.isMallSelAll = this.changeHandle(this.mutiMallVal, this.mallData)
    },
    floorChangeHandle() {
      this.isFloorSelAll = this.mutiFloorVal.length < this.floorData.length ? false : true
      //
    },
    gateChangeHandle() {
      this.isGateSelAll = this.mutiGateVal.length < this.gateData.length ? false : true
      //
    },
    zoneChangeHandle() {
      this.isZoneSelAll = this.mutiZoneVal.length < this.zoneData.length ? false : true
      //
    },
    // 多选楼层 商场 change 事件
    mutiMallChange() {
      this.getMutiFloor(this.mallVal)
    },
    floorChange() {
      this.getZoneOpt(this.mallVal, this.shopFloorVal);
    },
    limitText(count) {
      // console.log(count)
    },
    parentChange(node) {
      // console.log(node)
    },
    openTree(instanceId) {
      setTimeout(() => {
        console.log($('.vue-treeselect__menu').css({ "width": "250px" }))
      }, 100)
    },
    selAllHandle(selType, option) {
      let selectAll = 'is' + selType + 'SelAll';
      let selectVal = 'muti' + selType + 'Val';
      if (this[selectAll]) {
        this[selectAll] = false;
        this[selectVal] = [];
      } else {
        this[selectAll] = true;
        this[selectVal] = [];
        option.forEach(item => {
          this[selectVal].push(item.id);
        })
      }
    },
    formatValReceive(valObj) {
      for (let key in valObj) {
        this[key] = valObj[key]
      }
    },
    storeLevelReceive(valObj) {
      for (let key in valObj) {
        if (key != 'formatVal' && key != 'formatTwoVal') {
          this['store' + key] = valObj[key];
          this.getZoneOpt(this.mallVal, null)
        }
      }
    },
    floorFetch(mallId) {
      return new Promise((resolve, reject) => {
        this.$api.base.floor({
          mallId: mallId,
          accountId: this.$cookie.get('accountId'),
          status: 1,
          // _t: Date.parse(new Date()) / 1000
        })
          .then(res => {
            resolve(res)
          })
          .catch(err => {
            this.catchErrorHandle(err)
            reject(err)
          })
      })
    },
    zoneFetch(parameter) {
      return new Promise((resolve, reject) => {
        this.$api.base.zone(parameter)
          .then(res => {
            resolve(res)
          })
          .catch(err => {
            this.catchErrorHandle(err)
            reject(err)
          })
      })
    },
    gateFetch(parameter) {
      return new Promise((resolve, reject) => {
        this.$api.base.gate(parameter)
          .then(res => {
            resolve(res)
          })
          .catch(err => {
            this.catchErrorHandle(err)
            reject(err)
          })
      })
    },
    formatFetch() {
      return new Promise((resolve, reject) => {
        this.$api.base.format()
          .then(res => {
            resolve(res)
          })
          .catch(err => {
            this.catchErrorHandle(err)
            reject(err)
          })
      })
    },
    confirmCondition() {
      let
        {
          objectVal,
          asisLevel,
          mallData,
          mallVal,
          mutiMallVal,
          floorData,
          floorVal,
          mutiFloorVal,
          gateData,
          gateVal,
          mutiGateVal,
          zoneData,
          zoneVal,
          mutiZoneVal,
          formatLevel,
          formatVal,
          formatTwoVal,
          mutiFormatVal,
          mutiFormatTwoVal,
          ReportVal
        } = this,
        emitObj = {},
        orgId = null,
        mallName = this.getItemName(mallData, mallVal.toString()),
        emitHandler = {
          'mall': () => {
            orgId = objectVal === 1 ? mallVal : mutiMallVal.toString()
            return this.getItemName(mallData, orgId)
          },
          'floor': () => {
            orgId = objectVal === 1 ? floorVal : mutiFloorVal.toString()
            return this.getItemName(floorData, orgId)
          },
          'format': () => {
            orgId = mallVal.toString()
            return mallName
          },
          'gate': () => {
            orgId = objectVal === 1 ? gateVal : mutiGateVal.toString()
            return this.getItemName(gateData, orgId)
          },
          'zone': () => {
            orgId = objectVal === 1 ? zoneVal : mutiZoneVal.toString()
            return this.getItemName(zoneData, orgId)
          }
        }

      emitObj.asis_tit = asisLevel === 'mall' || asisLevel === 'format'
        ? emitHandler[asisLevel]()
        : mallName + '-' + emitHandler[asisLevel]()
      if (asisLevel === 'format') {
        objectVal === 1
          ? formatLevel === 1
            ? (emitObj.asis_formats = formatVal)
            : (emitObj.asis_subFormats = formatTwoVal)
          : formatLevel === 1
            ? (emitObj.asis_formats = mutiFormatVal)
            : (emitObj.asis_subFormats = mutiFormatTwoVal)
      }
      emitObj.asis_date = ReportVal;
      emitObj.asis_time = this[ReportVal + 'Time'];
      emitObj.asis_level = asisLevel;
      emitObj.asis_org = orgId;
      emitObj.asis_object = objectVal;
      // emitObj['asis_kpi'] = this.kpiVal;
      this.$emit('reportTime', emitObj);
    },
    resetRefresh() {
      this.tabClickHandle('mall');
      this.ReportVal = 'day'
      this.mutiMallVal = [this.mallData[0].id];
      this.dayTime = dateUnit.dateFormat(new Date(), 'yyyy-MM-dd')
      this.weekTime = new Date();  // 周时间
      this.monthTime = new Date();  // 月时间
      this.yearTime = new Date();  // 年时间
      this.customTime = [this.dayReduce(new Date(), 15), dateUnit.dateFormat(new Date(), 'yyyy-MM-dd')];
    }
  },
  mounted() {
    let { dayDate, weekDate, monthDate, yearDate, customDate } = this.createDate();
    this.dayTime = dayDate;
    this.weekTime = weekDate;
    this.monthTime = monthDate;
    this.yearTime = yearDate;
    this.customTime = customDate;
  }
}
</script>

<style scoped>
/* @import url(../css/fixed_layout.css); */


/* @import url(../css/option.css); */

@media only screen and (max-width: 1366px) {
  .time-box:last-child .time-btn {
    padding: 2px 10px;
  }
}

@media only screen and (max-width: 1280px) {
  .time-box:last-child .time-btn {
    padding: 2px 10px;
  }
  .panels-content {
    padding: 15px 0 13px 10px;
  }
}
</style>