<template>
  <!-- 外层容器，使用 vw/vh 自适应屏幕 -->
  <view class="wrap">
    <!-- 顶部蓝色头部 -->
    <view class="header-bar">
      <view class="header-left">
        <text class="win-no">窗口号：{{ windowName }}</text>
        <view class="user-dept">
          <text>{{ handlerUserName }}</text>
          <text>{{ handlerDeptName }}</text>
        </view>
      </view>
      <view class="exit-btn" @click="handleExit">
        <image class="icon-exit" src="../../static/images/home/logout_icon.png" />
        <text>退出</text>
      </view>
    </view>

    <!-- 中间内容区域 -->
    <view class="content-box">
      <view class="item-col">
        <text class="col-title">当前叫号</text>
        <text class="call-no">{{ currentCallNo }}</text>
      </view>
      <view class="item-col">
        <text class="col-title">当前等候</text>
        <text class="wait-num">{{ waitingCount }}人</text>
      </view>
    </view>

    <!-- 挂起提示条 -->
    <view class="suspend-bar" v-if="serviceStatus === 2">
      <text>窗口已挂起，无法进行叫号操作</text>
    </view>

    <!-- 底部功能按钮区 -->
    <view class="btn-group">
      <view class="btn-item green" @click="handleCall" :class="{ disabled: callDisabled }">
        <image class="btn-icon" src="../../static/images/takeTicket/hj_icon.png" mode="aspectFit" />
        <text>呼叫</text>
      </view>
      <view class="btn-item blue" @click="handleReCall" :class="{ disabled: recallDisabled }">
        <image class="btn-icon" src="../../static/images/takeTicket/ch_icon.png" mode="aspectFit" />
        <text>重呼</text>
      </view>
      <view class="btn-item sky" @click="handleTransfer" :class="{ disabled: transferDisabled }">
        <image class="btn-icon" src="../../static/images/takeTicket/zy_icon.png" mode="aspectFit" />
        <text>转移</text>
      </view>
      <view class="btn-item orange" @click="handlePass" :class="{ disabled: passDisabled }">
        <image class="btn-icon" src="../../static/images/takeTicket/gh_icon.png" mode="aspectFit" />
        <text>过号</text>
      </view>
      <view class="btn-item red" @click="handleSuspend" v-if="serviceStatus === 1">
        <image class="btn-icon" src="../../static/images/takeTicket/gq_icon.png" mode="aspectFit" />
        <text>挂起</text>
      </view>
      <view class="btn-item green" @click="handleResume" v-if="serviceStatus === 2">
        <image class="btn-icon" src="../../static/images/takeTicket/hj_icon.png" mode="aspectFit" />
        <text>恢复</text>
      </view>
    </view>

    <!-- 转移弹窗：选择目标窗口 -->
    <view class="transfer-mask" v-if="showTransfer" @click="showTransfer = false">
      <view class="transfer-dialog" @click.stop>
        <text class="dialog-title">请选择目标窗口</text>
        <scroll-view class="dialog-list" scroll-y>
          <view class="transfer-item" v-for="win in targetWindowList" :key="win.id" @click="confirmTransfer(win)">
            <text class="transfer-name">{{ win.windowName }}</text>
          </view>
          <view class="dialog-empty" v-if="targetWindowList.length === 0">
            <text>暂无可转移的窗口</text>
          </view>
        </scroll-view>
        <view class="dialog-cancel" @click="showTransfer = false">
          <text>取消</text>
        </view>
      </view>
    </view>

    <!-- 挂起原因弹窗 -->
    <view class="transfer-mask" v-if="showSuspend" @click="showSuspend = false">
      <view class="suspend-dialog" @click.stop>
        <text class="dialog-title">请输入挂起原因</text>
        <input class="suspend-input" v-model="suspendReason" placeholder="请输入挂起原因（选填）" />
        <view class="suspend-btns">
          <view class="dialog-cancel" @click="showSuspend = false">
            <text>取消</text>
          </view>
          <view class="dialog-confirm" @click="confirmSuspend">
            <text>确认挂起</text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { getWindowWorkbench, callNext, recall, transferRecord, passRecord, suspendWindow, resumeWindow, getWindowList } from '@/api/ticket.js'

export default {
  name: 'CallWindow',
  data() {
    return {
      // 窗口信息（从本地存储读取）
      windowId: '',
      windowName: '',
      serviceStatus: 1, // 1=接号中, 2=挂起中
      handlerUserName: '',
      handlerDeptName: '',
      handlerUserId: '',

      // 当前叫号信息
      currentRecord: null, // 当前叫号记录对象
      waitingCount: 0, // 等候人数
      currentDeptName: '', // 当前办理的部门名称

      // 转移弹窗
      showTransfer: false,
      targetWindowList: [],

      // 挂起弹窗
      showSuspend: false,
      suspendReason: '',

      // 操作锁（防止重复点击）
      actionLock: false
    }
  },

  computed: {
    // 当前叫号显示
    currentCallNo() {
      return this.currentRecord ? this.currentRecord.queueNo : '----'
    },

    // 状态文字
    statusText() {
      if (!this.currentRecord) return ''
      const map = { 1: '等待办理', 2: '已叫号', 3: '已过号', 4: '已完成', 5: '已取消', 7: '办理中' }
      return map[this.currentRecord.status] || ''
    },

    // 状态标签样式
    statusTagClass() {
      if (!this.currentRecord) return ''
      if (this.currentRecord.status === 2) return 'tag-called'
      if (this.currentRecord.status === 7) return 'tag-handling'
      return ''
    },

    // 按钮禁用逻辑：挂起中全部禁用操作按钮
    suspended() {
      return this.serviceStatus === 2
    },

    // 呼叫按钮：挂起中 或 已有当前记录时禁用
    callDisabled() {
      return this.suspended || !!this.currentRecord || this.actionLock
    },

    // 重呼按钮：挂起中 或 无当前记录 或 状态不是已叫号/办理中 时禁用
    recallDisabled() {
      if (this.suspended || !this.currentRecord || this.actionLock) return true
      return ![2, 7].includes(this.currentRecord.status)
    },

    // 转移按钮：挂起中 或 无当前记录时禁用
    transferDisabled() {
      return this.suspended || !this.currentRecord || this.actionLock
    },

    // 过号按钮：挂起中 或 无当前记录 或 状态不是已叫号/办理中 时禁用
    passDisabled() {
      if (this.suspended || !this.currentRecord || this.actionLock) return true
      return ![2, 7].includes(this.currentRecord.status)
    }
  },

  onLoad() {
    // 读取窗口信息
    const winInfo = uni.getStorageSync('windowInfo')
    if (!winInfo || !winInfo.windowId) {
      uni.showToast({ title: '请先选择窗口', icon: 'none' })
      setTimeout(() => {
        uni.redirectTo({ url: '/pages/callTicket/chooseWindow' })
      }, 1000)
      return
    }

    this.windowId = winInfo.windowId
    this.windowName = winInfo.windowName
    this.serviceStatus = winInfo.serviceStatus || 1
    this.handlerUserName = winInfo.handlerUserName || ''
    this.handlerDeptName = winInfo.handlerDeptName || ''
    this.handlerUserId = winInfo.handlerUserId || ''

    // 首次加载工作台
    this.fetchWorkbench()
  },

  methods: {
    // ========== 数据获取 ==========

    // 获取窗口工作台数据
    async fetchWorkbench() {
      try {
        const res = await getWindowWorkbench({ windowId: this.windowId })
        if (res.success && res.data) {
          const data = res.data
          // 更新窗口状态
          this.serviceStatus = data.serviceStatus
          this.waitingCount = data.waitingCount || 0
          this.currentRecord = data.currentRecord || null

          // 同步更新本地存储中的窗口状态
          const winInfo = uni.getStorageSync('windowInfo') || {}
          winInfo.serviceStatus = data.serviceStatus
          uni.setStorageSync('windowInfo', winInfo)

          // 提取部门名称
          if (data.currentRecord && data.currentRecord.itemDeptName) {
            this.currentDeptName = data.currentRecord.itemDeptName
          }
        }
      } catch (e) {
        console.error('获取工作台数据失败', e)
      }
    },

    // 操作后刷新
    async refreshAfterAction(delay = 500) {
      await new Promise(resolve => setTimeout(resolve, delay))
      await this.fetchWorkbench()
    },

    // ========== 按钮操作 ==========

    // 退出
    handleExit() {
      uni.showModal({
        title: '确认退出',
        content: '确定要退出当前窗口吗？退出后需重新选择窗口。',
        success: res => {
          if (res.confirm) {
            uni.removeStorageSync('windowInfo')
            uni.redirectTo({ url: '/pages/callTicket/chooseWindow' })
          }
        }
      })
    },

    // 呼叫下一位
    async handleCall() {
      if (this.callDisabled) return
      this.actionLock = true
      uni.showLoading({ title: '呼叫中...', mask: true })
      try {
        const res = await callNext({ windowId: this.windowId })
        if (res.success && res.data) {
          this.currentRecord = res.data
          this.waitingCount = Math.max(0, this.waitingCount - 1)
          if (res.data.itemDeptName) {
            this.currentDeptName = res.data.itemDeptName
          }
          uni.showToast({ title: `已呼叫 ${res.data.queueNo}`, icon: 'success', duration: 1500 })
          await this.refreshAfterAction(1000)
        }
      } catch (e) {
        console.error('呼叫失败', e)
      } finally {
        uni.hideLoading()
        this.actionLock = false
      }
    },

    // 重呼
    async handleReCall() {
      if (this.recallDisabled) return
      if (!this.currentRecord) return

      this.actionLock = true
      uni.showLoading({ title: '重呼中...', mask: true })
      try {
        const res = await recall({
          recordId: this.currentRecord.id,
          windowId: this.windowId
        })
        if (res.success && res.data) {
          this.currentRecord = res.data
          uni.showToast({ title: `已重呼 ${res.data.queueNo}`, icon: 'success', duration: 1500 })
          await this.refreshAfterAction()
        }
      } catch (e) {
        console.error('重呼失败', e)
      } finally {
        uni.hideLoading()
        this.actionLock = false
      }
    },

    // 转移 - 打开目标窗口选择弹窗
    async handleTransfer() {
      if (this.transferDisabled) return
      // 获取可选目标窗口（排除自身，只选启用未挂起的）
      uni.showLoading({ title: '加载窗口...', mask: true })
      try {
        const res = await getWindowList({ status: 1, serviceStatus: 1 })
        if (res.success && res.data) {
          const allWindows = res.data.records || []
          this.targetWindowList = allWindows.filter(w => w.id !== this.windowId)
          if (this.targetWindowList.length === 0) {
            uni.showToast({ title: '暂无可转移的窗口', icon: 'none' })
            return
          }
          this.showTransfer = true
        }
      } catch (e) {
        console.error('获取窗口列表失败', e)
        uni.showToast({ title: '获取窗口列表失败', icon: 'none' })
      } finally {
        uni.hideLoading()
      }
    },

    // 确认转移
    async confirmTransfer(win) {
      if (!this.currentRecord) return
      this.showTransfer = false
      this.actionLock = true
      uni.showLoading({ title: '转移中...', mask: true })
      try {
        const res = await transferRecord({
          recordId: this.currentRecord.id,
          windowId: this.windowId,
          targetWindowId: win.id
        })
        if (res.success) {
          uni.showToast({ title: `已转移至 ${win.windowName}`, icon: 'success', duration: 1500 })
          await this.refreshAfterAction(1000)
        }
      } catch (e) {
        console.error('转移失败', e)
      } finally {
        uni.hideLoading()
        this.actionLock = false
      }
    },

    // 过号
    async handlePass() {
      if (this.passDisabled) return
      if (!this.currentRecord) return

      uni.showModal({
        title: '确认过号',
        content: `确定将 ${this.currentRecord.queueNo} 标记为过号吗？`,
        success: async modalRes => {
          if (!modalRes.confirm) return
          this.actionLock = true
          uni.showLoading({ title: '处理中...', mask: true })
          try {
            const res = await passRecord({
              recordId: this.currentRecord.id,
              windowId: this.windowId
            })
            if (res.success) {
              uni.showToast({ title: '已标记过号', icon: 'success', duration: 1500 })
              await this.refreshAfterAction(1000)
            }
          } catch (e) {
            console.error('过号失败', e)
          } finally {
            uni.hideLoading()
            this.actionLock = false
          }
        }
      })
    },

    // 挂起 - 打开原因输入弹窗
    handleSuspend() {
      this.suspendReason = ''
      this.showSuspend = true
    },

    // 确认挂起
    async confirmSuspend() {
      this.showSuspend = false
      this.actionLock = true
      uni.showLoading({ title: '挂起中...', mask: true })
      try {
        const res = await suspendWindow({
          windowId: this.windowId,
          reason: this.suspendReason || '临时离岗'
        })
        if (res.success && res.data) {
          this.serviceStatus = res.data.serviceStatus

          // 同步更新本地存储
          const winInfo = uni.getStorageSync('windowInfo') || {}
          winInfo.serviceStatus = res.data.serviceStatus
          uni.setStorageSync('windowInfo', winInfo)

          uni.showToast({ title: '窗口已挂起', icon: 'success', duration: 1500 })
          await this.refreshAfterAction()
        }
      } catch (e) {
        console.error('挂起失败', e)
      } finally {
        uni.hideLoading()
        this.actionLock = false
      }
    },

    // 恢复窗口
    async handleResume() {
      this.actionLock = true
      uni.showLoading({ title: '恢复中...', mask: true })
      try {
        const res = await resumeWindow({ windowId: this.windowId })
        if (res.success && res.data) {
          this.serviceStatus = res.data.serviceStatus

          // 同步更新本地存储
          const winInfo = uni.getStorageSync('windowInfo') || {}
          winInfo.serviceStatus = res.data.serviceStatus
          uni.setStorageSync('windowInfo', winInfo)

          uni.showToast({ title: '窗口已恢复', icon: 'success', duration: 1500 })
          await this.refreshAfterAction()
        }
      } catch (e) {
        console.error('恢复失败', e)
      } finally {
        uni.hideLoading()
        this.actionLock = false
      }
    }
  }
}
</script>

<style scoped>
* {
  box-sizing: border-box;
}

.wrap {
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: url('../../static/images/home/bg.png') no-repeat center center;
  background-size: cover;
}

/* 顶部头部 */
.header-bar {
  width: 100%;
  background-color: rgba(19, 114, 255, 1);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.944vh 2.083vw 1.296vh;
  box-sizing: border-box;
}

.header-left {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.win-no {
  font-size: 3.125vw;
  color: #fff;
  font-weight: bold;
}

.user-dept {
  display: flex;
  margin-top: 1.111vh;
}

.user-dept text {
  font-size: 2.083vw;
  color: #fff;
  margin-right: 2.604vw;
}

.exit-btn {
  background: #fff;
  border-radius: 2.604vw;
  display: flex;
  align-items: center;
  padding: 1.389vh 1.302vw;
  cursor: pointer;
}

.icon-exit {
  width: 2.604vw;
  height: 2.604vw;
  margin-right: 1.042vw;
}

.exit-btn text {
  font-size: 2.083vw;
}

/* 中间内容 */
.content-box {
  flex: 1;
  display: flex;
}

.item-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.col-title {
  font-size: 3.125vw;
  color: rgba(51, 51, 51, 1);
  /* margin-bottom: 2.778vh; */
}

.call-no {
  font-size: 11.458vw;
  color: rgba(19, 114, 255, 1);
  font-weight: bold;
}

.call-name {
  font-size: 2.5vw;
  color: #333;
  margin-top: 2vh;
}

.call-item {
  font-size: 2vw;
  color: #666;
  margin-top: 1vh;
}

/* 状态标签 */
.status-tag {
  margin-top: 2vh;
  padding: 1vh 2vw;
  border-radius: 2vw;
}

.status-tag text {
  font-size: 2vw;
  color: #fff;
}

.tag-called {
  background-color: #1976f2;
}

.tag-handling {
  background-color: #28c958;
}

.wait-num {
  font-size: 11.458vw;
  color: #ff5522;
  font-weight: bold;
}

/* 挂起提示条 */
.suspend-bar {
  width: 100%;
  background-color: #ff6633;
  padding: 2vh 0;
  text-align: center;
}

.suspend-bar text {
  font-size: 2.5vw;
  color: #fff;
  font-weight: bold;
}

/* 底部按钮 */
.btn-group {
  display: flex;
  padding: 0 2.083vw 5.556vh;
  gap: 1.667vw;
}

.btn-item {
  flex: 1;
  height: 22.222vh;
  border-radius: 1.667vw;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: opacity 0.2s ease;
}

.btn-item:active {
  opacity: 0.8;
}

.btn-icon {
  width: 3.646vw;
  height: 3.646vw;
  margin-bottom: 1.667vh;
}

.btn-item text {
  font-size: 3.021vw;
  color: #fff;
}

.green {
  background-color: #28c958;
}

.blue {
  background-color: #1976f2;
}

.sky {
  background-color: #18a0f0;
}

.orange {
  background-color: #ff9922;
}

.red {
  background-color: #ff6633;
}

/* 按钮禁用态 */
.btn-item.disabled {
  opacity: 0.4;
  pointer-events: none;
}

/* ========== 弹窗通用 ========== */
.transfer-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;
}

/* 转移弹窗 */
.transfer-dialog {
  width: 55vw;
  max-height: 70vh;
  background: #fff;
  border-radius: 2vw;
  padding: 3vh 2vw;
  display: flex;
  flex-direction: column;
}

.suspend-dialog {
  width: 45vw;
  background: #fff;
  border-radius: 2vw;
  padding: 4vh 3vw;
  display: flex;
  flex-direction: column;
}

.dialog-title {
  font-size: 3vw;
  font-weight: bold;
  color: #333;
  text-align: center;
  margin-bottom: 3vh;
  flex-shrink: 0;
}

.dialog-list {
  flex: 1;
  max-height: 45vh;
  overflow-y: auto;
  margin-bottom: 2vh;
}

.transfer-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 3vh 2vw;
  border-bottom: 1px solid #eee;
  cursor: pointer;
}

.transfer-item:active {
  background: #f0f4ff;
}

.transfer-name {
  font-size: 2.4vw;
  font-weight: bold;
  color: #1976f2;
}

.transfer-desc {
  font-size: 2vw;
  color: #999;
}

.dialog-empty {
  text-align: center;
  padding: 6vh 0;
  font-size: 2.2vw;
  color: #999;
}

.dialog-cancel {
  text-align: center;
  padding: 2vh 0;
  font-size: 2.5vw;
  color: #999;
  cursor: pointer;
}

/* 挂起弹窗 */
.suspend-input {
  width: 100%;
  height: 8vh;
  border: 1px solid #ddd;
  border-radius: 1vw;
  padding: 0 2vw;
  font-size: 2.2vw;
  margin-bottom: 3vh;
}

.suspend-btns {
  display: flex;
  justify-content: space-between;
  gap: 3vw;
}

.dialog-confirm {
  flex: 1;
  text-align: center;
  padding: 2.5vh 0;
  font-size: 2.5vw;
  background: #ff6633;
  color: #fff;
  border-radius: 1.5vw;
  cursor: pointer;
}

.dialog-confirm:active {
  opacity: 0.8;
}

.dialog-cancel {
  flex: 1;
  text-align: center;
  padding: 2.5vh 0;
  font-size: 2.5vw;
  background: #eee;
  color: #666;
  border-radius: 1.5vw;
  cursor: pointer;
}
</style>
