<template>
<div>
<ul class="filter-wrapper">
<li @click="nameClick">{{ name }}</li>
<li @click="yearClick">{{ year }}</li>
<li @click="subjectClick">{{ subject || '不限' }}</li>
</ul>
<van-popup v-model="isShow" style="width: 200px; height: 200px; border: 1px solid red;">
<ul>
<li @click="itemClick(getSortYear(index, filterData['北京']))" v-for="(item, index) in filterData['北京']">{{getSortYear(index, filterData['北京'])}}</li>
</ul>
</van-popup>
</div>
</template>
<script>
import Vue from 'vue';
import { Popup } from 'vant';
import table from "@/views/category/table";
Vue.use(Popup);
export default {
data() {
return {
name: '',
year: '',
subject: '',
showDialog: false,
showDialog1: false,
isShow: false,
tag: 1
}
},
props: ["filterData"],
components: {
},
mounted() {
},
computed: {
getSortYear() {
let that = this;
return function (key, filterData) {
if (that.tag !== 1) {
return key
}
let size = Object.keys(filterData).length
let index = Object.keys(filterData).indexOf(key)
return Object.keys(filterData)[size - index - 1]
}
}
},
methods: {
nameClick() {
this.isShow = true;
this.tag = 0;
},
yearClick() {
this.isShow = true;
this.tag = 1;
},
subjectClick() {
this.isShow = true;
this.tag = 2;
},
itemClick(i) {
switch(this.tag){
case 0:
this.name = i;
this.year = Object.keys(this.filterData[i])[Object.keys(this.filterData[i]).length - 1]
this.subject = Object.keys(this.filterData[i][this.year])[0]
break;
case 1:
this.year = i;
this.subject = Object.keys(this.filterData[this.name][this.year])[0]
break;
case 2:
this.subject = i;
break
}
this.$emit("itemClick", this.name, this.year, this.subject)
}
}
}
</script>
<style scoped>
.filter-wrapper li {
display: inline-block;
width: 100px;
height: 40px;
border: 1px solid red;
}
</style>