<template>
  <view class="page">
    <u-navbar title="我的订单" :border-bottom="false" :background="bgc" title-color='#000' title-size='36'
      height='40'></u-navbar>
    <view class="card" v-for="(item, index) in computedList" :key="index">
      <view class="top_li">
        <view class="left">
          <image src="https://api.ccttiot.com/smartmeter/img/static/upPr9QBpmeFzYN2kXEJj" mode=""></image> 电单车
        </view>
        <view class="right">
          已完成 <view class="iconfont icon-xiangyou1"></view>
        </view>
      </view>
      <view class="info">
        时间：{{ item.createTime }}
      </view>
      <view class="info">
        时长：{{ item.duration }}
      </view>
      <view class="info">
        距离：2.1公里
      </view>
      <view class="price">
        {{item.totalFee}}元
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      bgc: {
        backgroundColor: "#fff",
      },
      list: []
    };
  },
  computed: {
    computedList() {
         return this.list.map(item => {
           const createTime = new Date(item.createTime);
           const payTime = new Date(item.payTime);
           const timeDifference = Math.abs(createTime - payTime);
   
           const hours = Math.floor(timeDifference / (1000 * 60 * 60));
           const minutes = Math.floor((timeDifference % (1000 * 60 * 60)) / (1000 * 60));
           const seconds = Math.floor((timeDifference % (1000 * 60)) / 1000);
   
           return {
             ...item,
             duration: `${minutes}分钟${seconds}秒`
           };
         });
       }
  },
  methods: {
    getuserInfo() {
      this.$u.get("/getAppInfo").then((res) => {
        if (res.code === 200) {
          this.userid = res.user.userId;
          this.getlist();
        } else {
          uni.showToast({
            title: '未登录，请登录后尝试',
            icon: 'none',
            duration: 2000
          });
        }
      });
    },
    getlist() {
      let data = {
        userId: this.userid,
        type: '1'
      };
      this.$u.get("/appVerify/order/list?", data).then((res) => {
        if (res.code === 200) {
          this.list = res.rows;
        } else {
          uni.showToast({
            title: '未登录，请登录后尝试',
            icon: 'none',
            duration: 2000
          });
        }
      });
    }
  },
  onShow() {
    this.getuserInfo();
  }
};
</script>

<style lang="scss">
.page {
  background-color: #fff;
}

.page .card {
  position: relative;
  width: 680rpx;
  background: #ffffff;
  box-shadow: 0rpx 10rpx 64rpx 0rpx rgba(0, 0, 0, 0.08);
  border-radius: 20rpx 20rpx 20rpx 20rpx;
  padding: 22rpx 28rpx;
  margin: 30rpx auto;
}

.page .card .price {
  position: absolute;
  right: 32rpx;
  top: 110rpx;
  font-weight: 500;
  font-size: 28rpx;
  color: #3d3d3d;
}

.page .card .top_li {
  margin-bottom: 16rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.page .card .top_li .left {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
}

.page .card .top_li .left image {
  margin-right: 18rpx;
  width: 42rpx;
  height: 42rpx;
}

.page .card .top_li .left {
  font-weight: 700;
  font-size: 32rpx;
  color: #3d3d3d;
}

.page .card .top_li .right {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  font-weight: 400;
  font-size: 24rpx;
  color: #808080;
}

.page .card .top_li .right .iconfont {
  font-size: 20rpx;
}

.page .card .info {
  margin-bottom: 12rpx;
  font-weight: 400;
  font-size: 24rpx;
  color: #808080;
}

.page .tip {
  margin-top: 52rpx;
  width: 100%;
  text-align: center;
  font-weight: 400;
  font-size: 28rpx;
  color: #808080;
  line-height: 38rpx;
}
</style>