<template>
    <div class="container" ref="appRef">
        <outsideTitle :title="title"></outsideTitle>
        <div class="main">
            <div class="video-box">
                <span class="box-title" style="font-size: 36px">叙永新闻</span>
                <div style="width: 100%; height: 780px">
                    <common-live-player
                        :videoUrl="currentVideo.playUrl"
                        :muted="false"
                        :aspect="'173:100'"
                        @ended="ended"
                    ></common-live-player>
                </div>
                <span class="box-title"
                    >正在播放：{{ currentVideo.title }}</span
                >
            </div>
            <div class="right-box">
                <div class="contetn-box">
                    <span class="box-title" style="font-size: 36px"
                        >热点推荐</span
                    >
                    <div class="list">
                        <vue-seamless-scroll
                            :data="contentList"
                            :class-option="option"
                            style="width: 100%; height: 100%; overflow: hidden"
                        >
                            <div style="width: 100%">
                                <!-- <div
                                    class="list-item"
                                    v-for="(item, index) in contentList"
                                    :key="index"
                                >
                                    <div class="content">
                                        <div class="content-title">
                                            {{ item.title }}
                                        </div>
                                        <div class="tag">
                                            <span>{{ item.source }}</span>
                                            <span>{{ item.publishTime }}</span>
                                            <div style="display: flex; align-items: center;">
                                                <Icon type="eye" style="margin-right: 5px;"></Icon>
                                                <span>{{ item.playCount }}</span>
                                            </div>
                                        </div>
                                    </div>
                                    <img :src="item.img" />
                                </div> -->
                                <div
                                    class="item-box"
                                    v-for="(item, index) in contentList"
                                    :key="index"
                                >
                                    <img :src="item.img" />
                                    <div style="width: 100%; margin-top: 5px">
                                        <span
                                            style="
                                                font-size: 24px;
                                                color: #ffffff;
                                            "
                                            >{{ item.title }}</span
                                        >
                                    </div>
                                    <div
                                        style="
                                            width: 100%;
                                            display: flex;
                                            justify-content: space-between;
                                            margin-top: 20px;
                                        "
                                    >
                                        <span
                                            style="
                                                font-size: 18px;
                                                color: #ffffff;
                                            "
                                            >{{ item.source }}</span
                                        >
                                        <span
                                            style="
                                                font-size: 18px;
                                                color: #ffffff;
                                            "
                                            >{{ item.publishTime }}</span
                                        >
                                        <div
                                            style="
                                                display: flex;
                                                align-items: center;
                                            "
                                        >
                                            <Icon
                                                type="eye"
                                                color="#ffffff"
                                                size="20"
                                                style="margin-right: 5px"
                                            ></Icon>
                                            <span
                                                style="
                                                    font-size: 18px;
                                                    color: #ffffff;
                                                "
                                                >{{ item.playCount }}</span
                                            >
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </vue-seamless-scroll>
                    </div>
                </div>
                <div class="qrcode-box">
                    <div
                        style="
                            display: flex;
                            flex-direction: column;
                            align-items: center;
                        "
                    >
                        <img :src="require('@/assets/wlxy.jpg')" />
                        <span>文旅叙永</span>
                    </div>
                    <div
                        style="
                            display: flex;
                            flex-direction: column;
                            align-items: center;
                        "
                    >
                        <img :src="require('@/assets/xyfb.png')" />
                        <span>看叙永</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { useIndex } from "@/utils/utilsDramAdmin";
import outsideTitle from "./components/outsideTitle.vue";
import vueSeamlessScroll from "vue-seamless-scroll";
import CommonLivePlayer from "@/views/common-components/common-live-player.vue";
export default {
    name: "OutSide",
    components: {
        outsideTitle,
        vueSeamlessScroll,
        CommonLivePlayer,
    },
    data() {
        return {
            title: "智慧广电示范区",
            videoList: [],
            contentList: [],
            index: 0,
            currentVideo: {},
            option: {
                step: 0.3, // 数值越大速度滚动越快
                limitMoveNum: 3, // 开始无缝滚动的数据量 this.dataList.length
                hoverStop: true, // 是否开启鼠标悬停stop
                direction: 1, // 0向下 1向上 2向左 3向右
                openWatch: true, // 开启数据实时监控刷新dom
                singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
                singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
                waitTime: 1000, // 单步运动停止的时间(默认值1000ms)
            },
        };
    },
    created() {},
    mounted() {
        const { calcRate, windowDraw } = useIndex(this.$refs.appRef);
        calcRate();
        windowDraw();
        this.queryTvList();
        this.queryContentList();
    },
    beforeDestroy() {},
    methods: {
        ended() {
            this.index += 1;
            if (this.index > this.videoList.length - 1) {
                this.index = 0;
            }
            this.onClick(this.index);
        },
        // 自动播放点击
        onClick(index) {
            this.currentVideo = this.videoList[index];
        },
        // 查询电视新闻列表
        queryTvList() {
            let url = "/links/getTVInfoPage";
            let params = {
                page: 0,
            };

            this.$http.post(url, this.common.request(params)).then((res) => {
                if (res && res.data.code >= 200 && res.data.code < 400) {
                    this.videoList = res.data.data.contentList.splice(0, 10);
                    this.videoList = this.videoList.map((item) => ({
                        ...item,
                        playUrl: item.playInfo.playUrl,
                    }));
                    this.onClick(0);
                } else {
                    this.$Message.error("获取数据失败");
                }
            });
        },
        // 查询列表
        queryContentList() {
            let url = "/links/getColumnInfoPage";
            let params = {
                jumpId: 958,
                page: 0,
            };

            this.$http.post(url, this.common.request(params)).then((res) => {
                if (res && res.data.code >= 200 && res.data.code < 400) {
                    this.contentList = res.data.data.contentList.splice(0, 10);
                    this.contentList.forEach((item) => {
                        if (item.imgList.length > 0) {
                            item.img = item.imgList[0].url;
                        }
                        if (item.playCount >= 1000) {
                            item.playCount =
                                (item.playCount / 1000).toFixed(1) + "K";
                        }
                    });
                } else {
                    this.$Message.error("获取数据失败");
                }
            });
        },
    },
};
</script>

<style lang="less" scoped>
.box-title {
    display: block;
    width: 100%;
    font-family: "ShiShangZhongHeiJianTi";
    font-size: 30px;
    background: linear-gradient(180deg, #ffffff 27.08%, #bcddff 100%);
    margin: 5px 0;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    writing-mode: unset;
}
.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% 100%;
    display: flex;
    flex-direction: column;
    align-items: center;

    .main {
        width: 100%;
        height: 920px;
        padding: 0 30px;
        display: flex;
        justify-content: space-between;
        .video-box {
            width: 1350px;
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }
        .right-box {
            width: 480px;
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            .contetn-box {
                width: 100%;
                height: 680px;
                display: flex;
                flex-direction: column;
                justify-content: space-between;

                .list {
                    width: 100%;
                    height: 625px;
                    .list-item {
                        width: 100%;
                        height: 130px;
                        margin-bottom: 10px;
                        display: flex;
                        justify-content: space-between;
                        .content {
                            width: 255px;
                            height: 100%;
                            display: flex;
                            flex-direction: column;
                            justify-content: space-between;

                            .content-title {
                                width: 100%;
                                color: #ffffff;
                                font-size: 18px;
                                display: -webkit-box; /* 必须结合的属性 ，将对象作为弹性伸缩盒子模型显示 。*/
                                -webkit-box-orient: vertical; /* 必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式 。*/
                                text-overflow: ellipsis; /* 可以用来多行文本的情况下，用省略号“…”隐藏超出范围的文本 。*/
                                -webkit-line-clamp: 3;
                                overflow: hidden;
                            }
                            .tag {
                                display: flex;
                                justify-content: space-between;
                                align-items: center;
                                color: #d8d4d4;
                                font-size: 15px;
                            }
                        }
                        img {
                            width: 200px;
                            height: 122px;
                            border-radius: 4px;
                        }
                    }

                    .item-box {
                        width: 100%;
                        display: flex;
                        flex-direction: column;
                        margin-bottom: 30px;

                        img {
                            width: 100%;
                            height: 270px;
                            border-radius: 4px;
                        }
                    }
                }
            }
            .qrcode-box {
                width: 100%;
                height: 220px;
                display: flex;
                justify-content: space-between;
                img {
                    width: 200px;
                    height: 200px;
                }
                span {
                    font-family: "ShiShangZhongHeiJianTi";
                    font-size: 18px;
                    background: linear-gradient(
                        180deg,
                        #ffffff 27.08%,
                        #bcddff 100%
                    );
                    margin: 5px 0;
                    background-clip: text;
                    -webkit-background-clip: text;
                    -webkit-text-fill-color: transparent;
                }
            }
        }
    }
}
</style>
