<template>
  <div>
    <div
      class="bc-empower-wrap"
      data-weiling-mobile-ui-wl-bc-empower
      v-show="!argeementVisible"
    >
      <div class="content-wrap">
        <p class="title">点击查看更多，访问完整内容</p>
        <div class="empower-btn-wrap">
          <WlButton type="default" class="empower-btn" @onClick="onClick"
            >查看更多</WlButton
          >
        </div>
        <p class="tip">
          授权即代表您已同意<span class="argeement" @click="onOpenArgeement"
            >《隐私协议》</span
          >
        </p>
      </div>
      <WlPopup v-model="argeementVisible" style="height: 100%" duration="0">
        <Argeement
          @onBack="argeementVisible = false"
          :agreementSubject="agreementSubject"
        />
      </WlPopup>
    </div>
  </div>
</template>

<script lang="ts">
export default {
  name: "BCEmpower",
};
</script>

<script lang="ts" setup>
import { ref } from "vue";
import Argeement from "./components/Argeement/index.vue";
import WlPopup from "@mobileUI/components/WlPopup/src/index.vue";
import WlButton from "@mobileUI/components/WlButton/src/index.vue";

type TProps = {
  agreementSubject?: string; //授权主体
};

withDefaults(defineProps<TProps>(), {
  agreementSubject: "卫瓴·协同CRM",
});

const emit = defineEmits<{
  (e: "onClick");
  (e: "onOpenArgeement"): void;
}>();
const argeementVisible = ref(false);
const onOpenArgeement = () => {
  emit("onOpenArgeement");
  argeementVisible.value = true;
};
const onClick = () => {
  emit("onClick");
};
</script>

<style lang="scss">
.bc-empower-wrap[data-weiling-mobile-ui-wl-bc-empower] {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: 3000;
  justify-content: flex-end;
  background: linear-gradient(
    0deg,
    rgba(255, 255, 255, 0.9) 32.07%,
    rgba(255, 255, 255, 0) 77.93%
  );
  @extend %flex-direction-column;

  .content-wrap {
    width: 100%;
    padding: j(55) 0;
    background-color: white;
    border-radius: j(8) j(8) 0 0;
    box-shadow: j(1) j(4) j(20) j(20) white;
    @extend %flex-middle-center;
    @extend %flex-direction-column;

    .title {
      font-weight: 500;
      font-size: j(18);
      color: #000000;
    }

    .empower-btn-wrap {
      margin-top: 24px;
      margin-bottom: 16px;

      .empower-btn {
        background-color: #07c160;
        color: white;
        padding: j(10) j(38);
        border-radius: j(8);
        width: fit-content;
      }
    }

    .tip {
      font-weight: 400;
      font-size: 12px;
      color: #919699;

      .argeement {
        color: #025db3;
      }
    }
  }
}
</style>
