<template>
	<!-- 图表 -->
	<view class="uchart-huan">
		<view class="title">
			<p style="height: 17px;font-size: 13px;">{{ name }}</p>
		</view>
		<view class="charts-box"><qiun-data-charts type="arcbar" :opts="opts" :chartData="chartData" /></view>
	</view>
</template>

<script>
export default {
	name: 'progressBar',
	props: {
		name: {
			type: String,
			default: '完成百分比'
		},
		//完成百分比
		baifen: {
			type: [Number, String]
		}
	},
	watch: {
		baifen: {
			immediate: false,
			handler(newdata) {
				// console.log(newdata);
				this.getServerData();
			}
		}
	},
	data() {
		return {
			chartData: {},
			opts: {
				color: ['#1890FF', '#91CB74', '#FAC858', '#EE6666', '#73C0DE', '#3CA272', '#FC8452', '#9A60B4', '#ea7ccc'],
				padding: undefined,
				title: {
					name: '0%',
					fontSize: 15,
					color: '#444C55'
				},
				subtitle: false,
				extra: {
					arcbar: {
						type: 'circle',
						width: 5,
						backgroundColor: '#E9E9E9',
						startAngle: 1.5,
						endAngle: 0.25,
						gap: 2
					}
				}
			}
		};
	},
	mounted() {
		this.getServerData();
	},
	methods: {
		getServerData() {
			// console.log(this.$props.baifen);
			//模拟从服务器获取数据时的延时
			//模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
			// console.log(this.$props.baifen);
			this.opts.title.name = `${`${this.$props.baifen * 100}`.slice(0, 3)}%`;
			let res = {
				series: [
					{
						color: '#CE184C',
						data: this.$props.baifen
					}
				]
			};
			this.chartData = JSON.parse(JSON.stringify(res));
		}
	}
};
</script>

<style lang="scss" scoped>
.uchart-huan {
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-around;
	// background-color: red;
	.title {
	}
	/* 请根据实际需求修改父元素尺寸，组件自动识别宽高 */
	.charts-box {
		width: 180rpx;
		height: 140rpx;
	}
}
</style>
