<template>
<view class="u-waterfall">
<view id="u-left-column" class="u-column"><slot name="left" :leftList="leftList"></slot></view>
<view id="u-right-column" class="u-column"><slot name="right" :rightList="rightList"></slot></view>
</view>
</template>
<script>
export default {
name: "u-waterfall",
props: {
value: {
type: Array,
required: true,
default: function() {
return [];
}
},
addTime: {
type: [Number, String],
default: 200
},
idKey: {
type: String,
default: 'id'
}
},
provide() {
return {
uWaterfall: this
}
},
data() {
return {
leftList: [],
rightList: [],
tempList: [],
children: []
}
},
watch: {
copyFlowList(nVal, oVal) {
let startIndex = Array.isArray(oVal) && oVal.length > 0 ? oVal.length : 0;
this.tempList = this.tempList.concat(this.cloneData(nVal.slice(startIndex)));
this.splitData();
}
},
mounted() {
this.tempList = this.cloneData(this.copyFlowList);
this.splitData();
},
computed: {
copyFlowList() {
return this.cloneData(this.value);
}
},
methods: {
async splitData() {
if (!this.tempList.length) return;
let leftRect = await this.$uGetRect('#u-left-column');
let rightRect = await this.$uGetRect('#u-right-column');
let item = this.tempList[0];
if(!item) return ;
if (leftRect.height < rightRect.height) {
this.leftList.push(item);
} else if (leftRect.height > rightRect.height) {
this.rightList.push(item);
} else {
if (this.leftList.length <= this.rightList.length) {
this.leftList.push(item);
} else {
this.rightList.push(item);
}
}
this.tempList.splice(0, 1);
if (this.tempList.length) {
setTimeout(() => {
this.splitData();
}, this.addTime)
}
},
cloneData(data) {
return JSON.parse(JSON.stringify(data));
},
clear() {
this.leftList = [];
this.rightList = [];
this.$emit('input', []);
},
remove(id) {
let index = -1;
index = this.leftList.findIndex(val => val[this.idKey] == id);
if(index != -1) {
this.leftList.splice(index, 1);
} else {
index = this.rightList.findIndex(val => val[this.idKey] == id);
if(index != -1) this.rightList.splice(index, 1);
}
index = this.value.findIndex(val => val[this.idKey] == id);
if(index != -1) this.$emit('input', this.value.splice(index, 1));
},
modify(id, key, value) {
let index = -1;
index = this.leftList.findIndex(val => val[this.idKey] == id);
if(index != -1) {
this.leftList[key] = value;
} else {
index = this.rightList.findIndex(val => val[this.idKey] == id);
if(index != -1) this.leftList[key] = value;
}
index = this.value.findIndex(val => val[this.idKey] == id);
if(index != -1) {
let data = this.cloneData(this.value);
data[index][key] = value;
this.$emit('input', data);
}
}
}
}
</script>
<style lang="scss" scoped>
@import "../../libs/css/style.components.scss";
.u-waterfall {
display: flex;
flex-direction: row;
align-items: flex-start;
}
.u-column {
display: flex;
flex: 1;
flex-direction: column;
height: auto;
}
.u-image {
width: 100%;
}
</style>