<template>
  <view class="screen_all relative">
    <view class="flat-list-absolute" >
      <!-- 加载模式 -->
      <view
          class="flat-list-all absolute center"
          :style="{
              'background-color': otherBackground || background
          }"
          v-if="start&&mode==='loading'&&state===1"
      >
        <view class="flat-load flat-load-animate" :style="{'border-color':loadingColor}"></view>
      </view>
      <!-- 视图为空 -->
      <view
          class="flat-list-all absolute flex"
          :style="{'background-color':otherBackground || background}"
          v-else-if="start&&state===3"
      >
        <!-- 头部 -->
        <slot name="header"></slot>
        <view class="flex-all-1 center">
          <slot name="empty" v-if="empty"></slot>
          <template v-else>
<!--            <icon type="warn" color="rgb(201, 201, 201)" size="80"></icon>-->
            <text class="flat-empty-text">{{emptyText}}</text>
          </template>
        </view>
        <!-- 最底部 -->
        <slot name="end-footer"></slot>

      </view>
      <!-- 网络错误 -->
      <view
          class="flat-list-all absolute flex"
          :style="{'background-color':otherBackground || background}"
          v-else-if="start&&state===4"
      >
        <!-- 头部 -->
        <slot name="header"></slot>
        <view class="flex-all-1 center">
          <slot name="fail" v-if="fail"></slot>
          <template v-else>
<!--            <icon type="info" color="red" size="80"></icon>-->
            <text @click="retry" data-type="1" class="flat-empty-text flat-fail-text">{{failText}}</text>
          </template>
        </view>
        <!-- 最底部 -->
        <slot name="end-footer"></slot>

      </view>
      <view class="screen_all flex">
        <view class="flex-all-1 overflow">
          <refresh-view
              @refresh="refreshHandle"
              @bottom="bottom"
              :refresh="refresh && !start"
              :paging="paging"
              :refresherBackground="refresherBackground || background"
              :background="background"
          >
            <view class="flat-list-wrap">
              <!-- 头部 -->
              <slot name="header"></slot>
              <view class="flex-1 relative flex-shrink-0">
                <!-- 默认展示的插槽 -->
                <view class="flex-1 relative flex-shrink-0 flat-list-slot">
                  <slot></slot>

                </view>
                <!-- 底部 -->
                <slot name="footer"></slot>
                <!-- 否则在首次加载完成之后触发 -->
                <view v-if="paging&&!start&&pagingStatus&&(state===3 && emptyPaging || state!==3)" class="flat-footer center">
                  <view v-if="state===3" class="flat-footer-text">{{emptyPaging}}</view>
                  <view v-else-if="state===4" data-type="5" @click="retry" class="flat-footer-text">{{failText}}</view>
                  <view v-else-if="state===1" class="flat-load flat-load-animate flat-small"></view>
                </view>

              </view>
            </view>
          </refresh-view>
        </view>
        <!-- 最底部 -->
        <slot name="end-footer"></slot>
      </view>

    </view>
  </view>
</template>

<script>
import props from "../props";
import mixins from '../mixins';
import refreshView from '@/components/refresh-view/main.vue';
export default {
  name: "flat-list",
  props,
  mixins,
  components:{
    refreshView
  }
}
</script>

<style scoped lang="scss" src="../style.scss"></style>