<template>
  <view class="tryOn-ctn">
    <view class="title">试穿记录</view>
    <ul class="record-ul">
      <li
        class="record-li"
        v-for="(item, idx) in recordList"
        :key="item.id"
        @click="handleJump(item)"
      >
        <image :src="item.tryOnResultUrl" mode="widthFix" style="width: 100%" />
      </li>
    </ul>
  </view>
</template>

<script setup>
  import { reactive, ref } from 'vue';
  import sheep from '@/sheep';

  const props = defineProps({
    recordList: {
      type: Array,
      default: () => [],
    },
  });

  const handleJump = (item) => {
    uni.setStorageSync('tryOnId', item.id);
    uni.setStorageSync('modelId', item.modelId);
    uni.switchTab({
      url: `/pages/index/room`,
    });
  };
</script>

<style lang="scss" scoped>
  .tryOn-ctn {
    width: 100%;
    background: #fff;
    padding: 20rpx 0 100rpx 0;
    .title {
      width: 664rpx;
      height: 46rpx;
      line-height: 46rpx;
      color: #000;
      text-align: center;
      font-size: 24rpx;
      border-bottom: 1rpx solid #ccc;
      margin: 0 auto;
    }
    .record-ul {
      width: 100%;
      list-style: none;
      padding: 0;
      margin: 0;
      box-sizing: border-box;
      display: flex;
      flex-wrap: wrap;
      margin-top: 50rpx;
      .record-li {
        width: 25%;
        height: 272rpx;
        box-sizing: border-box;
        overflow: hidden;
        position: relative;

        &::after {
          content: '';
          position: absolute;
          top: 0;
          left: 0;
          width: 200%;
          height: 200%;
          border-right: 1px solid #000;
          border-bottom: 1px solid #000;
          transform: scale(0.5);
          transform-origin: 0 0;
          pointer-events: none;
          box-sizing: border-box;
        }
        &:nth-child(4n + 1)::after {
          border-left: 1px solid #000;
        }
        &:nth-child(1)::after,
        &:nth-child(2)::after,
        &:nth-child(3)::after,
        &:nth-child(4)::after {
          border-top: 1px solid #000;
        }
      }
    }
  }
</style>
