<template>
  <div class="share-page">
    <div class="password-card">
      <el-icon class="lock-icon" color="#409eff"><Lock /></el-icon>
      <div class="tips-text">该项目需要密码才可查看，请输入密码</div>
      <div class="pwd-input-group">
        <el-input v-model="password" type="text" placeholder="请输入密码" class="custom-input" />
        <el-button type="primary" class="confirm-btn" :disabled="!password" @click="handleConfirm">确定</el-button>
      </div>
      <div class="expired-msg">链接已经过期</div>
    </div>

    <!-- 左侧浮动提示 -->
    <div class="float-bubble">
      <div class="bubble-header">
        <span class="badge">1</span>
        <span class="title">链接打开后输入密码可访问。</span>
      </div>
      <div class="bubble-desc">链接过期不可再访问。</div>
      <div class="bubble-footer">微信用户1646818187 2025.09.23</div>
      <div class="ptr"></div>
    </div>
  </div>
</template>

<script setup name="ShareAccess">
import { ref } from 'vue';
import { Lock } from '@element-plus/icons-vue';

const password = ref('');
const handleConfirm = () => {
    if (password.value === 'SRf9Q7') {
        // 跳转到列表页
    }
};
</script>

<style scoped lang="scss">
.share-page {
  width: 100vw;
  height: 100vh;
  background-color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

.password-card {
  width: 500px;
  text-align: center;
  margin-top: -100px;

  .lock-icon {
    font-size: 80px;
    margin-bottom: 25px;
  }

  .tips-text {
    font-size: 16px;
    font-weight: 600;
    color: #333;
    margin-bottom: 30px;
  }

  .pwd-input-group {
    width: 320px;
    margin: 0 auto;
    .custom-input {
      :deep(.el-input__wrapper) {
        background-color: #f5f7fa;
        border: none;
        box-shadow: none !important;
        height: 48px;
        font-size: 14px;
        text-align: center;
      }
      margin-bottom: 20px;
    }
    .confirm-btn {
      width: 100%;
      height: 48px;
      font-size: 16px;
      border-radius: 8px;
      background-color: #a0cfff; // 对应图中淡蓝色
      border-color: #a0cfff;
      &:hover { background-color: #409eff; }
    }
  }

  .expired-msg {
    margin-top: 20px;
    color: #999;
    font-size: 14px;
  }
}

.float-bubble {
  position: absolute;
  left: 100px;
  top: 50%;
  transform: translateY(-50%);
  width: 250px;
  padding: 15px;
  background: #fff;
  border: 2px solid #FFD964;
  border-radius: 8px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.05);

  .bubble-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 15px;
    .badge { background: #FFD964; padding: 2px 6px; border-radius: 4px; font-weight: bold; font-size: 12px; }
    .title { font-weight: bold; font-size: 14px; }
  }
  .bubble-desc { font-size: 13px; color: #333; margin-bottom: 12px; }
  .bubble-footer { font-size: 11px; color: #999; }
  
  .ptr {
    position: absolute;
    right: -20px;
    top: 30px;
    width: 18px;
    height: 2px;
    background: #FFD964;
    &:after {
      content: '';
      position: absolute;
      right: -8px;
      top: -3px;
      width: 8px;
      height: 8px;
      background: #FFD964;
      border-radius: 50%;
    }
  }
}
</style>
