<template>
	<view class="color-item">
		<div class="left-color" :style="{ background: item.leftColor }"></div>
		<div class="rigth-color">
			<div :style="{ background: item.rightTopColor }"></div>
			<div class="rigth-bottom" v-show="item.color == 'HF' || item.color == 'NF'"></div>
		</div>
		<view v-show="showColorName" class="color-name">{{item.color}}</view>
	</view>
</template>

<script>
	export default {
		name: "ColorItem",
		props: {
			showColorName: {
				type: Boolean,
				default: true,
			},
			item: {
				type: Object,
				default: () => {}
			}
		},
		data() {
			return {

			};
		}
	}
</script>

<style lang="scss" scoped>
	.color-item {
		position: relative;
		width: 80rpx;
		height: 40rpx;
		border: 2rpx solid #fff;
		display: flex;
		align-items: center;

		.left-color,
		.rigth-color {
			flex: 1;
			height: 100%;
		}

		.rigth-color {
			display: flex;
			flex-direction: column;
			border-left: 2rpx solid #fff;

			&>div {
				flex: 1;
				height: 100%;
			}

			.rigth-bottom {
				background: red;
				border-top: 2rpx solid #fff;
			}
		}

		.color-name {
			position: absolute;
			top: 50%;
			transform: translateY(-50%);
			right: -40rpx;
			font-size: 28rpx;
		}
	}
</style>