<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="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="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="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="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 options = [
	{
		value: "近十年",
		label: "近十年"
	},
	{
		value: "近五年",
		label: "近五年"
	}
];
const options1 = [
	{
		value: "2025年",
		label: "2025年"
	},
	{
		value: "2024年",
		label: "2024年"
	}
];

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

const initLeftChart = () => {
    if (!leftChartRef.value) return;
    if (leftChart) leftChart.dispose();
    leftChart = echarts.init(leftChartRef.value);
    const years = ["2014","2015","2016","2017","2018","2019","2020","2021","2022","2023","2024","2025"];
    const academic = [150,65,85,95,70,95,125,150,140,170,190,175];
    const research = [70,90,123,115,130,145,165,160,162,168,180,182];
    const talent = [90,70,60,75,65,72,80,120,118,145,130,100];
    const dataShare = [0,0,0,0,0,0,0,0,0,0,15,22];
    const option = {
        color: ["#2f7ae5","#29c0b1","#e45f5f","#7b5de6"],
        grid: { left: 40, right: 24, top: 46, bottom: 36 },
        tooltip: { trigger: "axis", axisPointer: { type: "line" } },
        legend: { top: 8, icon: "circle", itemWidth: 12, itemHeight: 12, itemGap: 24, textStyle: { color: "rgb(95, 101, 108)", fontSize: 16, fontFamily: "Microsoft YaHei", fontWeight: 400, lineHeight: 24 }, data: ["学术交流","科研合作","人才流动","数据共享"] },
        xAxis: { type: "category", boundaryGap: false, data: years, axisLine: { show: false }, axisTick: { show: false }, axisLabel: { color: "rgba(132, 136, 142, 1)", fontSize: 14, lineHeight: 22, fontFamily: "Microsoft YaHei", fontWeight: 400 } },
        yAxis: { type: "value", min: 0, max: 200, interval: 40, splitLine: { show: true, lineStyle: { color: "#e6e6e6", type: "dashed" } }, axisLine: { show: false }, axisTick: { show: false }, axisLabel: { color: "rgba(132, 136, 142, 1)", fontSize: 14, fontFamily: "Microsoft YaHei", fontWeight: 400, lineHeight: 22 } },
        series: [
            { name: "学术交流", type: "line", smooth: false, data: academic, symbol: "circle", symbolSize: 6, areaStyle: { color: new echarts.graphic.LinearGradient(0,0,0,1,[{offset:0,color:"rgba(47,122,229,0.25)"},{offset:1,color:"rgba(47,122,229,0.05)"}]) } },
            { name: "科研合作", type: "line", smooth: false, data: research, symbol: "circle", symbolSize: 6, areaStyle: { color: new echarts.graphic.LinearGradient(0,0,0,1,[{offset:0,color:"rgba(41,192,177,0.25)"},{offset:1,color:"rgba(41,192,177,0.05)"}]) } },
            { name: "人才流动", type: "line", smooth: false, data: talent, symbol: "circle", symbolSize: 6, areaStyle: { color: new echarts.graphic.LinearGradient(0,0,0,1,[{offset:0,color:"rgba(228,95,95,0.25)"},{offset:1,color:"rgba(228,95,95,0.05)"}]) } },
            { name: "数据共享", type: "line", smooth: false, data: dataShare, symbol: "circle", symbolSize: 6, areaStyle: { color: new echarts.graphic.LinearGradient(0,0,0,1,[{offset:0,color:"rgba(123,93,230,0.25)"},{offset:1,color:"rgba(123,93,230,0.05)"}]) } }
        ]
    };
    leftChart.setOption(option);
    window.addEventListener("resize", handleResize);
};

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

const initRightChart = () => {
    if (!rightChartRef.value) return;
    if (rightChart) rightChart.dispose();
    rightChart = echarts.init(rightChartRef.value);
    const indicators = [
        { name: "集成电路", max: 10 },
        { name: "能源领域", max: 10 },
        { name: "量子科技", max: 10 },
        { name: "通信网络", max: 10 },
        { name: "人工智能", max: 10 },
        { name: "生物科技", max: 10 }
    ];
    const academicR = [9,6,6,6,9,7];
    const researchR = [3,4,1.5,2,1.5,4];
    const talentR = [4,10,3,4,2,5];
    const dataShareR = [7,8,4,5,7,8];
    const option = {
        color: ["#2f7ae5","#29c0b1","#e45f5f","#7b5de6"],
        legend: { 
            top: 8, 
            icon: "circle", 
            itemWidth: 12, 
            itemHeight: 12, 
            itemGap: 24, 
            textStyle: {
                color: "rgb(95, 101, 108)",
                fontSize: 16,
                fontFamily: "Microsoft YaHei",
                fontWeight: 400,
                lineHeight: 24
            },
            data: ["学术交流","科研合作","人才流动","数据共享"] 
        },
        radar: {
            shape: "polygon",
            splitNumber: 5,
            indicator: indicators,
            center: ["50%","56%"],
            radius: "58%",
            startAngle: 90,
            clockwise: false,
            axisName: { 
                color: "rgb(59, 65, 75)", 
                fontSize: 16, 
                fontFamily: "Microsoft YaHei", 
                fontWeight: 700,
                lineHeight: 24,
                padding: [0, 5]
            },
            splitLine: { 
                lineStyle: { 
                    color: "#d0d0d0",
                    width: 1
                } 
            },
            axisLine: { 
                lineStyle: { 
                    color: "#d0d0d0",
                    width: 1
                } 
            },
            splitArea: { 
                show: true, 
                areaStyle: { 
                    color: ["#fff","rgb(247, 248, 249)","#fff","rgb(247, 248, 249)","#fff"] 
                } 
            }
        },
        series: [
            { 
                name: "学术交流", 
                type: "radar", 
                data: [{ value: academicR }], 
                lineStyle: { 
                    width: 2,
                    color: "#2f7ae5"
                }, 
                symbol: "none", 
                areaStyle: { 
                    color: "rgba(47,122,229,0.15)" 
                } 
            },
            { 
                name: "科研合作", 
                type: "radar", 
                data: [{ value: researchR }], 
                lineStyle: { 
                    width: 2,
                    color: "#29c0b1"
                }, 
                symbol: "none", 
                areaStyle: { 
                    color: "rgba(41,192,177,0.15)" 
                } 
            },
            { 
                name: "人才流动", 
                type: "radar", 
                data: [{ value: talentR }], 
                lineStyle: { 
                    width: 2,
                    color: "#e45f5f"
                }, 
                symbol: "none", 
                areaStyle: { 
                    color: "rgba(228,95,95,0.15)" 
                } 
            },
            { 
                name: "数据共享", 
                type: "radar", 
                data: [{ value: dataShareR }], 
                lineStyle: { 
                    width: 2,
                    color: "#7b5de6"
                }, 
                symbol: "none", 
                areaStyle: { 
                    color: "rgba(123,93,230,0.15)" 
                } 
            }
        ]
    };
    rightChart.setOption(option);
};

onMounted(() => { initLeftChart(); initRightChart(); });
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: 1063px;
		height: 460px;
		margin-right: 16px;
		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;
		.left-title {
			width: 1063px;
			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: 1063px;
            height: 412px;
            padding: 15px 23px 25px 38px;
            .left-main-echarts {
                width: 1002px;
                height: 372px;
            }
        }
	}
	.right {
		width: 521px;
		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: 521px;
			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;
            }
		}
        .right-main {
            width: 521px;
            height: 421px;
            padding: 15px 50px 25px 50px;
            .right-main-echarts {
                width: 420px;
                height: 372px;
            }
        }
	}
}
</style>
