<template>
    <el-scrollbar height="100vh">
        <div class="wrapper">
            <datav-header />
            <main>
                <el-row :gutter="16">
                    <el-col :span="6">
                        <datav-card
                            title="内部视频"
                            sub-title="登录客户端"
                            :titleClick="titleClickFun"
                        >
                            <div class="row mt-4 mb-20">
                                <div class="col col-8">
                                    <label>视频总数</label>
                                    <span>{{ videoStatus.all }}</span>
                                </div>
                                <div class="col col-8">
                                    <label>在线数</label>
                                    <span>{{ videoStatus.on }}</span>
                                </div>
                                <div class="col col-8">
                                    <label>在线率</label>
                                    <span>{{ videoStatus.percentage }}</span>
                                </div>
                            </div>
                            <div class="mb-12">
                                <VideoPlay
                                    :url="activeUrl"
                                    :showOperateBtns="false"
                                />
                            </div>
                            <el-scrollbar max-width="100%">
                                <div class="flex gap" style="width: 840px">
                                    <div
                                        v-for="(item, index) in videos"
                                        :key="item"
                                        @click="handlePlay(item, index)"
                                        style="width: 160px"
                                    >
                                        <img
                                            :src="item.imgUrl"
                                            :active="activeVideoIndex === index"
                                        />
                                    </div>
                                </div>
                            </el-scrollbar>
                        </datav-card>
                        <datav-card
                            title="问题数排名"
                            sub-title="查实问题数"
                            style="height: 470px"

                        >
                            <datav-tabs
                                type="bottom-button"
                                v-model="proRankTab"
                                ref="videoProRank"
                            >
                                <datav-tab-item label="分县市局" name="1">
                                    <el-scrollbar height="360px">
                                        <datav-chart-bar
                                            :data="fxsjRankList"
                                            size="large"
                                            :color="colors"
                                            :isgroupby="true"
                                        />
                                    </el-scrollbar>
                                </datav-tab-item>
                                <datav-tab-item label="局属单位" name="2">
                                    <el-scrollbar height="280px">
                                        <datav-chart-bar
                                            :data="jsdwRankList"
                                            size="large"
                                            :color="colors"
                                            :isgroupby="true"
                                        />
                                    </el-scrollbar>
                                </datav-tab-item>
                            </datav-tabs>
                        </datav-card>
                    </el-col>

                    <el-col :span="12">
                        <datav-date-picker v-model="time" />
                        <div class="flex gap-42">
                            <datav-statistic
                                :value="overview.total"
                                title="问题数"
                                style="width: 20%"
                            />
                            <datav-statistic
                                :value="overview.completionProblem"
                                title="办结问题数"
                                style="width: 20%"
                            />
                            <datav-statistic
                                :value="overview.discoverProblem"
                                title="查实问题数"
                                style="width: 20%"
                            />
                            <datav-statistic
                                :value="overview.relativeOrg"
                                title="问责单位数"
                                style="width: 20%"
                            />
                            <datav-statistic
                                :value="overview.relativePer"
                                title="问责人次"
                                style="width: 20%"
                            />
                        </div>
                        <v-charts
                            style="height: 420px"
                            :option="option"
                            autoresize
                            @click="handleClick"
                            ref="videoMap"
                        />
                        <datav-card title="问题趋势">
                            <v-charts
                                style="height: 300px"
                                :option="proTrend"
                                autoresize
                                ref="videoProTrend"
                            />
                            <div class="gobal-dropdown-container">
                                <el-dropdown
                                    class="test"
                                    @command="handleCommand"
                                >
                                    <span
                                        class="el-dropdown-link my-gobal-yearselect"
                                    >
                                        {{ selectedYear + " 年" }}
                                    </span>
                                    <template #dropdown>
                                        <el-dropdown-menu style="width: 90px">
                                            <el-dropdown-item
                                                v-for="year in years"
                                                :key="year"
                                                :command="year"
                                                >{{ year + " 年" }}
                                            </el-dropdown-item>
                                        </el-dropdown-menu>
                                    </template>
                                </el-dropdown>
                            </div>
                        </datav-card>
                    </el-col>

                    <el-col :span="6">
                        <datav-card title="实时预警">
                            <el-scrollbar height="450px">
                                <div
                                    class="message message-info pointer"
                                    v-for="item in videoInspections"
                                    :key="item"
                                    :active="item.distributionState === '1'"
                                    @click="handleOpenData"
                                >
                                    <div class="message-title">
                                        {{
                                            item.distributionState === "1"
                                                ? "已处理"
                                                : "待处理"
                                        }}
                                    </div>
                                    <div>{{ item.title }}</div>
                                    <div>{{ item.content }}</div>
                                    <div class="message-footer flex between">
                                        <span>{{ item.fsdwGajgmc }}</span>
                                        <span>{{ item.rqsj }}</span>
                                    </div>
                                </div>
                                <el-empty description="暂无数据" v-if="videoInspections.length === 0" />
                            </el-scrollbar>
                        </datav-card>
                        <datav-card title="问题涉及方面分布">
                            <v-charts
                                style="height: 350px"
                                :option="ProblemTypeRateChart"
                                autoresize
                                ref="videoProblemTypeRate"
                            />
                        </datav-card>
                    </el-col>
                </el-row>
            </main>
        </div>
    </el-scrollbar>
</template>

<script setup>
import LivePlayer from "@liveqing/liveplayer-v3";

import changshaMap from "@/assets/data/changsha.json";
import vCharts from "vue-echarts";
import * as echarts from "echarts/core";
import {
    getAllVideoSuperviseCount,
    getVideoSuperviseProblemTypeRate,
    getVideoSuperviseProblemRank,
    getVideoSuperviseMap,
    getVideoSuperviseTrend,
    getVideoStatus,
} from "@/api/screen/videoSupervise.ts";
import { listVideoInspection } from "@/api/data/videoInspection";
import moment from "moment/moment.js";
import { mapOrgNameMapping } from "@/enums/orgMapping.js";
import { onMounted } from "vue";

// region 所有变量
const router = useRouter();
const time = ref([
    moment().startOf("year").format("YYYY-MM-DD"),
    moment().format("YYYY-MM-DD"),
]);
const proRankTab = ref("1");
const fxsjRankList = ref([]);
const jsdwRankList = ref([]);
const overview = ref({
    total: 0,
    discoverProblem: 0,
    completionProblem: 0,
    relativeOrg: 0,
    relativePer: 0,
    completionRate: 0,
});
const mapIconList = ref([
    {
        originalName: "浏阳市局",
        name: "浏阳市",
        discoverProblem: 135,
        completionProblem: 135,
        relativeOrg: 89,
        relativePer: 152,
        completionRate: 100,
    },
]);

const currentYear = new Date().getFullYear();
const years = ref([
    currentYear.toString(),
    (currentYear - 1).toString(),
    (currentYear - 2).toString(),
]); // 年份列表
const selectedYear = ref(currentYear); // 当前选中的年份

const videoProRank = ref(null);
const videoMap = ref(null);
const videoProTrend = ref(null);
const videoProblemTypeRate = ref(null);
let videoProRankIntervalId;
let videoMapIntervalId;
let videoTrendIntervalId;
let videoProblemTypeRateIntervalId;
const colors = [
    {
        color: "linear-gradient( 270deg, #FB002D 0%, #822232 100%)",
        percentage: 80,
    },
    {
        color: "linear-gradient( 270deg, #FFB90E 0%, #71501D 100%)",
        percentage: 60,
    },
];

// endregion

// region 所有图表
const proTrend = ref({
    xAxis: {
        type: "category",
        boundaryGap: true,
        data: [
            "1月",
            "2月",
            "3月",
            "4月",
            "5月",
            "6月",
            "7月",
            "8月",
            "9月",
            "10月",
            "11月",
        ],
        axisTick: {
            // 去掉X轴刻度线
            show: false,
        },
    },
    yAxis: {
        type: "value",
        splitLine: {
            show: true,
            lineStyle: {
                color: "#193775",
            },
        },
    },
    tooltip: {
        trigger: "axis",
        axisPointer: {
            type: "line",
            label: {
                backgroundColor: "#6a7985",
            },
        },
    },
    series: [
        {
            type: "line",
            smooth: true,
            lineStyle: {
                color: "#28E6FF",
                width: 4,
            },
            areaStyle: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    {
                        offset: 0,
                        color: "rgba(40,230,255,0.47)", // 渐变起始颜色
                    },
                    {
                        offset: 1,
                        color: "rgba(40,230,255,0)", // 渐变结束颜色
                    },
                ]),
            },
            data: [],
        },
    ],
    grid: {
        left: "5%", // 图表距离容器左边的距离
        right: "2%", // 图表距离容器右边的距离
        top: "10%", // 图表距离容器上边的距离
        bottom: "20%", // 图表距离容器下边的距离
        containLabel: false, // 是否包含坐标轴的标签
    },
});
echarts.registerMap("changsha", changshaMap);
const option = ref({
    geo: {
        map: "changsha",
        itemStyle: {
            normal: {
                opacity: 0, // 设置透明度
            },
        },
    },
    tooltip: {
        trigger: "item",
        position: "bottom",
        formatter: function (params) {
          const dataItem = mapIconList.value.find((item) =>
              item.name.includes(params.name.substring(0, 2))
          );
          // <li>办结率 <span>${dataItem.completionRate}%</span></li>
          if (dataItem) {
            return `
        <div class="tooltip">
          <div class="tooltip-title">${dataItem.originalName}</div>
          <div class="tooltip-content">
            <ul class="tooltip-ul" >
              <li>查实问题数 <span>${dataItem.discoverProblem}</span></li>
              <li>办结问题数 <span>${dataItem.completionProblem}</span></li>
              <li>涉及单位数 <span>${dataItem.relativeOrg}</span></li>
              <li>涉及人数 <span>${dataItem.relativePer}</span></li>

            </ul>
          </div>
        </div>`;
          } else {
            return `<div class="tooltip">
          <div class="tooltip-title">${params.name}</div>
          <div class="tooltip-content">
            <ul class="tooltip-ul"">
              <li>查实问题数 <span>-</span></li>
              <li>办结问题数 <span>-</span></li>
              <li>涉及单位数 <span>-</span></li>
              <li>涉及人数 <span>-</span></li>

            </ul>
          </div>
        </div>`;
          }
        },
    },
  visualMap: {
    type: "piecewise",
    bottom: 10,
        pieces: [
            { gte: 0, lte: 200, label: "低于平均问题30%", color: "#4987F6" },
            {
                gte: 200,
                lte: 400,
                label: "平均问题上下浮动30%内",
                color: "#F6A149",
            },
            { gte: 400, label: "高于平均问题30%", color: "#D34343" },
        ],
        right: 10,
        realtime: false,
        orient: "horizontal",
        textStyle: {
            color: "#fff",
        },

        calculable: true,
        inRange: {
            color: ["#4987F6", "#F6A149", "#D34343"],
        },
    },
    series: [
        {
            name: "长沙",
            type: "map",
            map: "changsha",
            hoverAnimation: true,
            roam: true,
            label: {
                show: true,
                color: "white",
            },
            itemStyle: {
                normal: {
                    areaColor: "#02215E",
                    borderColor: "#24D2EE",
                    borderWidth: 1, // 高亮时边框宽度
                },
            },
            emphasis: {
                areaColor: "#FFD700", // 高亮时区域颜色
                borderColor: "#FF0000", // 高亮时边框颜色
                borderWidth: 4, // 高亮时边框宽度
            },
            data: [],
        },
    ],
});
const ProblemTypeRateChart = ref({
    series: [
        {
            type: "pie",
            radius: ["40%", "70%"],
            label: {
                color: "#fff",
            },
            data: [],
        },
    ],
    tooltip: {
        trigger: "item",
    },
}); // 问题涉及方面分布
// endregion

const titleClickFun =()=>{
  window.open("http://65.47.26.34")
}

// region 所有函数
const getVideoSuperviseProblemRankData = async () => {
  const body = {
    beginTime: time.value[0],
    endTime: time.value[1]
  }
    const res = await getVideoSuperviseProblemRank(body);
    fxsjRankList.value = res.fxsjVideoSuperviseProblemRankList;

    jsdwRankList.value = res.jsdwVideoSuperviseProblemRankList;
};
const getAllVideoSuperviseCountData = async (timeValue) => {
    const res = await getAllVideoSuperviseCount(timeValue);
    overview.value = res.overview;
};
const getVideoSuperviseMapData = async (timeValue) => {
    const res = await getVideoSuperviseMap(timeValue);
    const mappedData = mapOrgNameMapping(
        res.videoSuperviseMapIconVoList,
        "discoverProblem"
    );
    // 总数
    const maxItem = mappedData.reduce(
        (max, item) => (Number(item.value) > Number(max.value) ? item : max),
        mappedData[0]
    );
    const range60Percent = maxItem.value * 0.6; // 不用取整，小数也可以
    const range80Percent = maxItem.value * 0.8; // 不用取整，小数也可以

    mapIconList.value = mappedData;
    option.value.series[0].data = mappedData;
    option.value.visualMap.pieces = [
        {
            gte: 0,
            lte: range60Percent,
            label: "低于最大问题数的60%",
            color: "#4987F6",
        },
        {
            gte: range60Percent,
            lte: range80Percent,
            label: "介于最大问题数的60%~80%",
            color: "#F6A149",
        },
        { gte: range80Percent, label: "高于最大问题数的80%", color: "#D34343" },
    ];
};
const getVideoSuperviseTrendData = async (year) => {
    const res = await getVideoSuperviseTrend(year);
    const temp = res.videoSuperviseTrendList;
    const categories = temp.map((item) => item.name);
    const values = temp.map((item) => item.value);
    proTrend.value.xAxis.data = categories;
    proTrend.value.series[0].data = values;
};
const getVideoSuperviseProblemTypeRateData = async (timeValue) => {
    const res = await getVideoSuperviseProblemTypeRate(timeValue);
    ProblemTypeRateChart.value.series[0].data =
        res.videoSuperviseProblemTypeRate;
};

const getData = async () => {
  getVideoSuperviseProblemRankData();
     Promise.all([
       getAllVideoSuperviseCountData(time.value),
       getVideoSuperviseMapData(time.value),
       getVideoSuperviseTrendData(selectedYear.value),
       getVideoSuperviseProblemTypeRateData(time.value)
     ])

};
// endregion

// region  动画
// 问题数排名动画
const videoProRankAnimation = () => {
    proRankTab.value = ((parseInt(proRankTab.value) % 2) + 1).toString();
};
videoProRankIntervalId = setInterval(videoProRankAnimation, 3000);
// 地图动画
const videoMapAnimation = () => {
    const myVideoMap = videoMap?.value?.chart;
    if (!myVideoMap) return;
    // 来个随机数，9个图  0~8的整数就ok
    const randomNum = Math.floor(Math.random() * 9);
    myVideoMap.dispatchAction({
        type: "downplay", //downplay 取消高亮
        seriesIndex: 0,
    });
    myVideoMap.dispatchAction({
        type: "highlight", //highLight 高亮指定的数据图形
        seriesIndex: 0, //系列index
        dataIndex: randomNum, //数据index
    });
    myVideoMap.dispatchAction({
        type: "showTip", //showTip 显示提示框
        seriesIndex: 0,
        dataIndex: randomNum,
    });
};
// 启动定时器，每隔 2 秒执行一次
// videoMapIntervalId = setInterval(videoMapAnimation, 2000);
// 问题趋势
const videoTrendAnimation = () => {
    const trendTemp = videoProTrend?.value?.chart;
    if (!trendTemp) return;
    const randomNum = Math.floor(Math.random() * 12);
    trendTemp.dispatchAction({
        type: "showTip",
        seriesIndex: 0,
        dataIndex: randomNum,
    });
};
videoTrendIntervalId = setInterval(videoTrendAnimation, 2000);
// 问题涉及方面分布动画
const videoProblemTypeRateAnimation = () => {
    const temp = videoProblemTypeRate?.value?.chart;
    if (!temp) return;
    const length = ProblemTypeRateChart.value.series[0].data.length;
    const randomNum = Math.floor(Math.random() * length);
    temp?.dispatchAction({ type: "downplay", seriesIndex: 0 });
    temp?.dispatchAction({
        type: "highlight",
        seriesIndex: 0,
        dataIndex: randomNum,
    }); // 显示
    temp?.dispatchAction({
        type: "showTip",
        seriesIndex: 0,
        dataIndex: randomNum,
    });
};
videoProblemTypeRateIntervalId = setInterval(
    videoProblemTypeRateAnimation,
    2000
);
// endregion

// region 事件||监听
onMounted(() => {
    getData();
    setupEventListeners();
});
watch(time, () => {
    getData();
});
const handleCommand = (year) => {
    selectedYear.value = year; // 更新当前选中的年份
    getVideoSuperviseTrendData(selectedYear.value);
};
const handleClick = (params) => {
    const departId = params.data.departId;
    const url = router.resolve({
        path: "/datav/subOneVideoInsp",
        query: { departId: departId },
    }).href;
    window.open(url, "_blank");
};

// 鼠标经过地图事件
const setupEventListeners = () => {
    videoProRankAnimationStop();
    videoMapAnimationStop();
    videoTrendAnimationStop();
    videoProblemTypeRateAnimationStop();
};
const videoProRankAnimationStop = () => {
    const temp = videoProRank.value?.$el;
    temp.addEventListener("mouseenter", () => {
        clearInterval(videoProRankIntervalId);
    });
    temp.addEventListener("mouseleave", () => {
        clearInterval(videoProRankIntervalId); // 确保没有多个定时器同时运行
        videoProRankIntervalId = setInterval(videoProRankAnimation, 3000);
    });
};
const videoMapAnimationStop = () => {
    const temp = videoMap?.value?.chart;
    // 鼠标移入
    temp.on("mousemove", (e) => {
        clearInterval(videoMapIntervalId);
        temp.dispatchAction({ type: "downplay", seriesIndex: 0 });
        temp.dispatchAction({
            type: "highlight",
            seriesIndex: 0,
            dataIndex: e.dataIndex,
        });
        temp.dispatchAction({
            type: "showTip",
            seriesIndex: 0,
            dataIndex: e.dataIndex,
        });
    });
    // 鼠标移出
    temp.on("mouseout", () => {
        clearInterval(videoMapIntervalId); // 确保没有多个定时器同时运行
        videoMapIntervalId = setInterval(videoMapAnimation, 2000);
    });
};
// videoProTrend
const videoTrendAnimationStop = () => {
    const temp = videoProTrend?.value.getDom();
    temp.addEventListener("mouseenter", () => {
        clearInterval(videoTrendIntervalId);
    });
    temp.addEventListener("mouseleave", () => {
        clearInterval(videoTrendIntervalId);
        videoTrendIntervalId = setInterval(videoTrendAnimation, 2000);
    });
};
const videoProblemTypeRateAnimationStop = () => {
    const temp = videoProblemTypeRate?.value?.chart;
    temp.on("mousemove", (e) => {
        clearInterval(videoProblemTypeRateIntervalId);
        temp.dispatchAction({ type: "downplay", seriesIndex: 0 });
        temp.dispatchAction({
            type: "highlight",
            seriesIndex: 0,
            dataIndex: e.dataIndex,
        });
        temp.dispatchAction({
            type: "showTip",
            seriesIndex: 0,
            dataIndex: e.dataIndex,
        });
    });
    temp.on("mouseout", () => {
        clearInterval(videoProblemTypeRateIntervalId);
        videoProblemTypeRateIntervalId = setInterval(
            videoProblemTypeRateAnimation,
            2000
        );
    });
};

import { listVideoConfigByDepartId } from "@/api/system/videoConfig";
const videos = ref([]);
const activeUrl = ref("");

const videoStatus = ref({
    all: 0,
    percentage: "0%",
    on: 0,
});
onMounted(() => {
    getVideoStatus().then((data) => {
        videoStatus.value = data;
    });
    listVideoConfigByDepartId("12630").then((data) => {
        videos.value = data;
        if (data.length > 0) {
            activeUrl.value = data[0].videoUrl;
        }
    });
});

//视频循环
setInterval(()=>{
  activeVideoIndex.value = (parseInt(activeVideoIndex.value) % videos.value.length + 1) || 0
  activeUrl.value=videos?.value[parseInt(activeVideoIndex.value) % videos.value.length - 1].videoUrl;
},6000)





const activeVideoIndex = ref(0);
function handlePlay(item, index) {
    activeVideoIndex.value = index;
    activeUrl.value = item.videoUrl;
}

const videoInspections = ref([]);
async function getVideoInspection() {
    const data = await listVideoInspection({
        current: 1,
        size: 5,
    });
    videoInspections.value = data.records;
}

onMounted(() => {
    getVideoInspection();
});

function handleOpenData() {
    window.open(router.resolve('/data/VideoInspection').href)
}

</script>

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

iframe {
    border: none;
    width: 100%;
    min-height: 90px;
}
img {
    width: 100%;
    display: block;
    border: 1px solid transparent;

    &[active="true"] {
        border-color: #1cd9ff;
    }
}

.message {
    padding: 10px;
    margin-bottom: 10px;
    background: linear-gradient(
        180deg,
        rgba(208, 18, 18, 0) 0%,
        rgba(255, 0, 0, 0.26) 100%
    );
    border: 1px solid;
    border-image: linear-gradient(
            180deg,
            rgba(255, 71, 71, 0.59),
            rgba(251, 95, 95, 1)
        )
        1 1;

    .message-title {
        color: #ff0017;
    }
    &[active="true"] {
        background: linear-gradient(
            180deg,
            rgba(18, 104, 208, 0) 0%,
            rgba(0, 166, 255, 0.26) 100%
        );
        border: 1px solid;
        border-image: linear-gradient(
                180deg,
                rgba(71, 209, 255, 0.28),
                rgba(8, 177, 255, 1)
            )
            1 1;

        .message-title {
            color: #1cd9ff;
        }
    }

    .message-title {
        font-size: 23px;
        font-weight: 700;
        margin-bottom: 10px;
    }

    .message-footer {
        font-size: 14px;
        color: #597ae9;
        margin-top: 10px;
    }
}

:deep() {
    // 弹框整体
    .tooltip {
        position: relative;
        width: 169.88px;
        height: 178px;
        background: linear-gradient(
            180deg,
            rgba(1, 4, 87, 0.8) 0%,
            rgba(3, 21, 119, 0.8) 100%
        );
        border: 1px solid #4e8fff;
        margin: -10px -10px -10px -10px;
    }

    //浏阳市局
    .tooltip-title {
        width: 169.88px;
        height: 43px;
        background: linear-gradient(
            180deg,
            rgba(1, 4, 87, 0.8) 0%,
            rgba(3, 21, 119, 0.8) 100%
        );
        display: flex;
        justify-content: center; /* 水平居中 */
        align-items: center; /* 垂直居中 */
        text-align: center; /* 水平居中 */
        font-weight: 400;
        font-size: 16px;
        color: #ffffff;
        line-height: 22px;
        border-bottom: 1px solid #253755; /* 设置下边框 */
    }

    .tooltip-content {
        width: 170px;
        height: 132px;
        //font-size: 11px;
        margin-top: -12px;
        background: linear-gradient(180deg, #010457 0%, #031577 100%);
    }

    .tooltip-content ul {
        list-style-type: none; /* 移除默认的小圆点 */
        padding: 0;
    }
    .tooltip-content ul li {
      display: flex;
      justify-content: space-around;
      height: 26px;
      color: #597AE9;
      font-weight: 400;
      font-size: 14px;
    }

    .tooltip-ul span {
      display: inline-block;
      float: right;
      color: #fff;
      font-size: 14px;
      //text-align: center; /* 水平居中 */
    }

    /* 小尖角 */
    .tooltip::before {
        content: "";
        position: absolute;
        top: 90px; /* 调整尖角的垂直位置 */
        left: -10px; /* 调整尖角的水平位置 */
        width: 0;
        height: 0;
        //border-top: 10px solid red; /* 顶边颜色 */
        //border-bottom: 10px solid green; /* 底边颜色 */
        //border-right: 10px solid blue; /* 右边颜色，与背景颜色相同 */
    }
}

.gobal-dropdown-container {
    position: absolute;
    right: 20px;
    top: 15px;
}

.test {
    width: 95px;
    height: 25px;
    background: #1c3472;
}

.gobal-dropdown-container {
    position: absolute;
    right: 20px;
    top: 15px;
}

.my-gobal-yearselect {
    font-size: 14px;
    padding-top: 6px;
    padding-left: 20px;
    width: 90px;
    color: #fff;
}
</style>
