<template>
  <!-- 二维码弹窗模式 -->
  <view class="cs-mask" v-if="mode === 'qrcode'" @click="$emit('close')">
    <view class="cs-popup" @click.stop>
      <text class="cs-popup__title">扫码添加客服微信</text>
      <image class="cs-popup__img" src="/static/logo.png" mode="aspectFit" />
      <view class="cs-popup__close" @click="$emit('close')">关闭</view>
    </view>
  </view>

  <!-- 小程序客服按钮模式 -->
  <button v-else class="cs-btn" open-type="contact">
    <text>联系客服</text>
  </button>
</template>

<script setup lang="ts">
defineProps<{
  mode: 'qrcode' | 'contact'
}>()

defineEmits<{
  close: []
}>()
</script>

<style scoped>
.cs-mask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 999;
}
.cs-popup {
  background: #fff;
  border-radius: 16rpx;
  padding: 40rpx;
  text-align: center;
  width: 500rpx;
}
.cs-popup__title {
  font-size: 30rpx;
  color: #333;
  font-weight: bold;
  display: block;
  margin-bottom: 24rpx;
}
.cs-popup__img {
  width: 360rpx;
  height: 360rpx;
}
.cs-popup__close {
  margin-top: 24rpx;
  font-size: 28rpx;
  color: #999;
}
.cs-btn {
  background: #e4393c;
  color: #fff;
  font-size: 26rpx;
  border: none;
  padding: 16rpx 32rpx;
  border-radius: 44rpx;
  line-height: 1.4;
}
</style>
