<template>
  <movable-area class="movable-area">
    <movable-view
      class="movable-view"
      direction="all"
      :x="snapPos.x"
      :y="snapPos.y"
      :animation="true"
      @change="onDrag"
      @touchend="onTouchEnd"
    >
      <view class="cs-button">
        <uv-icon name="kefu-ermai" color="#FFFFFF" size="24"></uv-icon>
      </view>
      <!-- 工作时间：原生 button 直接调起小程序客服 -->
      <button
        v-if="inService"
        class="contact-btn"
        open-type="contact"
        send-message-title="YesWash洗车客服"
        session-from=""
        @click.stop
      />
      <!-- 非工作时间：先弹确认提示 -->
      <view v-else class="contact-btn" @click.stop="confirmVisible = true" />
    </movable-view>

    <!-- 非工作时间确认弹窗 -->
    <view v-if="confirmVisible" class="confirm-overlay" @click.stop="confirmVisible = false">
      <view class="confirm-dialog" @click.stop>
        <view class="confirm-title">客服提示</view>
        <view class="confirm-msg">客服在线时间 9:30~21:30，当前留言可能会延迟回复</view>
        <view class="confirm-actions">
          <view class="confirm-cancel" @click="confirmVisible = false">取消</view>
          <button
            class="confirm-ok"
            open-type="contact"
            send-message-title="YesWash洗车客服"
            session-from=""
            @click="confirmVisible = false"
          >
            继续留言
          </button>
        </view>
      </view>
    </view>
  </movable-area>
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted } from 'vue'

const POS_KEY = 'kefuPos'
const confirmVisible = ref(false)

/** 客服在线时间 9:30 ~ 21:30 */
const isInServiceHours = (): boolean => {
  const now = new Date()
  const current = now.getHours() * 60 + now.getMinutes()
  return current >= 9 * 60 + 30 && current <= 21 * 60 + 30
}

/* 响应式在线状态，定时刷新以跨越 9:30/21:30 边界 */
const inService = ref(isInServiceHours())
let serviceTimer: ReturnType<typeof setInterval> | null = null
onMounted(() => {
  serviceTimer = setInterval(() => {
    inService.value = isInServiceHours()
  }, 30000)
})
onUnmounted(() => {
  if (serviceTimer) clearInterval(serviceTimer)
})

/* 实时拖拽位置（非响应式，避免与原生拖拽冲突） */
let dragX = 600
let dragY = 800

/* 初始位置从缓存读取 */
try {
  const last = uni.getStorageSync(POS_KEY)
  if (last) {
    dragX = last.x
    dragY = last.y
  }
} catch {}

const snapPos = ref({ x: dragX, y: dragY })
let windowInfo: any = null

function getWindowInfo() {
  if (!windowInfo) {
    windowInfo = uni.getWindowInfo()
  }
  return windowInfo
}

function onDrag(e: any) {
  dragX = e.detail.x
  dragY = e.detail.y
}

function onTouchEnd() {
  const { windowWidth, windowHeight } = getWindowInfo()
  const btnPx = windowWidth * 104 / 750
  const maxX = windowWidth - btnPx

  const snapX = dragX < maxX / 2 ? 0 : maxX
  const snapY = Math.max(0, Math.min(dragY, windowHeight - btnPx))

  snapPos.value = { x: snapX, y: snapY }
  uni.setStorageSync(POS_KEY, { x: snapX, y: snapY })
}
</script>

<style scoped lang="scss">
.movable-area {
  position: fixed;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 999999;
}

.movable-view {
  width: 104rpx;
  height: 104rpx;
  pointer-events: auto;
  position: relative;
}

.cs-button {
  width: 96rpx;
  height: 96rpx;
  border-radius: 50%;
  background: #C6171E;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4rpx 16rpx rgba(198, 23, 30, 0.28);
  position: absolute;
  left: 0;
  top: 0;
  transition: transform 0.15s ease;

  &:active {
    transform: scale(0.92);
  }
}

.contact-btn {
  position: absolute;
  left: 0;
  top: 0;
  width: 104rpx;
  height: 104rpx;
  opacity: 0;
  z-index: 2;
  padding: 0;
  margin: 0;
  background: none;
  border: none;
  border-radius: 0;
  line-height: normal;

  &::after {
    border: none;
  }
}

.confirm-overlay {
  position: fixed;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1000000;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: auto;
}

.confirm-dialog {
  width: 560rpx;
  background: #FFFFFF;
  border-radius: 20rpx;
  overflow: hidden;
}

.confirm-title {
  padding: 48rpx 32rpx 0;
  font-size: 34rpx;
  font-weight: 600;
  color: #1A1A1A;
  text-align: center;
}

.confirm-msg {
  padding: 28rpx 32rpx 36rpx;
  font-size: 28rpx;
  color: #666666;
  text-align: center;
  line-height: 1.6;
}

.confirm-actions {
  display: flex;
  border-top: 1rpx solid #EEEEEE;
}

.confirm-cancel {
  flex: 1;
  height: 96rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32rpx;
  color: #666666;
  border-right: 1rpx solid #EEEEEE;

  &:active {
    background: #F5F5F5;
  }
}

.confirm-ok {
  flex: 1;
  height: 96rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32rpx;
  color: #C6171E;
  font-weight: 500;
  background: none;
  border: none;
  border-radius: 0;
  padding: 0;
  margin: 0;
  line-height: 96rpx;

  &::after {
    border: none;
  }

  &:active {
    background: #F5F5F5;
  }
}
</style>
