<template>
  <div class="containerbox">
    <div class="flextwo sharetopk zuixin" @click="back">
      <div class="leftrow leftrowkimg">
        <img src="../../../assets/leftrowk.png" alt />
      </div>
      <div class="sharemiddle newacty">专利获奖及视频</div>
      <div class="sharebtn">
        <!-- <img src="../../../assets/sharebtn.png" alt /> -->
      </div>
    </div>
    <div class="videoimgbox">
      <div class="productvideobox">
        <div class="comtexttop flexthree">
          <div class="textleft flexone">
            <div class="textleftheng"></div>
            <div class="textyuan"></div>
          </div>
          <div class="textname">{{intended.product_rec_title}}</div>
          <div class="textleft flexone">
            <div class="textkyuan"></div>
            <div class="textrightheng"></div>
          </div>
        </div>
        <!-- <div class="productname">唐元集产品宣传片</div> -->
        <div class="productvideoimg proimgk">
          <!-- <img src="../../../assets/producttui.png" alt /> -->
          <div class="chanpintuiboxpage">
            <!--  v-html="product_rec" -->
            <div class="prointroname" v-html="intended.product_rec"></div>
            <!-- <div class="nameimg">
            <img src="../../../assets/juxing.png" alt class="yulan" />
            <div class="nametext">产品预览</div>
            <div class="zizhilist">
              <div class="yulanimg">
                <img src="../../../assets/yulanimg.png" alt />
              </div>
            </div>
            </div>-->
          </div>
        </div>
      </div>

      <div class="comtexttop flexthree" style="margin-bottom:0.25rem">
        <div class="textleft flexone">
          <div class="textleftheng"></div>
          <div class="textyuan"></div>
        </div>
        <div class="textname">{{intended.product_video_title}}</div>
        <div class="textleft flexone">
          <div class="textkyuan"></div>
          <div class="textrightheng"></div>
        </div>
      </div>

      <div class="videoimg" style="margin-top:0" @click="videoplay">
        <img src="../../../assets/anniu.png" alt class="videobtn" v-show="showbtn" />
        <img :src="videoinfo.product_image" alt v-show="videoplaytrue == true" />
        <video
          v-show="videoplaytrue == false"
          controls
          autoplay
          id="video"
          :src="videoinfo.product"
          loop="loop"
          controlslist="nodownload"
          height="100%"
          width="100%"
          webkit-playsinline="true"
          x5-video-player-type="h5"
          x5-video-player-fullscreen="true"
          x5-video-orientation="portraint"
        ></video>
        <div class="flextwo shiyebot botpadding">
          <div class="shibotleft" @click="prepage">上一页</div>
          <div class="shibotright" @click="next">下一页</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Vue from "vue";

import { Toast } from "vant";
// import iosScrollSupply from "ios-scroll-supply";
// iosScrollSupply("videoimgbox");

export default {
  data() {
    return {
      subid: "",
      product_rec: "",
      product: "",
      videoinfo: "",

      showbtn: true,
      videoplaytrue: true,
      intended: ''
    };
  },
  created() {
    document.title = "唐元集公众号";
    this.subid = this.$route.query.subid;
    this.getxuanchuan();
    this.intended = JSON.parse(localStorage.getItem("intended"))
    console.log(this.intended)
  },
  methods: {
    // videoplay() {
    //   var video = document.getElementById("video");
    //   this.videoplaytrue = false;
    //   this.showbtn = false;

    //   // if (video.paused) {
    //   //   this.controls = true;
    //   //   video.play();

    //   //   // this.showbtn = false;

    //   //   this.showbtn = false;
    //   // } else {
    //   //   this.controls = false;
    //   //   video.pause();
    //   //   // this.showbtn = true;
    //   // }
    //   console.log(video);
    // },
    back() {
      this.$router.go(-1);
    },
    videoplay() {
      console.log(344389);
      var video = document.getElementById("video");
      this.videoplaytrue = false;
      this.showbtn = false;
      if (video.paused) {
        video.play();
        this.showbtn = false;
      } else {
        video.pause();
        this.showbtn = true;
      }
    },
    prepage() {
      this.$router.go(-1);
    },
    getxuanchuan() {
      let that = this;
      var url = "/api/common/product";
      let param = {};

      that.$axios
        .post(url, param)
        .then(function (res) {
          console.log(res);
          that.videoinfo = res.data;
          that.product = res.data.product;
          that.product_rec = res.data.product_rec;
        })
        .catch(function (err) {
          console.log(err);
        });
    },
    next() {
      this.$router.push({
        path: "/anlifenxi",
        query: {
          subid: this.subid
        }
      });
    }
  }
};
</script>

<style scoped>
@import "../../../style/usercenter.css";

.videoimgbox {
}
.proimgk {
  width: 100%;
}
.productvideobox {
  padding: 0.32rem 0;
  box-sizing: border-box;
}
.prointroname {
  width: 100%;
  /* padding: 0 0.32rem; */
  box-sizing: border-box;
  /* height: 5.7rem; */
  color: #2e2e30;
  font-size: 0.28rem;
}
.botpadding {
  padding: 0 0.32rem;
  box-sizing: border-box;
}
.videoimgbox {
  margin-top: 0.8rem;
}
</style>