<template>
	<view class="pie" :style="{background:tvalue.bg}">
		<slot>
		</slot>
	</view>
</template>

<style scoped>
	.pie {
		width: 100%;
		height: 100%;
		border-radius: 50%;
		display: flex;
		justify-content: center;
		align-items: center;
		position: relative;
	}
</style>

<script>
	export default {
		props: {
			data: {
				type: [String, Array],
				default: '100|#128dea'
			}
		},
		data() {
			return {};
		},
		computed: {
			tvalue() {
				var colors = ['#4fa6f1', '#57c85b', '#9C27B0', '#FFEB3B', '#2353c3', '#FF5722', '#87b800', '#a66100',
					'#00796B', '#E91E63', '#a1a1a1'
				];
				var dats = [...this.data];
				if (typeof(this.data) == 'string') {
					dats = [];
					var das = this.data.split(',');
					for (var i in das) {
						var dc = das[i].split('|');
						if (dc.length == 1 || dc[1][0] != '#') {
							dc[1] = colors[i];
						}
						dats.push({
							num: this.tofloat(dc),
							color: dc[1]
						});
					}
				}
				var total = 0;
				for (var i in dats) {
					total += dats[i].num;
				}
				var ret = {
					bg: '#cccccc'
				};
				if (total > 0) {
					ret.bg = 'conic-gradient(from 270deg';
					var nextdeg = 0;
					for (var i in dats) {
						var medeg = dats[i].num * 360 / total
						ret.bg += ', ' + dats[i].color + ' '+nextdeg+'deg ';
						nextdeg += medeg;
						ret.bg += nextdeg+'deg';
					}
				}
				return ret;
			}
		},
		methods: {
		}
	}
</script>