<template>
<div class="mall-option-content">
<!-- 对象个数 -->
<slot name="object-number"></slot>
<!-- 商场 -->
<div class="condition-item" v-show="cascadeVisible.mall">
<span class="condition-item-text">{{$t('asisTab.mallT')}}</span>
<div class="condition-item-option">
<el-select
v-model="mallVal"
filterable
:multiple="mallIsMultiple"
collapse-tags
:placeholder="$t('pholder.shopSelect')"
class="mall-sel-box"
@change="mallChangeHandle">
<div :class="isMallSelectAll ? 'sel-all-box selected' : 'sel-all-box'" @click="selAllHandle('mall')" v-show="mallIsMultiple">
<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" v-show="mallIsMultiple">
<span class="custom-checkbox__inner"></span>
</span>
<span :style="mallLabel">{{ item.name }}</span>
</el-option>
</el-select>
</div>
</div>
<!-- 监控点 -->
<div class="condition-item" v-show="cascadeVisible.gate">
<span class="condition-item-text">{{$t('asisTab.inOutT')}}</span>
<div class="condition-item-option">
<el-select
v-model="gateVal"
filterable
:multiple="gateIsMultiple"
collapse-tags
:placeholder="$t('pholder.gateType')"
class="mall-sel-box"
@change="gateChangeHandle">
<div :class="isGateSelectAll ? 'sel-all-box selected' : 'sel-all-box'" @click="selAllHandle('gate')" v-show="gateIsMultiple">
<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" v-show="gateIsMultiple">
<span class="custom-checkbox__inner"></span>
</span>
<span :style="gateLabel">{{ item.name }}</span>
</el-option>
</el-select>
</div>
</div>
<!-- 日期 -->
<div class="condition-item" v-show="cascadeVisible.date">
<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')" @change="DateHandle(reportVal)">
<el-option
v-for="item in analyasisTime"
:key="item.value"
:label="i18nFormatter(item.label)"
:value="item.value">
</el-option>
</el-select>
</div>
</div>
</div>
<div class="condition-item" v-show="cascadeVisible.date">
<div class="condition-item-option">
<el-date-picker class="date-input analysis-date-input" v-show="reportTime.isDay" 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="reportTime.isWeek" 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="reportTime.isMonth" 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="reportTime.isYear" 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="reportTime.isCustom"
:start-placeholder="$t('table.startTime')"
:end-placeholder="$t('table.endTime')">
</el-date-picker>
</div>
</div>
<!-- 指标 -->
<slot name="kpi"></slot>
<!-- 按钮 -->
<div class="condition-item btn-group">
<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> -->
</div>
</div>
</template>
<script>
export default {
name: 'commonOptionContent',
props: {
activeTab: {
type: Object,
required: true,
default: {}
}
},
data() {
return {
///////////////////////////////////////////////////// 商场 门店
mallData: [{
accountId: 2,
area: 100,
cityId: 2,
createTime: "2018-10-24 19:49:36",
createUser: 2,
externalId: "11010910476",
group: {name: "华东区"},
groupId: 5,
id: 2,
intro: "",
latitude: 40.066593,
longitude: 116.31105,
mallNo: "",
manager: "vion",
modifyTime: "2019-01-15 10:30:35",
modifyUser: 2,
name: "文安智能-北京",
openDate: "2018-10-01 00:00:00",
provinceId: 110000,
status: 1,
unid: "e15b9a8e-d782-11e8-b19d-7cd30ac4c9a6"
}],
multiMallVal: [],
radioMallVal: null,
mallIsMultiple: false,
isMallSelectAll: false,
///////////////////////////////////////////////////// 楼层
///////////////////////////////////////////////////// 店铺
///////////////////////////////////////////////////// 出入口
gateData: [{
account: {name: "文安智能"},
accountId: 2,
createTime: "2018-10-24 19:52:23",
createUser: 3,
externalId: "abcd",
floor: {name: "1F"},
floorId: 2,
id: 2,
isHasFace: 1,
isMallGate: 1,
mall: {name: "文安智能-北京"},
mallId: 2,
modifyTime: "2019-03-06 20:17:06",
modifyUser: 3,
name: "模拟门店A",
status: 1,
type: 3,
unid: "44fb714a-d783-11e8-9d18-7cd30ac4c9a6",
user: {realName: "vion"},
x: 0,
y: 0
}],
multiGateVal: [],
radioGateVal: null,
gateIsMultiple: false,
isGateSelectAll: false,
///////////////////////////////////////////////////// 日期
analyasisTime: [{
label: 'day',
value: 'day',
is_active: 'time-btn'
}, {
label: 'week',
value: 'week',
is_active: 'time-btn'
}, {
label: 'month',
value: 'month',
is_active: 'time-btn'
}, {
label: 'year',
value: 'year',
is_active: 'time-btn'
}, {
label: 'custom',
value: 'custom',
is_active: 'time-btn'
}],
reportVal: 'day',
reportTime: {
isDay: false,
isWeek: false,
isMonth: false,
isYear: false,
isCustom: false
},
pickerOptions1: {
disabledDate(time) {
return time.getTime() > Date.now();
}
},
weekPickerOpt: {
firstDayOfWeek: 1
},
dayTime: '',
weekTime: '',
monthTime: '',
yearTime: '',
customTime: '',
///////////////////////////////////////////////////// 条件选项
cascadeVisible: {
mall: false,
floor: false,
zone: false,
gate: false,
date: false
},
///////////////////////////////////////////////////// 分析条件结果
conditions: {}
}
},
computed: {
mallVal() {
if(this.mallIsMultiple) {
return this.multiMallVal;
} else {
return this.radioMallVal;
}
},
gateVal() {
if(this.gateIsMultiple) {
return this.multiGateVal;
} else {
return this.radioGateVal;
}
},
mallLabel() {
if(this.mallIsMultiple) {
return 'padding-left: 5px';
} else {
return '';
}
},
gateLabel() {
if(this.gateIsMultiple) {
return 'padding-left: 5px';
} else {
return '';
}
},
},
watch: {
activeTab: {
handler: 'createSelector',
immediate: true
}
},
created() {
this.DateHandle('day');
this.initTime();
},
methods: {
i18nFormatter(label){
let langeLabel = 'asisTab.' + label;
return this.$t(langeLabel)
},
initTime() {
this.dayTime = this.dayTime ? this.dayTime : dateUnit.dateFormat(new Date(), 'yyyy-MM-dd');
this.customTime = [this.dayReduce(new Date(), 30), dateUnit.dateFormat(new Date(), 'yyyy-MM-dd')];
this.weekTime = this.weekTime ? this.weekTime : new Date();
this.monthTime = this.monthTime ? this.monthTime : new Date();
this.yearTime = this.yearTime ? this.yearTime : new Date();
},
createSelector(activeTabItem) {
this.visibleHandler(false)
this.visibleHandler(true, activeTabItem.value)
if(activeTabItem.value === 'mall') {
this.mallIsMultiple = true;
this.multiMallVal = [this.mallData[0].id];
this.gateIsMultiple = false;
this.radioGateVal = this.gateData[0].id;
activeTabItem.cascade.forEach(item => {
this.visibleHandler(true, item.cascadeOption)
})
} else if(activeTabItem.value === 'gate') {
this.mallIsMultiple = false;
this.radioMallVal = this.mallData[0].id;
this.gateIsMultiple = true;
this.multiGateVal = [this.gateData[0].id];
activeTabItem.cascade.forEach(item => {
this.visibleHandler(true, item.cascadeOption)
})
} else {
this.mallIsMultiple = false;
this.radioMallVal = this.mallData[0].id;
this.gateIsMultiple = false;
this.radioGateVal = this.gateData[0].id;
activeTabItem.cascade.forEach(item => {
this.visibleHandler(true, item.cascadeOption)
})
}
},
mallChangeHandle() {},
gateChangeHandle() {},
selAllHandle(selectorType) {
//
},
DateHandle(value) {
for(let k in this.reportTime) {
this.reportTime[k] = false;
}
switch (value) {
case 'day':
this.reportTime.isDay = true;
break;
case 'week':
this.reportTime.isWeek = true;
break;
case 'month':
this.reportTime.isMonth = true;
break;
case 'year':
this.reportTime.isYear = true;
break;
case 'custom':
this.reportTime.isCustom = true;
break;
default:
break;
}
},
visibleHandler(isVisible, value) {
if(isVisible) {
this.cascadeVisible[value] = true;
} else {
Object.keys(this.cascadeVisible).forEach(key => {
this.cascadeVisible[key] = false;
})
}
},
confirmCondition() {},
resetRefresh() {}
}
}
</script>
<style scoped>
.mall-option-content {
padding: 15px 0 13px 50px;
background: #fff;
/* box-shadow: 0 1px 4px 0 rgba(0, 0, 0, .1); */
-webkit-box-sizing: border-box;
box-sizing: border-box;
overflow: hidden;
}
</style>