LossCustomerOpt.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
            v-for="item in tabItem"
            :key="item.value"
            class="analysis-item"
            :class="{ 'tabs-active': asisLevel === 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="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.customLossTime') }}</span>
            <div class="condition-item-option">
              <el-input
                class="time-section"
                :class="{
                  'el-form-item is-error': customLossTimeIsVaild === 'gtVal' || customLossTimeIsVaild === 'all'
                }"
                type="text"
                v-model.number="gtVal"
                @keyup.native="valiateCustomLossTime" />
              <i>-</i>
              <el-input
                class="time-section"
                :class="{
                  'el-form-item is-error': customLossTimeIsVaild === 'ltVal' || customLossTimeIsVaild === 'all'
                }"
                type="text"
                v-model.number="ltVal"
                @keyup.native="valiateCustomLossTime"
              />
            </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">
                <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
                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="pickerOptions1"
              />
              <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
                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
                class="date-input analysis-date-input times-box"
                v-show="ReportVal === 'custom'"
                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')"
              />
            </div>
          </li>
          <li class="condition-item">
            <el-button
              type="primary"
              class="primary-btn analysis-collapse-btn"
              :disabled="(ReportVal === 'day' && !dayTime) || (ReportVal === 'week' && !weekTime) || (ReportVal === 'month' && !monthTime)
              || (ReportVal === 'year' && !yearTime) || (ReportVal === 'custom' && !customTime)"
              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',
  '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: [],
      asisLevel: 'mall',
      analyasisTime,
      ReportVal: 'day',
      dayTime: "",
      weekTime: "",
      monthTime: "",
      yearTime: "",
      customTime: [],
      mallData: [],
      mallVal: null,
      gtVal: 5,
      ltVal: 120,
      customLossTimeIsVaild: ''
    }
  },
  created() {
    this.tabItem = [
      {
        label: "mall",
        value: "mall"
      }
    ]
  },
  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() {
    this.initDate()
  },
  methods: {
    i18nFormatter(label) {
      let langeLabel = "asisTab." + label
      return this.$t(langeLabel)
    },
    initAsis(id, mallData) {
      this.mallData = mallData
      this.mallVal = id
      this.asisLevel = 'mall'
      const { dayTime, getItemName, ReportVal, asisLevel, gtVal, ltVal } = this
      let data = {
        asis_date: ReportVal,
        asis_time: this[`${ReportVal}Time`],
        asis_org: id,
        asis_tit: getItemName(mallData, id, asisLevel),
        asis_stage: `${gtVal},${ltVal}`
      }
      this.$emit("initData", data)
    },
    mallChange(val) {
      window.sessionStorage.setItem("mallId", this.mallVal)
    },
    // 切换条件
    tabClickHandle(val) {
      this.asisLevel = val
    },
    initDate() {
      let { dayDate, weekDate, monthDate, yearDate, customDate } = this.createDate()
      this.dayTime = dayDate
      this.weekTime = weekDate
      this.monthTime = monthDate
      this.yearTime = yearDate
      this.customTime = customDate
    },
    valiateCustomLossTime() {
      const { gtVal, ltVal } = this
      if (!gtVal || !ltVal) {
        // this.$message({
        //   type: 'warning',
        //   message: '自定义流失时间不能为空'
        // })
        this.customLossTimeIsVaild = 'all'
      } else {
        if (gtVal > ltVal) {
          // this.$message({
          //   type: 'warning',
          //   message: '自定义流失时间不合法！'
          // })
          this.customLossTimeIsVaild = 'ltVal'
        } else if (ltVal < gtVal) {
          // this.$message({
          //   type: 'warning',
          //   message: '自定义流失时间不合法！'
          // })
          this.customLossTimeIsVaild = 'gtVal'
        } else {
          this.customLossTimeIsVaild = ''
        }
      }
    },
    confirmCondition() {
      const {
        valiateCustomLossTime, mallVal, mallData, asisLevel, ReportVal, getItemName, gtVal, ltVal, customLossTimeIsVaild
      } = this
      valiateCustomLossTime()
      if (customLossTimeIsVaild) {
        this.$message({
          type: 'warning',
          message: this.$t('message.customLossTimeVaild')
        })
        return
      }
      if (!mallVal) return
      let emitObj = {}
      emitObj.asis_date = ReportVal
      emitObj.asis_time = this[`${ReportVal}Time`]
      emitObj.asis_org = mallVal
      emitObj.asis_stage = `${gtVal},${ltVal}`
      emitObj.asis_tit = getItemName(mallData, mallVal, asisLevel)
      this.$emit("emitParams", emitObj)
    },
    resetRefresh() {
      this.gtVal = 5
      this.ltVal = 120
      this.asisLevel = 'mall'
      this.ReportVal = 'day'
      this.mallVal = this.mallData && this.mallData[0].id || null
      // this.initDate()
    }
  }
}
</script>

<style scoped>
.time-section {
  width: 60px;
  height: 24px;
}
</style>