<template>
  <view class="p-40rpx">
     <loading-view v-if="isFirstLoading"></loading-view>
    <u-time-line>
      <u-time-line-item v-for="(item,index) in dataList" :key="index">
        <template v-slot:node >
          <image v-if="index==0" class="w-48rpx h-48rpx" src="/static/images/logistics/complete.png" mode=""></image>
          <view v-else class="u-node"></view>
        </template>
        <template v-slot:content>
          <view>
            <view class="u-order-title">{{item.name}}</view>
            <view class="u-order-desc">{{item.desc}}</view>
            <view class="grid grid-cols-3 gap-20rpx my-base" >
              <view v-for="(ite,inde) in item.images" :key="inde" class="relative w-full" style="padding-top: 100%;">
                <view class="img absolute left-0 top-0 w-full h-full">
                  <image class=" w-full h-full" :src="ite" mode=""></image>
                </view>
              </view> 
            </view>
            <view class="u-order-time">{{item.created_at}}</view>
          </view>
        </template>
      </u-time-line-item>
    </u-time-line>
  </view>
</template>
<script>
  export default {
    data() {
      return {
        isFirstLoading:true,
        dataList: [],
      };
    },
    onLoad({
      id
    }) {
      this.getDate(id);
    },
    methods: {
      async getDate(id) {
        try{
          let resDate = await this.$api.get(`/v1/after-sales/${id}/logs`);
          this.dataList = resDate;
        }catch(err){}finally{
          this.isFirstLoading=false
        }
      },
    },
  };
</script>
<style>
  page {
    background: #fff;
  }
</style>

<style lang="scss" scoped>
  .u-node {
    width: 15rpx;
    height: 15rpx;
    border-radius: 100rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #d0d0d0;
  }

  .u-order-title {
    color: #333333;
    font-weight: bold;
    font-size: 32rpx;
  }

  .u-order-desc {
    color: rgb(150, 150, 150);
    font-size: 28rpx;
    margin-bottom: 6rpx;
  }

  .u-order-time {
    color: rgb(200, 200, 200);
    font-size: 26rpx;
  }
   .img {
    width: 100%;
    height: 100%;
    border-radius: 8rpx;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
</style>
