<template>
  <view class="list-warp">
    <view class="top-warp">
      <slot name="top"></slot>
    </view>
    <view class="center-warp">
      <mescroll-uni
        :fixed="false"
        ref="mescrollRef"
        @init="mescrollInit"
        @down="downCallback"
        @up="upCallback"
        @emptyclick="emptyclick"
        :up="upOption"
        :down="downOption"
      >
        <slot name="list"></slot>
      </mescroll-uni>
    </view>
    <view class="bottom-warp">
      <slot name="bottom"></slot>
    </view>
  </view>
</template>

<script>
// mescroll-uni本质是scroll-view,支持局部区域滚动,可使用flex布局灵活的嵌在某个view中, 而mescroll-body只能靠fixed定位其他元素变相实现'局部滚动'
import MescrollMixin from '../../components/mescroll-uni/mescroll-mixins.js';
import scrollMixins from './mixins/scrollMixins';
/**
 * list-wrap 列表组件 基于 mescroll-uni 二次封装
 * @description 本组件一般用于展示列表的地方，自带上滑 下拉回调 列表为空显示
 * @property {String} emptyText 列表为空文字
 * @property {String} emptyIcon 列表为空图片
 * @event {Function} up
 * @event {Function} down
 * @slot {String} top 自定义列表头部区域
 * @slot {String} list 自定义中间列表区域
 * @slot {String} bottom 自定义列表底部区域
 * @example <list-wrap ref="listWrapRef" :empty="empty" @down="downCallback" @up="upCallback" @emptyclick="handleEmptyClick"></list-wrap>
 */

export default {
  name: 'yi-list-wrap',
  mixins: [MescrollMixin, scrollMixins], // 使用mixin (在main.js注册全局组件)
  props: {
    // 列表为空配置
    empty: {
      type: Object,
      default: () => null,
    },
  },
  watch: {
    empty: {
      immediate: true,
      // deep: true,
      handler: function (v) {
        if (v) {
          // console.log('%c [watch empty]: ', 'color:#1989fa;', this.upOption, this.empty);
          if (this.empty?.tip) {
            this.upOption.empty.tip = this.empty.tip;
          }
          if (this.empty?.icon) {
            this.upOption.empty.icon = this.empty.icon;
          }
        }
      },
    },
  },
  methods: {
    downCallback(mescroll) {
      // console.log('%c [downCallback]: ', 'color:#1989fa;', mescroll);
      this.$emit('down', mescroll);
    },
    upCallback(mescroll) {
      // console.log('%c [upCallback]: ', 'color:#1989fa;', mescroll);
      this.$emit('up', mescroll);
    },
    emptyclick(mescroll) {
      // console.log('%c [emptyclick]: ', 'color:#1989fa;', mescroll);
      this.$emit('emptyclick', mescroll);
    },
  },
};
</script>

<style lang="scss">
.list-warp {
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;

  /* 顶部区域 */
  .top-warp {
    font-size: 28rpx;
    //padding-left: 20rpx;
    //padding-right: 20rpx;
    text-align: center;
    background-color: #fff;
    border-bottom: 1rpx solid #eee;

    .slot-content {
      background-color: #fff;
      padding: 20rpx;
    }
  }

  /* 中间 */
  .center-warp {
    flex: 1;
    min-width: 0;
    min-height: 0; /* 需给flex:1的元素加上最小高,否则内容超过会溢出容器 (如:小程序Android真机) */
    padding: 20rpx;
  }

  /* 底部区域 */
  .bottom-warp {
    //padding: 20rpx;
    text-align: center;
    background-color: #fff;
  }
}
</style>
