<template>
  <div class="as-index-wrapper">
    <Logo imgType="2"></Logo>
    <div class="bgi-wrapper">
      <img src="~@/images/annual/index-back.png" alt />
    </div>
    <div class="text-wrapper">
      <p class="fbig cw">2020年</p>
      <p class="flarge cw mv-10">云鹊医生产了：</p>
      <section class="detail-wrapper mt-20">
        <p>
          <span>496</span><span>节视频课程；</span>
        </p>
        <p>
          <span>668</span><span>篇5分钟音频；</span>
        </p>
        <p>
          <span>232</span><span>场业内直播；</span>
        </p>
        <p>
          <span>400</span><span>篇资讯；</span>
        </p>
        <p>
          <span>171</span><span>篇患教漫画；</span>
        </p>
        <p>
          <span>86,086,618</span><span>个云鹊豆；</span>
        </p>
        <p>
          <span></span>
          <span>……</span>
        </p>
      </section>
    </div>
    <button @click="savePage2Picture">保存图片</button>
    <section class="bottom">
      <div class="prot-wrapper" @click="selectProt">
        <img v-show="!isSelect" src="~@/images/annual/rect-1.png" alt />
        <img v-show="isSelect" src="~@/images/annual/rect-2.png" alt />
        <span>我同意云鹊医使用我的历史数据生成《年度个人清单》数据报告</span>
      </div>
      <div v-show="isHide" class="b-btn" @click="gotoDetail">
        <img src="~@/images/annual/index-btn.png" alt />
      </div>
    </section>
  </div>
</template>
<script>
import { Progress, Toast } from "vant";
import Logo from "@/components/annual-summary/logo";
let _this = null;

export default {
  components: {
    Logo
  },
  data() {
    return {
      isSelect: false,
      isHide: true,
    };
  },
  created() {
    _this = this;
    // 截屏时通知前端
    window.__screenCaptureEvent = function() {
      console.log('in screenCaptureEvent');
        _this.$sendBuriedData({
          component_tag: '557#557002'
        });
    }

    // 保存图片的回调
    window.__savePage2Picture = function(param) {
      this.isHide = true;
      console.log("__savePage2Picture", param);
    }
  },
  methods: {

    // 选择协议
    selectProt() {
      this.isSelect = !this.isSelect;
    },

    // 保存图片
    savePage2Picture() {
      this.isHide = false;
      this.$forceUpdate()
      this.$nextTick( () => {
        rocNative.savePage2Picture({
          __funcName: "__savePage2Picture"       
        });
      })
    },

    // 跳转到详情页面
    gotoDetail() {
      if(this.isSelect) {
        this.$router.push('/as-detail');
      } else {
        Toast("请勾选我同意后查看");
      }
    },
  }
};
</script>
<style lang="less" scoped>
@import "../../style/as-common.less";
.as-index-wrapper {
  position: relative;
  top: 0;
  left: 0;
  z-index: 1;
  min-height: 100vh;
  background: #88cb9d;
  font-size: 16px;
  .bgi-wrapper {
    position: absolute;
    top: 214px;
    right: 0;
    img {
      width: 238px;
      height: 288px;
    }
  }
  .text-wrapper {
    padding: 25px 30px;
    p {
      line-height: 1;
    }
    .detail-wrapper {
      p {
        line-height: 1.5;
        & > span:first-child {
          margin-right: 3px;
          font-weight: 700;
          color: #fffc00;
        }
        & > span:last-child {
          font-weight: 700;
          color: #16602c;
        }
      }
    }
  }
  .bottom {
    width: 100%;
    position: fixed;
    bottom: 30px;
    left: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    .prot-wrapper {
      width: 100%;
      display: flex;
      padding: 10px 30px;
      align-items: flex-start;
      justify-content: center;
      color: #ffffff;
      img {
        width: 15px;
        height: 15px;
        padding-top: 4px;
        margin-right: 6px;
      }
    }
    .b-btn {
      width: 100%;
      text-align: center;
      img {
        width: 310px;
        height: 52px;
      }
    }
  }
}
</style>