<template>
	<view class="stars">
		<image @click="btnStars1" class="starsicon" :src="starsObject[0]" mode=“widthFix”></image>
		<image @click="btnStars2" class="starsicon" :src="starsObject[1]" mode=“widthFix”></image>
		<image @click="btnStars3" class="starsicon" :src="starsObject[2]" mode=“widthFix”></image>
		<image @click="btnStars4" class="starsicon" :src="starsObject[3]" mode=“widthFix”></image>
		<image @click="btnStars5" class="starsicon" :src="starsObject[4]" mode=“widthFix”></image>
		<text class="txt-stars">{{value}}分</text>
	</view>
</template>

<script>
	export default {
		props:{
			starsIndex: Number, // 星级评价分数
			isEditStars: {}, // 是否编辑星级评价分数
		},
		data() {
			return {
				starsObject: {} ,// 数组
				value:this.starsIndex,
			}
		},
		mounted() {
			this.curShowStars(this.value)
		},
		methods:{
					btnStars1: function() {
						var _this = this
						// console.log("btnStars1 = " + _this.isEditStars)
						if (_this.isEditStars) {
							_this.curShowStars(1)
							_this.value = 1;
							_this.$emit("starsClick", _this.value)
						}
					},
					btnStars2: function() {
						var _this = this
						if (_this.isEditStars) {
							_this.curShowStars(2)
							_this.value = 2;
							_this.$emit("starsClick", _this.value)
						}
					},
					btnStars3: function() {
						var _this = this
						if (_this.isEditStars) {
							_this.curShowStars(3)
							_this.value = 3;
							_this.$emit("starsClick", _this.value)
						}
					},
					btnStars4: function() {
						var _this = this
						if (_this.isEditStars) {
							_this.curShowStars(4)
							_this.value = 4;
							_this.$emit("starsClick", _this.value)
						}
					},
					btnStars5: function() {
						var _this = this
						if (_this.isEditStars) {
							_this.curShowStars(5)
							_this.value = 5;
							_this.$emit("starsClick", _this.value)
						}
					},
					// 星星评价展示
					curShowStars (starsNum) {
						console.log(starsNum)
						this.value = starsNum
						var _this = this
						if (Math.round(starsNum) == 1) {
							_this.starsObject = _this.changStarsImg(1)
						} else if (Math.round(starsNum) == 2) {
							_this.starsObject = _this.changStarsImg(2)
						} else if (Math.round(starsNum) == 3) {
							_this.starsObject = _this.changStarsImg(3)
						} else if (Math.round(starsNum) == 4) {
							_this.starsObject = _this.changStarsImg(4)
						} else if (Math.round(starsNum) == 5) {
							_this.starsObject = _this.changStarsImg(5)
						} else {
							_this.starsObject = _this.changStarsImg(starsNum)
							_this.value = 0
						}
					},
					changStarsImg(num){
						let starsNum = num;
						if (starsNum == 1) {
							return [
								"../../static/imgs/stars_selected.png", "../../static/imgs/stars_defalt.png",
								"../../static/imgs/stars_defalt.png", "../../static/imgs/stars_defalt.png",
								"../../static/imgs/stars_defalt.png"
							]
						} else if (starsNum == 2) {
							return [
								"../../static/imgs/stars_selected.png", "../../static/imgs/stars_selected.png",
								"../../static/imgs/stars_defalt.png", "../../static/imgs/stars_defalt.png",
								"../../static/imgs/stars_defalt.png"
							]
						} else if (starsNum == 3) {
							return [
								"../../static/imgs/stars_selected.png", "../../static/imgs/stars_selected.png",
								"../../static/imgs/stars_selected.png", "../../static/imgs/stars_defalt.png",
								"../../static/imgs/stars_defalt.png"
							]
						} else if (starsNum == 4) {
							return [
								"../../static/imgs/stars_selected.png", "../../static/imgs/stars_selected.png",
								"../../static/imgs/stars_selected.png", "../../static/imgs/stars_selected.png",
								"../../static/imgs/stars_defalt.png"
							]
						} else if (starsNum == 5) {
							return [
							"../../static/imgs/stars_selected.png", "../../static/imgs/stars_selected.png",
							"../../static/imgs/stars_selected.png", "../../static/imgs/stars_selected.png",
							"../../static/imgs/stars_selected.png"
						]
						} else {
							return [
							"../../static/imgs/stars_defalt.png", "../../static/imgs/stars_defalt.png",
							"../../static/imgs/stars_defalt.png", "../../static/imgs/stars_defalt.png",
							"../../static/imgs/stars_defalt.png"
							]
						}
						
					},
		}
	}
</script>

<style lang="scss">
	.stars{
		display: flex;
	}
	.starsicon{
		width: 48upx;
		height: 48upx;
	}
	.txt-stars{
		color: #999;
		margin-left: 50upx;
	}
</style>