<template>
    <!-- 融媒体 -->
    <div class="tong-container" ref="appRef">
        <div class="bg">
            <MainTitle :title="title"></MainTitle>
            <div class="main">
                <!-- 左边菜单 -->
                <div class="main-left">
                    <div
                        class="main-left-box"
                        :class="{ boxOn: flog == index }"
                        v-for="(item, index) in tagTitle"
                        :key="index"
                        @click="onClick(item, index)"
                    >
                        <div class="box-icon-text">
                            <!-- 右边标题 -->
                            <div class="left-title">
                                <span class="title-text">{{ item.name }}</span>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- 右边内容 -->
                <div class="main-right">
                    <div class="main-right-box">
                        <Content
                            :scrollData="scrollData"
                            :settingData="settingData"
                            :infoState="infoState"
                            :parentLoad="loadState"
                            @openInfo="openInfo"
                        >
                        </Content>
                        <Spin fix v-if="loadState">
                            <Icon
                                type="load-c"
                                size="80"
                                class="demo-spin-icon-load"
                                color="#c1cedc"
                            ></Icon>
                            <div style="font-size: 40px; color: #c1cedc">
                                加载中...
                            </div>
                        </Spin>
                    </div>
                    <!-- <div class="page" v-if="scrollData.length > 0 && infoState">
                        <Page
                            :total="dataFilter.total"
                            :current.sync="dataFilter.page"
                            :page-size="dataFilter.pageSize"
                            @on-change="pageChange"
                            show-elevator
                        />
                    </div> -->
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { useIndex } from "@/utils/utilsDramAdmin";
import MainTitle from "./components/MainTitle.vue";
import Content from "./components/mediaBigScreen/content";
export default {
    data() {
        return {
            title: "三江翠屏",
            flog: 0,
            dataFilter: {
                page: 1,
                pageSize: 20,
                total: 0,
            },
            // tagTitle: [
            //     {
            //         columnName: "翠屏",
            //         columnId: "3f7adceb-fcf9-4adb-956d-7987b42cd10f",
            //     },
            //     {
            //         columnName: "部门动态",
            //         columnId: "16653738-7af1-45d3-b6a3-ab13c49b2760",
            //     },
            //     {
            //         columnName: "电视新闻",
            //         columnId: "9d3fe8a8-a994-475e-981c-aac2bce70c9b",
            //     },
            //     {
            //         columnName: "微视频",
            //         columnId: "bdb2782e-eaba-4bd9-9f1e-09d85e32c73d",
            //     },
            //     {
            //         columnName: "镇村动态",
            //         columnId: "28009c03-4766-40eb-b86d-fe09bb11ac21",
            //     },
            //     {
            //         columnName: "法治翠屏",
            //         columnId: "1d15515f-e7d5-4efd-bcdb-12d65104c14d",
            //     },
            //     {
            //         columnName: "医保动态",
            //         columnId: "972136f0-172f-436e-9fa9-332ea58fa3d4",
            //     },
            //     {
            //         columnName: "办事指南",
            //         columnId: "cd775f6e-d6f5-4b10-a78f-80042e0aa6de",
            //     },
            //     {
            //         columnName: "医保政策",
            //         columnId: "a914aa8c-27b9-4ff3-ba83-54811b41fe0b",
            //     },
            //     {
            //         columnName: "直播",
            //         columnId: "08d99eb1-b653-4386-955a-53a43c5139c3",
            //     },
            // ],
            tagTitle: [],
            scrollData: [],
            tenantDomainName: "",
            tabJumpId: "",
            loadState: false,
            settingData: {},
            infoState: true,
            currentColumnName: "",
        };
    },
    components: { MainTitle, Content },
    mounted() {
        const { calcRate, windowDraw } = useIndex(this.$refs.appRef);
        calcRate();
        windowDraw();
        this.queryFlData();
    },
    created() {},
    methods: {
        // 查询分类
        queryFlData() {
            let url = "/convergenceMedia/getColumn";
            let params = {
                columnId: "64525",
            };

            this.$http.post(url, this.common.request(params)).then((res) => {
                if (res && res.data.code >= 200 && res.data.code < 400) {
                    let data = res.data.data;
                    if (
                        data &&
                        data.body &&
                        data.body.blocks &&
                        data.body.blocks.length >= 5
                    ) {
                        this.tagTitle =
                            data.body.blocks[4].data_props &&
                            data.body.blocks[4].data_props.length > 0
                                ? data.body.blocks[4].data_props
                                : [];
                        this.onClick(this.tagTitle[0], 0);
                    }
                } else {
                    this.$Message.error("获取数据失败");
                }
            });
        },
        openInfo(data) {
            this.infoState = data;
        },
        // 左边切换
        // 点击切换tag
        onClick(item, index) {
            this.scrollData = [];
            this.loadState = true;
            this.flog = index;
            this.dataFilter.page = 1;
            this.dataFilter.total = 0;
            this.tabJumpId =
                item.redirection &&
                item.redirection.related_data &&
                item.redirection.related_data.id;
            this.infoState = true;
            this.currentColumnName = item.name;
            this.queryScrollDataList(this.tabJumpId);
        },
        // 查询列表
        queryScrollDataList (id) {
            this.scrollData = []
            let url = "/convergenceMedia/syncNewsColumn";
            let params = {
                // appInfoId: 516,
                columnId: id,
                // pageNum: this.dataFilter.page - 1,
                // pageSize: 10,
                // url: "http://hongqi.wengegroup.com:9001/newNews/getNewsColumnData",
                // userId: "",
            };

            this.$http.post(url, this.common.request(params)).then((res) => {
                if (res && res.data.code >= 200 && res.data.code < 400) {
                    this.loadState = false;
                    let data =
                        res.data.data && res.data.data.length > 0 && res.data.data.filter(item => {
                            if (item.name.includes("新闻列表") || item.name.includes("专题列表")) {
                                return true
                            }
                        })
                        data.forEach(element => {
                            if (element.data_props && element.data_props.length > 0) {
                                this.scrollData.push(...element.data_props)
                            }
                        });

                        // data.data_props && data.data_props.length > 0
                        //     ? data.data_props
                        //     : [];
                    this.scrollData = this.scrollData.map((item) => {
                        let contentData =
                            item.related_data &&
                            item.related_data.thumbnails &&
                            item.related_data.thumbnails.length > 0 &&
                            item.related_data.thumbnails[0];
                        return {
                            ...item,
                            url: contentData.url,
                            title: item.related_data && item.related_data.title,
                            publish_time:
                                item.related_data &&
                                this.formatTime(item.related_data.publish_time),
                        };
                    });

                } else {
                    this.$Message.error("获取数据失败");
                }
            });
        },
        formatTime(timestamp) {
            // 处理空值或非数字情况
            if (!timestamp || isNaN(Number(timestamp))) {
                return "未知";
            }

            // 转换为毫秒级时间戳（确保输入为数字）
            const targetTime = Number(timestamp) * 1000;
            const now = Date.now();
            const diff = now - targetTime; // 时间差（毫秒）

            // 计算各类时间单位差（向下取整）
            const seconds = Math.floor(diff / 1000);
            const minutes = Math.floor(seconds / 60);
            const hours = Math.floor(minutes / 60);
            const days = Math.floor(hours / 24);
            const years = Math.floor(days / 365);

            // 小于1分钟（60秒）
            if (seconds < 60) {
                return "刚刚";
            }

            // 1分钟到1小时内
            if (minutes < 60) {
                return `${minutes}分钟前`;
            }

            // 1小时到24小时内
            if (hours < 24) {
                return `${hours}小时前`;
            }

            // 24小时到3天内
            if (days >= 1 && days < 3) {
                return `${days}天前`;
            }

            // 处理日期格式化
            const date = new Date(targetTime);
            const year = date.getFullYear();
            const month = String(date.getMonth() + 1).padStart(2, "0");
            const day = String(date.getDate()).padStart(2, "0");
            const hour = String(date.getHours()).padStart(2, "0");
            const minute = String(date.getMinutes()).padStart(2, "0");

            // 一年以上显示完整日期时间
            if (years >= 1) {
                return `${year}-${month}-${day} ${hour}:${minute}`;
            }

            // 3天到1年内显示月日时间
            return `${month}-${day} ${hour}:${minute}`;
        },
        // 分页查询列表
        queryPageList() {
            this.scrollData = [];
            this.loadState = true;
            let url = "/convergenceMedia/selectByAppSpecial";
            let params = {
                appInfoId: 516,
                columnId: this.tabJumpId,
                pageNum: this.dataFilter.page - 1,
                pageSize: 10,
                url: "http://hongqi.wengegroup.com:9001/newNews/getNewsColumnData",
                userId: "",
            };
            this.$http.post(url, this.common.request(params)).then((res) => {
                if (res && res.data.code >= 200 && res.data.code < 400) {
                    this.loadState = false;
                    this.scrollData = res.data.data[0].list;
                    if (res.data.data[0].total) {
                        this.dataFilter.total = res.data.data[0].total;
                    }
                } else {
                    this.$Message.error("获取数据失败");
                }
            });
        },
        /**
         * @description 分页更换事件回调
         */
        pageChange(p) {
            this.dataFilter.page = p;
            this.queryPageList();
        },
    },
};
</script>

<style lang="less" scoped>
@import "../../styles/fonts/font.less";

/deep/ #zycf_style {
}

/deep/ span {
    color: #fff !important;
}

/deep/ .ivu-spin-fix {
    background-color: transparent;
}

.FbHtmlContent {
    width: 100%;
    height: 100%;
}

.tong-container {
    width: 1920px;
    height: 1080px;
    transform: scale(var(--scale)) translate(-50%, -50%);
    transform-origin: 0 0;
    position: absolute;
    left: 50%;
    top: 50%;
    background-image: url("./../../assets/largeScreen/page-bg.png");
    background-size: 100%;

    .bg {
        width: 1920px;
        height: 1080px;
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;

        .main {
            position: absolute;
            margin: 0 auto;
            top: 90px;
            width: 1804px;
            display: flex;
            justify-content: center;
            height: 920px;
            display: flex;

            .main-left {
                width: 386px;
                height: 876px;
                margin-top: 50px;
                overflow: auto;

                &::-webkit-scrollbar {
                    display: none;
                }

                // 激活样式
                .boxOn {
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    width: 386px;
                    height: 134px;
                    background: url("./../../assets/rmt/bg-ac.png") no-repeat !important;
                    background-size: 100%;
                    margin-bottom: 24px;
                    color: #fff;

                    .title-text {
                        font-family: "PingFang SC";
                        font-style: normal;
                        font-weight: 400;
                        font-size: 28px;
                        line-height: 39px;
                        display: flex;
                        align-items: center;
                        color: #fff;
                        opacity: 1 !important;
                    }
                }
            }

            .main-left-box {
                display: flex;
                justify-content: center;
                align-items: center;
                width: 386px;
                height: 134px;
                background: url("./../../assets/rmt/bg.png") no-repeat;
                background-size: 100%;
                margin-bottom: 24px;

                .box-icon-text {
                    width: 340px;
                    height: 80px;
                    display: flex;
                    align-items: center;
                    justify-content: center;

                    .left-title {
                        .title-text {
                            font-family: "PingFang SC";
                            font-style: normal;
                            font-weight: 400;
                            font-size: 28px;
                            line-height: 39px;
                            display: flex;
                            align-items: center;
                            color: #eef4ff;
                            opacity: 0.56;
                        }
                    }
                }
            }

            .main-left-box:nth-last-child(1) {
                margin-bottom: 0;
            }

            .main-right {
                width: 1334px;
                height: 876px;
                background: url("./../../assets/screenView/bg-right.png")
                    no-repeat;
                background-size: 100%;
                margin: 50px 0 0 48px;
                display: flex;
                justify-content: center;
                position: relative;

                .main-right-box {
                    width: 1234px;
                    height: 780px;
                    margin-top: 36px;
                    display: flex;
                    flex-wrap: wrap;
                    justify-content: space-between;
                    position: relative;
                }

                .page {
                    width: 100%;
                    height: 50px;
                    position: absolute;
                    bottom: 0;
                    left: 0;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                }
            }
        }
    }
}

/deep/ .ivu-page {
    color: #fff;
    background-color: transparent;
}

/deep/ .ivu-page-next,
/deep/ .ivu-page-prev,
/deep/ .ivu-page-item,
/deep/ .ivu-page-options-elevator input {
    background-color: transparent;
    color: #fff;
    text-align: center;
}

/deep/ .ivu-page-next a,
/deep/ .ivu-page-prev a,
/deep/ .ivu-page-item a {
    color: #fff;
}
</style>
