<style>
    .left_width {
        width: 80px;
    }
    .tougao_ImgList{
    width: 130px;
    height: 130px;
    margin: 0 5px 10px;
}
</style>
<template>
    <q-dialog v-model="isDetails"  maximized @hide="goclose"> 
        <q-card style="max-width: 790px;max-height: 90%;">
            <q-card-section class="row items-center q-pb-none">
                <div class="text-h6">投稿详情</div>
                <q-space />
                <q-btn icon="close" flat round dense @click="goclose" />
            </q-card-section>

            <q-card-section v-if="data" class="welcomeList">
                <div class="backInfo_One" style="width: 740px;">
                    <template v-if="data.Type==1">
                        <div>
                            <el-tag>写新图文</el-tag>
                        </div>
                        <div style="margin:20px 0;display:flex;">
                            <div style="flex-shrink:0;" class="left_width">标题：</div>
                            <div class="backOtherInfo" v-if="data">
                                {{ data.Title }}
                            </div>
                        </div>
                        <div style="display: flex;">
                            <div class="left_width">作者：</div>
                            <span class="backOtherInfo" v-if="data">
                                {{ data.Author }}
                            </span>
                        </div>
                        <div style="display: flex;margin:20px 0;width: 100%;">
                            <div style="flex-shrink:0" class="left_width">图文内容：</div>
                            <div class="tougaohtml" style="border:1px solid rgb(235, 235, 235);padding: 10px;flex:1"
                                v-html="data.Content"></div>

                        </div>
                        <div style="margin-top:20px;display:flex;">
                            <div style="margin-bottom:10px;" class="left_width">封面图：</div>
                            <div class="tougao_ImgList" style="width: 210px;height: 90px;">
                                <el-image v-if="data.CoverImagePath && data.CoverImagePath!=''"
                                    style="width: 100%; height: 100%" :src="data.CoverImagePath" fit="cover"></el-image>
                            </div>
                        </div>
                        <div style="margin-top:20px;display:flex;">
                            <div style="margin-bottom:10px;flex-shrink:0;width:60px;" class="left_width">描述：</div>
                            <div>{{data.Description}}</div>
                        </div>
                    </template>
                    <template v-if="data.Type==2">
                        <div>
                            <el-tag>文本消息</el-tag>
                        </div>
                        <div style="display: flex;margin-top: 20px;">
                            <div class="left_width">文本内容:</div>
                            <div v-html="data.Content"></div>
                        </div>

                    </template>
                    <template v-if="data.Type==4">
                        <div>
                            <el-tag>音频消息</el-tag>
                        </div>
                        <div style="margin:20px 0;display:flex;">
                            <div style="flex-shrink:0">标题：</div>
                            <div class="backOtherInfo" v-if="data">
                                {{ data.Title }}
                            </div>
                        </div>
                        <div style="display:flex;">
                            <div style="flex-shrink:0">推荐语：</div>
                            <div class="backOtherInfo" v-if="data">
                                {{ data.Description }}
                            </div>
                        </div>

                        <div style="margin-top:20px;width:300px;" v-if="data.VideoMediumPath">
                            <audio :src="data.VideoMediumPath" controls="controls"></audio>
                        </div>
                    </template>
                    <template v-if="data.Type==5">
                        <div>
                            <el-tag>图片消息</el-tag>
                        </div>
                        <div style="margin:20px 0;display:flex;">
                            <div style="flex-shrink:0" class="left_width">推荐语：</div>
                            <div class="backOtherInfo" v-if="data" style="margin-left: 5px;">
                                {{ data.Description }}
                            </div>
                        </div>
                        <!-- <div style="margin:20px 0;">
                        {{data.Description}}
                    </div> -->
                        <div style="display: flex;">
                            <div style="flex-shrink:0" class="left_width">图片列表：</div>
                            <div style="display:flex;flex-wrap: wrap;">
                                <div class="tougao_ImgList" v-for="(x,y) in data.ImageList" :key='y'>
                                    <el-image style="width: 100%; height: 100%" :src="x.ImageUrl" fit="cover">
                                    </el-image>
                                </div>
                            </div>
                        </div>


                    </template>
                </div>
            </q-card-section>
        </q-card>
    </q-dialog>
</template>
<script>
    import {
        getContributeInfo,

    } from '../../../api/teacher/contribution';
    export default {
        props: ['ContributeId'],
        data() {
            return {
                isDetails: false,
                data: null
            }
        },
        created() {
            this.isDetails = true
            this.getdetails()
        },
        methods: {
            getdetails() {
                getContributeInfo({ ContributeId: this.ContributeId }).then(res => {
                    if (res.Code == 1) {
                        this.data = res.Data
                        // if (this.addMsg.Type == 1) {
                        //     this.coverimg = res.Data.CoverImagePath
                        // } else if (this.addMsg.Type == 4) {
                        //     this.audiourl = this.addMsg.VideoMediumPath
                        // } else if (this.addMsg.Type == 5) {
                        //     this.imgsList = this.addMsg.ImageList
                        //     this.coverimg = res.Data.CoverImagePath
                        // }
                    }
                }).catch(() => {

                })
            },
            goclose() {
                this.$emit('close')
            }
        }
    }
</script>