<template>
  <!-- 隐私/条款弹窗 -->
  <view
    class="confirm-pop"
    :class="{show: showPop}"
  >
    <view class="confirm-pop-mask" />
    <view class="confirm-pop-main">
      <view class="pop-head">
        {{ showPop === 1 ? '服务条款和隐私策略' : '确认提示' }}
      </view>
      <view class="pop-content">
        <view
          v-if="showPop === 1"
          class="pop-content-wrap"
        >
          请你务必审慎阅读、充分理解“服务条款”和“隐私策略”各条款，包括但不限于：为了更好的向你提供服务，我们需要收集你的设备标识、操作日志等信息用于分析、优化应用性能。
        </view>
        <view
          v-if="showPop === 1"
          class="pop-content-wrap"
        >
          你可阅读<text
            class="link-a"
            @tap="toTermsOfService('serviceTerms')"
          >
            《服务条款》
          </text>和<text
            class="link-a"
            @tap="toTermsOfService('servicePolicy')"
          >
            《隐私策略》
          </text>了解详细信息。如果你同意，请点击下面按钮开始接受我们的服务。
        </view>
      </view>
      <view class="pop-btns">
        <text
          class="pop-btn cancel-btn"
          @tap="popCancel"
        >
          {{ showPop === 1 ? '暂不同意' : '退出应用' }}
        </text>
        <text
          class="pop-btn confirm-btn"
          @tap="popConfirm"
        >
          {{ showPop === 1 ? '同意并接受' : '同意并接受' }}
        </text>
      </view>
    </view>
  </view>
</template>

<script setup>
const showPop = ref(1)
const emit = defineEmits(['confirm', 'hidePop'])

/**
 * 弹窗确认事件
 */
const popConfirm = () => {
  uni.setStorageSync('cloudIsPrivacy', 1)
  showPop.value = 0
  uni.showTabBar()
  emit('confirm', 1)
}

/**
 * 弹窗取消/否认事件
 */
const popCancel = () => {
  uni.setStorageSync('cloudIsPrivacy', -1)
  showPop.value = 0
  uni.showTabBar()

  emit('hidePop')
}

/**
 * 去条款页
 */
const toTermsOfService = (key) => {
  uni.navigateTo({
    url: '/pages/terms-page/terms-page?sts=' + key
  })
}
</script>

<style lang="scss" scoped>
/* 弹窗样式 */
.confirm-pop {
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-index: -1;
}
.confirm-pop.show {
  z-index: 999;
}
.confirm-pop-mask {
  height: 0;
  width: 100%;
  background: rgba(0, 0, 0, .4);
}
.show {
  .confirm-pop-mask {
    height: 100%;
  }
  .confirm-pop-main {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}
.confirm-pop-main {
  width: 80%;
  background-color: #fff;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0);
  transition: all .2s;
  opacity: 0;
  padding: 50rpx 30rpx 40rpx;
  text-align: center;
  border-radius: 20rpx;
}
.pop-head {
  font-weight: bold;
  font-size: 28rpx;
}
.pop-content {
  word-break: break-word;
  margin: 30rpx 0 40rpx;
  .pop-content-wrap {
    .link-a {
      color: #fc1b35;
      text-decoration: underline;
    }
  }
}
.pop-btns {
  display: flex;
  text-align: center;
}
.pop-btn {
  flex: 1;
  padding: 10rpx 70rpx;
  text-align: center;
  color: #fc1b35;
  border-radius: 56px;
  border: 2rpx solid #fc1b35;
  box-sizing: border-box;
}
.confirm-btn {
  background-color: #fc1b35;
  color: #fff;
  margin-left: 30rpx;
}
</style>
