<template>
	<view class="star-container">
		<view class="star-view star-view" style="display: flex;align-items: center;height: 36rpx; overflow: hidden;margin-top:2rpx;">
			<view class="star-icon-con">
				<view
					@tap="evaluateTap(item, index)"
					:class="item == 3 ? 'iconfont star-icon-item-font iconai65' : item == 1 ? 'iconfont star-icon-item-font iconwujiaoxing1' : ''"
					v-for="(item, index) in starArr"
					:key="index"
				></view>
			</view>
		</view>
	</view>
</template>

<script>
/**
 *  starArr 数据说明
 *
 *  1  	实星
 *  2	空星
 * 	3	半空星
 */
export default {
	data() {
		return {
			starArr: [],
			star_count: 0,
			isTapZuihou: false
		};
	},
	props: {
		// 星评数量
		starCount: {
			type: Number,
			default: 0
		},
		// 是否开启手动评价
		isEvaluate: {
			type: Boolean,
			default: false
		}
	},
	watch: {
		starCount(newVal, oldVal) {
			this.star_count = JSON.parse(JSON.stringify(newVal));
		}
	},
	mounted() {
		this.star_count = JSON.parse(JSON.stringify(this.starCount));
		var star_count = this.star_count / 2;
		if (String(this.starCount).indexOf('.') != -1) {
			// 小数
			var decimalsSatr = parseInt(star_count);
			this.starPushFn(false, decimalsSatr);
		} else {
			// 整数
			var intSatr = parseInt(star_count);
			this.starPushFn(true, intSatr);
		}
	},
	methods: {
		/**
		 *  手动评价
		 *
		 * @param {*} item  	点击的item
		 * @param {*} index		点击的index
		 */
		evaluateTap(item, index) {
			if (!this.isEvaluate) {
				return;
			}
			var sliceArr = this.starArr.slice(index);
			var starNewArr = this.starArr.slice(0, index);
			var optIndex = index + 1;
			if (item == 1) {
				let sliceNewArr = [];
				sliceArr.forEach((slItem, slIndex) => {
					sliceNewArr.push(2);
				});
				if (starNewArr.length <= 0 && this.isTapZuihou) {
					this.starArr = [];
					this.starFor(i => {
						this.starArr.push(2);
					});
					this.isTapZuihou = false;
					this.star_count = 0;

					return;
				}
				if (starNewArr.length <= 0) {
					this.isTapZuihou = true;
				}
				if (starNewArr.length == 3) {
					this.star_count = 8;
				} else if (starNewArr.length == 2) {
					this.star_count = 6;
				} else if (starNewArr.length == 1) {
					this.star_count = 4;
				} else if (starNewArr.length == 0) {
					this.star_count = 2;
				}
				// if(starNewArr)
				this.$emit('evaluateChange', this.star_count);
				this.starArr = [...starNewArr, ...sliceNewArr];
			} else {
				if (index == 4) {
					this.star_count = 10;
				} else if (index == 3) {
					this.star_count = 8;
				} else if (index == 2) {
					this.star_count = 6;
				} else if (index == 1) {
					this.star_count = 4;
				} else if (index == 0) {
					this.star_count = 2;
				}
			}

			this.starFor(i => {
				if (i < optIndex) {
					if (this.starArr[i] == 2) {
						this.starArr[i] = 1;
					}

					this.starArr = Object.assign([], this.starArr);
				}
			});

			this.$emit('evaluateChange', this.star_count);
		},
		/**
		 *  星数量循环
		 *
		 * @param {*} slotcallback
		 */
		starFor(slotcallback) {
			for (let i = 0; i < 5; i++) {
				slotcallback(i);
			}
		},
		/**
		 *  星数推送
		 *
		 * @param {*} isInt  		是否是整数
		 * @param {*} satrCount		星数量
		 */
		starPushFn(isInt, satrCount) {
			if (isInt) {
				this.starFor(i => {
					if (i < satrCount) {
						this.starArr.push(1);
					} else {
						this.starArr.push(2);
					}
				});
				return;
			}
			this.starFor(i => {
				if (i < satrCount) {
					this.starArr.push(1);
				} else if (i <= satrCount) {
					this.starArr.push(3);
				} else {
					this.starArr.push(2);
				}
			});
		}
	}
};
</script>

<style scoped lang="scss">
.uni-view {
	color: none !important;
}

@font-face {
	font-family: 'iconfont';
	src: url('//at.alicdn.com/t/font_2188799_iwu9ledxvl.eot?t=1611736513810'); /* IE9 */
	src: url('//at.alicdn.com/t/font_2188799_iwu9ledxvl.eot?t=1611736513810#iefix') format('embedded-opentype'),
		/* IE6-IE8 */
			url('data:application/x-font-woff2;charset=utf-8;base64,[encoded data, 7712 characters]')
			format('woff2'),
		url('//at.alicdn.com/t/font_2188799_iwu9ledxvl.woff?t=1611736513810') format('woff'),
		url('//at.alicdn.com/t/font_2188799_iwu9ledxvl.ttf?t=1611736513810') format('truetype'),
		/* chrome, firefox, opera, Safari, Android, iOS 4.2+ */ url('//at.alicdn.com/t/font_2188799_iwu9ledxvl.svg?t=1611736513810#iconfont') format('svg'); /* iOS 4.1- */
}

.iconfont {
	font-family: 'iconfont' !important;
	font-size: 16px;
	font-style: normal;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.iconwujiaoxing1:before {
	content: '\e623';
}

.iconwujiaoxing3:before {
	content: '\e712';
}

.iconai65:before {
	content: '\e6b7';
}

.star-container {
	.star-view {
		color: rgb(244, 209, 119) !important;
		display: flex;
		align-items: center;
		box-sizing: border-box;
		.star-count {
			margin-right: 20rpx;
			font-weight: 600;
			font-size: 33rpx;
			// font-weight-600 font-33 d-flex a-center
		}
		.star-icon-con {
			font-weight: 600;
			font-size: 33rpx;
			display: flex;
			align-items: center;
			height: 36rpx;
			.star-icon-item-font {
				font-size: 32rpx;
				color: rgb(244, 209, 119) !important;
				margin-left: -4rpx;
			}
		}
		.iconwujiaoxing3 {
			color: rgb(244, 209, 119) !important;
		}
	}
}
</style>
