<template>
	<view class="">
		<navBar title="商城" :back="false" color="black" flex="cen" background="#fff" />

		<view class="searchAndTab">
			<view class="searchBox">
				<u-search shape="round" :showAction="false" v-model="searchKey"></u-search>
			</view>
			<u-sticky bgColor="#fff" v-if="!searchKey">
				<u-tabs :list="list1" :scrollable="true" :activeStyle='activeStyle' :inactiveStyle="inactiveStyle"
					@change="change"></u-tabs>
			</u-sticky>
		</view>


		<view class="content" v-if="searchKey" style="margin-top: 140rpx;">
			<view class="rightDes">
				<view class="item" v-for="(item,index) in allTypes" :style="{marginTop:index>0?'22rpx':''}">
					<view class="top" @click="toList(item,allTypesValues[index])">
						<view class="name">
							{{allTypesValues[index]}}
						</view>
						<image src="/static/index/more.png" mode=""
							style="width: 40rpx;height: 40rpx;margin-right: 4rpx;">
						</image>
					</view>
					<view class="bottom">
						<image @click="goDetail(item1)" :src="picBase+item1.cover" mode="" style="" class="img"
							v-for="(item1,index) in resList[item]">
						</image>
					</view>
				</view>
			</view>
		</view>

		<view class="content" v-else style="margin-top: 190rpx;">
			<view class="leftMenu">
				<view class="item" v-for="(item,index) in list2" :class="[index==currBrandIndex?'act':'']"
					@click=" change2(item,index)">
					<text style="position: relative;z-index: 1;">{{item.title}}</text>
					<image v-if="index==currBrandIndex" class="halfCircle" :src="picUrl+'/static/mall/circle.png'"
						mode="" style="width: 30rpx;height: 30rpx;">
					</image>
				</view>
			</view>
			<view class="rightDes">
				<view class="item" v-for="(item,index) in allTypes" :style="{marginTop:index>0?'22rpx':''}">
					<view class="top" @click="toList(item,allTypesValues[index])">
						<view class="name">
							{{allTypesValues[index]}}
						</view>
						<image src="/static/index/more.png" mode=""
							style="width: 40rpx;height: 40rpx;margin-right: 4rpx;">
						</image>
					</view>
					<view class="bottom">
						<image @click="goDetail(item1)" :src="picBase+item1.cover" mode="" style="" class="img"
							v-for="(item1,index) in resList[item]">
						</image>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import classifyData from '@/common/classify.data.js';

	import {
		getMallCatReq,
		getMallReq,
	} from '@/api/test/index.js'
	export default {
		data() {
			return {
				searchKey: '',

				picUrl: this.$picUrl,
				picBase: this.$picBase,

				currBrandIndex: 0,
				list1: [{
						name: '无主灯',
					},
					{
						name: '主灯',
					}, {
						name: '开关插座'
					},
					{
						name: '智能家装',
					}, {
						name: '智能锁'
					},
				],
				list2: [],
				activeStyle: {
					color: '#F7790C'
				},
				inactiveStyle: {
					color: '#080F18'
				},

				selTab: {
					type: 1,
					brand: 7
				},
				resList: [],

				allTypes: [],
				allTypesValues: []

			};
		},
		created() {

		},
		async onLoad() {
			let res = await getMallCatReq()
			if (res.code == 0) {
				console.log('获取商城分类数据返回值: ', res);
				let rlist = []
				res.data.classify.forEach((item, index) => {
					rlist.push({
						name: item.title,
						id: item.id,
						type: item.type
					})
				})
				this.list1 = rlist
				this.list2 = res.data.brand

				this.selTab.type = res.data.classify[0].id
				this.selTab.brand = res.data.brand[0].id

				this.getMall(this.selTab.type, this.selTab.brand)
			} else {
				uni.showToast({
					title: res.message,
					icon: 'none'
				})
			}
		},
		onReady() {

		},
		methods: {
			async getMall(type, brand) {
				let res = await getMallReq({
					// page: 1,
					type,
					brand,
				})
				if (res.code == 0) {
					console.log('获取商城数据返回值: ', res);
					this.allTypes = Object.keys(res.data.typeName)
					this.allTypesValues = Object.values(res.data.typeName)
					this.resList = res.data
					console.log('获取商城数据返回值列表: ', this.resList, this.allTypes, this.allTypesValues, this.typesList);
				} else {
					uni.showToast({
						title: res.message,
						icon: 'none'
					})
				}
			},
			async getMall2(search) {
				let res = await getMallReq({
					// page: 1,
					search,
				})
				if (res.code == 0) {
					console.log('获取商城数据返回值2: ', res);
					this.allTypes = Object.keys(res.data.typeName)
					this.allTypesValues = Object.values(res.data.typeName)
					this.resList = res.data
					console.log('获取商城数据返回值列表2: ', this.resList, this.allTypes, this.allTypesValues, this.typesList);
				} else {
					uni.showToast({
						title: res.message,
						icon: 'none'
					})
				}
			},

			change(e) {
				this.selTab.type = e.id
			},
			change2(item, index) {
				this.currBrandIndex = index
				this.selTab.brand = item.id
			},

			toList(id, name) {
				uni.navigateTo({
					url: '/pages/mall/goodsList/index?typeNameId=' + id + '&name=' + name + '&brand=' + this.selTab
						.brand + '&type=' + this.selTab.type
				})
			},
			goDetail(item) {
				// console.log('item');
				uni.navigateTo({
					url: '/pages/mall/detail/index?item=' + JSON.stringify(item)
				})
			}
		},
		watch: {
			searchKey(n, o) {
				if (!n) {
					this.selTab = {
						type: 1,
						brand: 7
					}
					this.currBrandIndex = 0
					return
				}
				setTimeout(() => {
					this.getMall2(n)
				}, 1000)
			},
			selTab: {
				handler(n, o) {
					console.log('n, o', n);
					this.getMall(n.type, n.brand)
				},
				// immediate: true,
				deep: true
			}
		},
		components: {}
	};
</script>

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