<template>
  <view>
    <mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback" :down="downOption"
      :up="upOption">
      <view @tap="jump(item.id)"  
        class="bg-white mt-base px-base pb-rowLg" v-for="(item,index) in dataList" :key="index">
        <view class="flex justify-between items-center py-base border-b border-txBorder">
          <view class="text-lg text-txBase">包裹{{index+1}} {{item.state|LogisticsText}}</view>
          <u-icon color="#808080" name="arrow-right" size="38"></u-icon>
        </view>
        <view class="mt-base text-txBase text-lg">物流公司：{{item.shipping_company}}</view>
        <view class="line-1 w-full text-txBase text-lg">最新进度：{{item.last_news?item.last_news:'暂无最新进度'}}</view>
      </view>
    </mescroll-body>
  </view>
</template>

<script>
  import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
  export default {
    mixins: [MescrollMixin],
    data() {
      return {
        downOption: {
          auto: true,
        },
        upOption: {
          use: false,
        },
        id: '',
        dataList: [], //获取到的数据
      };
    },
    onLoad({
      id
    }) {
      this.id = id
    },
    methods: {
      //跳转到物流详情
      jump(e){
        this.$u.route('/pages/logistics_information/index', { id:e })
      },
      downCallback() {
        this.loadData();
        this.dataList = []
      },
      loadData() {
        this.$api.get(`/v1/order/orders/${this.id}/packages`, {}).then(res => {
          this.mescroll.endSuccess(res.length)
          this.dataList = res
        }).catch(err => {
          this.mescroll.endErr()
        })
      },
    }
  }
</script>

<style lang="scss">

</style>
