<template>
	<view class="rubik">
		<view class="rubik-list" :style="{ 'padding-left': data.padding_horizontal + 'px', 'padding-right': data.padding_horizontal + 'px', 'padding-top': data.padding_vertical + 'px', 'padding-bottom': data.padding_vertical + 'px' }">
		  <template v-if="data.style == 1">
			<image v-if="data.list[0].image" lazy-load class="item-1" style="width: 100%" :style="{ 'border-radius': data.border_radius + 'px' }" :src="data.list[0].image" mode="widthFix" @click="jump(data.list[0].link)"></image>
		  </template>

		  <!-- 第二种布局 -->
		  <view class="item-2" v-if="data.style == 2">
			<view class="item-image" style="width: 50%">
			  <image v-if="data.list[0].image" lazy-load style="width: 100%; height: 100%" :src="data.list[0].image" mode="widthFix" @click="jump(data.list[0].link)"></image>
			</view>
			<view class="item-image" style="width: 50%">
			  <image v-if="data.list[1].image" lazy-load style="width: 100%; height: 100%" :src="data.list[1].image" mode="widthFix" @click="jump(data.list[1].link)"></image>
			</view>
		  </view>

		  <!-- 第三种布局 -->
		  <view class="item-3" v-if="data.style == 3">
			<view class="item-image" style="width: 33.333%">
			  <image v-if="data.list[0].image" lazy-load style="width: 100%; height: 100%" :src="data.list[0].image" mode="widthFix" @click="jump(data.list[0].link)"></image>
			</view>
			<view class="item-image" style="width: 33.333%">
			  <image v-if="data.list[1].image" lazy-load style="width: 100%; height: 100%" :src="data.list[1].image" mode="widthFix" @click="jump(data.list[1].link)"></image>
			</view>
			<view class="item-image" style="width: 33.333%">
			  <image v-if="data.list[2].image" lazy-load style="width: 100%; height: 100%" :src="data.list[2].image" mode="widthFix" @click="jump(data.list[2].link)"></image>
			</view>
		  </view>

		  <!-- 第四种布局 -->
		  <view class="item-4" v-if="data.style == 4">
			<view class="item-image" :style="{ width: '50%', height: '375rpx', top: 0, left: 0 }">
			  <image v-if="data.list[0].image" lazy-load style="width: 50%; height: 375rpx;" :src="data.list[0].image" mode="scaleToFill" @click="jump(data.list[0].link)"></image>
			</view>
			<view class="item-image" :style="{ width: '50%', height: '188rpx', top: 0, left: '375rpx' }">
			  <image v-if="data.list[1].image" lazy-load style="width: 50%; height: 188rpx" :src="data.list[1].image" mode="scaleToFill" @click="jump(data.list[1].link)"></image>
			</view>
			<view class="item-image" :style="{ width: '50%', height: '188rpx', top: '188rpx', left: '375rpx' }">
			  <image v-if="data.list[2].image" lazy-load style="width: 50%; height: 188rpx" :src="data.list[2].image" mode="scaleToFill" @click="jump(data.list[2].link)"></image>
			</view>
		  </view>

		  <!-- 第五种布局 -->
		  <view class="item-5" v-if="data.style == 5">
			<view class="item-image" style="width: 25%">
			  <image v-if="data.list[0].image" style="width: 100%; height: 188rpx" :src="data.list[0].image" mode="widthFix" @click="jump(data.list[0].link)"></image>
			</view>
			<view class="item-image" style="width: 25%">
			  <image v-if="data.list[1].image" style="width: 100%; height: 188rpx" :src="data.list[1].image" mode="widthFix" @click="jump(data.list[1].link)"></image>
			</view>
			<view class="item-image" style="width: 25%">
			  <image v-if="data.list[2].image" style="width: 100%; height: 188rpx" :src="data.list[2].image" mode="widthFix" @click="jump(data.list[2].link)"></image>
			</view>
			<view class="item-image" style="width: 25%">
			  <image v-if="data.list[3].image" style="width: 100%; height: 188rpx" :src="data.list[3].image" mode="widthFix" @click="jump(data.list[3].link)"></image>
			</view>
		  </view>

		  <!-- 第六种布局 -->
		  <view class="item-6" v-if="data.style == 6">
			<view class="item-image" :style="{ width: '50%', height: '188rpx', top: 0, left: 0 }">
			  <image v-if="data.list[0].image" lazy-load style="width: 100%; height: 100%" :src="data.list[0].image" mode="aspectFill" @click="jump(data.list[0].link)"></image>
			</view>
			<view class="item-image" :style="{ width: '50%', height: '188rpx', top: '188rpx', left: 0 }">
			  <image v-if="data.list[1].image" lazy-load style="width: 100%; height: 100%" :src="data.list[1].image" mode="aspectFill" @click="jump(data.list[1].link)"></image>
			</view>
			<view class="item-image" :style="{ width: '50%', height: '188rpx', top: 0, left: '50%' }">
			  <image v-if="data.list[2].image" lazy-load style="width: 100%; height: 100%" :src="data.list[2].image" mode="aspectFill" @click="jump(data.list[2].link)"></image>
			</view>
			<view class="item-image" :style="{ width: '50%', height: '188rpx', top: '188rpx', left: '50%' }">
			  <image v-if="data.list[3].image" lazy-load style="width: 100%; height: 100%" :src="data.list[3].image" mode="aspectFill" @click="jump(data.list[3].link)"></image>
			</view>
		  </view>
		</view>
	</view>
</template>

<script setup>
	import { navigateTo } from "@/el-ui/libs/navigate";
	
	const props = defineProps({
		top: {
			type: Number,
			default: function() {
				return 0;
			}
		},
		data: {
			type: Object,
			default: function() {
				return {};
			}
		}
	});
	
	const jump = (value)=>{
		navigateTo(value.path);
	}
	
</script>

<style lang="scss">
.rubik {
  overflow: hidden;
  position: relative;
}

.rubik-cube {
  position: relative;
  width: 750px;
  height: 750px;
  font-size: 28px;

  .rubik-cube__item {
    position: absolute;
  }
}

.rubik-list {
  user-select: none;
  font-size: 12px;
  margin-bottom: -4px;

  .item-1 {
    position: relative;
    text-align: center;
    font-weight: 400;
    color: #8c8c8c;
    width: 750px;
    margin-bottom: -2px;

    .item-tips {
      width: 750px;
      height: 750px;
      line-height: 750px;
      background: #f7f5fe;
    }

    image {
      width: 100%;
      height: auto;
    }
  }

  .item-2 {
    position: relative;
    width: 100%;
    display: flex;

    .item-image {
      margin-bottom: -2px;
      flex: 1 1 auto;
      width: 375px;

      &:first-child .item-tips {
        border-right: 0;
      }

      image {
        width: 100%;
        height: auto;
      }
    }
  }

  .item-3 {
    position: relative;
    width: 100%;
    display: flex;

    .item-image {
      margin-bottom: -2px;

      flex: 1 1 1;
      width: 250px;

      image {
        width: 100%;
        height: auto;
      }
    }
  }

  .item-4 {
    position: relative;
    width: 750px;
    height: 375px;

    .item-image {
      margin-bottom: -2px;

      position: absolute;
      width: 100%;
      height: 100%;

      image {
        width: 100%;
        height: 100%;
      }
    }
  }

  .item-5 {
    position: relative;
    width: 100%;
    display: flex;

    .item-image {
      margin-bottom: -2px;
      margin-right: -2px;
      flex: 1;
      width: 187.5px;

      image {
        width: 100%;
        height: auto;
      }
    }
  }

  .item-6 {
    position: relative;
    width: 100%;
    height: 376px;

    .item-image {
      margin-bottom: -2px;

      position: absolute;
    }
  }
}
</style>