<template>
	<div class="datasub">
		<div class="left">
			<div class="left-title">
				<img src="./assets/icon01.png" alt="" />
				<div class="tit">各类型合作限制政策对比</div>
				<el-select v-model="value1" placeholder="Select" class="select">
					<el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value" />
				</el-select>
			</div>
            <div class="left-main">
                <div class="left-main-echarts" ref="leftChartRef"></div>
            </div>
		</div>
		<div class="right">
			<div class="right-title">
				<img src="./assets/icon02.png" alt="" />
				<div class="tit">各领域规则分布情况</div>
                <el-select v-model="value2" placeholder="Select" class="select1">
					<el-option v-for="item in options2" :key="item.value" :label="item.label" :value="item.value" />
				</el-select>
                <el-select v-model="value" placeholder="Select" class="select">
					<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
				</el-select>
			</div>
            <div class="right-main">
                <div class="right-main-echarts" ref="rightChartRef"></div>
            </div>
		</div>
	</div>
</template>

<script setup>
import { ref, onMounted, onBeforeUnmount } from "vue";
import * as echarts from "echarts";

const value = ref("近十年");
const value1 = ref("2025年");
const value2 = ref("全部限制手段");
const options = [
	{
		value: "近十年",
		label: "近十年"
	},
	{
		value: "近五年",
		label: "近五年"
	}
];
const options1 = [
	{
		value: "2025年",
		label: "2025年"
	},
	{
		value: "2024年",
		label: "2024年"
	}
];
const options2 = [
	{
		value: "全部限制手段",
		label: "全部限制手段"
	},
	{
		value: "人工智能",
		label: "人工智能"
	},
	{
		value: "集成电路",
		label: "集成电路"
	}
];

const leftChartRef = ref(null);
const rightChartRef = ref(null);
let leftChart;
let rightChart;

const initLeftDonut = () => {
    if (!leftChartRef.value) return;
    if (leftChart) leftChart.dispose();
    leftChart = echarts.init(leftChartRef.value);
    const data = [
        { name: "集成电路", value: 50 },
        { name: "人工智能", value: 46 },
        { name: "通信网络", value: 40 },
        { name: "能源", value: 32 },
        { name: "先进制造", value: 31 },
        { name: "生物科技", value: 31 },
        { name: "航空航天", value: 30 },
        { name: "新材料", value: 24 }
    ];
    const colors = [
        "rgba(105, 177, 255, 1)", // 集成电路
        "rgba(255, 192, 105, 1)", // 人工智能
        "rgba(135, 232, 222, 1)", // 通信网络
        "rgba(89, 126, 247, 1)",   // 能源
        "rgba(214, 228, 255, 1)", // 先进制造
        "rgba(255, 120, 117, 1)", // 生物科技
        "rgba(179, 127, 235, 1)", // 航空航天
        "rgba(255, 163, 158, 1)"  // 新材料
    ];
    const option = {
        color: colors,
        tooltip: { trigger: "item", formatter: ({ name, value, percent }) => `${name}<br/>${value}项 ${percent}%` },
        series: [{
            type: "pie",
            radius: [96, 120],
            center: ["50%", "50%"],
            avoidLabelOverlap: true,
            itemStyle: { borderWidth: 0 },
            label: {
                show: true,
                position: "outside",
                alignTo: 'edge',
                formatter: ({ name, value, percent }) => `{name|${name}}  {value|${value}项}  {percent|${percent}%}`,
                minMargin: 5,
                edgeDistance: 10,
                lineHeight: 15,
                rich: {
                    name: { fontSize: 16, fontFamily: "Microsoft YaHei", fontWeight: 700, lineHeight: 24, color: "rgb(59, 65, 75)" },
                    value: { fontSize: 14, fontFamily: "Microsoft YaHei", fontWeight: 400, lineHeight: 22, color: "rgb(95, 101, 108)" },
                    percent: { fontSize: 14, fontFamily: "Microsoft YaHei", fontWeight: 400, lineHeight: 22, color: "rgb(95, 101, 108)" }
                }
            },
            labelLine: { 
                show: true, 
                length: 30,
                length2: 0,
                maxSurfaceAngle: 80
            },
            labelLayout: function (params) {
                const isLeft = params.labelRect.x < leftChart.getWidth() / 2;
                const points = params.labelLinePoints;
                // 导航线终点在标签下方
                const lineY = params.labelRect.y + params.labelRect.height;
                points[2][0] = isLeft ? params.labelRect.x : params.labelRect.x + params.labelRect.width;
                points[2][1] = lineY;
                points[1][1] = lineY;
                return {
                    labelLinePoints: points
                };
            },
            data: data.map((d, i) => ({
                ...d,
                labelLine: { lineStyle: { color: colors[i], width: 1 } }
            }))
        }]
    };
    leftChart.setOption(option);
};

const initRightLine = () => {
    if (!rightChartRef.value) return;
    if (rightChart) rightChart.dispose();
    rightChart = echarts.init(rightChartRef.value);
    
    const years = ['2014', '2015', '2016', '2017', '2018', '2019', '2020', '2021', '2022', '2023', '2024', '2025'];
    const seriesData = [
        { name: '人工智能', color: 'rgb(5, 95, 194)', data: [150, 90, 65, 95, 75, 95, 130, 150, 140, 170, 175, 185] },
        { name: '集成电路', color: 'rgba(19, 168, 168, 1)', data: [65, 95, 125, 115, 135, 145, 165, 165, 165, 175, 180, 175] },
        { name: '量子科技', color: 'rgba(114, 46, 209, 1)', data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 8, 12] },
        { name: '生物科技', color: 'rgba(250, 140, 22, 1)', data: [12, 8, 8, 12, 12, 15, 20, 30, 25, 30, 42, 42] },
        { name: '通信网络', color: 'rgba(105, 177, 255, 1)', data: [42, 38, 45, 52, 52, 48, 52, 72, 65, 62, 65, 58] },
        { name: '能源', color: 'rgb(206, 79, 81)', data: [98, 75, 62, 82, 62, 72, 82, 122, 118, 148, 138, 105] }
    ];
    
    const option = {
        color: seriesData.map(s => s.color),
        legend: {
            top: 10,
            left: 'center',
            itemWidth: 12,
            itemHeight: 12,
            itemGap: 20,
            icon: 'circle',
            textStyle: {
                fontSize: 16,
                fontWeight: 400,
                lineHeight: 24,
                fontFamily: 'Microsoft YaHei',
                color: 'rgb(95, 101, 108)'
            }
        },
        grid: {
            top: 60,
            left: 50,
            right: 40,
            bottom: 40
        },
        xAxis: {
            type: 'category',
            data: years,
            boundaryGap: false,
            axisLine: {
                lineStyle: { color: '#E5E7EB' }
            },
            axisLabel: {
                color: 'rgba(132, 136, 142, 1)',
                fontSize: 14,
                fontWeight: 400,
                lineHeight: 22,
                fontFamily: 'Microsoft YaHei'
            }
        },
        yAxis: {
            type: 'value',
            min: 0,
            max: 200,
            interval: 40,
            axisLine: { show: false },
            axisTick: { show: false },
            axisLabel: {
                color: 'rgba(132, 136, 142, 1)',
                fontSize: 14,
                fontWeight: 400,
                lineHeight: 22,
                fontFamily: 'Microsoft YaHei'
            },
            splitLine: {
                lineStyle: { color: '#E5E7EB' }
            }
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'line'
            }
        },
        series: [
            { 
                name: '人工智能', 
                type: 'line', 
                data: seriesData[0].data, 
                smooth: false, 
                symbol: 'circle', 
                symbolSize: 6,
                lineStyle: { width: 2 },
                areaStyle: { 
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        { offset: 0, color: 'rgba(5, 95, 194, 0.25)' },
                        { offset: 1, color: 'rgba(5, 95, 194, 0.05)' }
                    ])
                }
            },
            { 
                name: '集成电路', 
                type: 'line', 
                data: seriesData[1].data, 
                smooth: false, 
                symbol: 'circle', 
                symbolSize: 6,
                lineStyle: { width: 2 },
                areaStyle: { 
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        { offset: 0, color: 'rgba(19, 168, 168, 0.25)' },
                        { offset: 1, color: 'rgba(19, 168, 168, 0.05)' }
                    ])
                }
            },
            { 
                name: '量子科技', 
                type: 'line', 
                data: seriesData[2].data, 
                smooth: false, 
                symbol: 'circle', 
                symbolSize: 6,
                lineStyle: { width: 2 },
                areaStyle: { 
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        { offset: 0, color: 'rgba(114, 46, 209, 0.25)' },
                        { offset: 1, color: 'rgba(114, 46, 209, 0.05)' }
                    ])
                }
            },
            { 
                name: '生物科技', 
                type: 'line', 
                data: seriesData[3].data, 
                smooth: false, 
                symbol: 'circle', 
                symbolSize: 6,
                lineStyle: { width: 2 },
                areaStyle: { 
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        { offset: 0, color: 'rgba(250, 140, 22, 0.25)' },
                        { offset: 1, color: 'rgba(250, 140, 22, 0.05)' }
                    ])
                }
            },
            { 
                name: '通信网络', 
                type: 'line', 
                data: seriesData[4].data, 
                smooth: false, 
                symbol: 'circle', 
                symbolSize: 6,
                lineStyle: { width: 2 },
                areaStyle: { 
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        { offset: 0, color: 'rgba(105, 177, 255, 0.25)' },
                        { offset: 1, color: 'rgba(105, 177, 255, 0.05)' }
                    ])
                }
            },
            { 
                name: '能源', 
                type: 'line', 
                data: seriesData[5].data, 
                smooth: false, 
                symbol: 'circle', 
                symbolSize: 6,
                lineStyle: { width: 2 },
                areaStyle: { 
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        { offset: 0, color: 'rgba(206, 79, 81, 0.25)' },
                        { offset: 1, color: 'rgba(206, 79, 81, 0.05)' }
                    ])
                }
            }
        ]
    };
    
    rightChart.setOption(option);
};

const handleResize = () => { 
    if (leftChart) leftChart.resize(); 
    if (rightChart) rightChart.resize();
};

onMounted(() => { 
    initLeftDonut(); 
    initRightLine();
    window.addEventListener("resize", handleResize); 
});
onBeforeUnmount(() => { 
    window.removeEventListener("resize", handleResize); 
    if (leftChart) { leftChart.dispose(); leftChart = null; }
    if (rightChart) { rightChart.dispose(); rightChart = null; }
});

</script>

<style lang="scss" scoped>
* {
	margin: 0;
	padding: 0;
}
.datasub {
	width: 1600px;
	height: 460px;
	display: flex;
	justify-content: space-between;
	.left {
		width: 792px;
		height: 460px;
		margin-right: 16px;
		border-radius: 10px;
		box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
		background-color: #fff;
		.left-title {
			width: 792px;
			height: 48px;
			border-bottom: 1px solid rgb(234, 236, 238);
			position: relative;
			img {
				width: 19px;
				height: 19px;
				position: absolute;
				top: 16px;
				left: 21px;
			}
			.tit {
				margin-left: 60px;
				height: 48px;
				padding: 11px 0;
				font-size: 20px;
				font-weight: 700;
				font-family: "Microsoft YaHei";
				line-height: 26px;
				color: rgb(5, 95, 194);
			}
            .select {
                width: 120px;
                height: 28px;
                padding: 0px 12px;
                position: absolute;
                top: 11px;
                right: 31px;
            }
		}
        .left-main {
            width: 792px;
            height: 412px;
            padding: 52px 60px 78px 61px;
            .left-main-echarts {
                width: 100%;
                height: 100%;
            }
        }
	}
	.right {
		width: 792px;
		height: 460px;
		border-radius: 10px;
		// border: 1px solid rgb(234, 236, 238);
		box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
		background-color: #fff;
        .right-title {
            width: 792px;
            height: 48px;
            border-bottom: 1px solid rgb(234, 236, 238);
            position: relative;
			img {
				width: 19px;
				height: 19px;
				position: absolute;
				top: 16px;
				left: 21px;
			}
            .tit {
                margin-left: 60px;
                height: 48px;
                padding: 11px 0;
                font-size: 20px;
                font-weight: 700;
                font-family: "Microsoft YaHei";
                line-height: 26px;
                color: rgb(5, 95, 194);
            }
            .select1 {
                width: 155px;
                height: 28px;
                padding: 0px 12px;
                position: absolute;
                top: 11px;
                right: 163px;
            }
            .select {
                width: 120px;
                height: 28px;
                padding: 0px 12px;
                position: absolute;
                top: 11px;
                right: 31px;
            }
		}
        .right-main {
            width: 792px;
            height: 421px;
            padding: 15px 37px 25px 46px;
            .right-main-echarts {
                width: 100%;
                height: 100%;
            }
        }
	}
}
</style>
