<template>
	<view class="cateGory">
		<view class="top">
			<image src="../../static/ic-back-false.png" mode="" @click="back"></image>
			<view class="search">
				<view class="tosear">
					<input type="text" value="" placeholder="搜索"
						placeholder-style="text-align: center;font-size: 28rpx; color: rgba(194,194,194,1);"
						v-model="keyword" @confirm="gosourch" />
					<image src="../../static/icon-search.png" mode="" v-if="!keyword"></image>
				</view>
			</view>
		</view>
		<view style="margin-top: 100rpx;">
			<u-index-list :index-list="indexList">
				<template v-for="(item, index) in itemArr">
					<!-- #ifdef APP-NVUE -->
					<u-index-anchor :text="indexList[index]"></u-index-anchor>
					<!-- #endif -->
					<u-index-item>
						<!-- #ifndef APP-NVUE -->
						<u-index-anchor :text="indexList[index]"></u-index-anchor>
						<!-- #endif -->
						<view class="list-cell" v-for="(cell, index) in item" @click="tolist(cell.id)">
							<image :src="cell.image_preview" mode=""></image>
							{{cell.name}}
						</view>
					</u-index-item>
				</template>
			</u-index-list>
		</view>

	</view>

</template>

<script>
	import {
		sort_all
	} from '@/api/index.js'
	export default {
		data() {
			return {
				indexList: [],
				itemArr: [],
				keyword: '',
			}
		},
		onLoad() {
			this.sort_all()
			let URL=window.location.href
			this.$wxH5Share.get_jssdk("分类",URL)
		},
		methods: {
			//返回
			back() {
				uni.redirectTo({
					url: "/pages/index/index"
				})
			},
			//搜索
			gosourch() {
				this.itemArr = []
				this.sort_all()
			},
			//跳转列表
			tolist(e) {
				uni.navigateTo({
					url: "/pages/index/product?sort_id="+e
				})
			},
			//分类列表
			async sort_all() {
				try {
					const res = await sort_all(this.keyword)
					console.log('sort_all', res)
					this.indexList = res.word
					let list = res.list
					list.forEach((item, index) => {
						this.itemArr.push(item.sort_list)
					})
					// 保存数据
				} catch (err) {
					uni.showToast({
						title: err,
						icon: 'none'
					})
					console.log('sort_all', err)
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.cateGory {
		.top {
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			z-index: 99;
			height: 96rpx;
			opacity: 1;
			background: rgba(255, 255, 255, 1);
			padding: 16rpx 32rpx;
			display: flex;
			box-sizing: border-box;
			align-items: center;

			image {
				margin-right: 32rpx;
				width: 48rpx;
				height: 48rpx;
			}

			.search {
				flex: 1;
				display: flex;
				align-items: center;

				.tosear {
					position: relative;
					width: 522rpx;
					height: 64rpx;
					border-radius: 38rpx;
					opacity: 1;

					border: 0 solid rgba(0.5920000076293945, 0.5920000076293945, 0.5920000076293945, 1);
					background: rgba(245, 245, 245, 1);
					padding: 0 32rpx;

					input {
						text-align: center;
						width: 100%;
						height: 100%;
					}

					image {
						position: absolute;
						left: 280rpx;
						top: 50%;
						left: 36%;
						transform: translateY(-50%);
						width: 32rpx;
						height: 32rpx;
					}
				}
			}

		}

		.list-cell {
			display: flex;
			align-items: center;
			box-sizing: border-box;
			width: 100%;
			padding: 10px 24rpx;
			overflow: hidden;
			color: #323233;
			font-size: 14px;
			line-height: 24px;
			background-color: #fff;

			image {
				margin-right: 16rpx;
				width: 80rpx;
				height: 80rpx;
			}
		}
	}
</style>