<template>
  <view class="page">
    <!-- 顶部蓝色区：分享对象信息 -->
    <view class="header-section">
      <view class="back-btn" @click="goBack">‹</view>
      <view class="header-info">
        <text class="header-title">分享对象</text>
        <text class="header-phone">{{ phone }}</text>
        <text class="header-permissions">{{ permissionLabels }}</text>
      </view>
    </view>

    <!-- 白色区：分享设备卡片 -->
    <view class="content-section">
      <view class="share-devices-card">
        <text class="card-title">分享设备</text>
        <view
          v-for="device in devices"
          :key="device.id"
          class="device-row"
        >
          <image :src="device.img" class="device-img" mode="aspectFit" />
          <view class="device-info">
            <text class="device-name">{{ device.name }}</text>
            <text class="device-serial">{{ device.serial }}</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 底部提示 -->
    <view class="footer">
      <view class="footer-notice">
        <text class="notice-icon">ⓘ</text>
        <text class="notice-text">
          请仔细核对并确认，分享对象在注册账号并接受邀请后，将能在权限内使用您分享的设备（分享成功后，设备仅限被分享账号本人使用）
        </text>
      </view>
      <button class="confirm-btn" @click="confirmShare">确认分享并邀请注册</button>
    </view>

    <!-- 微信通知弹窗 -->
    <view v-if="showNotifyModal" class="modal-mask" @click.self="closeModal">
      <view class="modal-content">
        <view class="modal-close" @click="closeModal">×</view>
        <text class="modal-title">是否微信发送分享邀请？</text>
        <text class="modal-desc">推荐通过微信通知对方，便于对方即时接受分享</text>
        <image src="/static/images/share/share_card.png" class="modal-img" mode="aspectFit" />
        <button class="wx-notify-btn" @click="sendWxNotify">微信通知</button>
        <button class="skip-btn" @click="skipNotify">不通知，完成分享</button>
        <view class="privacy-row">
          <text class="privacy-icon">ⓘ</text>
          <text class="privacy-text">微信隐私协议</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
// 权限value -> 中文label 映射
const PERMISSION_MAP = {
  watch_video: '看视频',
  watch_record: '看录像',
  alarm_msg: '报警消息',
  control_device: '控制设备'
}

export default {
  data() {
    return {
      phone: '',
      permissions: [],
      devices: [],
      showNotifyModal: false
    }
  },
  computed: {
    permissionLabels() {
      return this.permissions.map(p => PERMISSION_MAP[p] || p).join(' / ')
    }
  },
  onLoad(options) {
    this.phone = options.phone || ''
    try {
      this.permissions = JSON.parse(decodeURIComponent(options.permissions || '[]'))
      this.devices = JSON.parse(decodeURIComponent(options.devices || '[]'))
    } catch (e) {}
  },
  methods: {
    goBack() {
      uni.navigateBack()
    },
    confirmShare() {
      this.showNotifyModal = true
    },
    closeModal() {
      this.showNotifyModal = false
    },
    sendWxNotify() {
      this.showNotifyModal = false
      // 实际调用wx.shareAppMessage或openCustomerServiceChat等微信能力
      uni.showToast({ title: '微信通知已发送', icon: 'success' })
      setTimeout(() => uni.navigateBack({ delta: 4 }), 1500)
    },
    skipNotify() {
      this.showNotifyModal = false
      uni.showToast({ title: '分享成功', icon: 'success' })
      setTimeout(() => uni.navigateBack({ delta: 4 }), 1500)
    }
  }
}
</script>

<style lang="scss" scoped>
page {
  background: linear-gradient(180deg, #e8f0ff 0%, #f5f7fa 60%, #ffffff 100%);
}

.page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* 顶部蓝色区 */
.header-section {
  background: #3d7ff5;
  padding: 60rpx 30rpx 120rpx;
  position: relative;

  .back-btn {
    color: #fff;
    font-size: 50rpx;
    position: absolute;
    top: 50rpx;
    left: 24rpx;
    line-height: 1;
  }

  .header-info {
    padding-left: 20rpx;

    .header-title {
      display: block;
      color: rgba(255,255,255,0.8);
      font-size: 26rpx;
      margin-bottom: 8rpx;
    }

    .header-phone {
      display: block;
      color: #fff;
      font-size: 40rpx;
      font-weight: bold;
      margin-bottom: 8rpx;
    }

    .header-permissions {
      display: block;
      color: rgba(255,255,255,0.85);
      font-size: 26rpx;
    }
  }
}

/* 内容区（白色卡片）*/
.content-section {
  margin: -60rpx 20rpx 0;
  position: relative;
  flex: 1;

  .share-devices-card {
    background: #fff;
    border-radius: 16rpx;
    padding: 24rpx;

    .card-title {
      display: block;
      font-size: 30rpx;
      color: #333;
      font-weight: bold;
      margin-bottom: 20rpx;
    }

    .device-row {
      display: flex;
      align-items: center;
      padding: 10rpx 0;

      .device-img {
        width: 80rpx;
        height: 80rpx;
        margin-right: 20rpx;
      }

      .device-info {
        .device-name {
          display: block;
          font-size: 28rpx;
          color: #333;
        }

        .device-serial {
          display: block;
          font-size: 24rpx;
          color: #aaa;
          margin-top: 4rpx;
        }
      }
    }
  }
}

/* 底部 */
.footer {
  padding: 30rpx 20rpx;
  margin-top: auto;

  .footer-notice {
    display: flex;
    align-items: flex-start;
    background: #fff8ee;
    border-radius: 8rpx;
    padding: 18rpx 20rpx;
    margin-bottom: 24rpx;

    .notice-icon {
      color: #f5a623;
      font-size: 26rpx;
      margin-right: 10rpx;
      flex-shrink: 0;
    }

    .notice-text {
      font-size: 24rpx;
      color: #f5a623;
      line-height: 1.6;
    }
  }

  .confirm-btn {
    width: 100%;
    height: 90rpx;
    line-height: 90rpx;
    background: #3d7ff5;
    color: #fff;
    border-radius: 50rpx;
    font-size: 30rpx;
    border: none;
  }
}

/* 弹窗遮罩 */
.modal-mask {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.5);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  z-index: 999;

  .modal-content {
    background: #fff;
    border-radius: 30rpx 30rpx 0 0;
    padding: 40rpx 40rpx 60rpx;
    width: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;

    .modal-close {
      position: absolute;
      top: 28rpx;
      right: 36rpx;
      font-size: 40rpx;
      color: #999;
      line-height: 1;
    }

    .modal-title {
      font-size: 34rpx;
      font-weight: bold;
      color: #222;
      margin-bottom: 16rpx;
    }

    .modal-desc {
      font-size: 26rpx;
      color: #888;
      text-align: center;
      margin-bottom: 30rpx;
    }

    .modal-img {
      width: 260rpx;
      height: 200rpx;
      margin-bottom: 40rpx;
    }

    .wx-notify-btn {
      width: 100%;
      height: 90rpx;
      line-height: 90rpx;
      background: #3d7ff5;
      color: #fff;
      border-radius: 50rpx;
      font-size: 32rpx;
      border: none;
      margin-bottom: 20rpx;
    }

    .skip-btn {
      width: 100%;
      height: 90rpx;
      line-height: 90rpx;
      background: #f0f0f0;
      color: #333;
      border-radius: 50rpx;
      font-size: 32rpx;
      border: none;
      margin-bottom: 20rpx;
    }

    .privacy-row {
      display: flex;
      align-items: center;

      .privacy-icon {
        color: #aaa;
        font-size: 22rpx;
        margin-right: 6rpx;
      }

      .privacy-text {
        font-size: 22rpx;
        color: #aaa;
      }
    }
  }
}
</style>
