<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' ");//瀵屾枃鏈琣鏍囩鍔犱笂鏂扮獥鍙ｆ墦寮€
           }
           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; //寰呬慨鏀筯eight锛歝alc
        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>