<template>
  <wd-popup v-model="showProtocol" position="center">
    <view class="protocol-popup">
      <view class="protocol-title">温馨提示</view>
      <view class="protocol-content">
        <text>
          用户您好，本软件对于一个用户名及密码仅允许一部电子设备登陆，多部设备使用同一用户名操作软件的行为属于违规操作，发现违规一次将提出警告，再次违规您的用户名将被封号，无法正常登陆，如因此对您使用带来不便，敬请谅解。
        </text>
        <text>
          课程购买之后一年内不打开，此一年内不会计算有效学习时间，一年后会自动开始计算有效学习时间。
        </text>
        <text>
          本课程一经购买，暂不支持退款，敬请谅解。
        </text>
        <view style="color: red; font-weight: bold"> 注: </view>
        <view>
          1.手机、pad、电脑均为可登陆电子设备，均有唯一标识码，一个用户名仅允许在一个手机或一个ipad或一个电脑登陆，请根据您的使用习惯自行选择。<br />
          2.如若申请变更登陆设备请联系客服，<br />
          客服电话:021-08371305<br />
          客服微信号:yilujiankangkefu<br />
          3.如因违反上述使用规定...概不退款，本公司保留追究用户相关法律责任的权利。<br />
          4.点击“同意”按钮即表示您同意遵守以上条款。
        </view>
      </view>
      <view class="protocol-actions">
        <wd-button type="info" plain @click="showProtocol = false">不同意</wd-button>
        <wd-button type="primary" @click="confirmPurchase">同意</wd-button>
      </view>
    </view>
  </wd-popup>
</template>

<script lang="ts" setup>
import { computed } from 'vue'

const props = defineProps<{
  visible: boolean
}>()

console.log(props.visible)

const showProtocol = computed({
  get: () => props.visible,
  set: (val) => emit('update:visible', val)
})

const emit = defineEmits<{
  'update:visible': [boolean],
  confirmPurchase: []
}>()

const confirmPurchase = () => {
  emit('confirmPurchase')
}
</script>

<style lang="scss" scoped>
.protocol-popup {
  width: 600rpx;
  padding: 40rpx;
  background-color: #fff;
  border-radius: 12rpx;
  
  .protocol-title {
    font-size: 32rpx;
    font-weight: 500;
    color: #333;
    text-align: center;
    margin-bottom: 30rpx;
  }
  
  .protocol-content {
    max-height: 60vh;
    overflow-y: auto;
    font-size: 26rpx;
    line-height: 1.8;
    color: #666;
    margin-bottom: 30rpx;
    
    text {
      display: block;
      margin-bottom: 20rpx;
    }
  }
  
  .protocol-actions {
    display: flex;
    gap: 20rpx;
  }
}
</style>