<template>
	<view>
		<view class="dashboard" :style="{transform:'scale('+scale+')'}">
			<view class="ul">
				<view class="li" v-for="item,index in arr" :key="index" :style="{transform:'rotate(' + item + 'deg)'}">
					<view  :style="{'background-color':(index+1 <= activeIndex)?activeBackgroundColor:lineBackgroundColor}"></view>
					<view></view>
					<view></view>
				</view>
			</view>
			<view class="tips">
				<view class="text-1">{{step}} <text v-if="stepSuffix">{{stepSuffix}}</text></view>
				<view class="text-2" v-if="subTitle">{{subTitle}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	var d = 5;
	var a = 180;
	var c = a / 5
	var arr = [];
	for (let index = 0; index < c; index++) {
		arr.push(index * d + 2.5);
	}
	/**
	 * css 半圆仪表盘
	 * 
	 * @description 纯css和html的仪表盘
	 * @property {Number} step 活动数
	 * @property {Number} sum 总数
	 * @property {String} stepSuffix 活动数后缀
	 * @property {String} subTitle 副标题
	 * @property {String} lineBackgroundColor 默认线颜色，默认#cccccc
	 * @property {String} activeBackgroundColor 活动线颜色，默认#33333
	 */
	export default {
		name: "dashboard-css-v",
		props: {
			//活动数
			step: {
				type: Number,
				default: 0
			},
			//总数
			sum: {
				type: Number,
				default: 100
			},
			stepSuffix: {
				type: String,
				default: ''
			},
			subTitle: {
				type: String,
				default: ''
			},
			width: {
				type: Number,
				default: 500
			},
			lineBackgroundColor:{
				type: String,
				default: '#cccccc'
			},
			activeBackgroundColor:{
				type: String,
				default: '#4c4c4c'
			}
		},
		data() {
			return {
				arr: [],
				activeIndex: 0,
				defaultWidth: 500,
				scale: 1
			};
		},
		created() {
			this.arr = arr;
			//this.scale = this.width / this.defaultWidth
			this.newIndex();
		},
		watch: {
			sum() {
				this.newIndex();
			},
			step(value) {
				this.newIndex();
			}
		},
		methods: {
			newIndex() {
				if (this.sum <= 0) {
					this.activeIndex = 0;
				}
				this.activeIndex = (this.step / this.sum) * c;
			}
		}
	}
</script>

<style scoped>
	.dashboard {
		width: 500rpx;
		height: 250rpx;
		position: relative;
		margin: 0 auto;
	}

	.dashboard .ul {
		width: 500rpx;
		height: 250rpx;
		position: absolute;
		z-index: 2;
		top: 50%;
	}

	.dashboard .ul .li {
		width: 100%;
		height: 6rpx;
		display: flex;
		justify-content: space-between;
		position: absolute;
		top: calc(50% - 3rpx);
	}

	.dashboard .ul.li view {
		height: 6rpx;
	}

	.dashboard .ul .li view:nth-child(1) {
		width: 30rpx;
	}

	.dashboard .ul .li view:nth-child(2) {
		flex: 1;
	}

	.dashboard .ul .li view:nth-child(3) {
		width: 30rpx;
	}


	.tips {
		width: 100%;
		height: 60%;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		position: absolute;
		bottom: 0;
	}

	.tips .text-1 {
		font-size: 80rpx;
		font-weight: 600;
		color: #333;
		margin-bottom: 30rpx;
	}

	.tips .text-1 text {
		font-size: 50rpx;
		padding-left: 5rpx;
	}

	.tips .text-2 {
		font-size: 30rpx;
		font-weight: 600;
		color: #000;
	}
</style>