<template>
  <div>
    <div class="content">
      <van-tabs v-model="index" @click="tab">
        <van-tab title="外部件" :name="1"> </van-tab>
        <van-tab title="内部件" :name="2"> </van-tab>
      </van-tabs>

      <!-- 订单列表 -->
      <div
        class="batch_box"
        @scroll.passive="getScroll($event)"
        style=" height: calc(100vh - 44px);overflow-y: auto;"
      >
        <van-pull-refresh v-model="refreshLoading" @refresh="onRefresh">
          <div class="jjlist" v-for="item in mailList">
            <div class="listinfo" @click="mailDetail(item)">
              <div class="list_top">
                <span class="iconfont icon-dizhibao iconStyle"></span>
                <!-- <img src="../assets/images/ad_icon1.png" alt="" /> -->
                <div>
                  <p>
                    {{ item.type == 1 ? "快递单号" : "快件单号" }} ：{{
                      item.orderId
                    }}
                  </p>
                  <p>收件人：{{ item.name }}</p>
                  <p>手机号：{{ item.phone }}</p>
                  <p v-if="item.type == 1">
                    地&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp址：{{
                      item.province
                    }}
                    {{ item.city }} {{ item.county }}
                  </p>
                </div>
              </div>
            </div>
          </div>
          <template v-if="!refreshLoading && mailList.length > 0">
            <div class="bottom_text" v-if="loading">
              加载中...
            </div>
            <div class="bottom_text" v-else-if="noData">
              已经到底啦...
            </div>
          </template>
          <template v-if="mailList.length === 0">
            <div class="bottom_text">数据为空！</div>
          </template>
        </van-pull-refresh>
      </div>
    </div>
  </div>
</template>

<script>
import { Toast, Dialog } from "vant";
import { getListByUser } from "../api/index";
export default {
  data() {
    return {
      titlename: "我的寄件",
      expressType: "外部件",
      userId: "",
      mailList: [],
      index: 1,
      time: 1,
      value: "",
      timevalue: "请选择日期范围",
      showPicker: false,
      showPickertype: "year-month",
      minDate: new Date(2022, 0, 1),
      maxDate: new Date(),
      startTime: "",
      endTime: "",
      pageSize: {
        page: 1,
        limit: 10
      },
      refreshLoading: false, // 刷新loading
      noData: false // 没有更多数据
    };
  },
  created: function() {
    this.isLogin();
    this.userId = localStorage.getItem("userId");
    this.getmailList();
  },
  methods: {
    // 刷新
    async onRefresh() {
      this.pageSize.page = 1;
      this.pageSize.limit = 10;
      this.refreshLoading = true;
      await this.getmailList(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.getmailList();
      }
    },
    // 获取数据
    async getmailList(isClear) {
      this.loading = true;
      Toast.loading({
        message: "加载中...",
        forbidClick: true,
        duration: 0
      });
      let parmas = {
        expressNo: this.value,
        startTime: this.startTime,
        endTime: this.endTime,
        type: this.index
      };
      const res = await getListByUser({ ...this.pageSize, ...parmas });
      let expressListA = res.data;
      Toast.clear();

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

      this.loading = false;
      if (this.pageSize.page * this.pageSize.limit >= res.count) {
        this.noData = true;
      } else {
        this.noData = false;
      }
    },

    //寄件详情
    mailDetail(item) {
      this.$router.push({ path: "/MailInfo", query: { mailDetail: item } });
    },

    //寄件查询
    tab(obj) {
      //外部件、内部件切换
      this.index = obj;
      if (this.index == 1) {
        this.expressType = "外部件";
      }
      if (this.index == 2) {
        this.expressType = "内部件";
      }
      this.mailList = [];
      this.pageSize = {
        page: 1,
        limit: 10
      };
      this.getmailList();
    },
    changetime(obj) {
      //选择按月份、按天数
      this.time = obj;
      this.timevalue = "请选择";
      if (obj == 1) {
        //按月份时间选择器为年-月
        this.showPickertype = "year-month";
      }
      if (obj == 2) {
        //按天时间选择器为年-月-日
        this.showPickertype = "date";
      }
    },
    /* onConfirm(value){//时间确定
			let year,month,day
			let date=new Date(value)
			year=date.getFullYear()
			month=date.getMonth()+1>9?date.getMonth()+1:'0'+(date.getMonth()+1)
			
			if(this.time==1){
				this.timevalue=year+'-'+month
			}
			if(this.time==2){
				day=date.getDate()>9?date.getDate():'0'+date.getDate()
				this.timevalue=year+'-'+month+'-'+day
			}
			this.showPicker=false
		}, */
    onConfirm(values) {
      //时间确定
      const [start, end] = values;
      this.showPicker = false;
      this.startTime = this.formatDate(start);
      this.endTime = this.formatDate(end);
      this.timevalue = this.startTime + "~" + this.endTime;
      this.getmailList();
    },
    formatDate(date) {
      let year, month, day;
      year = date.getFullYear();
      month =
        date.getMonth() + 1 > 9
          ? date.getMonth() + 1
          : "0" + (date.getMonth() + 1);
      day = date.getDate() > 9 ? date.getDate() : "0" + date.getDate();
      return year + "-" + month + "-" + day;
    }
  },
  computed: {}
};
</script>

<style lang="less" scoped="">
/deep/.van-tabs__line {
  background-color: #0c2469;
}
.content {
  font-size: 0.3rem;
  width: 100vw;
  //padding: .33rem;
  // padding: .33rem .33rem 1.2rem;

  /deep/.van-search {
    padding: 0px;
    margin-bottom: 0.3rem;

    .van-search__content {
      background: white;
    }
  }

  .tab {
    height: 40px;
    font-size: 0.36rem;
    color: #0c2469;
    // padding-bottom: .3rem;
    background: white;

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

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

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

  .jjlist {
    font-size: 0.3rem;
    color: #999999;

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

      .list_top {
        display: flex;
        justify-content: flex-start;
        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;
        }
      }

      .fast {
        background: url(../assets/images/status.png) no-repeat center;
        background-size: 100% 100%;
        color: white;
        position: absolute;
        bottom: 0px;
        right: 0px;
        width: 1rem;
        height: 0.4rem;
        text-align: center;
        line-height: 0.4rem;
        font-size: 0.2rem;
      }
    }
  }

  .change {
    color: #0c2469;
    margin-bottom: 0.3rem;
    padding: 0rem 0.3rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: white;
    padding-bottom: 0.3rem;

    .datapicker {
      color: #9f9d9d;
      font-size: 0.3rem;

      p:after {
        content: "";
        display: inline-block;
        margin-left: 0.1rem;
        width: 0.15rem;
        height: 0.15rem;
        border-right: 0.05rem solid #9f9d9d;
        border-bottom: 0.05rem solid #9f9d9d;
        transform: rotate(45deg);
        position: relative;
        top: -0.05rem;
      }
    }

    .time {
      width: 2rem;
      display: flex;
      border: 0.01rem solid #0c2469;
      text-align: center;
      border-radius: 0.05rem;
      font-size: 0.26rem;

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

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

  .logistics {
    background: white;
    border-radius: 0.1rem;
    padding: 0.15rem;
    margin-bottom: 0.3rem;

    .logistics_top {
      display: flex;
      align-items: center;

      img {
        width: 12px;
        height: 14px;
        margin-left: 0.1rem;
      }
    }

    .logistics_center {
      padding: 0.3rem 0.6rem;
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 0.26rem;
      color: #9f9d9d;

      div:nth-of-type(1) {
        text-align: center;

        p:nth-of-type(1) {
          font-size: 0.36rem;
          font-weight: bold;
          color: #333;
          margin-bottom: 0.2rem;
        }
      }

      div:nth-of-type(2) {
        text-align: center;
        color: #333;
        font-weight: bold;
      }

      div:nth-of-type(3) {
        text-align: center;

        p:nth-of-type(1) {
          font-size: 0.36rem;
          font-weight: bold;
          color: #333;
          margin-bottom: 0.2rem;
        }
      }
    }

    .logistics_bottom {
      color: #9f9d9d;
      font-size: 0.26rem;

      p {
        padding-top: 0.1rem;
      }
    }
  }
}

.bottom_text {
  color: #969799;
  text-align: center;
  padding-top: 10px;
}
</style>
