<template>
<div class="platAdContainerBox"> 
   <div class="platAdContainer platAdContainerList">
            <el-collapse  accordion>
                <el-collapse-item  :name="index" v-for="(item,index) in listArr" :key="index">
                    <template slot="title">
                        <section class="titleheader" @click="detail(item)">
                        <span class="titleh3"><i class="el-icon-date"></i>{{item.items.__04C3Fur4uYFpos1vlSP.value}}</span>
                        <span class="titleDate">发布时间：{{item.items.__RHSQX3JfmxBzi1x3Obo.value}}</span>
                        </section>
                    </template>
                    <div v-html="platAdDetailHtml" class="platAdcontent"></div>
                </el-collapse-item>  
            </el-collapse>
            <section class="platAdBottom" v-if="listArr.length==0">暂无消息</section>
            <!-- <section class="platAdBottom">
                <span class="more">查看更多</span>
                <span class="nomore">没有更多了</span>
            </section> -->
   </div>
</div>    
</template>
<script>
import { Loading } from 'element-ui';
export default {
    props: {
        showdialogPlatAd: {
            type: Boolean,
            default: false,
        },
    },
    data(){
        return{
            visible: this.showdialogPlatAd, 
            activeName:0,
            param:{
                _currpage:1,
                lines:10
           },
           listArr:[],
           platAdDetailHtml:"",
           itemid:'',//判断是否已经获取不加载接口
        }
    },
   watch: {
        showdialogPlatAd() {
        this.visible = this.showdialogPlatAd;
        if (this.visible) {        
        }
        },
    },
    created() {
        this.list()
    },
    methods: {
        show(){//Home.vue 右上角点击滚动信息 显示弹窗
          this.visible =true
        },
        list(){
            this.$api.bcxplatAdlistApi(this.param,{    
                onSucess: res => {
                   if(res.data.errcode==0){
                     this.listArr=res.data.data.data
                     this.listArr.sort((a,b)=>{
                        return (new Date(b.items.__RHSQX3JfmxBzi1x3Obo.value)-new Date(a.items.__RHSQX3JfmxBzi1x3Obo.value))
                     })
                     if(this.listArr){
                         this.detail(this.listArr[0])
                     }
                   }
                }
              }
            )
        },   
        detail(item){
            //如果点击同一个列表不加载接口
            if(this.itemid==item.items.__8fLpj6okoTusT9qs86P.value) return
            
            let options={
                 target:document.querySelector(".platAdContainerBox"),                 
                 text: '加载中...',
                 spinner: 'el-icon-loading',
            }
            const loading = Loading.service(options);//开始加载
            this.platAdDetailHtml=""
            let data={msgId:item.items.__8fLpj6okoTusT9qs86P.value}
            this.$api.bcxplatAdlistDetailApi(data,{    
                onSucess: res => {
                   this.$nextTick(() => { // 以服务的方式调用的 Loading 需要异步关闭
                        loading.close();//关闭加载
                   });
                   if(res.data.errcode==0){
                     this.$nextTick(()=>{
                       this.platAdDetailHtml=this.formatText(res.data.data.data[0].items.__Yx6slC8TldaiZwxXkV3.value)
                       this.itemid=item.items.__8fLpj6okoTusT9qs86P.value
                     });
                   }
                }
              }
            )
        },
        formatText(value){
           if(value){      
               value= value.replace(/<a */g, "<a target='_blank' ");//富文本a标签加上新窗口打开
           }
           console.log(value)
           return value
        },  
         // 取消
        cancle() {
           this.$emit("update:showdialogPlatAd", false);      
        },   
    },
   
}
</script>
<style lang="scss">
.platAddDialog .el-dialog .el-dialog__body{ max-height: 700px; overflow: auto;}
.platAdContainer{
    max-height: 800px;
    overflow: auto;
    .el-collapse-item__header{
        color: #1E263C!important;
    }
    .titleheader{
        display: flex;
        width: 100%;
        flex-direction: row;
        justify-content: space-between;
        padding: 0 10px;
        .titleh3{         
         color: #1E263C;font-weight:bold;overflow: hidden; text-overflow: ellipsis;white-space:nowrap;margin-right:50px;
           i{
               margin-right:5px;
           }
         }
        .titleDate{color: #9FA0A3;min-width: 200px; text-align: right;}
    }
    .platAdcontent{
        padding: 5px 10px;
        padding-bottom: 50px; //待修改height：calc
        img{
            width: 100%;
        }
        .el-message-box__title{line-height: 1.5;}
        .el-message-box__header{padding: 0px!important;}
    }
    .platAdBottom{
        display: flex;
        flex-direction: column;
        text-align: center;
        padding: 20px 0;
        span{
            &.more{cursor: pointer;}
        }
    }
   
}
</style>