<template>
  <!-- #ifndef APP-NVUE -->
  <view class="uni-list uni-border-top-bottom"
  :style="{ 'background-color': background, 'border-radius': borderRadius + 'rpx' }">
    <view v-if="border" class="uni-list--border-top"></view>
    <slot />
    <view v-if="border" class="uni-list--border-bottom"></view>
  </view>
  <!-- #endif -->
  <!-- #ifdef APP-NVUE -->
  <list
    :bounce="false"
    :scrollable="true"
    show-scrollbar
    :render-reverse="renderReverse"
    @scroll="scroll"
    class="uni-list"
    :style="{ 'background-color': background, 'border-radius': borderRadius + 'rpx' }"
    :class="{ 'uni-list--border': border }"
    :enableBackToTop="enableBackToTop"
    loadmoreoffset="15"
  >
    <slot />
  </list>
  <!-- #endif -->
</template>

<script>
/**
 * List 列表
 * @description 列表组件
 * @tutorial https://ext.dcloud.net.cn/plugin?id=24
 * @property {String} 	border = [true|false] 		标题
 */
export default {
  name: 'uniList',
  'mp-weixin': {
    options: {
      multipleSlots: false
    }
  },
  props: {
    stackFromEnd: {
      type: Boolean,
      default: false
    },
    enableBackToTop: {
      type: [Boolean, String],
      default: false
    },
    scrollY: {
      type: [Boolean, String],
      default: false
    },
    border: {
      type: Boolean,
      default: true
    },
    renderReverse: {
      type: Boolean,
      default: false
    },
    background: {
      type: String,
      default: '#ffffff'
    },
    borderRadius: {
      type: String,
      default: '0'
    }
  },
  // provide() {
  // 	return {
  // 		list: this
  // 	};
  // },
  created() {
    this.firstChildAppend = false;
  },
  methods: {
    loadMore(e) {
      this.$emit('scrolltolower');
    },
    scroll(e) {
      this.$emit('scroll', e);
    }
  }
};
</script>
<style>
.uni-list {
  /* #ifndef APP-NVUE */
  display: flex;
  /* #endif */
  background-color: var(--uni-bg-color, #ffffff);
  position: relative;
  flex-direction: column;
  /**
  // border-bottom-color: $uni-border-color;
  // border-bottom-style: solid;
  // border-bottom-width: 1px;
  */
}
.uni-list--border {
  position: relative;
  /* #ifdef APP-NVUE || APP-PLUS */
  border-top-color: var(--uni-border-color, #e5e5e5);
  border-top-style: solid;
  border-top-width: 0.5px;
  border-bottom-color: var(--uni-border-color, #e5e5e5);
  border-bottom-style: solid;
  border-bottom-width: 0.5px;
  /* #endif */
  z-index: -1;
}
/* #ifndef APP-NVUE */
.uni-list--border-top {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 1px;
  -webkit-transform: scaleY(0.5);
  transform: scaleY(0.5);
  background-color: var(--uni-border-color, #e5e5e5);
  z-index: 1;
}
.uni-list--border-bottom {
  position: absolute;
  bottom: 0;
  right: 0;
  left: 0;
  height: 1px;
  -webkit-transform: scaleY(0.5);
  transform: scaleY(0.5);
  background-color: var(--uni-border-color, #e5e5e5);
}
/* #endif */
</style>
