<script setup lang="ts">
import { useUserStore } from '@/store/modules/user'
import { DICT_TYPE, getStrDictOptions } from '@/utils/dict'
import { rangeShortcuts } from '@/utils/formatTime'
import * as DeptApi from '@/api/system/dept'
import { handleTree } from '@/utils/tree'
import { IotDeviceApi } from '@/api/pms/device'
import { EChartsOption } from 'echarts'
import chart from './chart.vue'
import dayjs from 'dayjs'
import { useFullscreen } from '@vueuse/core'
import { Crop, FullScreen } from '@element-plus/icons-vue'

const userStore = useUserStore()
const userDeptId = userStore.getUser.deptId

interface DeviceData {
  id: number
  ifInline: string
  lastInlineTime: string
  deviceCode: string
  deviceName: string
  otherName: string
  deptName: string
  vehicleName: string
  carOnline: string
  mqttUrl: string
}

interface DeviceQuery {
  deptId?: number
  ifInline?: string
}

const originalDeviceQuery: DeviceQuery = {
  deptId: userDeptId,
  ifInline: '0'
}

const deviceQuery = ref<DeviceQuery>({
  ...originalDeviceQuery
})

interface Query {
  deviceCodes: number[]
  time: string[]
}

function getRealtimeTimeRange() {
  return [
    dayjs().subtract(10, 'minute').format('YYYY-MM-DD HH:mm:ss'),
    dayjs().format('YYYY-MM-DD HH:mm:ss')
  ]
}

function getOriginalQuery(): Query {
  return {
    deviceCodes: [],
    time: getRealtimeTimeRange()
  }
}

const query = ref<Query>(getOriginalQuery())
const isRealTime = ref(true)

const deptLoading = ref(false)
const deptOptions = ref<any[]>([])

async function loadDeptOptions() {
  deptLoading.value = true
  try {
    function sortTreeBySort(treeNodes: Tree[]) {
      if (!treeNodes || !Array.isArray(treeNodes)) return treeNodes
      const sortedNodes = [...treeNodes].sort((a, b) => {
        const sortA = a.sort != null ? a.sort : 999999
        const sortB = b.sort != null ? b.sort : 999999
        return sortA - sortB
      })

      sortedNodes.forEach((node) => {
        if (node.children && Array.isArray(node.children)) {
          node.children = sortTreeBySort(node.children)
        }
      })
      return sortedNodes
    }

    const depts = await DeptApi.specifiedSimpleDepts(userDeptId)
    deptOptions.value = sortTreeBySort(handleTree(depts))
  } catch (error) {
  } finally {
    deptLoading.value = false
  }
}

const deviceLoading = ref(false)
const deviceOptions = ref<any[]>([])

function getDeviceDisplayName(device: { deviceName?: string; otherName?: string }) {
  return device.otherName || device.deviceName || ''
}

function getDeviceLabel(device: { deviceCode?: string; deviceName?: string; otherName?: string }) {
  return `${device.deviceCode || ''}-${getDeviceDisplayName(device)}`
}

async function loadDeviceOptions() {
  if (!deviceQuery.value.deptId) return

  deviceLoading.value = true
  try {
    const data = await IotDeviceApi.getBoardDevice({
      deptId: [deviceQuery.value.deptId].flat().at(-1),
      ifInline: deviceQuery.value.ifInline,
      pageSize: 100
    })
    // const data = await IotDeviceApi.getIotDeviceTdPage({
    //   deptId: [deviceQuery.value.deptId].flat().at(-1),
    //   ifInline: deviceQuery.value.ifInline,
    //   pageSize: 100
    // })
    deviceOptions.value = data.list.map((item: any) => ({
      label: getDeviceLabel(item),
      value: item.id,
      raw: item
    }))
    query.value.deviceCodes = deviceOptions.value
      .filter((i) => i.raw.ifInline === 3)
      .map((i) => i.value)
    handleDeviceChange(query.value.deviceCodes)
  } catch (error) {
    deviceOptions.value = []
  } finally {
    deviceLoading.value = false
  }
}

const deviceList = ref<DeviceData[]>([])
const chartOption = ref<EChartsOption>({})
const pageSize = 5
const pageIndex = ref(0)
const activeMainCardId = ref<number | null>(null)
const boardMotion = ref<'page-prev' | 'page-next' | 'promote' | ''>('')
let boardMotionTimer: number | undefined

const totalPages = computed(() => Math.max(1, Math.ceil(deviceList.value.length / pageSize)))

const currentPageCards = computed(() => {
  const start = pageIndex.value * pageSize
  return deviceList.value.slice(start, start + pageSize)
})

const mainCard = computed(() => {
  const matchedCard = currentPageCards.value.find((item) => item.id === activeMainCardId.value)
  return matchedCard ?? currentPageCards.value[0] ?? null
})

const sideCards = computed(() => {
  if (!mainCard.value) return [] as DeviceData[]
  return currentPageCards.value.filter((item) => item.id !== mainCard.value?.id)
})

const boardMotionClass = computed(() => (boardMotion.value ? `is-${boardMotion.value}` : ''))

function triggerBoardMotion(type: 'page-prev' | 'page-next' | 'promote') {
  if (boardMotionTimer) {
    window.clearTimeout(boardMotionTimer)
  }

  boardMotion.value = ''

  nextTick(() => {
    boardMotion.value = type
    boardMotionTimer = window.setTimeout(() => {
      boardMotion.value = ''
    }, 520)
  })
}

function syncPageMainCard() {
  activeMainCardId.value = currentPageCards.value[0]?.id ?? null
}

function setMainCard(card: DeviceData) {
  if (activeMainCardId.value === card.id) return

  activeMainCardId.value = card.id
  triggerBoardMotion('promote')
}

function goPrevGroup() {
  if (pageIndex.value <= 0) return
  pageIndex.value -= 1
  syncPageMainCard()
  triggerBoardMotion('page-prev')
}

function goNextGroup() {
  if (pageIndex.value >= totalPages.value - 1) return
  pageIndex.value += 1
  syncPageMainCard()
  triggerBoardMotion('page-next')
}

async function handleDeviceChange(selectedIds: number[]) {
  deviceList.value = deviceList.value.filter((d) => selectedIds.includes(d.id))

  const currentIds = deviceList.value.map((d) => d.id)
  const newIds = selectedIds.filter((id) => !currentIds.includes(id))

  for (const id of newIds) {
    const option = deviceOptions.value.find((op) => op.value === id)
    if (option) {
      deviceList.value.push({
        id: id,
        ifInline: option.raw.ifInline,
        lastInlineTime: option.raw.lastInlineTime,
        deptName: option.raw.deptName,
        vehicleName: option.raw.vehicleName,
        carOnline: option.raw.carOnline ?? '',
        deviceCode: option.raw.deviceCode,
        deviceName: option.raw.deviceName,
        otherName: option.raw.otherName ?? '',
        mqttUrl: option.raw.mqttUrl
      })
    }
  }

  if (!deviceList.value.some((item) => item.id === activeMainCardId.value)) {
    syncPageMainCard()
  }

  if (pageIndex.value > totalPages.value - 1) {
    pageIndex.value = Math.max(totalPages.value - 1, 0)
    syncPageMainCard()
  }
}

onMounted(() => {
  loadDeptOptions()
  loadDeviceOptions()
})

onUnmounted(() => {
  if (boardMotionTimer) {
    window.clearTimeout(boardMotionTimer)
  }
})

function handleDeptChange() {
  query.value = getOriginalQuery()
  isRealTime.value = true
  deviceList.value = []
  chartOption.value = {}
  pageIndex.value = 0
  activeMainCardId.value = null
  loadDeviceOptions()
}

const targetArea = ref(null)

const { toggle, isFullscreen } = useFullscreen(targetArea)

function handleRest() {
  deviceQuery.value = { ...originalDeviceQuery }
  query.value = getOriginalQuery()
  isRealTime.value = true
  pageIndex.value = 0
  activeMainCardId.value = null
  loadDeptOptions()
  loadDeviceOptions()
}

function handleInlineChange() {
  loadDeviceOptions()
}

function handleTimeChange() {
  isRealTime.value = false
}

function handleOtherNameUpdated(payload: { id: number; otherName: string }) {
  const device = deviceList.value.find((item) => item.id === payload.id)
  if (device) {
    device.otherName = payload.otherName
  }

  const option = deviceOptions.value.find((item) => item.value === payload.id)
  if (option) {
    option.raw.otherName = payload.otherName
    option.label = getDeviceLabel(option.raw)
  }
}

const token = ref('')
const showSearchDialog = ref(false)

async function getToken() {
  const res = await IotDeviceApi.getToken()

  token.value = res
}

onMounted(() => {
  getToken()
})
</script>

<template>
  <div
    ref="targetArea"
    class="relative flex flex-col w-full rounded-lg bg-[#020408] overflow-hidden h-[calc(100vh-20px-var(--top-tool-height)-var(--tags-view-height)-var(--app-footer-height))]">
    <header
      class="relative w-full h-14 flex items-center justify-center select-none bg-[#0b1121] border-b border-white/5 shadow-lg">
      <div
        class="absolute inset-0 opacity-20"
        style="background-image: radial-gradient(circle at 50% 50%, #083344 0%, transparent 50%)">
      </div>

      <div class="absolute bottom-0 left-0 w-full h-[2px] bg-slate-800/50 overflow-hidden z-20">
        <div
          class="absolute top-0 bottom-0 w-[40%] bg-gradient-to-r from-transparent via-[#22d3ee] to-transparent shadow-[0_0_20px_#22d3ee] animate-scan-line">
        </div>
      </div>

      <div class="absolute left-6 top-1/2 -translate-y-1/2 flex items-center gap-1 opacity-80">
        <div class="w-1 h-4 bg-cyan-400 skew-x-[-12deg] shadow-[0_0_5px_rgba(34,211,238,0.8)]">
        </div>
        <div class="w-1 h-3 bg-cyan-700 skew-x-[-12deg]"></div>
        <div class="w-1 h-2 bg-cyan-900 skew-x-[-12deg]"></div>
      </div>

      <div
        class="absolute right-6 top-1/2 -translate-y-1/2 flex items-center gap-1 opacity-80 flex-row-reverse">
        <div class="w-1 h-4 bg-cyan-400 skew-x-[12deg] shadow-[0_0_5px_rgba(34,211,238,0.8)]"></div>
        <div class="w-1 h-3 bg-cyan-700 skew-x-[12deg]"></div>
        <div class="w-1 h-2 bg-cyan-900 skew-x-[12deg]"></div>
      </div>

      <h1 class="z-10 text-2xl font-bold tracking-[0.5em] uppercase">
        <span
          class="text-transparent bg-clip-text bg-gradient-to-b from-white via-cyan-100 to-cyan-500 drop-shadow-[0_0_10px_rgba(34,211,238,0.8)]">
          监控看板
        </span>
      </h1>

      <div class="absolute right-16 top-1/2 -translate-y-1/2 z-10 flex items-center gap-2">
        <el-button size="default" class="custom-btn primary-btn" @click="showSearchDialog = true">
          筛选
        </el-button>
        <el-button
          size="default"
          class="custom-btn primary-btn"
          :type="isFullscreen ? 'info' : 'primary'"
          :icon="isFullscreen ? Crop : FullScreen"
          @click="toggle">
          {{ isFullscreen ? '退出全屏' : '全屏' }}
        </el-button>
      </div>
    </header>

    <div class="px-4 pt-4 pb-4 monitor-board-shell">
      <div class="monitor-board-toolbar">
        <div class="monitor-board-status">
          <span>当前第 {{ pageIndex + 1 }} 组 / 共 {{ totalPages }} 组</span>
          <span v-if="mainCard">
            主看板：{{ mainCard.deviceCode }}-{{ getDeviceDisplayName(mainCard) }}
          </span>
        </div>
        <div class="flex items-center gap-3">
          <el-button class="custom-btn reset-btn" :disabled="pageIndex === 0" @click="goPrevGroup">
            上 5 个
          </el-button>
          <el-button
            class="custom-btn reset-btn"
            :disabled="pageIndex >= totalPages - 1"
            @click="goNextGroup">
            下 5 个
          </el-button>
        </div>
      </div>

      <div v-if="mainCard" class="monitor-board-scroll-area" :class="boardMotionClass">
        <div class="monitor-board-layout">
          <div
            v-if="sideCards[0]"
            class="monitor-card-shell monitor-card-side monitor-card-left-top"
            @click="setMainCard(sideCards[0])">
            <chart
              :key="sideCards[0].id"
              v-bind="sideCards[0]"
              :date="query.time"
              :is-real-time="isRealTime"
              :token="token"
              @other-name-updated="handleOtherNameUpdated" />
          </div>

          <div
            v-if="sideCards[1]"
            class="monitor-card-shell monitor-card-side monitor-card-left-bottom"
            @click="setMainCard(sideCards[1])">
            <chart
              :key="sideCards[1].id"
              v-bind="sideCards[1]"
              :date="query.time"
              :is-real-time="isRealTime"
              :token="token"
              @other-name-updated="handleOtherNameUpdated" />
          </div>

          <div class="monitor-card-shell monitor-card-main" @click="setMainCard(mainCard)">
            <chart
              :key="mainCard.id"
              v-bind="mainCard"
              :date="query.time"
              :is-real-time="isRealTime"
              :token="token"
              @other-name-updated="handleOtherNameUpdated" />
          </div>

          <div
            v-if="sideCards[2]"
            class="monitor-card-shell monitor-card-side monitor-card-right-top"
            @click="setMainCard(sideCards[2])">
            <chart
              :key="sideCards[2].id"
              v-bind="sideCards[2]"
              :date="query.time"
              :is-real-time="isRealTime"
              :token="token"
              @other-name-updated="handleOtherNameUpdated" />
          </div>

          <div
            v-if="sideCards[3]"
            class="monitor-card-shell monitor-card-side monitor-card-right-bottom"
            @click="setMainCard(sideCards[3])">
            <chart
              :key="sideCards[3].id"
              v-bind="sideCards[3]"
              :date="query.time"
              :is-real-time="isRealTime"
              :token="token"
              @other-name-updated="handleOtherNameUpdated" />
          </div>
        </div>
      </div>
    </div>

    <el-dialog
      v-model="showSearchDialog"
      title="筛选条件"
      width="1120px"
      class="monitor-search-dialog"
      destroy-on-close>
      <el-form size="default" class="search-container grid grid-cols-12 gap-6">
        <div
          class="absolute left-0 top-0 w-[2px] h-full bg-gradient-to-b from-transparent via-cyan-500 to-transparent"></div>
        <el-form-item class="col-span-3" label="部门">
          <el-cascader
            v-model="deviceQuery.deptId"
            :options="deptOptions"
            @change="handleDeptChange"
            popper-class="poper"
            :teleported="false"
            :show-all-levels="false"
            :props="{ checkStrictly: true, label: 'name', value: 'id' }"
            class="w-full"
            placeholder="请选择部门" />
        </el-form-item>
        <el-form-item class="col-span-3" label="在线状态">
          <el-select
            v-model="deviceQuery.ifInline"
            placeholder="请选择状态"
            clearable
            :teleported="false"
            popper-class="poper"
            class="w-full"
            :class="{ selected: Boolean(deviceQuery.ifInline) }"
            @change="handleInlineChange">
            <el-option
              v-for="dict in getStrDictOptions(DICT_TYPE.IOT_DEVICE_STATUS)"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value" />
          </el-select>
        </el-form-item>
        <el-form-item class="col-span-6 time-range-item" label="时间范围">
          <el-date-picker
            v-model="query.time"
            value-format="YYYY-MM-DD HH:mm:ss"
            type="datetimerange"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :shortcuts="rangeShortcuts"
            :default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
            :teleported="false"
            popper-class="poper"
            class="w-full time-range-picker"
            @change="handleTimeChange" />
        </el-form-item>
        <el-form-item class="col-span-12" label="设备">
          <el-select
            v-model="query.deviceCodes"
            :options="deviceOptions"
            multiple
            placeholder="请选择设备"
            :teleported="false"
            popper-class="poper"
            class="w-full"
            tag-type="primary"
            filterable
            @change="handleDeviceChange" />
        </el-form-item>
      </el-form>

      <template #footer>
        <div class="flex justify-end gap-3">
          <el-button size="default" @click="handleRest" class="custom-btn reset-btn">
            重置
          </el-button>
          <el-button
            size="default"
            class="custom-btn primary-btn"
            @click="showSearchDialog = false">
            关闭
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<style scoped>
@keyframes scan-line {
  0% {
    left: -40%;
    opacity: 0;
  }

  10% {
    opacity: 1;
  }

  90% {
    opacity: 1;
  }

  100% {
    left: 100%;
    opacity: 0;
  }
}

/* 5. 扫描线动画细节 */
@keyframes scan-line {
  0% {
    left: -40%;
    opacity: 0;
  }

  50% {
    opacity: 1;
  }

  100% {
    left: 100%;
    opacity: 0;
  }
}

@keyframes board-page-next {
  0% {
    opacity: 0;
    transform: translateX(56px) scale(0.985);
  }

  100% {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}

@keyframes board-page-prev {
  0% {
    opacity: 0;
    transform: translateX(-56px) scale(0.985);
  }

  100% {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}

@keyframes card-promote-main {
  0% {
    opacity: 0.72;
    transform: scale(0.94);
  }

  55% {
    opacity: 1;
    transform: scale(1.018);
  }

  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes card-promote-side {
  0% {
    opacity: 0.62;
    transform: scale(1.04);
  }

  100% {
    opacity: 1;
    transform: scale(1);
  }
}

.animate-scan-line {
  animation: scan-line 3s cubic-bezier(0.4, 0, 0.2, 1) infinite alternate;
}

.monitor-board-shell {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  flex: 1;
  min-height: 0;
}

.monitor-board-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  gap: 16px;
}

.monitor-board-status {
  display: flex;
  font-size: 14px;
  color: rgb(165 243 252 / 90%);
  flex-wrap: wrap;
  gap: 16px;
}

.monitor-board-layout {
  display: grid;
  width: max-content;
  height: 100%;
  padding-bottom: 8px;
  flex: 1;
  grid-template-columns: 760px 1500px 760px;
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.monitor-board-scroll-area {
  height: 100%;
  min-height: 0;
  padding: 8px;
  overflow: auto hidden;
  flex: 1 1 0;
}

.monitor-board-scroll-area::-webkit-scrollbar {
  height: 10px;
}

.monitor-board-scroll-area::-webkit-scrollbar-thumb {
  background: rgb(34 211 238 / 70%);
  border-radius: 999px;
}

.monitor-board-scroll-area::-webkit-scrollbar-track {
  background: rgb(255 255 255 / 6%);
}

.monitor-card-shell {
  height: 100%;
  min-width: 0;
  min-height: 0;
  cursor: pointer;
  will-change: transform, opacity;
  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease,
    border-color 0.25s ease;
}

.monitor-card-shell:hover {
  transform: translateY(-2px);
}

.monitor-board-scroll-area.is-page-next .monitor-board-layout {
  animation: board-page-next 0.46s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.monitor-board-scroll-area.is-page-prev .monitor-board-layout {
  animation: board-page-prev 0.46s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.monitor-board-scroll-area.is-promote .monitor-card-main {
  animation: card-promote-main 0.48s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.monitor-board-scroll-area.is-promote .monitor-card-side {
  animation: card-promote-side 0.38s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.monitor-card-main {
  grid-column: 2;
  grid-row: 1 / span 2;
  flex: 1;
  height: 100%;
}

.monitor-card-left-top {
  grid-column: 1;
  grid-row: 1;
}

.monitor-card-left-bottom {
  grid-column: 1;
  grid-row: 2;
}

.monitor-card-right-top {
  grid-column: 3;
  grid-row: 1;
}

.monitor-card-right-bottom {
  grid-column: 3;
  grid-row: 2;
}

.monitor-card-shell :deep(.h-100) {
  height: 100%;
}

.monitor-card-shell :deep(.chart-container) {
  height: 100%;
}

.monitor-board-layout :deep(.chart-container) {
  min-width: 0;
}

.monitor-card-shell :deep(.chart-header) {
  cursor: pointer;
}

.search-container {
  position: relative;
  padding: 24px;
  background: linear-gradient(135deg, rgb(11 17 33 / 96%) 0%, rgb(6 9 18 / 98%) 100%);
  border: 1px solid rgb(34 211 238 / 60%);
  border-radius: 4px;
  box-shadow: 0 10px 40px rgb(0 0 0 / 60%);
}

:deep(.el-form-item) {
  --background-color: rgb(2 4 8 / 80%) !important;
  --box-shadow: 0 0 0 1px rgb(34 211 238 / 20%) inset !important;
  --transition: all 0.3s ease;
  --active-box-shadow: 0 0 0 1px #22d3ee inset, 0 0 12px rgb(34 211 238 / 30%) !important;
  --bg-color-overlay: rgb(16 24 45) !important;
  --border-color: rgb(34 211 238 / 20%) !important;
  --text-color-regular: rgb(240 249 255 / 90%) !important;
  --text-color-primary: rgb(92 231 247 / 90%) !important;

  margin-bottom: 0;

  .el-form-item__label {
    padding-bottom: 4px;
    font-size: 14px;
    font-weight: 500;
    color: rgb(165 243 252 / 90%) !important;
  }

  .el-input__wrapper,
  .el-select__wrapper {
    background-color: var(--background-color);
    box-shadow: var(--box-shadow);
    transition: var(--transition);
  }

  .el-input__wrapper.is-focus,
  .is-focused,
  .is-active {
    box-shadow: var(--active-box-shadow);
  }

  .poper {
    --el-bg-color-overlay: var(--bg-color-overlay);
    --el-border-color-light: var(--border-color);
    --el-fill-color-light: var(--border-color);
    --el-text-color-regular: var(--text-color-regular);
    --el-text-color-primary: var(--text-color-primary);
    --el-border-color-extra-light: var(--border-color);
  }

  .el-cascader-node {
    &.is-active {
      box-shadow: none;
    }
  }

  .el-time-spinner__item.is-active {
    box-shadow: none;
  }

  .cancel {
    color: var(--el-color-danger);
  }

  .el-picker-panel__footer {
    .is-text {
      color: var(--el-color-danger);
    }

    .is-plain {
      color: var(--text-color-primary);
      background-color: var(--border-color);
      border-color: var(--border-color);
    }
  }

  .el-picker__popper {
    border-color: var(--border-color);

    .el-time-panel {
      border-color: var(--border-color);
    }

    .el-picker-panel__footer {
      .is-text {
        color: var(--el-color-danger);
      }

      .is-plain {
        color: var(--text-color-primary);
        background-color: var(--border-color);
        border-color: var(--border-color);
      }
    }
  }

  .el-input {
    --el-input-hover-border-color: var(--border-color);
  }

  .el-input__inner,
  .el-date-editor .el-range-input {
    color: var(--text-color-primary);
  }

  .selected {
    .el-select__placeholder {
      color: var(--text-color-primary);
    }
  }

  .el-tag {
    --el-tag-bg-color: var(--border-color);
    --el-tag-border-color: var(--border-color);
    --el-tag-text-color: var(--text-color-primary);
  }
}

.custom-btn {
  border: none;
  border-radius: 2px;
  transition: all 0.3s;
}

.primary-btn {
  color: #020617;
  background: linear-gradient(90deg, #0891b2 0%, #22d3ee 100%);
  box-shadow: 0 0 10px rgb(34 211 238 / 30%);
}

.primary-btn:hover {
  background: linear-gradient(90deg, #22d3ee 0%, #67e8f9 100%);
  transform: translateY(-1px);
  box-shadow: 0 0 20px rgb(34 211 238 / 50%);
}

.reset-btn {
  color: #94a3b8;
  background: rgb(255 255 255 / 5%);
  border: 1px solid rgb(148 163 184 / 30%);
}

.reset-btn:hover {
  color: #fff;
  background: rgb(255 255 255 / 10%);
  border-color: rgb(255 255 255 / 50%);
}
</style>

<style>
.monitor-search-dialog.el-dialog {
  background: linear-gradient(180deg, rgb(6 9 18 / 98%) 0%, rgb(11 17 33 / 98%) 100%);
  border: 1px solid rgb(34 211 238 / 35%);
  box-shadow:
    0 0 0 1px rgb(34 211 238 / 12%),
    0 24px 80px rgb(0 0 0 / 75%);
}

.monitor-search-dialog .el-dialog__header {
  padding: 18px 24px 14px;
  margin-right: 0;
  border-bottom: 1px solid rgb(34 211 238 / 16%);
}

.monitor-search-dialog .el-dialog__title {
  font-weight: 600;
  letter-spacing: 0.08em;
  color: rgb(165 243 252);
}

.monitor-search-dialog .el-dialog__headerbtn .el-dialog__close {
  color: rgb(148 163 184);
}

.monitor-search-dialog .el-dialog__body {
  padding: 20px 24px 16px;
  background: transparent;
}

.monitor-search-dialog .el-dialog__footer {
  padding: 0 24px 12px;
  background: transparent;
}

.monitor-search-dialog .el-form-item__label {
  white-space: nowrap;
}

.time-range-item {
  min-width: 0;
}

.time-range-picker {
  min-width: 0;
}

.monitor-search-dialog .el-date-editor.el-input__wrapper,
.monitor-search-dialog .el-select__wrapper,
.monitor-search-dialog .el-cascader .el-input__wrapper {
  width: 100%;
  min-width: 0;
}

.monitor-search-dialog .el-date-editor--datetimerange {
  width: 100%;
  min-width: 0;
}

.monitor-search-dialog .el-date-editor .el-range-separator {
  flex: 0 0 auto;
  padding: 0 8px;
  color: rgb(165 243 252);
}

.monitor-search-dialog .el-date-editor .el-range-input {
  min-width: 0;
}
</style>
