<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>
  </div>
</template>

<script>
import { ImagePreview } from "vant";
export default {
  data() {
    return { arr: 0, modelList: [], background: "", imgUrl: "" };
  },
  methods: {
    //获取数据
    getTable() {
      this.yxAxios
        .post(`${this.dataUrl}/sys/yx/getConsultDetail`, {
          id: this.$route.query.dataId,
        })
        .then((res) => {
          if (res.data.success) {
            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.showFrame();
          } else {
            this.$message.warning(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.dataUrl}/sys/yx/updateRead`, {
          id: this.$route.query.dataId,
        })
        .then((res) => {
          if (res.data.success) {
            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
      });
    },
  },
  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: 70vw;
          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;
          }
        }
      }
    }
  }
}
</style>