<template>
	<view class="page">
		<view class="bg">
			<image src="/static/bg.jpg"></image>
		</view>
		<view class="back" @click="home">
			<image src="../../static/left.png"></image>
		</view>
		<pyh-nv ref="nv" :config="nvConfig"></pyh-nv>
		<view class="listBox" :style="{'padding-top':(pageTop+'px')}">
			<view class="content">
				<view class="search-index">
					<view class="search">
						<view class="iconfont">
							<image src="../../static/search.png"></image>
						</view>
						<text class="shu">|</text>
						<input type="text" placeholder="请输入关键词" />
					</view>
				</view>

				<!-- 分类数据 -->
				<view class="classify-data">
					<view class="classify-one">
						<scroll-view scroll-y class="classify-list">
							<!-- <view class="list action">
								<text>全部</text>
							</view> -->
							<view class="list" @click="dhxz(index,item.name)" :class="{ 'action': item.checked }" v-for="(item,index) in navigation" :key="index">
								<text>{{item.name}}</text>
							</view>
						</scroll-view>
					</view>
					<view class="classify-two-three">
						<scroll-view scroll-y class="scroll">
							<view class="goods-list" v-for="item in list">
								<view class="goods">
									<view class="thumb">
										<image :src="Baseapi + item.productImage" mode=""></image>
									</view>
									<view class="item">
										<view class="goods-name">
											<view class="goods-name-title">{{item.productName}}</view>
											<view>{{item.briefIntro}}</view>
										</view>
										<view class="status-btn" @click="mallgoods(item)">
											<view class="btn">
												<text>购买</text>
											</view>
										</view>
									</view>
								</view>
							</view>
						</scroll-view>
					</view>
				</view>

			</view>
		</view>
		<!-- tabbar -->
		<TabBar :tabBarShow="2"></TabBar>
	</view>
</template>

<script>
	import TabBar from '../../components/TabBar/TabBar.vue';
	export default {
		components: {
			TabBar
		},
		data() {
			return {
				Baseapi:"http://8.130.38.56:2015",
				nvConfig: {
					title: "殡葬公共服务",
					bgColor: "#ffffff",
					color: "#000000",
					fixedAssist: {
						hide: true,
					},
					transparent: {
						initColor: "#000",
					},
					back: {
						hide: true
					},
				},
				navigation:[
					{
						name:"全部",
						checked:true
					},
					{
						name:"分类一",
						checked:false
					},
					{
						name:"分类二",
						checked:false
					},
				],
				list:[],
				lists:[],
			};
		},
		onPageScroll(e) {
			this.$refs.nv.pageScroll(e)
		},
		computed: {
			pageTop() {
				return parseInt(88 * uni.getSystemInfoSync().windowWidth / 750) + uni.getSystemInfoSync().statusBarHeight
			}
		},
		onLoad() {
			uni.hideTabBar();
			this.getcpxq();
		},
		onshow(){
			this.getcpxq();
		},
		methods: {
			home() {
				uni.navigateTo({
					url: '/pages/home/home'
				})
			},
			mallgoods(item) {
				var info = JSON.stringify(item)
				uni.navigateTo({
					url: '/pages/mallgoods/mallgoods?info=' + info
				})
			},
			// 导航选择
			dhxz(index,name){
				console.log(index,name);
				this.list = []
				for(let i = 0;i < this.navigation.length;i++){
					if(index == i){
						this.navigation[i].checked = true
					}else{
						this.navigation[i].checked = false
					}
				}
				for(var i = 0;i < this.lists.length;i++){
					if(name == '全部'){
						this.list = this.lists 
						return
					}
					console.log(this.lists[i].productCategory,name);
					if(this.lists[i].productCategory == name){
						this.list.push(this.lists[i])
					}
				}
				
			},
			// 获取列表数据
			getcpxq(){
				this.API.getcpxq().then(res=>{
					console.log("列表数据",res);
					this.list = res.rows;
					this.lists = res.rows;
				})
			},
		}
	}
</script>

<style scoped lang="scss">
	@import 'mall.scss';
</style>
