<template>
	<view class="tabs">
		<scroll-view class="tabs-header" :scroll-left="scrollWdith" scroll-with-animation :scroll-x="true" :style="{ top: top + 'px', background: data.background_color ? data.background_color : '#fff' }">
			<view class="tabs-scroll-box flex">
				<view class="tab-item" :class="[{ active: index === selectd }, 'tab-item-' + index]" :id="'tab-item-' + index" v-for="(item, index) in data.list" @click="onSelected(index)" :key="index">{{ item.title }}
					<view class="tab-line" v-if="selectd === index"></view>
				</view>
			</view>
		</scroll-view>
		<view class="tabs-content" :class="{ 'tabs-content-active': active }">
			<view v-for="(item, index) in data.list">
				<view class="tabs-content-item" v-show="selectd == index" :key="index">
					<mall-archives :data="getItem"></mall-archives>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import { computed,ref,onMounted,nextTick,getCurrentInstance } from "vue";
	
	const props = defineProps({
		data: {
			type: Object,
			default: function() {
				return {};
			}
		}
	});
	
	const active 		= ref(false);
	const selectd 		= ref(0);
	const scrollWdith 	= ref(0);
	const halfWidth 	= ref(null);
	
	const top = computed(()=>{
		return 0;
	});
	
	const getItem = computed(()=>{
		let array = [];
		let result = props.data.list[selectd.value].list;
		if(result.length > 0) array = result;
		return {
			list: array,
			background_color: props.data.background_color,
			card_style: props.data.card_style,
			chamfer_style: props.data.chamfer_style,
			is_button: props.data.is_button,
			is_price: props.data.is_price,
			is_title: props.data.is_title,
			list_style: props.data.list_style,
			margin: props.data.margin,
			padding: props.data.padding,
			spacing: props.data.spacing
		};
	});
	
	onMounted(()=>{
		nextTick(()=>{
			getElRect('tabs-header').then(res => {
			  halfWidth.value = res.width / 2;
			});
			
			for(let i = 0; i < props.data.list.length; i++) {
			  getElRect('tab-item-' + i).then(res => {
			      props.data.list[i].rect = res;
			  });
			}
		});
	});
	
	const onSelected = (active)=>{
		selectd.value = active;
	}
	
	const getElRect = (elClass)=>{
	  return new Promise(resolve => {
		  let instance = getCurrentInstance();
	    const query = uni.createSelectorQuery().in(instance);
	    query
	      .select('.' + elClass)
	      .boundingClientRect(res => {
	        if (!res) {
	          setTimeout(() => {
	            getElRect(elClass);
	          }, 10);
	          return;
	        }
	        resolve(res);
	      }).exec();
	  });
	}
	
</script>

<style lang="scss" scoped>
.tabs {
  .tabs-header {
    position: -webkit-sticky;
    position: sticky;
    z-index: 1;
    top: var(--window-top);
    white-space: nowrap;
    overflow: hidden;
    padding-right: 20rpx;
    width: 750rpx;
    .tabs-scroll-box {
      width: 750rpx;
      height: 88rpx;
      .tab-item {
        font-size: 28rpx;
        font-weight: 500;
        color: #666666;
        line-height: 88rpx;
        padding: 0 30rpx;
        position: relative;
		display: inline-block;
        .tab-line {
          position: absolute;
          width: 35rpx;
          height: 4rpx;
          background: #000000;
          left: 50%;
          bottom: 12rpx;
		  transform: translateX(-50%);
        }
      }
      .tab-item.active {
        color: #e60b30;
        .tab-line {
          position: absolute;
          width: 35rpx;
          height: 4rpx;
          background: #e60b30;
          left: 50%;
          bottom: 12rpx;
		  transform: translateX(-50%);
        }
      }
    }
  }

  .tabs-content-active {
    position: relative;

    .tabs-content-shade {
      position: absolute;
      display: block;
    }
  }
}
</style>