<template>
  <view class="privacy-container" >
    <view class="mask" v-if="visible"></view>
    <view class="auth-main center" v-if="visible && root">
      <view class="title">隐私协议</view>
      <view class="context">
        <view>亲爱的用户，感谢您信任并使用易知小程序！</view>
        <view>我们依据相关法律制定了<text class="link" @click="toProtocol">《用户协议》</text>和<text class="link"  @click="toProtocol">《隐私政策》</text>，请您在点击同意之前仔细阅读并充分理解相关条款，其中的重点条款已为您标注，方使您了解自己的权利。</view>
        <view>我们将通过《隐私政策》向您说明：</view>
        <view>1.为了您可以更好地享受娱乐以及各类有趣测试的内容，我们会根据您的授权内容，收集和使用对应的必要信息（例如您的头像、昵称等）。</view>
        <view>2.您可以对上述信息进行访问、更正、删除以及注销账户，我们也将提供专门的个人信息保护联系方式。</view>
        <view>3.未经您的授权同意，我们不会将上述信息共享给第三方或用于您未授权的其他用途。</view>
        <view>易知小程序将一如既往坚守使命，给大家带来更多有趣有用的产品！</view>
      </view>
      <view class="footer-btns">
        <button class="cancel" @click="rejectAuth">拒绝</button>
        <button class="confirm" @click="resolveAuth">同意</button>
      </view>
    </view>
    <view class="auth-main bottom" v-else-if="visible">
      <view class="title">隐私协议</view>
      <view class="context">
        <view>为了保证您的权利请您仔细阅读并同意<text class="link" @click="toProtocol">《用户协议》</text>和<text class="link"  @click="toProtocol">《隐私政策》</text>。 </view>
        <view>未经您的授权同意，我们不会将上述信息共享给第三方。</view>
      </view>
      <view class="footer-btns">
        <button class="cancel" @click="rejectAuth">拒绝</button>
        <button class="confirm" @click="resolveAuth">同意</button>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name:'yt-privacy',
  props: {
    protocol: {
      type: String,
      default: `/pages/protocol`
    },
    root:{
      type: Boolean,
      default: false
    },
    required:{
      type: Boolean,
      default: false
    },
  },
  data() {
    return {
      visible:false,
      resolve: null,
      reject:null
    }
  },
  computed: {
    isRequired() {
      return this.required || this.$store.state.index.ad_config.privacy_auth;
    }
  },
  watch: {
    isRequired:{
      handler(newValue) {
        let isAuth = true
        // #ifdef MP-TOUTIAO
        isAuth = uni.getStorageSync('user_auth')
        // #endif
        if(newValue && !isAuth){
          this.show()
        }
      },
      immediate:true
    }
  },
  methods: {
    show(){
      /* 暂时移除弹框 */
      return Promise.reject('无需授权');

      /* if(this.isRequired){
        return new Promise((resolve,reject) => {
          this.visible = true
          this.resolve = resolve
          this.reject = reject
        })
      }else{
        return Promise.reject('无需授权')
      } */
    },
    toProtocol() {
      uni.$yt.route('/pages/protocol')
    },
    rejectAuth(){
      uni.showModal({
        title: '',
        content: '需要您同意《易知隐私政策》，\n我们才能继续为您服务。',
        cancelText:'狠心离去',
        cancelColor:'#A1A1A1',
        confirmText:'继续授权',
        confirmColor:'#4884FE',
        success: (res) => {
          if (!res.confirm) {
            this.visible = false
            this.reject('拒绝授权')
          }
        }
      });
    },
    resolveAuth(){
      uni.setStorage({
        key: 'user_auth',
        data: 1,
        success: () => {
          this.visible = false
          this.resolve('授权成功')
        }
      });
    }
  },
}
</script>

<style lang="scss" scoped>
@keyframes slide-up {
  0%{
    transform: translateY(100%);
  }
  100%{
    transform: translateY(0%);
  }
}
.privacy-container{
  .mask{
    background: rgba(11, 15, 44,.5);
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 3000;
    animation: fade-in linear 200ms;
  }
  .auth-main{
    position: fixed;
    z-index: 3100;
    background: #ffffff;
    &.center{
      left: 75rpx;
      top: 50%;
      transform: translateY(-50%);
      width:600rpx;
      border-radius: 30rpx;
      animation: fade-in linear 200ms;
    }
    &.bottom{
      min-height: auto;
      width: 750rpx;
      bottom: 0;
      left: 0;
      border-radius:12rpx 12rpx 0 0;
      animation: slide-up linear 250ms;
      .title{
        border-bottom: 1px solid #EAEAEA;
        margin: 30rpx 60rpx;
        text-align: left;
      }
      .context{
        font-size: 28rpx;
        padding:0 60rpx;
      }
      .footer-btns{
        padding:30rpx 60rpx 60rpx;
        button{
          flex: 0 0 300rpx;
        }
      }
    }
  }
  .title{
    font-size: 36rpx;
    font-weight: bolder;
    text-align: center;
    padding: 30rpx 0;
  }
  .context{
    width: 100%;
    padding:0 30rpx;
    box-sizing: border-box;
    font-size: 26rpx;
    line-height: 42rpx;
    text-align: justify;
    position: relative;
    color: #666666;
    view{
      margin-bottom: 12rpx;
    }
    text.link{
      color:#4889FE;
      cursor: pointer;
    }
  }
  .footer-btns{
    display: flex;
    justify-content: space-between;
    padding:10rpx 24rpx 40rpx;
    button{
      flex: 0 0 260rpx;
      width: 260rpx;
      height: 86rpx;
      border-radius: 10rpx;
      font-size: 34rpx;
      letter-spacing: 6px;
      text-indent: 6px;
      &.cancel{
        background: #EEEEEE;
        color: #666666;
      }
      &.confirm{
        background-color: #FE2B54;
        color: #ffffff;
      }
    }
  }
}
</style>
