<template>
	<div id="rightGuide">
		<div class="rightGuideContainer">
			<ContentTop :title="title" :type="1" />
			<div>
				
				<Echart :options="options" id="bottomLeftChart1" height="200px" width="100%"></Echart>
			</div>
		</div>
	</div>
</template>

<script>
	import echarts from "echarts";
	import Echart from "@/common/echart";
	import ContentTop from "@/components/contentTop";
	import Parall from "./parall";
	export default {
		components: {
			Echart,
			ContentTop,
			Parall,
		},
		props: {
			viewData: {
				type: Object,
				default: () => {
					return {}
				}
			},
		},
		watch: {
			viewData: {
				handler(val) {
					console.log(val);
					this.title = val.title;
					this.useData=val;
					if(val.enoughs && val.enoughs.length){
						let chartData = val.enoughs.map(item => item.amount);
						let chartXLabel = val.enoughs.map(item => item.name);
						let series=[];
						chartXLabel.map((item,index)=>{
							// this.activityData.push({
							// 	label: item,
							// 	value: chartData[index],
							// 	color: this.color16,
							// 	bgColor: this.color16,
							// })
							series.push({
								data:chartData,
								name:item,
								itemStyle: {
									normal: {
										color: new echarts.graphic.LinearGradient(
											0,
											1,
											0,
											0,
											[{
													offset: 0,
													color: this.rgb(),
												},
												{
													offset: 1,
													color: this.rgb(),
												},
											],
											false
										),
									},
								},
								data:chartData,
								type: "bar",
								barWidth: 6,
							})
						})
						this.options.series=series;
						this.options.yAxis[0].name=val.unity;
						this.options.tooltip.formatter = (params) => {
							let res = "";
							let str = ''
							params.forEach((item, index) => {
								str += ` <div style="font-size: 12px;padding-top: 6px">
							    <span>${item?.seriesName}：${item?.data}次</span>
							    <span style="margin-left: 8px;">较上次：12% <span class="iconfont ${index !== 1 ? 'icon-shang' : 'icon-xiangxia3'}" style="font-size: 16px; color: ${index !== 1 ? '#F13529' : '#29F13D'};" /></span>
							  </div>`
							})
							res = `
							<div style="padding:8px 12px;">
							  <div>${this.title}：</div>
							  ${str}
							</div>`;
							return res;
						}
					}
					
				},
				deep: true,
				immediate: true
			}
		},
		data() {
			return {
				title:'',
				options: {
					tooltip: {
						trigger: "axis",
						backgroundColor: "#303030",
						borderColor: "#2DCDFF", // 修改字体颜色
						borderWidth: 1,
						axisPointer: {
							type: "shadow",
						},
					},
					grid: {
						top: "18%",
						left: "8%",
						right: "0%",
						bottom: "20%",
					},
					legend: {
						show:false,
						data: [],
						align: "right",
						right: 10,
						textStyle: {
							color: "#fff",
						},
						itemWidth: 10,
						itemHeight: 10,
						itemGap: 15,
					},
					xAxis: {
						data: [
							"1月",
							"2月",
							"3月",
							"4月",
							"5月",
							"6月",
							"7月",
							"8月",
							"9月",
							"10月",
							"11月",
							"12月",
						],
					},
					yAxis: [{
						name: "次",
						type: "value",
					}, ],
					series: [],
				},
				//activityData: [],
			};
		},
		methods:{
			color16(){//十六进制颜色随机
			  const r = Math.floor(Math.random()*256);
			  const g = Math.floor(Math.random()*256);
			  const b = Math.floor(Math.random()*256);
			  const color = `#${r.toString(16)}${g.toString(16)}${b.toString(16)}`;
			  return color;
			},
			rgb(){//rgb颜色随机
			  const r = Math.floor(Math.random()*256);
			  const g = Math.floor(Math.random()*256);
			  const b = Math.floor(Math.random()*256);
			  return `rgb(${r},${g},${b})`;
			}
		}
	};
</script>

<style lang="scss" scoped>
	@import "../../../assets/scss/index.scss";

	#rightGuide {
		margin-top: 13px;
		margin-bottom: 33px;

		.rightGuideContainer {
			width: 444px;

			.matchTitle {
				margin-top: 13px;
				margin-bottom: 16px;
				position: relative;

				.bgSpan {
					position: absolute;
					bottom: -8px;
					z-index: 100;
				}

				.bgTitle {
					position: relative;
					top: 10px;
					width: 86px;
					height: 9px;
					background: linear-gradient(-45deg, transparent 9px, #052457 0) right;
					// border: 1px solid;
					// border-image: linear-gradient(352deg, #86d6ff 0%, rgba(0, 0, 0, 0) 100%)
					//   1 1;
				}

				// background: red;
				span {
					font-size: 14px;
					font-weight: 700;
				}
			}

			.matchContent {
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-top: 9px;

				.contentItem {
					align-items: center;

					.itemRight {
						margin-left: 14px;
						font-size: 14px;
						font-weight: 700;

						.rightBottom {
							margin-top: 3px;

							.labelDes {
								font-size: 12px;
								font-weight: 500;
							}
						}
					}
				}
			}
		}
	}
</style>
