<template>
	<view>
		<uni-search-bar @confirm="search" v-model="searchValue" @input="input" @cancel="cancel" @clear="clear" placeholder="请输入色彩名称">
		</uni-search-bar>

		<uni-transition ref="trans" mode-class="fade" :duration="0" :show="true">

			<view class="content">
				<view class="card-padding">
					<uni-row>
						<uni-col :xs="8" :sm="6" :md="4" :lg="3" :xl="2" v-for="(item,index) in colors" :key="index">
							<ColorPanel :hsb="item.hsb" @clickPanel="onClickPanel" :name="item.name"></ColorPanel>
							<view style="padding-bottom: 10px;"></view>
						</uni-col>
					</uni-row>
				</view>
			</view>
		</uni-transition>
	</view>
</template>

<script>
	import {
		chineseColors
	} from '../../common/chineseColors.js';
	export default {
		data() {
			return {
				colors: chineseColors,
				searchValue: "",
			}
		},
		onReady() {
			this.$refs.trans.init({
				duration: 2000,
				timingFunction: 'ease-in-out',
				delay: 500,
			});
		},
		methods: {
			onClickPanel(hex) {
				this.$refs.trans.step({
					backgroundColor: "#" + hex,
				});
				// 开始执行动画
				this.$refs.trans.run(() => {});
			},
			input(res) {
				if (res === "") {
					this.colors = chineseColors;
				}
			},
			cancel(res) {
				res.value = "";
				this.colors = chineseColors;
			},
			search(res) {
				this.colors = chineseColors.filter(x => x.name.includes(res.value));
			},

			clear(res) {
				res.value = "";
				this.colors = chineseColors;
			},
		}
	}
</script>

<style scoped>
	.content {
		width: 100vw;
		height: 100vh;
	}

	.card-padding {
		padding-left: 20px;
		padding-top: 15px;
	}

	.search-result {
		padding-top: 10px;
		padding-bottom: 20px;
		text-align: center;
	}

	.search-result-text {
		text-align: center;
		font-size: 14px;
		color: #666;
	}

	.example-body {
		/* #ifndef APP-NVUE */
		display: block;
		/* #endif */
		padding: 0px;
	}

	.uni-mt-10 {
		margin-top: 10px;
	}
</style>
