<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"></div>
    </div>
    <div class="anliboxpage">
      <div class="anlibox">
        <div class="anliimg">
          <!-- <img src="../../../assets/anliimg.png" alt /> -->
          <div class="anlitext anlitextk">
            <div>
              <div class="dear">亲爱的{{ result.name }}：</div>
              <div class="deartext">
                根据您的资料，您的减脂需求是
                <span class="dear">
                  {{
                  weightname
                  }}。
                </span>
              </div>
            </div>
            <div v-html="result.need.content" class="contentbox"></div>
          </div>
        </div>

        <div class="comtexttop flexthree" style="margin-top:0.3rem">
          <div class="textleft flexone">
            <div class="textleftheng"></div>
            <div class="textyuan"></div>
          </div>
          <div class="textname">{{intended.example_title}}</div>
          <div class="textleft flexone">
            <div class="textkyuan"></div>
            <div class="textrightheng"></div>
          </div>
        </div>
        <!-- <div class="comtexttop flexthree bianmei">
        <div class="textleft flexone">
          <div class="textleftheng"></div>
          <div class="textyuan"></div>
        </div>
        <div class="textname">变美案例</div>
        <div class="textleft flexone">
          <div class="textkyuan"></div>
          <div class="textrightheng"></div>
        </div>
        </div>-->
        <div class="jianfenimg" style="margin-top:0.3rem">
          <img :src="assistanceimg" alt />
        </div>
      </div>

      <div class="comtexttop flexthree">
        <div class="textleft flexone">
          <div class="textleftheng"></div>
          <div class="textyuan"></div>
        </div>
        <div class="textname">{{intended.example_video_title}}</div>
        <div class="textleft flexone">
          <div class="textkyuan"></div>
          <div class="textrightheng"></div>
        </div>
      </div>

      <div class="videoimg anlivideo" @click="videoplay">
        <!-- <img src="../../../assets/videoimg.png" alt />
        <img src="../../../assets/anniu.png" alt class="videobtn" />-->
        <!--  poster="../../../assets/videoimg.png" -->
        <img src="../../../assets/anniu.png" alt class="videobtn" v-if="showbtn" />

        <img :src="result.fat_image" alt v-if="videoplaytrue" />
        <video
          v-else
          controls
          autoplay
          id="video"
          :src="result.fat"
          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>

      <div class="flextwo shiyebot anlibot">
        <div class="shibotleft" @click="prepage">上一页</div>
        <div class="shibotright" @click="nextpage">下一页</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      subid: "",
      result: "",
      weightname: "",

      showbtn: true,
      videoplaytrue: true,
      assistanceimg: "",
      intended: ''
    };
  },
  created() {
    document.title = "唐元集公众号";
    this.subid = this.$route.query.subid;
    this.intended = JSON.parse(localStorage.getItem("intended"))
    console.log(this.intended)
    this.getresult();
  },
  methods: {
    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;
      }
    },
    back() {
      this.$router.go(-1);
    },
    nextpage() {
      this.$router.push({
        path: "/jianzhonganli",
        query: {
          subid: this.subid
        }
      });
    },
    prepage() {
      this.$router.go(-1);
    },
    getresult() {
      let that = this;
      var url = "/api/user/assistance_result";
      let param = {
        assistance_id: that.subid
      };

      that.$axios
        .post(url, param)
        .then(function (res) {
          that.result = res.data.result;
          that.weightname = res.data.result.need.name;
          that.assistanceimg = res.data.result.assistance.image;
          console.log(that.result);
          console.log(res);
        })
        .catch(function (err) {
          console.log(err);
        });
    }
  }
};
</script>

<style scoped>
@import "../../../style/usercenter.css";
.dear {
  color: #333;
  font-weight: bold;
}
.contentbox {
  text-indent: 0.6rem;
}
.deartext {
  text-indent: 0.6rem;
}
.anliboxpage {
  position: static;
  padding: 0.1rem 0 0.5rem;
  box-sizing: border-box;
}
.anlibox {
  padding: 0.32rem;
  box-sizing: border-box;
  margin-top: 0.8rem;
}
.anliimg {
  /* margin-top: 0.3rem; */
}
</style>