<script setup>
import { getElevatorRealDataApi } from '@/api/elevator'
import { useCdn } from '@/composables/use-cdn'
const { cdnUrl } = useCdn('/elevator/2024/11/images')

const dataDetail = ref({})
const getDetail = async () => {
  const { error, data } = await getElevatorRealDataApi({
    ...options.value
  })
  if (error) {
    return
  }
  dataDetail.value = data
}
const showData = ref({})
watchEffect(() => {
  showData.value = dataDetail.value
  const { doorState, runState } = dataDetail.value
  // 开蒙状态
  switch (doorState) {
    case 0:
      showData.value.doorStateStr = '开门'
      break
    case 1:
      showData.value.doorStateStr = '关门'
      break
    case 2:
      showData.value.doorStateStr = '开门中'
      break
    case 3:
      showData.value.doorStateStr = '关门中'
      break
    default:
      showData.value.doorStateStr = '未知'
      break
  }

  // 运行状态
  switch (runState) {
    case 0:
      showData.value.runStateStr = '停梯'
      break
    case 17:
      showData.value.runStateStr = '上行'
      break
    case 18:
      showData.value.runStateStr = '下行'
      break
    case 33:
      showData.value.runStateStr = '上行到停梯'
      break
    case 34:
      showData.value.runStateStr = '下行到停梯'
      break
    default:
      showData.value.runStateStr = '未知'
      break
  }
})
const options = ref({})
onLoad(async (e) => {
  options.value = e
  await getDetail()
})

let timer = setInterval(() => {
  getDetail()
}, 3000)
onUnmounted(() => {
  clearInterval(timer)
  timer = null
})
</script>

<template>
  <view class="running-status" bg-white>
    <view w-full mt-12 f-s-c px-30>
      <view text-32 font-500 mr-12>现行状态</view>
      <up-tag text="实时查看" plain shape="circle" />
    </view>

    <view f-c-c flex-col mt-30>
      <view f-c-c>
        <!-- 上行 -->
        <view f-c-c>
          <up-image
            v-if="showData.runState === 17"
            :src="`${cdnUrl}/电梯正在上行-标识.png`"
            width="60rpx"
            height="60rpx"
          />
          <up-image
            v-else
            :src="`${cdnUrl}/电梯默认上行-标识.png`"
            width="60rpx"
            height="60rpx"
          />
        </view>
        <!-- 显示屏 -->
        <view f-c-c relative mx-50>
          <up-image
            :src="`${cdnUrl}/电梯楼层显示屏.png`"
            width="125rpx"
            height="50rpx"
          />
          <view
            absolute
            left-0
            top-0
            right-0
            bottom-0
            m-auto
            text-red
            text-36
            text-center
            z-1
          >
            {{ showData.floor }}
          </view>
        </view>
        <!-- 下行 -->
        <view f-c-c>
          <up-image
            v-if="showData.runState === 18"
            :src="`${cdnUrl}/电梯正在下行-标识.png`"
            width="60rpx"
            height="60rpx"
          />
          <up-image
            v-else
            :src="`${cdnUrl}/电梯默认下行-标识.png`"
            width="60rpx"
            height="60rpx"
          />
        </view>
      </view>

      <!-- 电梯主体 -->
      <view f-c-c mt-20>
        <up-image
          v-if="showData.doorState === 1"
          :src="`${cdnUrl}/电梯关门后.png`"
          width="320rpx"
          height="480rpx"
        />
        <up-image
          v-else
          :src="`${cdnUrl}/电梯开门后.png`"
          width="320rpx"
          height="480rpx"
        />
      </view>
    </view>

    <view px-24 mt-30>
      <up-cell-group>
        <up-cell
          title="维保状态："
          :value="showData.maintenanceState ? '开启' : '关闭'"
        />
        <up-cell
          title="电梯状态："
          :value="showData.onlineState ? '开启' : '关闭'"
        />
        <up-cell
          title="故障上报状态："
          :value="showData.faultReportState ? '开启' : '关闭'"
        />
        <up-cell title="运行状态：" :value="showData.runStateStr" />
        <up-cell title="梯门状态：" :value="showData.doorStateStr" />
        <up-cell title="所在楼层：" :value="showData.floor" />
        <up-cell title="运行速度：" :value="`${showData.speed}厘米/秒`" />
      </up-cell-group>
    </view>
  </view>
</template>
