dev/dcp-web-gate/src_old/views/ThinkTankConsulting/ThinkTankConsulting1.vue

<template>
    <div>
        <div class="autoBox box" >
            <div class="crumbs">
                <el-breadcrumb separator="/">
                    <el-breadcrumb-item :to="{ path: 'home' }">{{$t('common.Home')}}</el-breadcrumb-item>
                    <el-breadcrumb-item>{{$t('common.ThinkTankConsulting')}}</el-breadcrumb-item>
                </el-breadcrumb>
            </div>
            <div style="padding:20px 20px;position: relative;">
                <div style="font-size: 20px;color: #2C558A;font-weight: 700">
                    <img src="@/assets/img/cooperationExchange/20200608_03.gif" alt="" style="height: 20px;vertical-align: middle;">
                    {{$t('common.ThinkTankConsultingServe')}}
                </div>
                <div style="width: 100%;margin-top: 22px;display: flex;justify-content: space-between;flex-wrap:wrap;color: #fff">
                    <div style="width: 45%;height: 119px;margin-bottom: 25px;padding:23px;" class="ListOne" >
                        <div>
                            <img src="@/assets/img/ThinkTankConsulting/content1.png" alt="" style="width: 30px;height: 30px;float: left;margin-right: 10px"
                                 :style="$i18n.locale=='zh'?'margin-top:8px;':''">
                            <span style="font-size: 30px;">{{$t(consultServe[0].title)}}</span>
                        </div>
                        <p v-html="$t(consultServe[0].label)" style="font-size: 16px;"></p>
                    </div>
                    <div style="width: 45%;height: 119px;margin-bottom: 25px;padding:23px;" class="ListTwo">
                        <div>
                            <img src="@/assets/img/ThinkTankConsulting/content2.png" alt="" style="width: 30px;height: 30px;float: left;margin-right: 10px;vertical-align: middle;
                            " :style="$i18n.locale=='zh'?'margin-top:8px;':''">
                            <span style="font-size: 30px;">{{$t(consultServe[1].title)}}</span>
                        </div>
                        <p v-html="$t(consultServe[1].label)" style="font-size: 16px;"></p>
                    </div>
                    <div style="width: 45%;height: 119px;margin-bottom: 30px;padding:23px;" class="ListThree">
                        <div>
                            <img src="@/assets/img/ThinkTankConsulting/content3.png" alt="" style="width: 30px;height: 35px;float: left;margin-right: 10px"
                                 :style="$i18n.locale=='zh'?'margin-top:4px;':''">
                            <span style="font-size: 30px;">{{$t(consultServe[2].title)}}</span>

                        </div>
                        <p v-html="$t(consultServe[2].label)" style="font-size: 16px;"></p>
                    </div>
                    <div style="width: 45%;height: 119px;margin-bottom: 30px;padding:23px;" class="ListFour">
                        <div>
                            <img src="@/assets/img/ThinkTankConsulting/content4.png" alt="" style="width: 30px;height: 23px;float: left;margin-right: 10px;margin-top: 8px;
                            " :style="$i18n.locale=='zh'?'margin-top:8px;':''">
                            <span style="font-size: 30px;">{{$t(consultServe[3].title)}}</span>
                        </div>
                        <p v-html="$t(consultServe[3].label)" style="font-size: 16px;"></p>
                    </div>
                </div>
                <!--发布咨询需求-->
                <div class="demand">
                    <span style="font-size: 30px;margin-left: 112px;color: #fff;display: inline-block;" :style="$i18n.locale=='zh'?'margin-top: 51px;':'width: 600px;margin-top: 41px;'">
                        {{$t('common.ThinkTankSolution')}}
                    </span>
                    <div :class="$i18n.locale=='zh'?'boxOne':'boxTwo'" @click="OpenThink">
                        <span style="color: #1e6e93;font-size: 14px">{{$t('common.ThinkTankPostDemand')}}</span>
                    </div>
                    <div style="clear: both"></div>
                </div>
                <!--气候治理专栏-->
                <div class="ClimateGovernance">
                    <div class="informationTitle informationTitleAfter" >
                        <img src="@/assets/img/cooperationExchange/20200608_03.gif" alt="" style="height: 20px;vertical-align: middle;">
                        {{$t('common.ClimateGovernanceColumn')}}
                    </div>
                    <div style="margin-top: 10px;">
                        <!--图文列表-->
                        <div :class="graphicPicPage.pageNo == 1 ? 'graphic1' : 'graphic2'">
                            <div class="graphicLeftIcon" v-if="graphicPicPage.pageNo > 1" @click="reducePage">
                                <i class="el-icon-arrow-left"></i>
                            </div>
                            <div :class="graphicPicPage.pageNo == 1 ? 'graphicPicList' : 'graphicPicList1'">
                                <div v-for="(item,index) in graphicList" class="graphicData" @click="proDetail(item)">
                                    <img :src="item.photo" alt=""  style="width: 100%;height: 100%">
                                    <div class="graphicTitle" v-if="item.name">
                                        {{item.name}}
                                    </div>
                                </div>

                                <div class="moreList" v-if="graphicTotal > 8 && graphicPicPage.pageNo == 1" @click="getMore">
                                    <i class="el-icon-arrow-down"></i>
                                </div>
                            </div>
                            <div class="graphicRightIcon" v-if="graphicPicPage.pageNo != 1 && graphicPicPage.pageNo <graphicPicPage.totalPage  " @click="forwardPage">
                                <i class="el-icon-arrow-right"></i>
                            </div>
                            <div style="clear: both"></div>
                        </div>
                        <!--文章列表-->
                        <div  :class="graphicPicPage.pageNo == 1 ? 'article1' : 'article2'">
                            <ul class="articleUl">
                                <li v-for="(item,index) in articleList"
                                    style="cursor:pointer;"
                                    @click="toView('ThinkTankArticleDetail',item.id)">
                                    <div class="artTitle">{{item.title}}</div>
                                    <div class="artTime">{{formatDate(item.createDate,'YYYY-MM-DD')}}</div>
                                    <div style="clear: both"></div>
                                </li>
                            </ul>
                            <!-- 分页 -->
                            <div style="width: 100%;position: relative;height: 80px;">
                                <el-pagination style="height: 80px;position: absolute;left: 50%;top: 80px;transform: translate(-50%,-50%);"
                                               background
                                               layout="prev, pager, next"
                                               :total=Number(ArticelPage.totalRecords)
                                               @current-change="handleCurrentChange"
                                               :page-size=10>
                                </el-pagination>
                            </div>
                        </div>
                        <div style="clear: both"></div>
                    </div>
                </div>
                <!--成果展示-->
                 <div style="width: 100%;margin-top: 30px;">
                    <!--<div style="float: right;width: 49%;box-sizing: border-box;">
                        <div class="relevanInformation">
                            <div class="informationTitle informationTitleAfter" >
                                <img src="@/assets/img/cooperationExchange/20200608_03.gif" alt="" style="height: 20px;vertical-align: middle;">
                                {{$t('common.ThinkTankResultsShow')}}
                                <span @click="resultsShowChange()" style="float: right;cursor: pointer;">
                                    <div style="width: 19px;height: 19px;float: right;margin-right: 5px;">
                                        <img src="@/assets/img/helpCenter/change1.png" alt="" style="width:100%;transform: translateY(0px);">
                                    </div>
                                    <div style="float:right;margin-right:5px;font-size:16px;color:#778AA4">
                                        {{$t('common.ChangeTheBatch')}}
                                    </div>
                                </span>
                            </div>
                            <div class="informationList">
                                <ul>
                                    <li style="display: list-item;border-bottom: 1px dashed #999;" v-for="(infoItem,index) in informationList1"
                                        @click="toInformationList1(infoItem)">
                                        <div class="square"></div>

                                        <div class="list" style="width: 70%">
                                            {{infoItem.name}}
                                        </div>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div> -->
                    <!--热点聚焦-->
                    <div style="float: left;width: 49%;box-sizing: border-box;">
                        <div class="relevanInformation">
                            <div class="informationTitle informationTitleAfter">
                                <img src="@/assets/img/cooperationExchange/20200608_03.gif" alt="" style="height: 20px;vertical-align: middle;">
                                {{$t('common.ThinkTankHotFocus')}}
                                <span @click="changePage()" style="float: right;cursor: pointer;">

                                    <div style="width: 19px;height: 19px;float: right;margin-right: 5px;">
                                        <img src="@/assets/img/helpCenter/change1.png" alt="" style="width:100%;transform: translateY(0px);">
                                    </div>
                                    <div style="float:left;margin-right:5px;font-size:16px;color:#778AA4">
                                        {{$t('common.ChangeTheBatch')}}
                                    </div>
                                </span>
                            </div>
                            <div class="informationList" >
                                <ul style="padding-left: 10px">
                                    <li v-for="(infoItem,index) in HotFocus" @click="toViewHot('realTimeInfoItemdetails',infoItem.baseEntityId)" style="list-style: disc inside;border-bottom: 1px dashed #999;">
                                        <div class="square"></div>
                                        <div class="list">
                                            {{infoItem.title}}
                                        </div>
                                        <div class="list" style="width: 20%;float: right">
                                            {{formatDate(infoItem.updateDate)}}
                                        </div>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <div style="clear: both"></div>
                </div>
                <!--智库推荐-->
                <div style="font-size: 18px;color: #666666;font-weight: 700;margin-top: 30px;border-bottom: 1px solid #2C558A;height: 30px;">
                    <img src="@/assets/img/cooperationExchange/20200608_03.gif" alt="" style="height: 20px;vertical-align: middle;">
                    {{$t('common.ThinkTankRecommended')}}
                    <span style="float: right;color:#778AA4;cursor: pointer;font-size: 16px;" @click="toViewMore('IntroductionMemberInformation',menberDetails,'08')">{{$t('common.More')}}  ></span>
                </div>
                <div style="width: 100%; min-height: 235px; padding: 10px 0;box-sizing: border-box;position: relative;text-align: center;">
                    <div class="swipers">
                        <div class="swiper-container gallery-thumbs">
                            <div class="swiper-wrapper">
                                <div class="swiper-slide" v-for="(recommenItem,index) in RecommendedList">
                                    <img :src="'api/file/pub/'+ recommenItem.photo" alt style="width: 100%;height:180px;cursor: pointer" @click="toDetails('IntroductionPresentationDetails',recommenItem)"/>
                                    <span >{{recommenItem.unitName}}</span>
                                </div>

                            </div>

                        </div>
                    </div>
                </div>
                <!--气候治理专栏图文详情弹出模块-->
                <el-dialog
                        class="graphicDia"
                        :visible.sync="grapicDetailShow"
                        :before-close="handleClose"
                >
                    <div class="graphicDetail">
                        <div class="graDetailContent">
                            <div class="graDetailTitle">
                                <div class="graLogo">
                                    <img src="@/assets/img/ThinkTankConsulting/graphicArticleLogo.svg" alt=""  style="width: 100%;height: 100%">
                                </div>
                                {{graphicDetailTitle}}
                            </div>
                            <el-carousel
                                    class="gracarousel"
                                    :interval="5000"
                                    arrow="always"
                                    :autoplay="false"
                                    indicator-position="none"
                                    @change="onChangeGra"
                                    :loop="true">
                                <el-carousel-item v-for="(graItem,graIndex) in grapicDetailList" :key="graIndex">
                                    <div style="width:100%;height:100%;margin: auto">
                                        <!--                                        <img :src="graItem.pictureUrl" alt=""  style="width: 100%;height: 100%">-->
                                    </div>
                                </el-carousel-item>
                            </el-carousel>
                            <div class="graDetailDescriptions">
                                <div class="gtaPagi"> <span style="color: red">{{currentGraphic + 1}} </span> / {{graphicTotalPage}}</div>
                                <div class="graDetailDescription" v-if="grapicDetailList[currentGraphic]">
                                    {{grapicDetailList[currentGraphic].attachmentStatement}}
                                </div>
                            </div>
                        </div>
                    </div>
                </el-dialog>
            </div>
            <!--发布咨询需求表单-->
            <!-- Form -->
            <el-dialog :title="$t('common.ThinkTankConsulting')" :visible.sync="dialogAssueVisible"  class="AssueBox">
                <div style="width: 100%;">
                    <el-form ref="thinkTankfrom" :model="thinkTankConsultation" :rules="assueRules"  style="margin: auto;width: 90%;">
                        <!--咨询类别-->
                        <el-form-item :label="$t('common.ConsultingCategory')" prop="thinkTankType">
                            <el-select v-model="thinkTankConsultation.thinkTankType" :placeholder="$t('common.PleaseSelect2')+$t('common.ConsultingCategory')" style="width: 65%" popper-class="thinkSelect">
                                <el-option v-for="item in cateClass" :label="item.label" :value="item.value"  style="width: 70%"></el-option>
                            </el-select>
                        </el-form-item>
                        <!--需求内容-->
                        <el-form-item :label="$t('common.Demandforcontent')" prop="content">
                            <el-input
                                    type="textarea"
                                    style="width: 65%;"
                                    :autosize="{ minRows:4, maxRows: 6}"
                                    maxlength="500"
                                    show-word-limit
                                    :placeholder="$t('common.PleaseEnter')+$t('common.Demandforcontent')"
                                    v-model="thinkTankConsultation.content"
                                    show-word-limit>
                            </el-input>
                        </el-form-item>
                        <!--姓名-->
                        <el-form-item :label="$t('common.Namethink')" prop="name">
                            <el-input :placeholder="$t('common.PleaseEnter')+$t('common.Namethink')" v-model="thinkTankConsultation.name" maxlength="100" show-word-limit></el-input>
                        </el-form-item>
                        <!--职务-->
                        <el-form-item :label="$t('common.Position')" >
                            <el-input :placeholder="$t('common.PleaseEnter')+$t('common.Position')" v-model="thinkTankConsultation.post" maxlength="100" show-word-limit></el-input>
                        </el-form-item>
                        <!--单位名称-->
                        <el-form-item :label="$t('common.NameoftheEntity')" >
                            <el-input :placeholder="$t('common.PleaseEnter')+$t('common.NameoftheEntity')"  v-model="thinkTankConsultation.unitName" maxlength="100" show-word-limit></el-input>
                        </el-form-item>
                        <!--联系方式-->
                        <el-form-item :label="$t('common.ContactWay')" prop="contactInformation">
                            <el-input :placeholder="$t('common.PleaseEnter')+$t('common.ContactWay')"  v-model="thinkTankConsultation.contactInformation" maxlength="11" show-word-limit></el-input>
                        </el-form-item>
                        <!--邮箱-->
                        <el-form-item :label="$t('common.Email1')" prop="email">
                            <el-input :placeholder="$t('common.PleaseEnter')+$t('common.Email1')" v-model="thinkTankConsultation.email"  maxlength="32" show-word-limit></el-input>
                        </el-form-item>
                    </el-form>
                    <div slot="footer" class="dialog-footer">
                        <el-button @click="cancelSubmit">{{$t('common.Cancel')}}</el-button>
                        <el-button type="primary" @click="onSubmit">{{$t('common.Submit')}}</el-button>
                    </div>
                </div>

            </el-dialog>
            <!--    登录提示-->
            <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>
    </div>

</template>

<script>
    import Base from "@/views/base/Base";
    import { Swiper } from "vue-awesome-swiper";
    import Screen from "@/components/screen";
    import { getBaseResearchResultViews} from "@/api/research/baseResearchResultView";
    import { baseThinkTankInfos} from "@/api/thinkTank/baseThinkTankInfo";
    import { hostFocusList,carbonNeutralList} from "@/api/financialService/cmsInformationViews";
    import {gateGetUnitViewById} from "@/api/baseUnitView";
    import {saveOrUpdate} from "@/api/thinkTank/thinkTankConsultation";
    import {getToken} from '@/utils/auth';
    import {getUserInfoStatus} from "@/api/userCenter";
    import {getDicts} from '@/api/dict'
    import {weatherArticle} from '@/api/cms/cmsInformationEntity';
    import {pictureAndGraph,pictureAndGraphDetail} from '@/api/operation/interactiveMessageWeatherInfo';

    export default {
        name: "ThinkTankConsultingMynew",
        components: { Screen },
        extends: Base,
        data(){
            return{
                num:5,
                timer:'',
                toViewLogin:false,
                index: 0,
                loading: true,
                totalPage: "",
                projectFaIcon:2,
                menberDetails:{
                    dictTypeId: "456",
                    id: "3140",
                    img: "group.png",
                    label: "咨询公司",
                    num: "42",
                    value: "08",
                },
                page: {
                    pageSize: "10",
                    pageNo: "1",
                    language:'',
                    descStatus:'0',
                },
                consultServe:[
                    {
                        title:'common.ThinkTankMarketResearch',
                        label:'common.ThinkTankMarketResearchText'
                    },
                    {
                        title:'common.ThinkTankProjectConsultation',
                        label:'common.ThinkTankProjectConsultationText'
                    },
                    {
                        title:'common.ThinkTankScienceAndTechnologyInnovation',
                        label:'common.ThinkTankScienceAndTechnologyInnovationText'
                    },
                    {
                        title:'common.ThinkTankPlanningStudy',
                        label:'common.ThinkTankPlanningStudyText'
                    },
                ],
                init: [],
                dict: {},
                informationList1:[],
                informationList1page:{
                    pageSize: 5,
                    pageNo: 1,
                    language:'',
                    totalPage:'',
                    descStatus: 0
                },
                hotList:{
                    pageSize:5,
                    pageNo:1,
                    language:''
                },
                HotFocus:[],
                RecommendedList:[],
                dialogAssueVisible:false,
                textarea2:"",
                //资讯类别列表
                cateClass:[],
                //智库咨询表单
                thinkTankConsultation:{
                    name:"",
                    post:"",
                    unitName:"",
                    contactInformation:"",
                    email:"",
                    thinkTankType:"",
                    content:"",
                },
                //用户信息
                userInfomation:{},
                graphicList:[],
                articleList:[

                ],
                articleTotal:5,
                graphicTotal:10,
                grapicDetailShow:false,
                grapicDetailList:[],
                ArticelPage:{},
                //气候文章列表当前分页
                currentPage:1,
                //气候图文列表分页信息
                graphicPicPage:{},
                graphicPicDetail:1,
                //气候图文列表详情当前分页
                currentGraphic:0,
                //气候图文列表详情总页数
                graphicTotalPage:1,
                graphicDetailTitle:''
            }
        },
        updated() {
            this.Swiper();
        },
        computed:{
            //表单验证规则
            assueRules(){
                return{
                    thinkTankType:[
                        {required:true,
                            message: this.$i18n.locale=='zh'? '请选择咨询类别': 'Please select the type of information',
                            trigger: 'change'
                        },
                    ],
                    content:[
                        {required:true,
                            message: this.$i18n.locale=='zh'? '请输入需求内容': 'Please enter requirements',
                            trigger: 'blur'
                        },
                    ],
                    name:[
                        {required:true,
                            message: this.$i18n.locale=='zh'? '请输入用户名': 'Please enter a user name',
                            trigger: 'blur'
                        },
                    ],
                    contactInformation:[
                        {required:true,
                            message: this.$i18n.locale=='zh'? '请输入联系方式': 'Please enter contact information',
                            trigger: 'blur'
                        },
                        {
                            pattern: /^0{0,1}(13[0-9]|15[7-9]|153|151|156|18[1-9])[0-9]{8}$/,
                            message: this.$i18n.locale=='zh'? '联系方式格式不正确，请重新输入': 'Contact number format is incorrect, please re-enter',
                            trigger: 'blur'
                        }
                    ],
                    email: [
                        {message:this.$t('common.PleaseFillOut')+this.$t('common.Email'), trigger: 'blur'},
                        {
                            pattern: /^[a-zA-Z0-9]+([-_.][a-zA-Z0-9]+)*@[a-zA-Z0-9]+([-_.][a-zA-Z0-9]+)*\.[a-z]{2,}$/,
                            message: this.$i18n.locale=='zh'? '邮箱格式不正确，请重新输入': 'Email format is incorrect, please re-enter',
                            trigger: 'blur'
                        }
                    ],
                }

            }
        },
        mounted() {
            this.getInformationList1();
            this.getHotFocus();
            this.getArticleList()

            this.getRecommended();
            this.getUserMessage();
            this.getPicArtList();
            this.$store.commit('modify', 'enterprise');
            window.localStorage.setItem('router', 'enterprise');
        },
        watch: {
            '$i18n.locale'(){
                this.getInformationList1();
                this.getHotFocus();
                this.getRecommended();
                // this.changePage();
                this.getUserMessage();
                // this.onSubmit()

            },
            "toViewLogin"(){
                if(this.toViewLogin==true){
                    this.loginTipsChange()
                }
            },
        },
        methods:{
            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)
            },
            //成果展示
            getInformationList1() {
                const that = this;
                let param = that.informationList1page;
                param.language = this.$i18n.locale.toUpperCase()
                getBaseResearchResultViews(param).then((resulet) => {
                    let that = this;
                    let data = resulet.data;
                    if (data.baseResearchResultViews) {
                        that.informationList1 = data.baseResearchResultViews;
                        if(data.page){
                            that.informationList1page.totalPage = data.page.totalPage;
                        }
                    }
                });
            },
            //热点聚焦
            // getHotFocus(){
            //     const that = this;
            //     this.hotList.language = this.$i18n.locale.toUpperCase();
            //     hostFocusList(this.hotList).then((res)=>{
            //         if(res.data.length>0){
            //             this.HotFocus = res.data;
            //         }else{
            //             this.hotList.pageNo = 1
            //         }
            //     })
            // },
            getHotFocus(){
                const that = this;
                this.hotList.language = this.$i18n.locale.toUpperCase();
                carbonNeutralList(this.hotList).then((res)=>{
                    if(res.data.length>0){
                        this.HotFocus = res.data;
                    }else{
                        this.hotList.pageNo = 1;
                        this.getHotFocus();
                    }
                })
            },
            //智库推荐
            getRecommended() {
                let that = this;
                const recomParams = {
                    // pageSize:5,
                    // pageNo: 1,
                    language:this.$i18n.locale.toUpperCase(),
                };

                baseThinkTankInfos(recomParams).then((res)=>{
                    this.RecommendedList = res.data.baseThinkTankInfos;
                    for(let i=0;i<this.RecommendedList.length;i++){
                        if(this.RecommendedList[i].photo == null){
                            this.RecommendedList[i].photo = '/def/def1.png';
                        }
                    }

                })
            },
            //成果展示 换一批
            resultsShowChange(){
                // let a = this.informationList1page.totalPage;
                // this.informationList1page.pageNo = Math.ceil(Math.random()*a);
                if(this.informationList1page.pageNo == this.informationList1page.totalPage){
                    this.informationList1page.pageNo = 0;
                }
                this.informationList1page.pageNo++
                this.getInformationList1();
            },
            // 热点聚焦换一批
            changePage(){
                this.hotList.pageNo = this.hotList.pageNo +1;
                this.getHotFocus();
            },
            //查询热点聚焦
            toInformationList1(ele){
                let params = {
                    entityId:ele.entityId,
                    // researchResultFileId:ele.researchResultFileId,
                }
                this.toViewInformationList('resourceSharingDetails',params)
            },
            //查询咨询类别列表
            getcateClass(){
                if(this.$i18n.locale == 'zh'){
                    getDicts('THINK_TANK_TYPE_DICT').then((res)=>{
                        this.cateClass = res.data[0]
                    })
                }else{
                    getDicts('THINK_TANK_TYPE_DICT_EN').then((res)=>{
                        this.cateClass = res.data[0]
                    })
                }
            },
            /*  跳转类  */
            //跳转 发布咨询需求
            toIssue(){
                if (!this.$Cookies.get('token')){
                    this.toViewLogin = true;
                }else{
                    this.toViewHot('addMyProject')
                }

            },
            //跳转 智库详情
            toDetails(router,json){
                let params = {
                    unitId:json.baseEntityId,
                    memberNameZh:json.unitName,
                    memberNameEn:json.unitNameEn
                }
                gateGetUnitViewById(json.baseEntityId,this.$i18n.locale.toUpperCase()).then(res => {
                    var data =  res.data;
                    if(data){
                        var baseUnitView = res.data.baseUnitView;
                        if(baseUnitView.showable == '1'){
                            this.$store.commit('modify', 'enterpriseDetails');
                            window.localStorage.setItem('router', 'enterpriseDetails');
                            const { href } = this.$router.resolve({
                                name: 'enterpriseDetails',
                                query: {
                                    key:params.unitId
                                    // key:json.baseEntityId,
                                    // member: JSON.stringify(params)
                                }
                            });
                            window.open(href, '_blank');
                        }else{
                            this.$store.commit('modify', router);
                            window.localStorage.setItem('router', router);
                            const { href } = this.$router.resolve({
                                name: router,
                                query: {
                                    key: json.memberId,
                                    member: JSON.stringify(params)
                                }
                            });
                            window.open(href, '_blank');
                        }
                    }
                });

            },
            //跳转至热点聚焦
            toViewInformationList(router, json) {
                clearInterval(this.timer);
                const {href} = this.$router.resolve({
                    name: router,
                    query: {
                        key:JSON.stringify(json),
                    }
                });
                window.open(href, '_blank');

            },
            toView(router, json) {
                clearInterval(this.timer);
                this.$router.push({
                    name: router,
                    query: {
                        key:json,
                    }
                });
            },
            //跳转至推荐更多
            toViewMore(router, json,type){
                this.$router.push({name:router,params:{id:json,type:type}})
            },
            toViewHot(router,json){
                this.$store.commit('modify', router);
                window.localStorage.setItem('router', router);
                const { href } = this.$router.resolve({
                    name: router,
                    query: {
                        key: json
                    }
                });
                window.open(href, '_blank');
            },
            // 判断未登录跳转是否关闭
            toViewLoginChange(done){
                this.toViewLogin=false;
                this.num=5;
                clearInterval(this.timer);
            },
            Swiper() {
                var galleryThumbs = new Swiper(".gallery-thumbs", {
                    spaceBetween: 10,
                    slidesPerView: 5,
                    loop:true,
                    allowTouchMove:false,
                    preventClicks:true,
                    watchSlidesVisibility: true,
                    watchSlidesProgress: true,
                    navigation: {
                        nextEl: '.swiper-button-next',
                        prevEl: '.swiper-button-prev',
                    },
                    autoplay: {//自动播放
                        delay: 2000,
                        disableOnInteraction: true,//用户操作后是否停止 默认停止（true）
                    },
                });
            },
            // 我要发布表单提交
            onSubmit() {
                this.$refs['thinkTankfrom'].validate((valid1)=>{
                    if(valid1){
                        // this.thinkTankConsultation.name = this.userInfomation.name;
                        // this.thinkTankConsultation.contactInformation = this.userInfomation.newMobile;
                        // this.thinkTankConsultation.email = this.userInfomation.email;
                        this.thinkTankConsultation.replyStatus = "0";
                        this.thinkTankConsultation.approveStatus = "2";
                        this.thinkTankConsultation.reserveOne = "0";
                        this.submitHandler((token) => {
                            saveOrUpdate(JSON.stringify(this.thinkTankConsultation),token).then(res => {
                                this.$message({
                                    message: this.$i18n.locale.toUpperCase()=="ZH"?'发布成功':'Release success',
                                    type: 'success'
                                });
                                this.dialogAssueVisible = false;
                                this.resetToken();
                                this.thinkTankConsultation = {
                                    name:"",
                                    post:"",
                                    unitName:"",
                                    contactInformation:"",
                                    email:"",
                                    thinkTankType:"",
                                    content:"",
                                };
                            }).catch((error) => {
                                this.$notify.error({
                                    title: 'common.Error',
                                    message: error.msg
                                });
                            })
                        })

                    } else {
                        this.$notify.error({
                            title: this.$t('common.Error'),
                            message: this.$t('common.CompleteInformation')
                        });
                        return false;

                    }
                })
            },
            //取消提交
            cancelSubmit(){
                this.dialogAssueVisible = false;
            },
            // 点击发布项目按钮
            OpenThink(){
                if (!this.$Cookies.get('token')) {
                    this.toViewLogin = true;
                } else {
                    this.dialogAssueVisible = true;
                    this.getUserMessage()
                }
            },
            //获取表格初始信息
            getUserMessage(){
                this.getcateClass();
                let user = JSON.parse(window.localStorage.getItem('user'));
                let userMess = user.umsUser
                let userMobile = userMess.userPreferredMobile.substring(4)
                this.thinkTankConsultation.name = userMess.userName,
                    this.thinkTankConsultation.contactInformation = userMobile,
                    this.thinkTankConsultation.email = userMess.userEmail
                this.thinkTankConsultation.post = "";
                this.thinkTankConsultation.unitName = "";
            },
            //气候治理专栏文章列表分页
            handleCurrentChange(val) {
                console.log(`当前页: ${val}`);
                this.currentPage = val
                this.getArticleList()
            },
            //获取文章列表信息
            getArticleList(){
                let params = {
                    language:this.$i18n.locale.toUpperCase(),
                    pageNo:this.currentPage,
                    pageSize:'10'
                }
                weatherArticle(params).then((res)=>{
                    let result = res.data
                    if(result){
                        this.articleList = result.weatherArticle
                        this.ArticelPage = result.pageRecords

                    }
                })
            },
            //获取更多图文列表信息
            getMore(){
                this.graphicPicDetail +=1
                this.getPicArtList(this.graphicPicDetail)
                console.log(this.graphicPicDetail)
            },
            //弹出气候治理专栏图文详情
            proDetail(item){
                this.getPicArtDetail(item.id)
                this.graphicDetailTitle = item.name
                this.grapicDetailShow = true

            },
            handleClose(done) {
                done();
                this.currentGraphic = 0
            },
            onChangeGra(e){
                console.log('e===================')
                console.log(e)
                if(e == 0){
                    e == 1
                }
                this.currentGraphic = e
            },
            //获取气候治理专栏图文列表
            getPicArtList(pageNo){
                let page = ''
                if(pageNo){
                    page = pageNo
                }else{
                    page = 1
                }
                let params = {
                    language:this.$i18n.locale.toUpperCase(),
                    pageNo:page,
                    pageSize:'8'
                }
                pictureAndGraph(params).then((res)=>{
                    if(res){
                        this.graphicList = res.data.pictureAndGraph;
                        this.graphicPicPage = res.data.pageRecords
                    }
                })
            },
            //获取气候治理专栏图文详情
            getPicArtDetail(id){
                let params = {
                    language:this.$i18n.locale.toUpperCase(),
                    pageNo:this.currentGraphic + 1,
                    pageSize:'1',
                    id:id
                }
                pictureAndGraphDetail(params).then((res)=>{
                    if(res){
                        this.grapicDetailList = res.data.pictureAndGraphDetail
                        this.graphicTotalPage = this.grapicDetailList.length;
                        if(this.currentGraphic > this.graphicTotalPage - 1){
                            this.currentGraphic = 0
                        }
                    }

                })
            },
            forwardPage(){
                this.graphicPicDetail +=1
                this.getPicArtList(this.graphicPicDetail)
                console.log(this.graphicPicDetail)
            },
            reducePage(){
                this.graphicPicDetail -=1
                if (this.graphicPicDetail < 1){
                    this.graphicPicDetail = 1
                }
                this.getPicArtList(this.graphicPicDetail)
                console.log(this.graphicPicDetail)

            }
        }
    }
</script>

<style scoped>
    .box {
        margin-top: 10px;
        background: #fff;
        /* height: 500px; */
        padding: 20px 0;
    }
    .crumbs {
        margin-left: 20px;
    }
    body {
        margin: 0;
    }

    li {
        display: inline-block;
        color: #1251a7;
    }
    .projectBox{
        width: 100%;
    }
    .relevanInformation{
        min-height: 200px;
        max-height: 400px;
        padding: 0;
        overflow: hidden;
    }
    .informationList{
        width: 100%;
        font-size: 12px;
    }
    .informationTitle{
        border-bottom: 1px solid #2C558A;
        padding: 0 0 10px 0;
        font-weight: 600;
        font-size: 20px;
        opacity: 0.9;
    }
    .informationTitleAfter{
        position: relative;
    }

    .informationList ul{
        margin-top: 14px;
        list-style-type:disc;
        padding: 0 0px 0 0;
        box-sizing: border-box;
    }
    .informationList ul li{
        width: 100%;
        amrgin-left: 20px;
        margin-bottom: 12px;
        color: #666666;
        cursor: pointer;
        font-size: 14px;
        height: 40px;
        line-height: 40px;

    }
    .informationList ul li .list{
        width: 73%;
        display: inline-block;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;

    }
    .demand{
        width: 100%;
        height: 144px;
        background-image: url("../../assets/img/ThinkTankConsulting/List5.png");
        background-size: cover;
        position: relative;
    }

    .swipers {
        position: absolute;
        width: 100%;
        height: 100%;
    }
    .swiper-container {
        width: 100%;
        height: 100%;
        margin-left: auto;
        margin-right: auto;
    }
    .swiper-wrapper{
        /*overflow: hidden;*/
        position: relative;
        display: -webkit-box;
        /*display: flex;*/
        width: 100%;
    }
    .swiper-slide {
        background-size: cover;
        background-position: center;
    }
    .gallery-thumbs {
        overflow: hidden;
        box-sizing: border-box;
        padding: 10px 0;
    }
    .gallery-thumbs .swiper-slide {
        width: 25%;
        height: 100%;
        /*opacity: 0.8;*/
    }
    .gallery-thumbs .swiper-slide-thumb-active {
        opacity: 1;
    }
    .ListOne{
        background: url('./../../assets/img/ThinkTankConsulting/List1.png');
    }
    .ListTwo{
        background: url('./../../assets/img/ThinkTankConsulting/List2.png');
    }
    .ListThree{
        background: url('./../../assets/img/ThinkTankConsulting/List3.png');
    }
    .ListFour{
        background: url('./../../assets/img/ThinkTankConsulting/List4.png');
    }
    .el-carousel__item h3 {
        color: #475669;
        font-size: 18px;
        opacity: 0.75;
        margin: 0;
    }
    .boxOne{
        line-height:37px;
        width: 113px;
        height: 38px;
        cursor: pointer;
        display: inline-block;
        text-align: center;
        border-radius:5px;
        float: right;
        padding: 0 10px;
        margin: 50px 200px 0px 0;
        background: #9dd95c
    }
    .boxTwo{
        line-height:37px;
        width: 113px;
        height: 38px;
        cursor: pointer;
        text-align: center;
        border-radius:5px;
        background: #9dd95c;
        position: absolute;
        left: 810px;
        top: 53px;
        padding: 0 10px;

    }
    .square {
        width: 8px;
        height: 8px;
        background: rgb(5, 91, 219);
        display: inline-block;
        margin-right: 10px;
        transform: translateY(-15px);
    }
    .AssueBox {
        padding:0 20%;
        /*width:100%;*/
        margin: auto;
    }
    .AssueBox >>> .el-dialog__header {
        border-bottom: 1px solid #bcbcbc;
        margin-left: 20px;
        margin-right: 20px;
        padding: 20px 0 20px;
    }

    .AssueBox >>> .el-dialog__headerbtn {
        display: none;
    }
    .AssueBox .el-input{
        width: 65%;

    }
    .AssueBox >>>.dialog-footer{
        text-align: center;
    }
    >>>.AssueBox .el-form-item .el-form-item__label{
        width: 150px;
    }
    >>>.el-form-item__error{
        left:32%;
    }

    .ClimateGovernance{
        margin: 20px 0;
    }
    .graphic1{
        width: 32%;
        float: left;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        color: #666;
        font-size: 14px;
    }
    .graphic2{
        width:45%;
        float: left;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        color: #666;
        font-size: 14px;
    }
    .graphicData{
        width: 45%;
        height: 132px;
        margin: 10px 0;
        border-radius: 10px;
        border: 1px solid #ccc;
        position: relative;
        cursor: pointer;
        overflow: hidden;
    }
    .graphicTitle{
        width:89%;
        padding: 2px 10px;
        position: absolute;
        bottom: 0;
        overflow: hidden;
        color: #fff;
        background: #09090961;
        text-overflow: ellipsis;
        white-space: nowrap;
        border-bottom-left-radius: 10px;
        border-bottom-right-radius: 10px;
    }
    .moreList{
        width: 100%;
        background: #cacaca;
        height: 30px;
        line-height: 30px;
        text-align: center;
        font-size: 30px;
        color: #fff;
        border-radius: 5px;
        margin-top: 10px;
        cursor: pointer;
    }
    .article1{
        width: 65%;
        float: right;
        margin-top: 10px;
        font-size: 14px;
    }
    .article2{
        width:55%;
        float: right;
        margin-top: 10px;
        font-size: 14px;
    }
    .article1 ul li,.article2 ul li{
        width: 100%;
        color: #666;
        height: 40px;
        line-height: 40px;
        border-bottom: 1px dashed #ccc;
        list-style: inside disc;
        margin-bottom: 12px;
    }
    .artTitle{
        display: inline-block;
        width: 75%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .artTime{
        float: right;
        width: 20%;
        text-align: right;
        color: #adabab;
    }
    .articleUl{
        list-style: inside disc;

    }
    .graphicDetail{
        color: #fff;
    }
    /deep/.graphicDia .el-dialog, .el-pager li{
        background:transparent!important;
        box-shadow: none;
        width:1000px!important;
    }
    /deep/.graphicDia .el-dialog{
        color: #fff;

    }
    .graphicDetail{

    }
    .graDetailContent{
        background: #0000007d;
        /*width:65%;*/
        padding:20px 0 ;
        margin: auto;
    }
    .graDetailTitle{
        padding: 0 20px;
    }
    .graDetailPicture{
        width: 100%;
        height: 443px;
        border: 1px solid red;
        margin: 20px 0;
    }
    .gtaPagi{
        width: 20%;
        text-align: center;
        line-height: 25px;
        display: inline-block;

    }
    .graDetailDescriptions{
        margin-top: 20px;
    }
    .graDetailDescription{
        width: 79%;
        display: inline-block;
        line-height: 20px;
    }
    .gracarousel{
        margin-top: 30px;
    }
    /deep/.gracarousel .el-carousel__container{
        height: 546px!important;
    }

    /deep/ .el-dialog__header button {
        position: absolute;
        top: 8px;
        right: 8px;
    }
    /deep/.el-dialog__body{
        padding: 0;
    }
    /deep/.el-dialog__header{
        padding: 0;
    }
    /deep/.el-dialog__headerbtn .el-dialog__close {
        color: #ffffff;
    }
    /deep/.el-carousel__arrow{
        font-size: 45px;
    }
    .graLogo{
        width: 45px;
        height: 45px;
        float: left;
    }
    .graphicPicList{
        width: 100%;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
    }
    .graphicPicList1{
        width: 65%;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
    }
    .graphicLeftIcon{
        float: left;
        font-size: 45px;
        color:#ccc;
        height: 100%;
        margin-top: 50%;
    }
    .graphicRightIcon{
        float: right;
        font-size: 45px;
        color: #ccc;
        height: 100%;
        margin-top: 50%;
    }


</style>
<style>
    .thinkSelect{
        width:300px!important;
    }
</style>