<template>
  <div>
    <div class="content">
      <!-- 收件 -->
      <div
        class="batch_box"
        @scroll.passive="getScroll($event)"
        style=" height: calc(100vh );overflow-y: auto;"
      >
        <van-pull-refresh v-model="refreshLoading" @refresh="onRefresh">
          <div class="sjlist" v-for="item in expressList">
            <div class="listinfo">
              <div class="list_top" @click="mailDetail(item)">
                <div class="list_top_left">
                  <span class="iconfont icon-dizhibao iconStyle"></span>
                  <!-- <img src="../assets/images/ad_icon1.png" alt="" /> -->
                  <div>
                    <p>寄件号：{{ item.dispatchNo }}</p>
                    <p>手机号：{{ item.phone }}</p>
                    <p>收件人：{{ item.recipient }}</p>
                    <p>创建时间&nbsp：{{ item.recordDate }}</p>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <template v-if="!refreshLoading && expressList.length > 0">
            <div class="bottom_text" v-if="loading">
              加载中...
            </div>
            <div class="bottom_text" v-else-if="noData">
              已经到底啦...
            </div>
          </template>
          <template v-if="expressList.length === 0">
            <div class="bottom_text">数据为空！</div>
          </template>
        </van-pull-refresh>
      </div>
    </div>
  </div>
</template>

<script>
import { Toast, Dialog } from "vant";
import { getExpressByUser } from "../api/index";
import ScrollRefresh from "../components/ScrollRefresh.vue";
export default {
  components: {
    ScrollRefresh
  },
  data() {
    return {
      titlename: "我的收件",
      expressList: [],
      pageSize: {
        page: 1,
        limit: 10
      },
      refreshLoading: false, // 刷新loading
      noData: false // 没有更多数据
    };
  },
  created: function() {
    this.expressListAPI();
  },
  methods: {
    // 刷新
    async onRefresh() {
      this.pageSize.page = 1;
      this.pageSize.limit = 10;
      this.refreshLoading = true;
      await this.expressListAPI(true);
      this.refreshLoading = false;
    },
    // 滚动事件
    getScroll(event) {
      let scrollBottom =
        event.target.scrollHeight -
        event.target.scrollTop -
        event.target.clientHeight;
      // 距离底部20px以内 && 还有数据 && 没有正在加载中
      if (scrollBottom <= 20 && !this.noData && !this.loading) {
        this.pageSize.page += 1;
        this.expressListAPI();
      }
    },
    // 获取数据
    async expressListAPI(isClear) {
      this.loading = true;
      Toast.loading({
        message: "加载中...",
        forbidClick: true,
        duration: 0
      });
      const res = await getExpressByUser({ ...this.pageSize });
      let expressListA = res.data;
      Toast.clear();

      if (isClear) {
        this.expressList = expressListA;
      } else {
        this.expressList.push(...expressListA);
      }

      this.loading = false;
      if (this.pageSize.page * this.pageSize.limit >= res.count) {
        this.noData = true;
      } else {
        this.noData = false;
      }
    },
    mailDetail(item) {
      console.log(item, "item========");
      this.$router.push({ path: "/ExpressExpress", query: { item: item } });
    }
  }
};
</script>

<style lang="less" scoped>
.whrite_add {
  width: 6.6rem;
  padding: 0.4rem 0.2rem;

  /deep/.van-field__value {
    input {
      text-align: right;
    }
  }

  /deep/.van-popup__close-icon--top-right {
    top: 5px;
    right: 10px;
  }
}

.content {
  .tab {
    font-size: 0.36rem;
    color: #0c2469;
    padding: 0.2rem 0rem;

    div {
      display: flex;
      border: 0.01rem solid #0c2469;
      text-align: center;
      border-radius: 0.05rem;

      p {
        flex: 1;
        padding: 0.1rem 0rem;
      }

      p.active {
        background: #0c2469;
        color: white;
      }
    }
  }

  .sjlist {
    font-size: 0.3rem;
    color: #999999;
    padding: 0rem 0.33rem;

    .listinfo {
      background: white;
      padding: 0.33rem 0.33rem 0.2rem;
      border-radius: 0.05rem;
      margin-bottom: 0.2rem;

      .list_top {
        display: flex;
        justify-content: space-between;
        align-items: center;

        .list_top_left {
          display: flex;
          justify-content: space-between;
          align-items: center;
          .iconStyle {
            color: #0c2469;
            font-size: 1rem;
            margin: 0 0.2rem;
            // width: 0.9rem;
            // height: 0.9rem;
          }


          div {
            margin-left: 0.2rem;
            display: inline-block;
            line-height: 150%;

            p:nth-of-type(1) {
              font-weight: bold;
              color: #333;
            }

            p:nth-of-type(2) {
              color: #333;
            }

            p:nth-of-type(3) {
              color: #333;
            }

            p:nth-of-type(4) {
              font-size: 0.22rem;
              color: #333;

              span {
                width: 0.37rem;
                height: 0.37rem;
                color: white;
                border-radius: 50%;
                background: #cc9a09;
                display: inline-block;
                text-align: center;
                line-height: 0.37rem;
                margin-right: 0.1rem;
              }
            }
          }
        }

        > p {
          font-size: 0.24rem;
          color: #f5693d;
          font-weight: bold;
        }
      }

      .list_bot {
        text-align: right;
        border-top: 0.01rem solid #ededed;
        padding-top: 0.2rem;

        p {
          display: inline-block;
          font-size: 0.24rem;
          padding: 0.16rem 0.4rem;
          border-radius: 0.05rem;
        }

        p:nth-of-type(1) {
          border: 0.01rem solid #263fbf;
          color: #263fbf;
        }

        p:nth-of-type(2) {
          border: 0.01rem solid #408cc7;
          color: #408cc7;
        }

        p:nth-of-type(3) {
          border: 0.01rem solid #d5a43c;
          color: #d5a43c;
        }

        p:nth-of-type(4) {
          border: 0.01rem solid #e24444;
          color: #e24444;
        }
      }
    }
  }
}

.bottom_text {
  font-size: 16px;
  color: #969799;
  text-align: center;
  margin-top: 20px;
}
</style>
