<template>
  <uni-popup ref="popup" type="center" :mask-click="false">
    <view class="bg-white rounded overflow-hidden" style="width: 690rpx;">
      <view class="flex text-center  border-b">
        <view class="relative px-15 py-12 flex-grow text-lg"
          :class="type == 'agree' ? 'text-primary active-title' : 'text-dark'" @click="type = 'agree'">
          用户协议
        </view>
        <view class="relative px-15 py-12 flex-grow text-lg"
          :class="type != 'agree' ? 'text-primary active-title' : 'text-dark'" @click="type = 'privacyPolicy'">
          隐私政策
        </view>
      </view>
      <scroll-view v-if="type === 'agree'" scroll-y="true" class="popup-content-scroll">
        <view class="px-15 py-12 text-base leading-normal" style="white-space: pre-wrap;">
          {{ userAgreement }}
        </view>
      </scroll-view>
      <scroll-view v-else scroll-y="true" class="popup-content-scroll">
        <view class="px-15 py-12 text-base leading-normal text-dark" style="white-space: pre-wrap;">
          {{ privacy }}
        </view>
      </scroll-view>
      <view class="footer-buttons">
        <button-footer hideden-shadow confirmText="我已阅读并同意" @cancel="close" @confirm="confirm()" />
      </view>
    </view>
  </uni-popup>
</template>

<script setup>
import { ref, watch } from 'vue';
import privacy from './privacy-policy.js';
import userAgreement from './user-agreement.js';
import ButtonFooter from '@/components/button-footer.vue';

const emits = defineEmits(['close', 'confirm'])
const props = defineProps({
  visible: {
    type: Boolean,
    default: false
  }
})
const popup = ref()
const type = ref('agree')

function close() {
  emits('close')
}

function confirm() {
  emits('confirm')
}

watch(() => props.visible, n => {
  if (n) {
    popup.value && popup.value.open();
    type.value = 'agree'
  } else {
    popup.value && popup.value.close()
  }
})
</script>

<style lang="scss" scoped>
.active-title::after {
  content: '';
  position: absolute;
  bottom: 4rpx;
  left: calc(50% - 40rpx);
  width: 80rpx;
  height: 8rpx;
  background: #0074ff;
  border-radius: 4rpx;
}

.popup-content-scroll {
  max-height: 50vh;
}
</style>