dev/dcp-web-gate/src_old/views/ResourceSharing/ResourceSharingResourceDetails.vue

<template>
    <div class="autoBox box" style="min-height: 900px;position: relative;">
        <div class="crumbs">
            <div style="overflow: hidden">
                <el-breadcrumb separator-class="el-icon-arrow-right" style="float: left">
                    <el-breadcrumb-item :to="{ path: 'home' }">{{$t('common.Home')}}</el-breadcrumb-item>
                    <el-breadcrumb-item :to="{ path: 'resourceSharing' }" class="pointer">{{$t('common.ResourceSharing')}}</el-breadcrumb-item>
                    <el-breadcrumb-item>{{$t('common.resourceDetails')}}</el-breadcrumb-item>
                </el-breadcrumb>
<!--                <el-breadcrumb separator="/" style="float: right;">-->
<!--                    <span :class="screenIndex==index?'secNavActive':''"-->
<!--                          @click="screenChange(item,index)"-->
<!--                          v-for="(item,index) in resourceSharingScreen">-->
<!--                            &nbsp;&nbsp;{{$t(item.lable)}} &nbsp;&nbsp;-->
<!--                     <span v-if="index+1!==resourceSharingScreen.length" style="color: #2c3e50">/</span></span>-->
<!--                </el-breadcrumb>-->
            </div>
        </div>
        <div class="abstract">
            <div class="preview">
                <div class="swipers">
                    <div class="swiper-container gallery-top">
                        <div class="swiper-wrapper">
                            <div    v-if="bannerList.length==0||bannerList.length==undefined"
                            >
                                <img src="../../assets/img/nationaIntorduction/lavle.png" alt style="width: 100%;height: 100%;"
                                />
                            </div>
                            <div    v-else="bannerList.length!=0&&bannerList.length!=undefined"
                                    class="swiper-slide"
                                    v-for="(i,index) in bannerList"
                                    :data-swiper-slide-index="i+index">
                                <video muted :src="'api/file/pub/' + i" style="width: 100%;height: 100%;position: relative;border: none;" class="videos" v-if="index<bannerVideo.length"
                                       type="video/mp4" controls="controls"  width="100%"  autoplay preload="auto"
                                ></video>
<!--                                autoplay preload="auto"-->
                                <img :src="'api/file/pub/' + i" alt style="width: 100%;height: 100%;"
                                     v-if="index>=bannerVideo.length"/>
                            </div>
                        </div>
                        <div class="swiper-button-next swiper-button-white"></div>
                        <div class="swiper-button-prev swiper-button-white"></div>
                    </div>
                    <div class="swiper-container gallery-thumbs">
                        <div class="swiper-wrapper">
                            <div v-if="bannerList.length==0||bannerList.length==undefined"
                                    class="swiper-slide"
                            >
                                <img src="../../assets/img/nationaIntorduction/lavle.png" alt style="width: 100%;height: 100%;">
                            </div>
                            <div v-else="bannerList.length!=0&&bannerList.length!=undefined"
                                    class="swiper-slide"
                                    :key="i"
                                    :data-swiper-slide-index="index"
                                    v-for="(i,index) in bannerList"
                            >
                                <video :src="'api/file/pub/' + i" style="width: 100%;height: 100%;position: relative"
                                       v-if="index<bannerVideo.length"
                                ></video>
                                <img :src="'api/file/pub/' + i" alt style="width: 100%;height: 100%;"
                                     v-if="index>=bannerVideo.length"
                                />
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="message">
                <div style="height: 30px; width: 100%">
                    <div style="float: right;line-height: 28px;color: rgba(51, 51, 51, 1);">
<!--                        <span class="share cursor"-->
<!--                            :style="ifcommon?'color: #66b1ff;':''"-->
<!--                            style="margin-right: 20px;float: right;"-->
<!--                            @click="shareChange()">-->
<!--                                <i class="el-icon-star-off" :style="ifcommon?'color: #66b1ff;':''"></i>-->
<!--                                {{$i18n.locale=='zh'?ifcommon?"已收藏":"收藏":ifcommon?"Favorites":"Favorites"}}-->
<!--                            </span>-->
                        <i class="el-icon-star-off" style="margin-right: 3px;vertical-align: middle;cursor: pointer;"
                           :style="ifcommon?'color: #66b1ff;':''"
                           @click="shareChange()"></i>
                        <span style="margin-right: 30px;vertical-align: middle;cursor: pointer;"
                              :style="ifcommon?'color: #66b1ff;':''"
                              @click="shareChange()"
                        >{{$i18n.locale=='zh'?ifcommon?"已关注" : "关注":ifcommon?"Already collected":" Collection"}}</span>
<!--                        <img src="@/assets/img/ResourceSharing/heat.png" alt="" style="width: 16px;height: 16px;margin-right: 3px;vertical-align: middle;">-->
                        <!--<i class="el-icon-share" style="margin-right: 3px;vertical-align: middle;"></i>
                        <span style="margin-right: 30px;vertical-align: middle;">{{$t('common.resourceDetailsShare')}}</span>-->
                    </div>
                    <div style="clear: both"></div>
                </div>
                <p style="margin: 0 0 53px 0;font-size: 30px;font-weight: 600;color: #2C558A;line-height: 30px;">{{cursorContent.name}}</p>
                <div>
                    <ul style="float: left;"
                        :style="{width:language=='zh'?'30%':'37%','font-size':language=='zh'?'16px':'14px'}"
                    >
                        <li><i class="el-icon-baseball" style="margin-right:15px; " ></i>{{$t('common.resourceSite')}}：</li>
                        <li><i class="el-icon-location-outline" style="margin-right:15px;"></i>{{$t('common.resourceAddress')}}：</li>
                        <li><i class="el-icon-office-building" style="margin-right:15px;"></i>{{$t('common.resourceSubordinateUnits')}}：</li>
                        <li><i class="el-icon-phone-outline" style="margin-right:15px;"></i>{{$t('common.resourceContact')}}：</li>
                        <li><i class="el-icon-message" style="margin-right:15px;"></i>{{$t('common.resourceEmail')}}：</li>
                    </ul>
                    <ul style="float: left;color: #333333;"
                        :style="{width:language=='zh'?'70%':'63%','font-size':language=='zh'?'16px':'14px'}"
                    >
                        <li style="color: #333;" :style="{wordBreak:$i18n.locale=='zh'?'normal;':'keep-all'}"class="twoLine" v-if="cursorContent.countryName&&cursorContent.countryName!='null'&&cursorContent.countryName!=null">{{cursorContent.countryName}}</li>
                        <li style="color: #333" class="twoLine" v-else>/</li>
                        <li style="color: #333;" :style="{wordBreak:$i18n.locale=='zh'?'normal;':'keep-all'}"class="twoLine" v-if="cursorContent.address&&cursorContent.address!='null'&&cursorContent.address!=null">{{cursorContent.address}}</li>
                        <li style="color: #333" class="twoLine" v-else>/</li>
                        <li style="color: #333;" :style="{wordBreak:$i18n.locale=='zh'?'normal;':'keep-all'}" class="twoLine" v-if="cursorContent.affiliatedUnitName&&cursorContent.affiliatedUnitName!='null'&&cursorContent.affiliatedUnitName!=null">{{cursorContent.affiliatedUnitName}}</li>
                        <li style="color: #333" class="twoLine" v-else>/</li>
                        <li style="color: #333;" :style="{wordBreak:$i18n.locale=='zh'?'normal;':'keep-all'}"class="twoLine" v-if="cursorContent.contactsNumber&&cursorContent.contactsNumber!='null'&&cursorContent.contactsNumber!=null">{{cursorContent.contactsNumber}}</li>
                        <li style="color: #333" class="twoLine" v-else>/</li>
                        <li style="color: #333;" :style="{wordBreak:$i18n.locale=='zh'?'normal;':'keep-all'}"class="twoLine" v-if="cursorContent.contactsEmail&&cursorContent.contactsEmail!='null'&&cursorContent.contactsEmail!=null">{{cursorContent.contactsEmail}}</li>
                        <li style="color: #333" class="twoLine" v-else>/</li>
                    </ul>
                    <div style="clear: both"></div>
                </div>
                <div>
                    <div style="text-align: center;height: 50px;border-radius: 25px;background-color: #0091FF;margin: 45px 0 0 135px;"
                         :style="{width:language=='zh'?'140px':'200px','font-size':language=='zh'?'20px':'16px'}">
                        <span style="color: white;line-height: 50px;cursor: pointer;" @click="toApply"> {{$t('common.resourceApplicationResearch')}}</span>
                    </div>
                </div>
                <!--<div style="height: 30px; width: 100%">
                    <div style="float: right;line-height: 28px;color: rgba(51, 51, 51, 1);">
                        <i class="el-icon-star-off" style=" margin-right: 3px;vertical-align: middle;"></i>
                        <span style="margin-right: 20px;vertical-align: middle;">{{$t('common.resourceDetailsCollection')}}</span>
                        &lt;!&ndash;                        <img src="@/assets/img/ResourceSharing/heat.png" alt="" style="width: 16px;height: 16px;margin-right: 3px;vertical-align: middle;">&ndash;&gt;
                        <i class="el-icon-share" style="margin-right: 3px;vertical-align: middle;"></i>
                        <span style="margin-right: 30px;vertical-align: middle;">{{$t('common.resourceDetailsShare')}}</span>
                    </div>
                    <div style="clear: both"></div>
                </div>
                <span style="font-size: 20px;font-weight: 700;color: #2C558A;line-height: 42px;">{{cursorContent.name}}</span>
                <div style="width: 100%;float: left;color: #333;font-size: 16px;line-height: 16px;    line-height: 35px;">
                    <div>
                        <i class="el-icon-baseball" style="margin-right:10px;"></i><span style="margin-left: 5px;">{{$t('common.resourceSite')}}:<span style="margin-left: 10px;"></span>{{cursorContent.countryName}}</span>
                    </div>
                    <div>
                        <i class="el-icon-location-outline" style="margin-right:10px;"></i><span style="margin-left: 5px;">{{$t('common.resourceAddress')}}:<span style="margin-left: 10px;"></span>{{cursorContent.address}}</span>
                    </div>
                    <div>
                        <i class="el-icon-office-building" style="margin-right:10px;"></i><span style="margin-left: 5px;">{{$t('common.resourceSubordinateUnits')}}:<span style="margin-left: 10px;"></span>{{cursorContent.affiliatedUnitName}}</span>
                    </div>
                    <div>
                        <i class="el-icon-phone-outline" style="margin-right:10px;"></i><span style="margin-left: 5px;">{{$t('common.resourceContact')}}:<span style="margin-left: 10px;"></span>{{cursorContent.contactsNumber}}</span>
                    </div>
                    <div>
                        <i class="el-icon-message" style="margin-right:10px;"></i><span style="margin-left: 5px;">{{$t('common.resourceEmail')}}:<span style="margin-left: 10px;"></span>{{cursorContent.contactsEmail}}</span>
                    </div>
                </div>
                <div style="clear: both"></div>
                <div>
                    <div style="text-align: center;height: 44px;border-radius: 25px;background-color: #0091FF;margin: 15px 0 0 15px;"
                         :style="{width:language=='zh'?'140px':'200px','font-size':language=='zh'?'20px':'16px'}">
                        <span style="color: white;line-height: 44px;cursor: pointer;" @click="toApply"> {{$t('common.resourceApplicationResearch')}}</span>
                    </div>
                </div>-->
            </div>
            <div style="clear: both;"></div>
        </div>
        <div class="content">
            <div style="margin-bottom: 30px;" v-for="(item,index) in  informationList">
                <div style="margin: 30px 4px 20px;">
                    <div style="float: left; width: 6px;height: 22px; background-color: #6BC13B;margin-top: 2px;">
                        <div style="background-color: #1B6ACE;width: 6px; height: 16px;"></div>
                    </div>
                    <div style="height: 24px;padding-bottom: 14px;">
                    <span style="color: #2C558A; font-size: 20px; margin-left: 10px;font-weight: 700;line-height: 24px;">
<!--                        {{$t("common.resourceResourcesIsIntroduced")}}-->
                        {{item.title}}
                    </span>
                    </div>
                    <div style="clear: both;"></div>
                </div>
                <div>
<!--                    <div style="float: left; margin-right: 23px;">-->
<!--                        <div style="width: 379px; height: 260px;">-->
<!--                            <img src="@/assets/img/ResourceSharing/u27022.png" alt="" style="width: 379px; height: 260px;">-->
<!--                        </div>-->
<!--                    </div>-->
                    <div>
                        <div style="width: 100%;">
                            <p style="color: #333333;font-size: 14px;line-height: 30px;margin: 0;text-indent: 2em;" v-html="item.content">
<!--                                {{cursorContent.details}}-->
                            </p>
                        </div>
                    </div>
                    <div style="clear: both;"></div>
                </div>
            </div>
            <!--<div style="margin-bottom: 30px;" v-if="cursorContent.mattersNeedingAttention">
                <div style="margin: 20px 4px;">
                    <div style="float: left; width: 6px;height: 22px; background-color: #6BC13B;margin-top: 2px;">
                        <div style="background-color: #1B6ACE;width: 6px; height: 16px;"></div>
                    </div>
                    <div style="height: 24px;padding-bottom: 14px;">
                    <span style="color: #2C558A; font-size: 20px; margin-left: 10px;font-weight: 700;line-height: 24px;">
                        {{$t("common.resourceMattersNeedingAttention")}}
                    </span>
                    </div>
                    <div style="clear: both;"></div>
                </div>
                <div>
                    <div>
                        <div style="width: 100%;">
                            <p style="color: #333333;font-size: 14px;line-height: 30px;margin: 0;text-indent: 2em;" v-html="cursorContent.mattersNeedingAttention">
                            </p>
                        </div>
                    </div>
&lt;!&ndash;                    <div style="float: right;">&ndash;&gt;
&lt;!&ndash;                        <div style="width: 379px; height: 260px;">&ndash;&gt;
&lt;!&ndash;                            <img src="@/assets/img/ResourceSharing/u27022.png" alt="" style="width: 379px; height: 260px;">&ndash;&gt;
&lt;!&ndash;                        </div>&ndash;&gt;
&lt;!&ndash;                    </div>&ndash;&gt;
                    <div style="clear: both;"></div>
                </div>
            </div>-->
        </div>
        <div class="recommend" v-show="cursorList[0]">
            <div style="border-bottom: 1px solid rgba(44, 85, 138, 1); margin: 20px 4px;">
                <div style="float: left; width: 6px;height: 22px; background-color: #6BC13B;margin-top: 2px;">
                    <div style="background-color: #1B6ACE;width: 6px; height: 16px;"></div>
                </div>
                <div style="height: 24px;padding-bottom: 14px;">
                    <span style="color: #2C558A; font-size: 20px; margin-left: 10px;font-weight: 700;line-height: 24px;">
                        {{$t("common.resourceResearchResourceRecommendation")}}
                    </span>
                </div>
                <div style="clear: both;"></div>
            </div>
            <div style="margin: 30px 0 0 0 ;">
                <div v-for="(item,index) in cursorList" style="float: left;cursor: pointer;"
                     :style="{'margin-left':index==0?'0':'13px'}" @click="toResourceDetails(item,index)"
                >
                    <div style="width: 280px;height: 200px;position: relative;overflow: hidden">
                        <img v-if="item['researchResourcesMedia']==undefined||item.researchResourcesMedia==false||item.researchResourcesMedia==''||item.researchResourcesMedia=='null'" src="../../assets/img/nationaIntorduction/lavle.png" alt="" style="width: 100%; height: 260px;">
                        <img v-else :src="'api/file/pub/'+item.researchResourcesMedia" alt="" style="width: 280px;height: 200px;">
                        <div style="position: absolute;top:0;width: 100%; height: 100%;text-align: center;
                                background: black;opacity: 0.48;">
                            <span style="color: white;font-size: 14px; font-weight: 600;line-height: 200px;display:inline-block; max-width: 90%" class="oneLine">{{item.name}}</span>
                        </div>
                    </div>
                    <!--<p style="padding: 0 6px;box-sizing: border-box;width: 280px;text-align: center">
                        <span style="color: #2C558A;font-size: 14px;font-weight: 600;">
&lt;!&ndash;                            {{item.likeNum}}人浏览&ndash;&gt;
                            15632人浏览
                        </span>
                    </p>-->
                </div>
                <div style="clear: both;"></div>
            </div>
        </div>
        <!--    登录提示-->
        <el-dialog
                :title="$i18n.locale=='zh'?'提示':'Reminder'"
                :visible.sync="toViewLogin"
                :width="$i18n.locale=='zh'?'500px':'750px'"
                :height="$i18n.locale=='zh'?'300px':'386px'"
                :before-close="toViewLoginChange"
        >
            <div style="width: 100%;height: 100%;">
                <img src="@/assets/img/loginTips.png" alt="" style="width: 180px;height: 180px;margin-left: 20px;">
                <div style="float: right;margin-right: 20px;" :style="$i18n.locale=='zh'?'width: 49%;margin-top: 10px;':'width: 453px;margin-top: -25px;'">
                    <div style="font-size: 20px;font-weight: normal;color: #333333;
                font-family: HiraginoSansGB-W3, HiraginoSansGB;
                line-height: 40px;">
                        {{$t('common.ReminderFirst')}}
                    </div>
                    <div style="font-size: 16px;font-family: HiraginoSansGB-W3, HiraginoSansGB;
              font-weight: normal;color: #666666;line-height: 30px;">
                        {{$t('common.ReminderSecond')}} <span style="color: #0091FF;font-size: 18px;">{{num}}</span> {{$t('common.ReminderThird')}}
                    </div>
                    <div style="font-size: 14px;font-family: HiraginoSansGB-W3, HiraginoSansGB;
              font-weight: normal;color: #666666;line-height: 30px;">
                        {{$t('common.ReminderForth')}}
                    </div>
                    <div style="font-size: 14px;font-family: HiraginoSansGB-W3, HiraginoSansGB;
              height:33px;line-height:60px;font-weight: normal;color: #0091FF;">
                <span style="margin-left: 40px;" class="cursor" @click="toView('login')">
                  {{$t('common.ReminderFifth')}}
                </span>
                        <span style="margin-left: 10px;" class="cursor" @click="toView('Register')">
                  {{$t('common.ReminderSixth')}}
                </span>
                    </div>
                </div>
            </div>
        </el-dialog>
    </div>
</template>
<script>
    import Base from "@/views/base/Base";
    import {Swiper} from "vue-awesome-swiper";
    import {getDicts} from '@/api/dict';
    import { gateResearchResourcesViewById ,getBaseResearchResourcesViews,gateBaseResearchResourcesInfosId,getInformationList} from "@/api/research/resource/baseResearchResourcesView";
    import { formatDate } from "@/utils/formatUtils";
    import 'vue-awesome-swiper/node_modules/swiper/dist/css/swiper.css'
    import {getToken, resetToken} from "@/utils/auth";
     import { getFollowModeNumlByModelId,
        getFollowModelNumByUser,
        saveFollowModel,} from "@/api/operation/basePortalModelFollowInfo";
    import {getFollowModeNumlByModelIdAndUserId} from "@/api/operation/basePortalModelFollowInfo";
    export default {
        name: "resourceSharingResourceDetails",
        extends: Base,
        data () {
            return {
                ifcommon: false,
                num:5,
                timer:'',
                toViewLogin:false,
                language:this.$i18n.locale,
                params: {
                    entityId:'',
                    pageNo:'',
                    pageSize:'',
                    language:'',
                },
                screenIndex:1,//研究成果、调研资源选中
                resourceSharingScreen:[
                    {
                        lable:"common.resource",
                        value:'0'
                    },
                    {
                        lable:"common.researchResource",
                        value:'1'
                    }
                ],
                cursorContent:{},
                bannerImg:[],
                bannerVideo:[],
                bannerList:[],
                cursorList:[],
                informationList:[],
            }
        },
        updated() {
            this.Swiper();
        },
        mounted() {
            if(this.$route.query.key){
                let rpath = { name: 'resourceSharingResourceDetails', query: {key:this.$route.query.key}};
                sessionStorage.setItem('pathReminder', JSON.stringify(rpath));
                this.Swiper();
                this.initData();
            }else{
                this.toView('resourceSharing',1)
            }
        },
        watch:{
            '$i18n.locale'(){
                this.initData();
                this.language = this.$i18n.locale;
            },
            "toViewLogin"(){
                if(this.toViewLogin==true){
                    this.loginTipsChange()
                }
            },
        },
        methods:{
            initData(){
                this.getData();
                // this.getCursorList();
                this.getMyCollecModel(); // 获取用户是否收藏
            },
            getMyCollecModel(){
                const that= this;
                if (this.$Cookies.get('token')) {
                let user = window.localStorage.getItem('user');
                var users = JSON.parse(user);
                let MyCollecModel={
                    modelType:'researchResources',
                    userId:users.userId,
                    modelEntityId:JSON.parse(that.$route.query.key).entityId,
                }
                getFollowModeNumlByModelIdAndUserId(
                        JSON.parse(that.$route.query.key).entityId,
                        "researchResources",
                        this.userId
                    ).then((res) => {
                        this.ifcommon = res.data;

                    });
                } 
            
            },
                    //收藏
            shareChange() {
                // if (this.ifcommon) {
                //     this.Collection("uncollect");
                // } else {
                //     this.Collection("collect");
                // }
                if (this.ifcommon) {
                    this.saveFollowModelDo("unfollow");
                }else {
                    this.saveFollowModelDo("follow");
                }
            },

            //关注操作方法
            saveFollowModelDo: function (followType) {
                let user = window.localStorage.getItem("user");
                if (!this.$Cookies.get('token')) {
                    // this.$message.warning("请先登录");
                    // this.$confirm('检测到您未登录，是否登录')
                    // .then(_ => {
                    //  this.toView('login');
                    // })
                    // .catch(_ => {});
                    this.toViewLogin = true;
                } else {
                    var users = JSON.parse(user);
                    var token = "" + getToken();
                    var projectId = JSON.parse(this.$route.query.key).entityId;
                    var userId = users.userId;
                    // 接口逻辑
                    this.submitHandler((token) => {
                        saveFollowModel(projectId, "researchResources", userId, followType, token)
                            .then((result) => {
                                // console.log(result);
                                /*if(followType=='unfollow'){
                                    if(this.$i18n.locale=='zh'){
                                        this.$message({
                                            message: '取消收藏',
                                            type: "success",
                                        });
                                    }else{
                                        this.$message({
                                            message: 'cancel coilection',
                                            type: "success",
                                        });
                                    }
                                }else{
                                    if(this.$i18n.locale=='zh'){
                                        this.$message({
                                            message: '已收藏',
                                            type: "success",
                                        });
                                    }else{
                                        this.$message({
                                            message: 'Already collected',
                                            type: "success",
                                        });
                                    }
                                }*/
                                if(followType=='unfollow'){
                                    if(this.$i18n.locale=='zh'){
                                        this.$message({
                                            message: '取消关注',
                                            type: "success",
                                        });
                                    }else{
                                        this.$message({
                                            message: 'Cancel concerned',
                                            type: "success",
                                        });
                                    }
                                }else{
                                    if(this.$i18n.locale=='zh'){
                                        this.$message({
                                            message: '已关注',
                                            type: "success",
                                        });
                                    }else{
                                        this.$message({
                                            message: 'Already concerned',
                                            type: "success",
                                        });
                                    }
                                }
                                this.ifcommon = !this.ifcommon;
                                this.resetToken();
                            })
                            .catch((error) => {
                                // 此处你的业务代码
                            });
                    });
                }
            },
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
            },
            handleCurrentChange(val) {
                console.log(`当前页: ${val}`);
            },
            screenChange(item,index){
                this.toView('resourceSharing',item.value)
            },
            toResourceDetails(item,index){
                /*this.params.entityId = item.entityId;
                this.getData()*/
                let params = {
                    entityId:item.entityId,
                    researchResultFileId:item.researchResultFileId,
                }
                this.toDetails('resourceSharingResourceDetails',params)
            },
            toApply(){
                if (!this.$Cookies.get('token')){
                    this.toViewLogin = true;
                }else{
                    let params = {
                        entityId:JSON.parse(this.$route.query.key).entityId,
                        name: this.cursorContent.name,
                        flag: true
                    }
                    this.toView('resourceSharingResourceApply',params)
                }
            },
            toView(router, json) {
                if(router=='login'||router=='Register'){
                    clearInterval(this.timer);
                }
                this.$router.push({ name: router, params: {key:json} });
            },
            toDetails(router,json){
                // this.$store.commit('modify', router);
                window.localStorage.setItem('router', router);
                localStorage.setItem('conferenceId', json);
                const {href} = this.$router.resolve({
                    name: router,
                    query: {
                        key: JSON.stringify(json)
                    }
                });
                window.open(href, '_blank');
            },
            getData(){
                const that = this;
                let param = {
                    entityId:'',
                    pageNo:'',
                    pageSize:'',
                    language:'',
                    effective:'Y',
                };
                if (this.$i18n.locale.toUpperCase() == 'ZH') {
                    param.language = 'ZH';
                } else if (this.$i18n.locale.toUpperCase() == 'EN') {
                    param.language = 'EN';
                }
                if(that.$route.query.key){
                    param.entityId = JSON.parse(that.$route.query.key).entityId;
                }
                if(that.params.entityId){
                    param.entityId = that.params.entityId;
                }
                gateResearchResourcesViewById(param).then((resulet) => {
                    let data = resulet.data;
                    if (data.baseResearchResourcesView) {
                        that.cursorContent = data.baseResearchResourcesView;
                        that.cursorContent.createDate = that.cursorContent.createDate ? formatDate(that.cursorContent.createDate, "YYYY-MM-DD") : "";

                        // 轮播图片
                        if(that.cursorContent.researchResourcesMedia&&that.cursorContent.researchResourcesMedia!='null'&&that.cursorContent.researchResourcesMedia!=null){
                            that.bannerImg  = that.cursorContent.researchResourcesMedia.split(',')
                        }
                        for(let i=0;i<that.bannerImg.length;i++){
                            that.bannerImg[i] = that.bannerImg[i].replace(' ','')
                        }
                        // 轮播视频
                        if(that.cursorContent.researchResourcesMediaVideo){
                            that.bannerVideo  = that.cursorContent.researchResourcesMediaVideo.split(',')
                        }
                        for(let i=0;i<that.bannerVideo.length;i++){
                            that.bannerVideo[i] = that.bannerVideo[i].replace(' ','')
                        }

                        that.bannerList = that.bannerVideo.concat(that.bannerImg)
                        that.informationList = that.cursorContent.informationList;
                        that.getCursorList();
                    }
                });
            },
            getCursorList() {
                let that = this;
                let param = {
                    pageNo:1,
                    pageSize:5,
                    status: 0,
                    descStatus: 1
                };
                if (this.$i18n.locale.toUpperCase() == 'ZH') {
                    param.language = 'ZH';
                } else if (this.$i18n.locale.toUpperCase() == 'EN') {
                    param.language = 'EN';
                }

                getBaseResearchResourcesViews(param).then((resulet) => {
                    let data = resulet.data;
                    if (data.baseResearchResourcesViews) {
                        that.cursorList = data.baseResearchResourcesViews;
                        that.cursorList.forEach((i) => {
                            i.createDate = i.createDate ? formatDate(i.createDate, "YYYY-MM-DD") : "";
                            if (i.researchResourcesMedia&&i.researchResourcesMedia!='null'){
                                i.researchResourcesMedia = i.researchResourcesMedia.split(',')
                                i.researchResourcesMedia = i.researchResourcesMedia[0]
                            }
                        })
                        let flag = false;
                        for(let j=0;j<that.cursorList.length;j++){
                            if(that.cursorList[j].name == that.cursorContent.name){
                                flag = j;
                            }
                        }
                        if(flag==0||flag!=false) {
                            that.cursorList.splice(flag,1)
                        }else{
                            if(that.cursorList.length>4){
                                that.cursorList.pop()
                            }
                        }
                    }
                });
            },
            Swiper() {
                let that = this;
                var galleryThumbs = new Swiper(".gallery-thumbs", {
                    spaceBetween: 10,
                    slidesPerView: 4,
                    freeMode: true,
                    watchSlidesVisibility: true,
                    watchSlidesProgress: true,
                    autoplay: {//自动播放
                        delay: 4000,
                        disableOnInteraction: false,//用户操作后是否停止 默认停止（true）
                    },
                });
                var galleryTop = new Swiper(".gallery-top", {
                    spaceBetween: 10,
                    navigation: {
                        nextEl: ".swiper-button-next",
                        prevEl: ".swiper-button-prev"
                    },
                    // autoplay: {//自动播放
                    //     delay: 1000,
                    //     disableOnInteraction: false,//用户操作后是否停止 默认停止（true）
                    // },
                    autoplay: false,
                    on:{
                        slideChange: function(){
                            that.videoOn(galleryTop)
                        },
                    },
                    thumbs: {
                        swiper: galleryThumbs
                    }
                });
                this.videoInit(galleryTop);
                this.videoInit(galleryThumbs);
                // var slideChange = function () {
                //     $('.gallery-thumbs .swiper-slide').each(function( index ) {
                //         $(this).removeClass("swiper-slide-thumb-active")
                //     });
                //     let index = galleryTop.activeIndex
                //     $('.gallery-thumbs .swiper-slide').eq(index).addClass("swiper-slide-thumb-active")
                // };
                // slideChange();
            },
            videoInit(ele){
                // $(".videos")[0].play();
                $(".videos").on('play', function () {
                    ele.autoplay.stop()
                });
                $(".videos").on('pause', function () {
                    ele.autoplay.start()
                });
            },
            videoOn(ele){
                let that = this;
                if(ele.activeIndex<that.bannerVideo.length){
                    $(".videos")[ele.activeIndex].play();
                    $(".videos").on('play',function(){
                        ele.autoplay.stop()
                    });
                    $(".videos").on('pause',function(){
                        ele.autoplay.start()
                    });
                }
            },
            // 判断未登录跳转是否关闭
            toViewLoginChange(done){
                this.toViewLogin=false;
                this.num=5;
                clearInterval(this.timer);
            },
            loginTipsChange(){
                const that=this;
                this.num =5;
                // clearInterval(timer_interval);
                this.timer = setInterval(function() {
                    if (that.num > 0) {
                        that.num--;
                    } else {
                        if(that.toViewLogin==true){
                            clearInterval(that.timer);
                            that.toView('login');
                        }else {
                            clearInterval(that.timer);
                        }
                    }
                }, 1000)
            },
        }
    }
</script>
<style scoped>
    .oneLine{
        /* 隐藏溢出元素 */
        overflow: hidden;
        /* 单行显示 */
        white-space: nowrap;
        /* 溢出显示省略号 */
        text-overflow: ellipsis;
    }
    .twoLine{
        overflow : hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }
    .threeLine{
        overflow : hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
    }
    .box {
        margin-top: 10px;
        background: #fff;
        /* height: 500px; */
        padding: 20px;
        box-sizing: border-box;
    }
    .crumbs {
        /*margin:0 20px;*/
    }
    .abstract{
        margin-top: 15px;
    }
    .abstract .preview{
        margin-top: 10px;
        float: left;
        width: 578px;
        height: 470px;
        position: relative;
    }
    .swipers {
        position: absolute;
        top: 0px;
        left: 0px;
        width: 548px;
        height: 470px;
    }
    .swipers .gallery-top{
        width: 100%;
        height: 370px;
    }
    .swiper-container {
        width: 100%;
        height: 300px;
        margin-left: auto;
        margin-right: auto;
    }
    .swiper-slide {
        background-size: cover;
        background-position: center;
    }
    .gallery-thumbs {
        height: 100px;
        box-sizing: border-box;
        padding: 10px 0;
    }
    .gallery-thumbs .swiper-slide {
        width: 25%;
        height: 100%;
        opacity: 0.4;
    }
    .gallery-thumbs .swiper-slide-thumb-active {
        opacity: 1;
    }

    .abstract .message{
        float: right;
        width: 550px;
        height: 100%;
        margin: 0;
        box-sizing: border-box;
        overflow: hidden;
    }
    .abstract .message ul{
        width: 140px;
        height: 252px;
    }
    .abstract .message ul li{
        height: 30px;
        color: #999999;
        font-size: 16px;
        line-height: 16px;
        margin-bottom: 29px;
    }
    .recommend{
        margin-top: 50px;
    }
</style>