retentionMoreOption.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, index) 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" v-show="asisLevel === 'mall'">
          <li class="condition-item" >
            <span class="condition-item-text">{{$t('asisTab.mallT')}}</span>
            <div class="condition-item-option">
              <el-select v-model="mutiMallVal" filterable :placeholder="$t('pholder.shopSelect')" class="mall-sel-box" multiple collapse-tags @change="mallChangeHandle">
                <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>
          <li class="condition-item analysis-date-condition">
            <span class="condition-item-text spe-item-text">{{$t('asisTab.date')}}</span>
            <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>
            </div>
          </li>
        </ul>
      </div>
      <div :class="[
        'panels-main-bottom', {
          'multi-line-bottom': asisLevel === 'gate' || asisLevel === 'store' ||  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 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>
// const analyasisTime = ['day'].map(item => ({
//   label: item,
//   value: item
// }))

export default {
  props: {
    // mallData: {
    //   type: Array,
    //   default: () => []
    // }
  },
  data() {
    return {
      pickerOptions1: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        }
      },
      tabItem: [],
      asisLevel: 'mall',
      // analyasisTime,
      ReportVal: 'day',
      dayTime: '',
      mallData: [],
      mutiMallVal: [],    // 多选商场下拉值
      // mallVal: '',    // 单选商场
      // floorData: [],
      // mutiFloorVal: [],    // 多选楼层下拉值
      mallId: '', // 组件全局商场ID
      // floorId: '',
      isMallSelAll: false,
      // isFloorSelAll: false
    }
  },
  watch: {
    dayTime(val) {
      this.sessionDate('dayDate', val);
    }
  },
  created() {
    this.tabItem = []
    if (this.$Project === 'mall') {
      this.tabItem = ['mall'].map(item => ({
        label: item,
        value: item
      }))
    } else {
      this.tabItem = [{
        label: 'mall',
        value: 'mall'
      }]
    }
    this.asisLevel = 'mall'
  },
  methods: {
    i18nFormatter(label) {
      let langeLabel = 'asisTab.' + label;
      return this.$t(langeLabel)
    },
    initAsis({ mallId, multiMallId }, mallData) {
      this.mallData = mallData
      this.mutiMallVal = multiMallId
      // this.mutiMallVal = [id]
      this.isMallSelAll = this.mutiMallVal.length < this.mallData.length ? false : true
      // this.getFloorOpt(id)
      this.asisLevel = 'mall'
      this.ReportVal = 'day'
      let data = {
        asis_level: this.asisLevel,
        asis_date: this.ReportVal,
        asis_time: this.dayTime,
        asis_org: this.mutiMallVal.join(','),
        asis_tit: this.getItemName(this.mallData, this.mutiMallVal.toString())
      }
      this.$emit('initData', data);
    },
    // 切换条件
    tabClickHandle(val) {
      this.asisLevel = val
      if (val === 'mall') {
        this.isMallSelAll = this.mutiMallVal.length === this.mallData.length
      }
    },
    // 获取楼层下拉
    // getFloorOpt(mall_id) {
    //   this.mutiFloorVal = []
    //   this.floorData = []
    //   this.isFloorSelAll = false
    //   this.$api.base.floor({
    //     mallId: mall_id,
    //     accountId: this.$cookie.get('accountId'),
    //     status: 1
    //   }).then(res => {
    //     if (res.data.data.length > 0) {
    //       let result = JSON.parse(JSON.stringify(res.data.data));
    //       result.unshift({
    //         name: this.$t('asisTab.all'),
    //         id: ''
    //       })
    //       this.floorData = res.data.data;
    //       this.mutiFloorVal = [res.data.data[0].id];
    //       this.isFloorSelAll = this.mutiFloorVal.length == this.floorData.length ? true : false;
    //     }
    //   }).catch(err => { console.error(err) })
    // },
    mallChangeHandle() {
      this.isMallSelAll = this.changeHandle(this.mutiMallVal, this.mallData)
    },
    // floorChangeHandle() {
    //   this.isFloorSelAll = this.mutiFloorVal.length < this.floorData.length ? false : true
    // },
    // 多选楼层 商场 change 事件
    // mutiMallChange() {
    //   this.getFloorOpt(this.mallVal)
    // },
    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);
        })
      }
    },
    confirmCondition() {
      let emitObj = {}
      if (this.asisLevel === 'mall') {
        emitObj.asis_org = this.mutiMallVal.toString()
        emitObj.asis_tit = this.getItemName(this.mallData, emitObj.asis_org)
      }
      // else {
      //   emitObj.asis_org = this.mutiFloorVal.toString()
      //   emitObj.asis_tit = this.getItemName(this.mallData, this.mallVal) + '-' + this.getItemName(this.floorData, this.mutiFloorVal)
      // }

      emitObj.asis_date = this.ReportVal
      emitObj.asis_time = this[this.ReportVal + 'Time']
      emitObj.asis_level = this.asisLevel
      this.$emit('reportTime', emitObj);
    },
    resetRefresh() {
      this.asisLevel = 'mall'
      this.ReportVal = 'day'
      this.mutiMallVal = this.mallData.length ? [this.mallData[0].id] : []
      this.dayTime = new Date();  // 月时间
    }
  },
  mounted() {
    let { dayDate } = this.createDate()
    this.dayTime = dayDate
  }
}
</script>

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