<template>
    <span>
        <div class="inline-16">
            <el-button type="text" size="mini" @click="open">详情</el-button>
        </div>


        <el-drawer title="详情" :size="1080" :visible.sync="show" direction="rtl" :before-close="onClose">
            <div class="drawer-box">
                <div class="detail-head">
                    <div class="title">{{ detail.title }}</div>
                    <div class="data-display">
                        <span>浏览数：{{ detail.readcount }}</span>
                        <span>分享数：{{ detail.sharecount }}</span>
                        <span>拉新数：{{ detail.newcount }}</span>
                    </div>
                </div>
                <template v-if="detail.type == 1">
                    <el-image class="file-style" v-for="item in detail.attinfos" :key="item.linksid" :src="item.url"
                        :preview-src-list="srcList" lazy fit="cover" />
                </template>
                <template v-if="detail.type == 2">
                    <video class="file-style" width="1020px" height="428px" v-for="item in detail.attinfos" controls
                        :key="item.linksid" :poster="item.subfiles.length > 0 ? item.subfiles[0].url : ''" :src="item.url"></video>
                </template>
                <div v-if="detail.type == 3" id="richtext"></div>
                <div style="height:30px"></div>
            </div>
        </el-drawer>

    </span>
</template>

<script>
//type 1图片 2视频 3图文
import { weAtob } from "@/utils/weapp-jwt";
import MFT from "@/utils/matchingFeilType";
import fileBlock from "@/components/file-block/index.vue";
export default {
    props: ['id'],
    components: { fileBlock },
    data() {
        return {
            show: false,
            detail: {},
            itemStyle: {
                img: {
                    width: 52.75,
                    height: 63.83
                },
                title: 16,
                descript: 12
            },
        }
    },
    methods: {
        open() {
            this.$api.requested({
                "classname": "webmanage.saletool.sharematerial.sharematerial",
                "method": "selectDetail",
                "content": {
                    "sat_sharematerialid": this.id
                }
            }).then(res => {
                if (res.msg != '成功') return this.$message.error(res.data);
                console.log("详情", res)
                res.data.attinfos = MFT.fileList(res.data.attinfos);
                this.detail = res.data;
                this.show = true;
                if (res.data.type == 1) {
                    let srcList = [];
                    res.data.attinfos.forEach(v => {
                        srcList.push(v.url);
                    });
                    this.srcList = srcList;
                } else if (res.data.type == 3) {
                    setTimeout(() => document.querySelector("#richtext").innerHTML = weAtob(res.data.content), 10);
                }
            })
        },
        onClose() {
            this.show = false;
        }
    },

}
</script>

<style scoped>
.drawer-box {
    width: 100%;
    padding: 0 30px;
}

.detail-head {
    width: 100%;
    border-bottom: 1px solid #DDDDDD;
}

.detail-head .title {
    font-size: 16px;
    font-family: PingFang SC-Bold, PingFang SC;
    font-weight: bold;
    color: #333333;
}

.detail-head .data-display {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 361px;
    height: 20px;
    margin-top: 10px;
    font-size: 14px;
    font-family: PingFang SC-Regular, PingFang SC;
    color: #333333;
    padding-bottom: 20px;
}

/* 图片视频样式 */
.file-style {
    display: block;
    width: 1020px;
    height: 428px;
    margin-top: 10px;
    border-radius: 4px;
}
</style>