<template>
  <div v-if="!auth || !hasAuth" class="auth-container">
    <div class="summit-desc" v-if="!noAuth">
      <img src="@/assets/images/lock.png" alt="" />
      <span>购买后查看完整目录内容</span>
    </div>
    <slot v-else></slot>
    <div class="submit-buttom">
      <van-button
        round
        block
        type="primary"
        native-type="submit"
        :disabled="disabled"
        @click="submit"
        >立即购买</van-button
      >
    </div>
  </div>
  <slot v-else></slot>
</template>

<script setup>
import { defineProps, defineEmits } from "vue";
import { useHasAuth } from "@/hooks/useHasAuth";

const props = defineProps({
  authorityId: {
    type: [Array, String],
    default: () => undefined,
  },
  auth: {
    type: Boolean,
    default: false,
  },
  noAuth: {
    // 不需要鉴权
    type: Boolean,
    default: false,
  },
});

const { hasAuth } = useHasAuth(() => props.authorityId);

const emits = defineEmits(["submit"]);
const submit = () => {
  emits("submit");
};
</script>

<style lang="scss" scoped>
.summit-desc {
  margin: 228px auto 316px;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  img {
    width: 96px;
    height: 96px;
    background: rgba(255, 255, 255, 1);
  }

  span {
    margin-top: 24px;
    font-weight: 400;
    font-size: 28px;
    line-height: 28px;
    height: 28px;
  }
}

.submit-buttom {
  position: fixed;
  bottom: 32px;
  left: 32px;
  right: 32px;
  width: auto;
  display: flex;
  align-items: center;
  justify-content: center;

  button {
    border-color: #f02e18;
    width: 686px;
    height: 88px;
    border-radius: 44px;
    background: linear-gradient(rgba(240, 46, 24, 1), rgba(240, 46, 24, 1)),
      linear-gradient(
        150.2deg,
        rgba(255, 110, 39, 1) 14.14%,
        rgba(240, 46, 24, 1) 86.71%
      );
  }
}
</style>
