<template>
	<div id="leftCode">
		<div class="leftCodeContainer">
			<ContentTop :title="title" :type="1" />
			<div class="item-chart-top">
				<Echart :options="options" id="bottomLeftChart1" height="190px" width="100%"></Echart>
			</div>
		</div>
	</div>
</template>

<script>
	import echarts from "echarts";
	import Echart from "@/common/echart";
	import ContentTop from "@/components/contentTop";
	export default {
		components: {
			Echart,
			ContentTop,
		},
		props: {
			viewData: {
				type: Object,
				default: () => {
					return {}
				}
			},
		},
		watch: {
			viewData: {
				handler(val) {
					this.title = val.title;
					if(val.enoughs && val.enoughs.length){
						let chartData = val.enoughs.map(item => item.amount);
						let chartXLabel = val.enoughs.map(item => item.name);
						this.options.series[0].data = chartData;
						this.options.xAxis.data = chartXLabel;
						this.options.tooltip.formatter = (params) => {
							let res = "";
							res = `
						    <div style="padding:8px 12px;">
						      <div>${this.title}：</div>
						      <div style="font-size: 12px;padding-top: 6px">总数：${params[0]?.data}人</div>
						      <div style="font-size: 12px;">较去年：12%  <span class="iconfont icon-shang" style="font-size: 16px; color: #07f3f5;" /></div>
						    </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: "10%",
					},
					xAxis: {
						data: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"],
					},
					yAxis: [{
						//name: "万人",
						// data: "value",
						type: "value",
						axisLabel: {
							formatter: function(v) {
								return v;
							},
						},
					}, ],
					series: [{
							itemStyle: {
								normal: {
									color: new echarts.graphic.LinearGradient(
										0,
										1,
										0,
										0,
										[{
												offset: 0,
												color: "rgba(8,253,254,0)",
											},
											{
												offset: 1,
												color: "rgba(8,253,254,1)",
											},
										],
										false
									),
								},
							},
							data: [2339, 1899, 2118, 1790, 3265, 4465, 3996, 2339, 1899, 2118, 1790, 3265],
							type: "bar",
							barWidth: 10,
						},
						// {
						//   data: [2100, 3899, 4100, 1190, 2265, 1465, 2996, 2100, 3899, 4100, 1190, 2265],
						//   type: "line",
						//   itemStyle: {
						//     color: "#056FEB",
						//   },
						//   lineStyle: {
						//     width: 2,
						//   },
						// },
					],
				},
			};
		},
	};
</script>

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

	#leftCode {
		.leftCodeContainer {
			height: 262px;
			width: 100%;
			// padding: 20px 30px;
		}
	}
</style>
