<template>
  <div class="as-index-wrapper">
    <Logo imgType=2 backType=2></Logo>
    <div class="bgi-wrapper">
      <img src="https://file.yunqueyi.com/h5/images/asimg/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">
        <div class="img-w">
          <img v-show="!isSelect" src="~@/images/annual/rect-1.png" alt />
          <img v-show="isSelect" src="~@/images/annual/rect-2.png" alt />
        </div>
        <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,
      isAndroid: window.__isAndroid,
      from: 'app',
    };
  },
  created() {
    _this = this;
    const { from } = this.$route.query;
    this.from = from || 'app';
    // 截屏时通知前端
    window.__screenCaptureEvent = function() {
      console.log('in screenCaptureEvent');
        _this.$sendBuriedData({
          action: "ACTION_SCREEN_SHOT",
          component_tag: '559#559003'
        });
    }

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

    // 先调用存储权限（只有安卓手机需要）
    this.isAndroid && rocNative.openExternalStoragePermission();

    // 全局埋点--对外埋点
    this.$sendBuriedData({
      action: "ACTION_WEB_ENTER",
      component_tag: `559#0#${this.from}`
    });
  },
  methods: {

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

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

    // 跳转到详情页面
    gotoDetail() {
      this.$sendBuriedData({
        component_tag: `559#559002`
      });

      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-w {
        width: 15px;
        height: 15px;
        margin-right: 6px;
        img {
          display: block;
          width: 15px;
          height: 15px;
          padding-top: 4px;
        }
      }
    }
    .b-btn {
      width: 100%;
      text-align: center;
      img {
        width: 310px;
        height: 52px;
      }
    }
  }
}
</style>