<template>
    <div class="box">
        <div class="box_pic" v-if="background">
            <img :src="background" />
        </div>

        <div class="contextCss">
            <div class="modelBox" v-for="(v, i) in modelList" :key="i">
                <div class="titleCss">{{ v.name }}</div>
                <!--相册-->
                <div v-if="v.type == 1" class="typeOne">
                    <div
                        class="pic"
                        v-for="(x, y) in v.imgList"
                        :key="y"
                        @click="openImg(x, y, v)"
                    >
                        <img :src="x.response" />
                    </div>
                </div>
                <!--视频-->
                <div v-if="v.type == 2" class="typeTwo">
                    <div
                        class="videoTwo"
                        v-for="(x, y) in v.videoList"
                        :key="y"
                    >
                        <video controls :poster="imgUrl" preload="none">
                            <source :src="x" type="video/mp4" />
                        </video>
                    </div>
                </div>
                <!--图文-->
                <div v-if="v.type == 3" class="typeThree">
                    <div class="contextThree" v-html="v.context"></div>
                </div>
            </div>

            <div class="thumbs" v-if="resData.likeStatus">
                <img src="@/assets/dz_on.png" @click="toDZ(false)" />
                <span @click="toDZ(false)">{{
                    resData.likeNumber ? resData.likeNumber : 0
                }}</span>
            </div>
            <div class="thumbs thumbs_grey" v-else>
                <img src="@/assets/dz_off.png" @click="toDZ(true)" />
                <span @click="toDZ(true)">{{
                    resData.likeNumber ? resData.likeNumber : 0
                }}</span>
            </div>
        </div>
    </div>
</template>

<script>
import { ImagePreview } from "vant";
export default {
    data() {
        return {
            arr: 0,
            modelList: [],
            background: "",
            imgUrl: "",
            resData: {
                likeStatus: 0,
                likeNumber: 0,
            }
        };
    },
    methods: {
        //获取数据
        getTable() {
            this.yxAxios
                .get(
                    `${this.kqUrl}/schoolConsult/consultDetails?consultId=` +
                        this.$route.query.dataId +
                        `&userNum=` +
                        JSON.parse(localStorage.getItem("userInfo")).centerNo
                )
                .then((res) => {
                    if (res.data.code == 200) {
                        this.imgUrl = res.data.data.imgUrl;
                        if (!res.data.data.background) {
                            this.background = res.data.data.imgUrl;
                        } else {
                            this.background = res.data.data.background;
                        }
                        let arr = JSON.parse(res.data.data.modelList);
                        this.modelList = arr;
                        this.resData = res.data.data;
                        // this.showFrame();
                    } else {
                        this.$toast.fail(res.data.message);
                    }
                });
        },
        //打开图片
        openImg(x, y, v) {
            let imgList = v.imgList.map((v) => v.response);

            ImagePreview({
                images: imgList,
                startPosition: y,
            });
        },
        //添加浏览量
        addReadNum() {
            this.yxAxios
                .post(`${this.kqUrl}/visitRecord/setConsultVisit`, {
                    consultId: this.$route.query.dataId,
                    userId: JSON.parse(localStorage.getItem("userInfo"))
                        .centerNo,
                })
                .then((res) => {
                    if (res.data.code == 200) {
                        console.log("阅读量成功");
                    } else {
                        console.log("阅读量失败");
                    }
                });
        },
        //视频
        showFrame() {
            const video = document.createElement("video");
            console.log("sfsddf");
            video.addEventListener("loadeddata", function (e) {
                canvas.width = this.videoWidth;
                canvas.height = this.videoHeight;
                width = this.videoWidth;
                height = this.videoHeight;
                ctx.drawImage(this, 0, 0, width, height);
                var src = canvas.toDataURL("image/jpeg");
                console.log("sfsf");
                img.src = src;

                // var currentTime = this.currentTime
                // duration = this.duration
                // var fps = duration / 30
            });
        },
        //点赞 true点赞，false取消
        toDZ(val) {
            
            this.yxAxios
                .post(`${this.kqUrl}/visitRecord/setConsultLike`, {
                    consultId: this.$route.query.dataId,
                    userId: JSON.parse(localStorage.getItem("userInfo"))
                        .centerNo,
                    status: val ? 1 : 0,
                })
                .then((res) => {
                    if (res.data.code == 200) {
                        console.log("点赞成功");
                    } else {
                        this.$toast.fail(res.data.message);
                        console.log("点赞失败");
                    }
                    this.getTable();
                });
        },
    },
    mounted() {
        this.getTable();
        this.addReadNum();
    },
};
</script>

<style lang="scss" scoped>
.box {
    background-color: #f5f6fa;
    min-height: 100vh;

    .box_pic {
        width: 100%;
        height: 100vh;
        background-color: #999;

        img {
            width: 100%;
            height: 100%;
        }
    }

    .contextCss {
        width: 90vw;
        position: absolute;
        top: 600px;
        left: 5vw;
        border-radius: 5vw;
        background-color: #fff;
        padding: 3vw;
        box-sizing: border-box;
        box-shadow: 1px 1px 1px 1px rgb(221, 220, 220);

        .modelBox {
            margin: 3vw;
            display: flex;
            justify-content: center;
            flex-wrap: wrap;

            .titleCss {
                width: 60vw;
                padding: 3.5vw;
                box-sizing: border-box;
                font-size: 4.6vw;
                font-weight: bold;
                background-image: url("../../assets/yxcg/red_title.png");
                -moz-background-size: 100% 100%;
                background-size: 100% 100%;
                text-align: center;
                margin-bottom: 5vw;
                color: #fff;
            }

            .typeOne {
                margin: 5vw;

                .pic {
                    width: 90vw;
                    // height: 45vw;
                    margin-bottom: 5vw;

                    img {
                        width: 100%;
                        // height: 100%;
                    }
                }
            }
            .typeTwo {
                margin: 5vw;

                .videoTwo {
                    width: 80vw;
                    height: 50vw;
                    margin-bottom: 5vw;

                    video {
                        width: 100%;
                        height: 100%;
                    }
                }
            }
            .typeThree {
                margin: 5vw;

                .contextThree {
                    width: 70vw;
                    margin-bottom: 5vw;
                    font-size: 4.5vw;
                    overflow: auto;

                    ::v-deep img {
                        max-width: 60vw !important;
                        height: 50vw;
                    }
                }
            }

            
        }
        .thumbs {
                width: 100%;
                font-size: 33px;
                font-weight: bold;
                color: #ed2323;
                text-align: center;
                display: flex;
                justify-content: center;
                align-items: center;

                img {
                    width: 32px;
                    margin-right: 13px;
                }
            }
            .thumbs_grey {
                color: #999;
            }
    }
}
</style>