<template>
  <uni-popup
    ref="popupRef"
    type="center"
    background-color="transparent"
    mask-background-color="rgba(0, 0, 0, 0.58)"
    :safe-area="false"
    :is-mask-click="false"
    @change="handlePopupChange"
  >
    <view
      class="aigc-consent-overlay"
      @touchmove.stop.prevent
    >
      <view class="aigc-consent-dialog">
        <text class="aigc-consent-title">温馨提示</text>

        <view class="aigc-consent-content">
        <text v-if="content">{{ content }}</text>
        <template v-else>
          <text>{{ defaultContentPrefix }}</text>
          <text class="aigc-consent-rule" @tap.stop="handleRuleClick">
            《{{ ruleName }}》
          </text>
          <text>{{ defaultContentSuffix }}</text>
        </template>
        </view>

        <view class="aigc-consent-actions">
        <button
          class="aigc-consent-button aigc-consent-cancel"
          type="default"
          @tap.stop="handleCancel"
        >
          取消
        </button>
        <button
          class="aigc-consent-button aigc-consent-agree"
          type="default"
          @tap.stop="handleAgree"
        >
          我同意
        </button>
        </view>
      </view>
    </view>
  </uni-popup>
</template>

<script setup>
import { computed, nextTick, onMounted, ref, watch } from "vue";

const props = defineProps({
  visible: {
    type: Boolean,
    default: false,
  },
  companyName: {
    type: String,
    default: "智念科技服务有限公司",
  },
  ruleName: {
    type: String,
    default: "智念AI用户规则",
  },
  content: {
    type: String,
    default: "",
  },
});

const emit = defineEmits(["update:visible", "cancel", "agree", "ruleClick"]);
const popupRef = ref(null);

const defaultContentPrefix = computed(
  () =>
    `欢迎使用【${props.companyName}】提供的AI内容升级服务。本服务通过人工智能技术（AIGC）将您上传的照片或视频与景区场景模板进行创意优化，为您生成具有特定风格的旅行内容。请您仔细阅读`
);

const defaultContentSuffix =
  "，您点击“我同意”等进行下一步操作的行为均视为您同意受本规则约束。如您不同意，您可以直接关闭页面。";

const close = () => {
  popupRef.value?.close();
  emit("update:visible", false);
};

const handleCancel = () => {
  close();
  emit("cancel");
};

const handleAgree = () => {
  close();
  emit("agree");
};

const handleRuleClick = () => {
  emit("ruleClick");
};

const syncPopupVisible = async (visible) => {
  await nextTick();
  if (visible) {
    popupRef.value?.open();
  } else {
    popupRef.value?.close();
  }
};

const handlePopupChange = (event) => {
  const show = event?.show ?? event?.detail?.show;
  if (show === false && props.visible) {
    emit("update:visible", false);
  }
};

watch(
  () => props.visible,
  (visible) => {
    syncPopupVisible(visible);
  },
  { immediate: true }
);

onMounted(() => {
  syncPopupVisible(props.visible);
});
</script>

<style scoped lang="scss">
@import "./styles/index.scss";
</style>
