<template>
	<view class='recommend'>
		<view class="common-hd" v-if="list.length>0">
			<image src="https://lihai001.oss-cn-chengdu.aliyuncs.com/def/137f4202403091116454932.webp" mode=""></image>
		</view>

		<!-- nav导航 -->
		<view class="nav" v-if="showTab&&list.length>0">
			<view class="nav-item" @click="navTo('/pages/cloud_warehouse/home/home')">
				<view class="nav-item-up">
					<image src="https://lihai001.oss-cn-chengdu.aliyuncs.com/def/c72bf202403191713119980.webp" mode=""></image>
				</view>
				<view class="nav-item-down">
					<view class="nav-item-down-title">里海云仓</view>
					<view class="nav-item-down-desc">供销物资市场</view>
				</view>
			</view>
			<view class="nav-item" @click="navTo('/pages/cloud_warehouse/market/market')">
				<view class="nav-item-up">
					<image src="https://lihai001.oss-cn-chengdu.aliyuncs.com/def/de539202403191713558109.webp" mode=""></image>
				</view>
				<view class="nav-item-down">
					<view class="nav-item-down-title">供销云市场</view>
					<view class="nav-item-down-desc">综合线上大市场</view>
				</view>
			</view>
			<view class="nav-item" @click="navTo('/pages/cloud_warehouse/specialty/specialty')">
				<view class="nav-item-up">
					<image src="https://lihai001.oss-cn-chengdu.aliyuncs.com/def/81f8a202403191714238972.webp" mode=""></image>
				</view>
				<view class="nav-item-down">
					<view class="nav-item-down-title">名优特产</view>
					<view class="nav-item-down-desc">地方特色特产</view>
				</view>
			</view>
		</view>
    
    <!-- 资讯 -->
    <view v-if="showTab&&list.length>0" @click="navTo('/pages/news_list/index?type=20')" style="display: flex;justify-content: space-between;padding-bottom: 20rpx;font-size: 26rpx;color: #999999;height: 70rpx;align-items: center;">
      <view style="font-size: 28rpx;background-color: #40ae36;color: #fff;padding: 4rpx 16rpx 6rpx 16rpx;border-radius: 90rpx;">里海新闻</view>
      <view style="display: flex;">更多<u-icon name="arrow-right" size="12" color="#999"></u-icon></view>
    </view>
    <view class="information" v-if="showTab&&list.length>0">
    	<scroll-view scroll-x style="height: 230rpx;width: 700rpx;white-space: nowrap;">
        <view class="nav-item" style="display: inline-block;margin-right: 16rpx;" @click="navTo(`/pages/news_details/index?id=${item.article_id}`)" v-for="(item, index) in list" :key="item.article_id">
        	<view class="nav-item-up" style="overflow: hidden;">
        		<image :src="item.image_input" mode="aspectFill"></image>
        	</view>
        	<view class="nav-item-down">
        		<view class="nav-item-down-title">{{item.title}}</view>
        		<view class="nav-item-down-desc">{{item.synopsis}}</view>
        	</view>
        </view>
      </scroll-view>
    </view>

		<!-- tab导航 -->
		<view class="tabs" v-if="showTab">
			<block v-for="(item,indx) in tabsArr" :key="indx">
        <view v-if="indx>0" style="width: 3rpx;height: 36rpx;background-color: #ccc;"></view>
				<view :class="{'tabs-item-active':item.val==currTabs}" class="tabs-item" @click="changeTab(item.val)">
					<view class="tabs-item-main">{{item.name}}</view>
					<view class="tabs-item-sub">{{item.desc}}</view>
				</view>
			</block>
		</view>

		<view class='recommendList' :class="indexP?'on':''">
			<WaterfallsFlow v-if="hostProduct.length>0" :wfList='hostProduct' @itemTap="goDetail" :type="0" :sale_type="sale_type"/>
      <view class='pictrue' v-else>
      	<image :src="`${domain}/static/images/noCart.png`"></image>
      	<view>暂无商品，看点别的吧</view>
      </view>
		</view>
	</view>
</template>

<script>
	import {
		mapGetters
	} from "vuex";
	import {
		goShopDetail
	} from '@/libs/order.js'
	import {
		initiateAssistApi
	} from '@/api/activity.js';
	import {
		toLogin
	} from '@/libs/login.js';
  import {
    getArticleList 
  } from "@/api/api.js";
	import WaterfallsFlow from '@/components/WaterfallsFlow/WaterfallsFlow.vue'
	import {
		HTTP_REQUEST_URL
	} from '@/config/app';
  import { Toast } from "../../libs/uniApi";
	export default {
		components: {
			WaterfallsFlow
		},
		computed: mapGetters(['uid']),
		props: {
			hostProduct: {
				type: Array,
				default: function() {
					return [];
				}
			},
      showTab: {
        type: Boolean,
        default: false
      },
			indexP: {
				type: Boolean,
				default: false
			},
			isLogin: {
				type: Boolean,
				default: false
			},
      sale_type:{
        type: [Number, String],
        default: 1
      }
		},
		data() {
			return {
				domain: HTTP_REQUEST_URL,
				tabsArr: [{
					name: '全部',
					desc: '本地商品',
					val: 1
				}, {
					name: '里海云仓',
					desc: '大家都在买',
					val: 2
				}, {
					name: '云市场',
					desc: '商户汇聚',
					val: 3
				}, {
					name: '名优特产',
					desc: '特色农副',
					val: 4
				}],
				currTabs: 1,
        list: []
			};
		},
		mounted() {
      this.getArticleList();
		},
		methods: {
			changeTab(e) {
				this.currTabs = e;
        this.$emit('changeRecommedTab', e)
			},
      navTo(url){
        uni.navigateTo({
          url: url,
          fail: () => {
            Toast('暂未开放')
          }
        })
      },
      getArticleList(){
        getArticleList(20,{
          page: 1,
          limit: 10
        }).then(res=>{
          this.list = res.data.list;
        })
      },
			goDetail(item) {
				goShopDetail(item, this.uid).then(res => {
					if (this.isLogin) {
						initiateAssistApi(item.activity_id).then(res => {
							let id = res.data.product_assist_set_id;
							uni.hideLoading();
							uni.navigateTo({
								url: '/pages/activity/assist_detail/index?id=' + id
							});
						}).catch((err) => {
							uni.showToast({
								title: err,
								icon: 'none'
							})
						});
					} else {
						toLogin();
					}
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.common-hd {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 90rpx;

		image {
			width: 340rpx;
			height: 42rpx;
		}

		.title {
			height: 42rpx;
			padding: 0 80rpx;
			font-size: 34rpx;
			color: $theme-color;
			font-weight: bold;
			background-repeat: no-repeat;
			background-size: 100% auto;
			background-position: left center;
		}
	}

	// 里海云仓 供销云市场 名优特产
	.nav {
		display: flex;
    justify-content: space-between;
		margin-bottom: 20rpx;

		.nav-item {
			width: 227rpx;
			overflow: hidden;
			border-radius: 20rpx;

			.nav-item-up {
				width: 100%;
				height: 198rpx;

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

			.nav-item-down {
				height: 102rpx;
				padding: 12rpx 0 0 20rpx;
				box-sizing: border-box;
				background: linear-gradient(to right, #72BE53 0%, #46B03A 100%);

				.nav-item-down-title {
					margin-bottom: 4rpx;
					font-weight: 600;
					font-size: 30rpx;
					color: #FFFFFF;
				}

				.nav-item-down-desc {
					font-weight: 400;
					font-size: 24rpx;
					color: #FFFFFF;
				}
			}
		}
	}

	.tabs {
		display: flex;
		justify-content: space-between;
    align-items: center;
		margin: 0 -20rpx 30rpx;
    padding-top: 20rpx;

		.tabs-item {
			width: 23%;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;

			.tabs-item-main {
				font-weight: bold;
				font-size: 30rpx;
				color: #333;
				font-family: PingFangSC-Medium, PingFangSC-Medium;
			}

			.tabs-item-sub {
				font-size: 22rpx;
				color: #999;
			}
		}

		.tabs-item-active {
			.tabs-item-main {
				color: #40AE36;
			}

			.tabs-item-sub {
				padding: 0 12rpx;
				background-color: #40AE36;
				color: #fff;
				border-radius: 20rpx;
			}
		}
	}

	.recommend .recommendList {
		padding: 0 20rpx;
		min-height: 100rpx;
	}

	.recommend .recommendList.on {
		padding: 0;
	}

	/deep/.looming-gray {
		border-radius: 16rpx 16rpx 0 0;
	}
  
  .information{
    // display: flex;
    // justify-content: space-between;
    // margin-bottom: 20rpx;
    
    .nav-item {
    	width: 227rpx;
    	overflow: hidden;
    	border-radius: 20rpx;
      position: relative;
    
    
    	.nav-item-up {
    		width: 100%;
    		height: 227rpx;
    
    		image {
    			width: 100%;
    			height: 100%;
    		}
    	}
    
    	.nav-item-down {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 227rpx;
        padding: 8rpx 2rpx 8rpx 14rpx;
    		background: rgba(0, 0, 0, 0.4);
    
    		.nav-item-down-title {
    			font-weight: 500;
    			font-size: 26rpx;
    			color: #FFFFFF;
          text-overflow: ellipsis;
          white-space: nowrap;
          overflow: hidden;
    		}
    
    		.nav-item-down-desc {
    			font-size: 20rpx;
    			color: #FFFFFF;
          text-overflow: ellipsis;
          white-space: nowrap;
          overflow: hidden;
    		}
    	}
    }
  }
  .pictrue{
    display: flex;
    flex-direction: column;
    align-items: center;
    color: #999;
    image {
      width: 414rpx;
      height: 305rpx;
    }
  }
</style>