<template>
  <div class="analysis-option-wrapper basicPassengerFlow">
    <div class="panels-content">
      <div class="panels-main-top panels-main-center">
        <!-- 商场检索选项 多选-->
        <ul class="condition-box">
          <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" collapse-tags
              :reserve-keyword="true" multiple @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">
            <span class="condition-item-text">{{$t('asisTab.index')}}</span>
            <div class="condition-item-option">
              <el-select v-model="indicatorVal" filterable :placeholder="$t('pholder.select')" class="mall-sel-box" multiple
              :reserve-keyword="true" collapse-tags >
                <el-option v-for="(item,index) in indicatorData" :key="index" :label="item.value" :value="item.key">
                  <span class="custom-checkbox__input">
                    <span class="custom-checkbox__inner"></span>
                  </span>
                  <span style="padding-left: 5px;">{{ item.value }}</span>
                </el-option>
              </el-select>
            </div>
          </li>
        </ul>
      </div>
      <div class="panels-main-bottom">
        <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 newTime">
                <el-radio-group v-model="ReportVal" size="small">
                  <el-radio-button v-for="item in analyasisTime" :key="item.value" :label="item.value" >{{i18nFormatter(item.label)}}</el-radio-button>
                  </el-radio-group>
              </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 btn-condition-item">
            <el-button type="primary" class="primary-btn analysis-collapse-btn" size="samll"
              :disabled="(ReportVal === 'day' && !dayTime) || (ReportVal === 'week' && !weekTime) || (ReportVal === 'month' && !monthTime)
              || (ReportVal === 'year' && !yearTime) || (ReportVal === 'custom' && !customTime)"
              @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 simulateAsyncOperation = fn => {
  setTimeout(fn, 2000);
}
const analyasisTime = ['day', 'week', 'month', 'year'].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
      },
      analyasisTime,
      ReportVal: 'month',
      dayTime: '',
      weekTime: '',
      monthTime: '',
      yearTime: '',
      customTime: '',
      mallVal: [],    // 单选商场
      mallId: '', // 组件全局商场ID
      mallData: [],
      mutiMallVal:[],
      isMallSelAll: false,
      indicatorVal:[],
      indicatorData:[]
    }
  },
  components: {
  },
  watch: {
    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);
    }
  },
  mounted() {
    let { dayDate, weekDate, monthDate, yearDate, customDate } = this.createDate();
    this.dayTime = dayDate;
    this.weekTime = weekDate;
    this.monthTime = monthDate;
    this.yearTime = yearDate;
    this.customTime = customDate;
    this.getMallIndex()
  },
  methods: {
      getMallIndex(){
        this.$api.base.dataDic({
          type: 'MallIndex'
        }).then(res => {
          this.indicatorData = this.languageSetting(res.data.data,'value');
        })  
      },
    i18nFormatter(label) {
      let langeLabel = 'asisTab.' + label;
      return this.$t(langeLabel)
    },
    mallChangeHandle() {
        this.isMallSelAll = this.mutiMallVal.length < this.mallData.length ? false: true
    },
    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);
            })
        }
    },
    initAsis(id, mall_data) {
      this.mallData = mall_data;
      this.ReportVal = 'month'
      let data = {
        option: 'month',
        asis_time: this.monthTime,
      }
      let timeObj = this.newDateFormat(
          this.ReportVal,
          new Date(data.asis_time)
      );
      data.startDate = timeObj.startTime;
      data.endDate = timeObj.endTime;
      this.$emit('initData', data);
    },
    confirmCondition() {
      let {mallData,mutiMallVal,ReportVal,indicatorVal} = this;
      let emitObj = {};
      emitObj.option = ReportVal;
      emitObj.asis_time = this[ReportVal + 'Time'];
      emitObj.orgId = mutiMallVal.toString()
      emitObj.indexes = indicatorVal.toString()
      if(ReportVal == "custom"){
        emitObj.startDate = this.customTime[0];
        emitObj.endDate = this.customTime[1];
      }else{
        let timeObj = this.newDateFormat(
            ReportVal,
            new Date(emitObj.asis_time)
        );
        emitObj.startDate = timeObj.startTime;
        emitObj.endDate = timeObj.endTime;
      }
      this.$emit('reportTime', emitObj);
    },
    resetRefresh() {
      this.ReportVal = 'month'
      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')];
    }
  },

}
</script>

<style scoped>
/* @import url(../css/fixed_layout.css); */
.newTime{
  width: auto;
}
.times-box{
  height: 30px;
  line-height: 30px;
}
</style>