<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" popper-class="coop-select-dropdown"
                    @change="getCoopRestrictionCompareData">
                    <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
                </el-select>
            </div>
            <div class="left-main" :class="{ 'left-main--empty': !hasLeftChartData }">
                <template v-if="!hasLeftChartData">
                    <el-empty class="datasub-left-empty" description="暂无数据" :image-size="100" />
                </template>
                <template v-else>
                    <div class="left-chart-row">
                        <div ref="leftChartRef" class="left-main-echarts"></div>
                    </div>
                    <div class="source">
                        <TipTab :text="COOP_LEFT_TIP_TEXT" />
                    </div>
                    <div class="chart-box">
                        <div v-if="!isShowAiLeft" class="btn-box" @mouseenter="handleSwitchAiLeft(true)">
                            <AiButton />
                        </div>
                        <div v-if="isShowAiLeft" class="content-box" @mouseleave="handleSwitchAiLeft(false)">
                            <AiPane :aiContent="aiContentLeft" />
                        </div>
                    </div>
                </template>
            </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" popper-class="coop-select-dropdown"
                    @change="getCoopRestrictionDomainData">
                    <el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value" />
                </el-select>
            </div>
            <div class="right-main" :class="{ 'right-main--empty': !hasRightChartData }">
                <template v-if="!hasRightChartData">
                    <el-empty class="datasub-right-empty" description="暂无数据" :image-size="100" />
                </template>
                <template v-else>
                    <div class="right-chart-row">
                        <div ref="rightChartRef" class="right-main-echarts"></div>
                    </div>
                    <div class="source">
                        <TipTab :text="COOP_RIGHT_TIP_TEXT" />
                    </div>
                    <div class="chart-box">
                        <div v-if="!isShowAiRight" class="btn-box" @mouseenter="handleSwitchAiRight(true)">
                            <AiButton />
                        </div>
                        <div v-if="isShowAiRight" class="content-box" @mouseleave="handleSwitchAiRight(false)">
                            <AiPane :aiContent="aiContentRight" />
                        </div>
                    </div>
                </template>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref, onMounted, onBeforeUnmount, watch, nextTick, computed } from "vue";
import * as echarts from "echarts";
import { getCoopRestrictionCompare, getCoopRestrictionDomain } from "@/api/coopRestriction/coopRestriction";
import { getChartAnalysis } from "@/api/aiAnalysis/index";
import TipTab from "@/views/thinkTank/TipTab/index.vue";
import AiButton from "@/components/base/Ai/AiButton/index.vue";
import AiPane from "@/components/base/Ai/AiPane/index.vue";

const COOP_LEFT_TIP_TEXT = "各类型合作限制政策对比，数据来源：美对华科技合作限制信息平台";
const COOP_RIGHT_TIP_TEXT = "各领域规则分布情况，数据来源：美对华科技合作限制信息平台";

// 临时展示 mock（不改样式）：右侧“各领域规则分布情况”
// 用完把这个开关改回 false 即可恢复走接口
const USE_DOMAIN_MOCK = false;
const MOCK_COOP_RESTRICTION_DOMAIN = [
    { COOPERTYPE: "科研合作", COOPERTYPECOUNT: 1, AREA: "人工智能" },
    { COOPERTYPE: "科研合作", COOPERTYPECOUNT: 1, AREA: "生物科技" },
    { COOPERTYPE: "技术合作", COOPERTYPECOUNT: 2, AREA: "大数据" },
    { COOPERTYPE: "产学研合作", COOPERTYPECOUNT: 3, AREA: "新能源" },
    { COOPERTYPE: "项目合作", COOPERTYPECOUNT: 1, AREA: "智能制造" },
    { COOPERTYPE: "人才合作", COOPERTYPECOUNT: 2, AREA: "集成电路" },
    { COOPERTYPE: "科研合作", COOPERTYPECOUNT: 2, AREA: "大数据" },
    { COOPERTYPE: "科研合作", COOPERTYPECOUNT: 3, AREA: "新能源" },
    { COOPERTYPE: "科研合作", COOPERTYPECOUNT: 1, AREA: "智能制造" },
    { COOPERTYPE: "科研合作", COOPERTYPECOUNT: 2, AREA: "集成电路" }
];

const value = ref(10);
const value1 = ref("2025");
const options = [
    { value: 1, label: "近一年" },
    { value: 2, label: "近两年" },
    { value: 3, label: "近三年" },
    { value: 4, label: "近四年" },
    { value: 5, label: "近五年" },
    { value: 10, label: "近十年" },
    { value: 15, label: "近十五年" },
    { value: 20, label: "近二十年" }
];
const options1 = [
    { value: "2026", label: "2026年" },
    { value: "2025", label: "2025年" },
    { value: "2024", label: "2024年" },
    { value: "2023", label: "2023年" },
    { value: "2022", label: "2022年" },
    { value: "2021", label: "2021年" },
    { value: "2020", label: "2020年" },
    { value: "2019", label: "2019年" },
    { value: "2018", label: "2018年" },
    { value: "2017", label: "2017年" },
    { value: "2016", label: "2016年" },
    { value: "2015", label: "2015年" },
    { value: "2014", label: "2014年" },
    { value: "2013", label: "2013年" },
    { value: "2012", label: "2012年" },
    { value: "2011", label: "2011年" },
    { value: "2010", label: "2010年" }
];

const coopRestrictionDomain = ref([]);
const getCoopRestrictionDomainData = async () => {
    if (USE_DOMAIN_MOCK) {
        coopRestrictionDomain.value = MOCK_COOP_RESTRICTION_DOMAIN;
        return;
    }
    try {
        const res = await getCoopRestrictionDomain({
            year: value1.value
        });
        if (res && res.code === 200) {
            coopRestrictionDomain.value = res.data || [];
        } else {
            // 接口返回 500/非 200：清空，避免继续展示上一次的图表数据
            coopRestrictionDomain.value = [];
            aiContentRight.value = "";
        }
    } catch (error) {
        console.error("获取合作限制各领域规则分布情况数据失败:", error);
        // 请求失败同样清空，避免展示旧图表/旧 AI
        coopRestrictionDomain.value = [];
        aiContentRight.value = "";
    }
};

const coopRestrictionCompare = ref([]);
const getCoopRestrictionCompareData = async () => {
    try {
        const res = await getCoopRestrictionCompare({
            years: value.value
        });
        if (res && res.code === 200) {
            coopRestrictionCompare.value = res.data || [];
        } else {
            // 接口返回 500/非 200：清空，避免继续展示上一次的图表数据
            coopRestrictionCompare.value = [];
            aiContentLeft.value = "";
        }
    } catch (error) {
        console.error("获取合作限制各类型合作限制政策对比数据失败:", error);
        // 请求失败同样清空，避免展示旧图表/旧 AI
        coopRestrictionCompare.value = [];
        aiContentLeft.value = "";
    }
};

const hasLeftChartData = computed(() => {
    const list = coopRestrictionCompare.value;
    return Array.isArray(list) && list.length > 0;
});

const hasRightChartData = computed(() => {
    const list = coopRestrictionDomain.value;
    return Array.isArray(list) && list.length > 0;
});

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

const isShowAiLeft = ref(true);
const aiContentLeft = ref("");
const isLeftInterpretLoading = ref(false);

const isShowAiRight = ref(true);
const aiContentRight = ref("");
const isRightInterpretLoading = ref(false);

const handleSwitchAiLeft = (val) => {
    isShowAiLeft.value = val;
    if (val) {
        fetchLeftInterpretation();
    }
};

const handleSwitchAiRight = (val) => {
    isShowAiRight.value = val;
    if (val) {
        fetchRightInterpretation();
    }
};

/** 兼容 getChartAnalysis 返回对象：从 data[0] 提取「解读」文本 */
const getInterpretationTextFromChartResponse = (res) => {
    const list = res?.data;
    const first = Array.isArray(list) ? list[0] : null;
    return (
        first?.["解读"] ||
        first?.["interpretation"] ||
        first?.["analysis"] ||
        first?.["content"] ||
        ""
    );
};

const appendAiInterpretationChunk = (targetRef, chunk, loadingText = "解读生成中…") => {
    if (!chunk) {
        return;
    }
    const current = String(targetRef.value || "");
    const base = current === loadingText ? "" : current;
    targetRef.value = base + String(chunk);
};

/** 折线图解读入参（与智库概览数量变化趋势一致结构） */
const buildLeftChartPayload = () => {
    const rawData = coopRestrictionCompare.value || [];
    if (!rawData.length) {
        return null;
    }
    const yearsSet = new Set();
    const typesSet = new Set();
    rawData.forEach((item) => {
        yearsSet.add(item.LIMITDATE);
        typesSet.add(item.TYPENAME);
    });
    const finalYears = Array.from(yearsSet).sort();
    const types = Array.from(typesSet);
    if (!finalYears.length || !types.length) {
        return null;
    }
    const data = finalYears.map((year) => {
        const point = { period: String(year) };
        types.forEach((type) => {
            const found = rawData.find((item) => item.TYPENAME === type && item.LIMITDATE === year);
            point[type] = found ? found.TYPECOUNT : 0;
        });
        return point;
    });
    return {
        type: "折线图",
        name: "各类型合作限制政策对比",
        data
    };
};

const fetchLeftInterpretation = async () => {
    const payload = buildLeftChartPayload();
    if (!payload) {
        aiContentLeft.value = "暂无图表数据";
        return;
    }
    const hasValidContent =
        aiContentLeft.value &&
        aiContentLeft.value !== "解读生成中…" &&
        aiContentLeft.value !== "解读加载失败" &&
        aiContentLeft.value !== "暂无图表数据";
    if (hasValidContent || isLeftInterpretLoading.value) {
        return;
    }
    isLeftInterpretLoading.value = true;
    aiContentLeft.value = "解读生成中…";
    try {
        const res = await getChartAnalysis(
            { text: JSON.stringify(payload) },
            {
                onChunk: (chunk) => {
                    // 与智库概览「数量变化趋势」一致：按 chunk 增量拼接展示
                    appendAiInterpretationChunk(aiContentLeft, chunk);
                }
            }
        );
        const text = getInterpretationTextFromChartResponse(res);
        // 与智库概览一致：优先用最终「解读」收口；否则保留已拼接内容
        aiContentLeft.value = text || aiContentLeft.value || "未返回有效解读内容";
    } catch (error) {
        console.error("合作限制政策对比图表解读请求失败", error);
        aiContentLeft.value = "解读加载失败";
    } finally {
        isLeftInterpretLoading.value = false;
    }
};

/** 雷达图解读入参 */
const buildRightChartPayload = () => {
    const rawData = coopRestrictionDomain.value || [];
    if (!rawData.length) {
        return null;
    }
    const domainsSet = new Set();
    const typesSet = new Set();
    rawData.forEach((item) => {
        domainsSet.add(item.AREA);
        typesSet.add(item.COOPERTYPE);
    });
    const domains = Array.from(domainsSet);
    const types = Array.from(typesSet);
    if (!domains.length || !types.length) {
        return null;
    }
    const series = types.map((type) => ({
        name: type,
        values: domains.map((domain) => {
            const found = rawData.find((item) => item.COOPERTYPE === type && item.AREA === domain);
            return {
                domain,
                value: found ? found.COOPERTYPECOUNT : 0
            };
        })
    }));
    return {
        type: "雷达图",
        name: "各领域规则分布情况",
        year: value1.value,
        data: series
    };
};

const fetchRightInterpretation = async () => {
    const payload = buildRightChartPayload();
    if (!payload) {
        aiContentRight.value = "";
        return;
    }
    const hasValidContent =
        aiContentRight.value &&
        aiContentRight.value !== "解读生成中…" &&
        aiContentRight.value !== "解读加载失败" &&
        aiContentRight.value !== "暂无图表数据";
    if (hasValidContent || isRightInterpretLoading.value) {
        return;
    }
    isRightInterpretLoading.value = true;
    aiContentRight.value = "解读生成中…";
    try {
        const res = await getChartAnalysis(
            { text: JSON.stringify(payload) },
            {
                onChunk: (chunk) => {
                    appendAiInterpretationChunk(aiContentRight, chunk);
                }
            }
        );
        const text = getInterpretationTextFromChartResponse(res);
        aiContentRight.value = text || aiContentRight.value || "未返回有效解读内容";
    } catch (error) {
        console.error("合作限制领域分布图表解读请求失败", error);
        aiContentRight.value = "解读加载失败";
    } finally {
        isRightInterpretLoading.value = false;
    }
};

const initLeftChart = () => {
    if (!hasLeftChartData.value) {
        if (leftChart) {
            leftChart.dispose();
            leftChart = null;
        }
        return;
    }
    if (!leftChartRef.value) {
        return;
    }
    if (leftChart) {
        leftChart.dispose();
    }
    leftChart = echarts.init(leftChartRef.value);

    const rawData = coopRestrictionCompare.value;
    const yearsSet = new Set();
    const typesSet = new Set();

    rawData.forEach((item) => {
        yearsSet.add(item.LIMITDATE);
        typesSet.add(item.TYPENAME);
    });

    const years = Array.from(yearsSet).sort();
    const types = Array.from(typesSet);
    const finalYears = years.length > 0 ? years : [];

    if (!finalYears.length || !types.length) {
        leftChart.dispose();
        leftChart = null;
        return;
    }

    const colorMap = [
        { line: "#2f7ae5", start: "rgba(47, 122, 229, 0.3)", end: "rgba(47, 122, 229, 0.05)" },
        { line: "#29c0b1", start: "rgba(41, 192, 177, 0.3)", end: "rgba(41, 192, 177, 0.05)" },
        { line: "#e45f5f", start: "rgba(228, 95, 95, 0.3)", end: "rgba(228, 95, 95, 0.05)" },
        { line: "#7b5de6", start: "rgba(123, 93, 230, 0.3)", end: "rgba(123, 93, 230, 0.05)" }
    ];

    const series = types.map((type, index) => {
        const data = finalYears.map((year) => {
            const found = rawData.find((item) => item.TYPENAME === type && item.LIMITDATE === year);
            const v = found ? found.TYPECOUNT : 0;
            // 确保是整数，避免 ECharts 自动推断出小数坐标/刻度
            return Math.round(Number(v) || 0);
        });

        const colorConfig = colorMap[index % colorMap.length];

        return {
            name: type,
            type: "line",
            smooth: true,
            data,
            symbol: "circle",
            symbolSize: 6,
            // 点应覆盖在折线之上，避免视觉上“穿过”节点圆
            z: 3,
            lineStyle: {
                color: colorConfig.line,
                width: 2
            },
            itemStyle: {

                color: "#fff",
                borderColor: colorConfig.line,
                borderWidth: 2
            },
            areaStyle: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    { offset: 0, color: colorConfig.start },
                    { offset: 1, color: colorConfig.end }
                ])
            },
            axisLine: {
                lineStyle: {
                    color: 'rgba(231, 241, 255, 1)'
                }
            },
        };
    });

    const legendData = types.map((type, index) => ({
        name: type,
        itemStyle: {
            // 图例需要实心圆：独立于 series 的空心点样式
            color: colorMap[index % colorMap.length].line,
            borderColor: colorMap[index % colorMap.length].line,
            borderWidth: 0
        }
    }));

    const maxYValue = Math.max(
        0,
        ...series.flatMap((s) => (Array.isArray(s.data) ? s.data : []))
    );

    const option = {
        color: colorMap.map((c) => c.line),
        // 与智库概览「数量变化趋势」一致：预留图例空间，并用 containLabel 让轴文字不挤压绘图区
        grid: {
            top: "34%",
            right: "3%",
            bottom: "5%",
            left: "2%",
            containLabel: true
        },
        tooltip: { trigger: "axis", axisPointer: { type: "line" } },
        legend: {
            top: 8,
            left: "center",
            icon: "circle",
            itemWidth: 12,
            itemHeight: 12,
            itemGap: 24,
            textStyle: {
                color: "rgb(95, 101, 108)",
                fontSize: 16,
                fontFamily: "Microsoft YaHei",
                fontWeight: 400,
                lineHeight: 24
            },
            data: legendData
        },
        xAxis: {
            type: "category",
            boundaryGap: false,
            data: finalYears,
            axisLine: {
                show: true,
                lineStyle: {
                    color: "rgba(231, 241, 255, 1)"
                }
            },
            axisTick: {
                show: true,
                // 让刻度和 label 对齐，显示短直线
                alignWithLabel: true,
                length: 6,
                length2: 0,
                lineStyle: {
                    color: "rgba(231, 241, 255, 1)",
                    type: "solid"
                }
            },
            axisLabel: {
                color: "rgba(132, 136, 142, 1)",
                fontSize: 14,
                lineHeight: 22,
                fontFamily: "Microsoft YaHei",
                fontWeight: 400
            }
        },
        yAxis: {
            type: "value",
            min: 0,
            // 强制整数刻度：0/1/2/3...
            interval: 1,
            max: Math.ceil(maxYValue),
            name: "数量",
            nameLocation: "end",
            nameGap: 20,
            nameRotate: 0,
            nameTextStyle: {
                color: "rgba(170, 173, 177, 1)",
                fontFamily: "Microsoft YaHei",
                fontWeight: 400,
                fontSize: 14,
                lineHeight: 22,
                letterSpacing: 0,
                align: "right",
                verticalAlign: "bottom"
            },
            axisLabel: {
                color: "rgba(132, 136, 142, 1)",
                fontSize: 14,
                fontFamily: "Microsoft YaHei",
                fontWeight: 400,
                lineHeight: 22,
                formatter: (val) => String(Math.round(Number(val) || 0))
            },
            splitLine: {
                show: true,
                lineStyle: { color: "rgba(231, 241, 255, 1)", type: "dashed", width: 1 }
            },
            axisLine: { show: false },
            axisTick: { show: false }
        },
        series
    };
    leftChart.setOption(option);
};

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

const initRightChart = () => {
    if (!hasRightChartData.value) {
        if (rightChart) {
            rightChart.dispose();
            rightChart = null;
        }
        return;
    }
    if (!rightChartRef.value) {
        return;
    }
    if (rightChart) {
        rightChart.dispose();
    }
    rightChart = echarts.init(rightChartRef.value);

    const rawData = coopRestrictionDomain.value;

    const domainsSet = new Set();
    const typesSet = new Set();
    rawData.forEach((item) => {
        domainsSet.add(item.AREA);
        typesSet.add(item.COOPERTYPE);
    });

    const domains = Array.from(domainsSet);
    const types = Array.from(typesSet);

    const legendSplitAt = Math.ceil(types.length / 2);
    const legendFirstLine = types.slice(0, legendSplitAt);
    const legendSecondLine = types.slice(legendSplitAt);

    const indicators = domains.map((domain) => {
        const domainData = rawData.filter((item) => item.AREA === domain);
        const maxVal = Math.max(...domainData.map((d) => d.COOPERTYPECOUNT), 5);
        return { name: domain, max: Math.ceil(maxVal * 1.2) };
    });

    const colorMap = ["#2f7ae5", "#29c0b1", "#e45f5f", "#7b5de6"];
    const seriesData = types.map((type, index) => {
        const dataValues = domains.map((domain) => {
            const found = rawData.find((item) => item.COOPERTYPE === type && item.AREA === domain);
            return found ? found.COOPERTYPECOUNT : 0;
        });

        return {
            name: type,
            value: dataValues,
            itemStyle: { color: colorMap[index % colorMap.length] },
            // 雷达图围成区域填充：对应颜色 0.1 透明度
            areaStyle: { color: colorMap[index % colorMap.length], opacity: 0.1 }
        };
    });

    const option = {
        color: colorMap,
        // 避免自动换行导致“第二行不居中”：拆成两行 legend，每行各自居中
        legend: [
            {
                show: true,
                type: "plain",
                data: legendFirstLine,
                top: 8,
                left: "center",
                icon: "circle",
                itemWidth: 12,
                itemHeight: 12,
                itemGap: 24,
                textStyle: {
                    color: "rgb(95, 101, 108)",
                    fontSize: 16,
                    fontFamily: "Microsoft YaHei",
                    fontWeight: 400,
                    lineHeight: 24
                }
            },
            {
                show: legendSecondLine.length > 0,
                type: "plain",
                data: legendSecondLine,
                top: 32,
                left: "center",
                icon: "circle",
                itemWidth: 12,
                itemHeight: 12,
                itemGap: 24,
                textStyle: {
                    color: "rgb(95, 101, 108)",
                    fontSize: 16,
                    fontFamily: "Microsoft YaHei",
                    fontWeight: 400,
                    lineHeight: 24
                }
            }
        ],
        radar: {
            // 对齐左侧折线图（grid top=34%）的“图例到图形”间距：下移雷达中心并略缩半径
            center: ["50%", "62%"],
            radius: "60%",
            indicator: indicators,
            axisName: {
                color: "rgba(132, 136, 142, 1)",
                fontSize: 14,
                fontWeight: 400
            },
            splitLine: { lineStyle: { color: ["#e6e6e6"] } },
            splitArea: { show: false }
        },
        series: [
            {
                type: "radar",
                data: seriesData,
                // 移除雷达图端点圆点（既不显示实心圆，也不显示空心圆）
                symbol: "none",
                symbolSize: 0,
                showSymbol: false
            }
        ]
    };
    rightChart.setOption(option);
};

watch(
    coopRestrictionCompare,
    async () => {
        aiContentLeft.value = "";
        await nextTick();
        initLeftChart();
        if (isShowAiLeft.value && hasLeftChartData.value) {
            fetchLeftInterpretation();
        }
    },
    { deep: true, immediate: true }
);

watch(
    coopRestrictionDomain,
    async () => {
        aiContentRight.value = "";
        await nextTick();
        initRightChart();
        if (isShowAiRight.value && hasRightChartData.value) {
            fetchRightInterpretation();
        }
    },
    { deep: true, immediate: true }
);

onMounted(async () => {
    window.addEventListener("resize", handleResize);
    await getCoopRestrictionCompareData();
    await getCoopRestrictionDomainData();
});

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;
}

/* 合作限制：下拉项内边距（teleport 到 body，用 :global 生效） */
:global(.coop-select-dropdown .el-select-dropdown__item) {
    padding: 0 20px !important;
}

.datasub {
    width: 1600px;
    height: 460px;
    display: flex;
    justify-content: space-between;

    .left {
        width: 1063px;
        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: 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: 150px;
                height: 28px;
                padding: 0px 12px;
                position: absolute;
                top: 11px;
                right: 31px;
            }
        }

        .left-main {
            width: 1063px;
            height: 412px;
            box-sizing: border-box;
            position: relative;
            padding: 0px 24px 64px 24px;

            &.left-main--empty {
                display: flex;
                align-items: center;
                justify-content: center;
                padding: 24px;

                :deep(.el-empty__image) {
                    margin-bottom: 0;
                }
            }

            .datasub-left-empty {
                padding: 0;
                margin: 0;
            }

            .left-chart-row {
                display: flex;
                flex-direction: row;
                align-items: flex-start;
                width: 100%;
                box-sizing: border-box;
            }

            .left-main-echarts {
                width: 1015px;
                height: 348px;
            }

            .source {
                position: absolute;
                bottom: 21px;
                left: 24px;
                height: 22px;
                display: flex;
            }

            .chart-box {
                position: absolute;
                right: 0;
                bottom: 18px;
                width: 74px;
                height: 28px;
                z-index: 2;

                .btn-box {
                    width: 74px;
                    height: 28px;
                }

                .content-box {
                    width: 1063px;
                    position: absolute;
                    right: 0;
                    bottom: -18px;
                }
            }
        }
    }

    .right {
        width: 521px;
        height: 460px;
        border-radius: 10px;
        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: 150px;
                height: 28px;
                padding: 0px 12px;
                position: absolute;
                top: 11px;
                right: 31px;
            }
        }

        .right-main {
            width: 521px;
            height: 412px;
            box-sizing: border-box;
            padding: 0px 24px 64px 24px;
            position: relative;

            &.right-main--empty {
                display: flex;
                align-items: center;
                justify-content: center;
                padding: 24px;

                :deep(.el-empty__image) {
                    margin-bottom: 0;
                }
            }

            .datasub-right-empty {
                padding: 0;
                margin: 0;
            }

            .right-chart-row {
                display: flex;
                width: 100%;
                box-sizing: border-box;
            }

            .right-main-echarts {
                width: 473px;
                height: 348px;
            }

            .source {
                position: absolute;
                bottom: 21px;
                left: 24px;
                height: 22px;
                display: flex;
            }

            .chart-box {
                position: absolute;
                right: 0;
                bottom: 18px;
                width: 74px;
                height: 28px;
                z-index: 2;

                .btn-box {
                    width: 74px;
                    height: 28px;
                }

                .content-box {
                    width: 520px;
                    position: absolute;
                    right: 0;
                    bottom: -18px;
                }
            }
        }
    }
}
</style>
