<!--
  Description: 报警管理-当前报警
  Author: 李亚光
  Date: 2023-06-28
 -->
<script lang="ts" setup name="CurrentAlarm">
import dayjs from 'dayjs'
import { ElLoading, ElMessage, ElMessageBox } from 'element-plus'
import { ArrowLeftBold, ArrowRightBold } from '@element-plus/icons-vue'
import MapCom from './components/map.vue'
import { batchDelete, detailAlarm, exportCurrentAlarm, getCurrentAlarmListPage, viewAlarm } from '@/api/home/alarm/current'
import { getDictByCode } from '@/api/system/dict'
import { getAlarmLevelListPage, getAlarmTypeListPage } from '@/api/home/rule/alarm'
import { getDeviceTypeListPage } from '@/api/home/device/type'
import { uniqueMultiArray } from '@/utils/Array'
import { shortcuts } from '@/utils/common'
import { toHumpObject } from '@/utils/String'
import { exportFile } from '@/utils/exportUtils'
import { keepSearchParams } from '@/utils/keepQuery'
import { hexToRgb } from '@/utils/String'
import { getDeviceListPage } from '@/api/home/device/device'
import { getWellListPage } from '@/api/home/well/well'
import { getPipelineListPage } from '@/api/home/pipeline/pipeline'
import { alarmValue } from './components/dict'
import useUserStore from '@/store/modules/user'
const alarmCategoryList = ref<{ id: string; name: string; value: string }[]>([]) // 报警类别
const alarmTypeList = ref<{ id: string; name: string; value: string }[]>([]) // 报警类型
const alarmLevelList = ref<{ id: string; name: string; value: string }[]>([]) // 报警等级
const deviceTypeList = ref<{ id: string; name: string; value: string }[]>([]) // 设备类型
const alarmStatusList = ref<{ id: string; name: string; value: string }[]>([]) // 报警状态
const userStore = useUserStore()
// 表格数据
const list1 = ref<any[]>([])
const total = ref(0)
const tableRef = ref()
const $route = useRoute()
const $router = useRouter()
// 初始展示列
const columns = ref<any>([
  { text: '报警类型', value: 'alarmType', align: 'center', width: '130' },
  { text: '报警等级', value: 'alarmLevelName', align: 'center', width: '85' },
  { text: '报警原因', value: 'alarmReason', align: 'center', },
  { text: '位置', value: 'position', align: 'center', isCustom: true, },
  { text: '设备类型', value: 'devTypeName', align: 'center', width: '145', isRequired: false, },
  { text: '设备编号', value: 'devcode', align: 'center', width: '160', isCustom: true, isRequired: false, },
  { text: '管理单位', value: 'deptName', align: 'center', width: '400', isRequired: false, },
  { text: '状态', value: 'processStatusName', align: 'center', width: '100', isCustom: true, },
  { text: '报警时间', value: 'ts', align: 'center', width: '170' },
])
// 最终展示列
const switchFlag = ref(true)
const columnsConfig = ref([])
const columnsConfigBak = ref([])
watch(() => columnsConfig.value, (newVal) => {
  if (newVal?.length && switchFlag.value) {
    columnsConfigBak.value = JSON.parse(JSON.stringify(columnsConfig.value))
  }
}, {
  deep: true,
})
// 修改列
const editColumns = (data: any) => {
  columnsConfig.value = data
}
const loadingTable = ref(true)
//  查询条件
const listQuery = ref<{ [key: string]: string | number | any }>({
  limit: 20,
  offset: 1,
  begTime: '',
  endTime: '',
  alarmCategory: '', // 报警类别
  alarmLevel: '', // 报警等级
  alarmTypeId: '', // 报警类型
  deptId: '', // 管理单位
  devCode: '', // 设备编号
  devTypeId: '', // 设备类型
  position: '', // 位置
  processStatus: '', // 报警状态
  overtime: false,
})
// 开始结束时间
const datetimerange = ref()
watch(() => datetimerange.value, (newVal) => {
  listQuery.value.begTime = ''
  listQuery.value.endTime = ''
  if (Array.isArray(newVal)) {
    if (newVal.length) {
      listQuery.value.begTime = `${newVal[0]}`
      listQuery.value.endTime = `${newVal[1]}`
    }
  }
})
// 查询数据
const fetchData = (isLoaidng = false) => {
  const queryList = [] as Boolean[] // 长度大于2 即为是
  for (const i in listQuery.value) {
    if (listQuery.value[i]) {
      queryList.push(true)
    }
  }
  if ($route.query.row && queryList.length === 2) {
    $router.push({
      path: '/alarm/current',
    })
  }
  loadingTable.value = true
  if (isLoaidng) {
    loadingTable.value = false
  }
  getCurrentAlarmListPage({
    ...listQuery.value,
    overtime: listQuery.value.overtime ? '1' : ''
  }).then((res) => {
    total.value = res.data.total
    list1.value = res.data.rows.map((item: any) => ({
      ...item,
      alarmCategoryName: alarmCategoryList.value.length ? alarmCategoryList.value.filter((citem: any) => citem.value === item.alarmCategory)[0]?.name : '',
      // showDeviceTips: false, // 展示设备编号提示

    })).map((item: any) => ({
      ...item,
      alarmReason: item.alarmCategoryName.includes('浓度') ? `${item.alarmValue}${!item.alarmValue ? '' : item.watchObject === '2' ? 'PPM.M' : '%LEL'}` : (alarmValue[item.alarmValue] || '其他')
    }))

    loadingTable.value = false
    // // 查询设备类型和厂商
    // list1.value.forEach((item: any) => {
    //   getDeviceListPage({ offset: 1, limit: 1, devCode: item.devcode }).then(res => {
    //     if (res.data.rows.length) {
    //       item.showDeviceTips = true
    //       item.deviceTips = {
    //         typeName: res.data.rows[0].deviceName || item.devTypeName,
    //         manufactureName: res.data.rows[0].manufactureName
    //       }
    //       item.watchObject = res.data.rows[0].watchObject
    //     }
    //     else {
    //       item.showDeviceTips = false
    //       item.deviceTips = {}
    //     }
    //   })
    // })
  }).catch(() => {
    loadingTable.value = false
  })
}
// 重置查询条件f
const reset = () => {
  if ($route.query.row) {
    $router.push({
      path: '/alarm/current',
    })
  }
  datetimerange.value = []
  listQuery.value = {
    limit: 20,
    offset: 1,
    begTime: '',
    endTime: '',
    alarmCategory: '', // 报警类别
    alarmLevel: '', // 报警等级
    alarmTypeId: '', // 报警类型
    deptId: '', // 管理单位
    devCode: '', // 设备编号
    devTypeId: '', // 设备类型
    position: '', // 位置
    processStatus: '', // 报警状态
    overtime: false,
  }
  fetchData()
}
// 页数发生变化后的操作，可能是页码变化，可能是每页容量变化，此函数必写
const changePage = (val: { size: number; page: number }) => {
  if (val && val.size) {
    listQuery.value.limit = val.size
  }
  if (val && val.page) {
    listQuery.value.offset = val.page
  }
  fetchData()
}
// 字典
const fetchDict = async () => {
  // 报警类型
  const res = await getAlarmTypeListPage({ offset: 1, limit: 99999 })
  alarmTypeList.value = uniqueMultiArray(res.data.rows.filter((item: any) => item.enabled === '1').map((item: any) => ({
    name: item.alarmType,
    value: item.id,
    id: item.id,
  })), 'name').filter((item: any) => !item.name.includes('设备'))

  // 报警类别
  getDictByCode('alarmCategory').then((res) => {
    alarmCategoryList.value = res.data.filter((item: any) => !item.name.includes('设备'))
  })

  // 报警等级
  getAlarmLevelListPage({ offset: 1, limit: 99999 }).then((res) => {
    alarmLevelList.value = res.data.rows.map((item: any) => ({
      name: item.alarmLevel,
      value: item.id,
      id: item.id,
    }))
  })
  // 设备类型
  getDeviceTypeListPage({ offset: 1, limit: 99999 }).then((res) => {
    deviceTypeList.value = res.data.rows.map((item: any) => ({
      name: item.typeName,
      value: item.id,
      id: item.id,
    }))
  })
  // 报警状态
  getDictByCode('alarmStatus').then((res) => {
    alarmStatusList.value = res.data.filter((item: { name: string }) => item.name !== '无需处置')
  })
}

onMounted(async () => {
  await fetchDict()
  if ($route.query.row) {
    loadingTable.value = true
    const row = JSON.parse($route.query.row as string)
    const obj = {
      begTime: '',
      endTime: '',
      position: '',
    }
    if ($route.query.real) {
      datetimerange.value = [dayjs().subtract(7, 'day').format('YYYY-MM-DD HH:mm:ss'), dayjs().format('YYYY-MM-DD HH:mm:ss')]
      obj.begTime = dayjs().subtract(7, 'day').format('YYYY-MM-DD HH:mm:ss')
      obj.endTime = dayjs().format('YYYY-MM-DD HH:mm:ss')
    }
    // 从从异常位置分析跳转过来
    if ($route.query.type === 'localAnalyse') {
      datetimerange.value = [row.begTime, row.endTime]
      listQuery.value.position = row.position
      obj.begTime = row.begTime
      obj.endTime = row.endTime
      obj.position = row.position
    }
    // 从全局报警pop跳转过来
    if ($route.query.type === 'alarm-pop') {
      console.log(row, 'row')
      listQuery.value.position = row.position
      listQuery.value.alarmLevel = row.alarmLevel
      listQuery.value.devCode = row.devcode
      obj.position = row.position
      obj.alarmLevel = row.alarmLevel
      obj.devCode = row.devcode
      obj.begTime = row.ts
      obj.endTime = row.ts
      datetimerange.value = [row.ts, row.ts]
    }
    // 从首页消息通知跳转过来
    if ($route.query.type === 'alarm-note') {
      obj.position = row.address
      listQuery.value.position = row.address
      obj.devCode = row.DEVCODE
      listQuery.value.devCode = row.DEVCODE
      obj.alarmLevel = row.ALARM_LEVEL
      listQuery.value.alarmLevel = row.ALARM_LEVEL
      obj.deptId = row.DEPTID
      listQuery.value.deptId = row.DEPTID
      // obj.processStatus = row.PROCESS_STATUS
      // listQuery.value.processStatus = row.PROCESS_STATUS
      obj.begTime = row.ALARM_TIME
      obj.endTime = row.ALARM_TIME
      datetimerange.value = [row.ALARM_TIME, row.ALARM_TIME]
    }
    // 全局报警弹窗跳转过来
    if ($route.query.type === 'alarm-dialog') {
      obj.begTime = row.alarmTime
      obj.endTime = row.alarmTime
      datetimerange.value = [row.alarmTime, row.alarmTime]
      obj.position = row.tagNumber
      listQuery.value.position = row.tagNumber
      // alarmTypeList.value
      obj.alarmTypeId = alarmTypeList.value.length ? alarmTypeList.value.filter((item: any) => item.name === row.alarmType)[0]?.value || '' : ''
      listQuery.value.alarmTypeId = obj.alarmTypeId
    }
    getCurrentAlarmListPage({ offset: 1, limit: 50, ...obj }).then((res) => {
      const data = $route.query.type === 'localAnalyse' || $route.query.type === 'alarm-note' ? res.data.rows : res.data.rows.filter((item: any) => item.id === (row.id || row.alarmId))
      if (data.length) {
        list1.value = data.map((item: any) => ({
          ...item,
          alarmCategoryName: alarmCategoryList.value.length ? alarmCategoryList.value.filter((citem: any) => citem.value === item.alarmCategory)[0]?.name : '',
          // showDeviceTips: false, // 展示设备编号提示
        })).map((item: any) => ({
          ...item,
          alarmReason: item.alarmCategoryName.includes('浓度') ? `${item.alarmValue}${!item.alarmValue ? '' : item.watchObject === '2' ? 'PPM.M' : '%LEL'}` : (alarmValue[item.alarmValue] || '其他')
        }))
        // // 查询设备类型和厂商
        // list1.value.forEach((item: any) => {
        //   getDeviceListPage({ offset: 1, limit: 1, devCode: item.devcode }).then(res => {
        //     if (res.data.rows.length) {
        //       item.showDeviceTips = true
        //       item.deviceTips = {
        //         typeName: res.data.rows[0].deviceName || item.devTypeName,
        //         manufactureName: res.data.rows[0].manufactureName
        //       }
        //       item.watchObject = res.data.rows[0].watchObject
        //     }
        //     else {
        //       item.showDeviceTips = false
        //       item.deviceTips = {}
        //     }
        //   })
        // })
        setTimeout(() => {
          detail(data[0])
        })
      }
      else {
        list1.value = []
        ElMessage.warning('未找到该报警数据')
      }
      total.value = data.length
      loadingTable.value = false
    }).catch(() => {
      loadingTable.value = false
    })
    return
  }
  // datetimerange.value = [dayjs().subtract(7, 'day').format('YYYY-MM-DD HH:mm:ss'), dayjs().format('YYYY-MM-DD HH:mm:ss')]
  setTimeout(() => {
    fetchData()
  })
})
// 表格标识  地图或普通
const tableFlag = ref('normal')
const tableHeight = ref(0)
const switchMode = async (type: string) => {
  if (!list1.value.length) {
    ElMessage.warning('暂无数据')
    return
  }
  const tableWidth = document.getElementById('container-table')?.style.width
  if (tableWidth?.includes('px')) {
    setTimeout(() => {
      const table = document.getElementById('container-table') as HTMLElement
      table.style.width = tableWidth
    })
  }
  else {
    setTimeout(() => {
      const table = document.getElementById('container-table') as HTMLElement
      table.style.width = type === 'normal' ? '100%' : '65%'
    })
  }
  tableFlag.value = type
  switchFlag.value = false
  tableHeight.value = window.innerHeight - 60 - 50 - 98 - 20
  if (type === 'map') {
    columnsConfig.value = columnsConfigBak.value.filter((item: any) => item.text !== '管理单位')

    nextTick(() => {
      tableRef.value?.setScrollLeft(10000)
    })
    setTimeout(() => {
      watchMapWidth()
      // console.log('开始监听')
    })
  }
  else {
    // 表格收起管理单位列
    columnsConfig.value = columnsConfigBak.value
  }
}
watch(() => list1.value, () => {
  if (list1.value.length) {
    tableHeight.value = window.innerHeight - 60 - 50 - 98 - 20
  }
})
window.addEventListener('resize', () => {
  // tableHeight.value = document.getElementById('container-table')?.clientHeight as number
  tableHeight.value = window.innerHeight - 60 - 50 - 98 - 20
  const ele = document.getElementById('dragItem-width')
  if (ele) {
    ele.style.height = `${tableHeight.value}px`
  }

})
onBeforeUnmount(() => {
  window.addEventListener('resize', () => { })
})
// 监听地图宽度
const observer = ref()
const watchMapWidth = () => {
  // 创建一个ResizeObserver实例
  observer.value = new ResizeObserver((entries: any) => {
    for (const entry of entries) {
      // 获取div元素的新高度
      const newWidth = entry.contentRect.width
      // 执行相应的操作，比如更新UI或调用其他函数
      // console.log(`元素新宽度为:${newWidth}`)
      // if (newHeight < 350) {
      //   tableHeight.value = window.innerHeight - 60 - 50 - 10 - 350 - 98 - 10 - 52 - 10 + (350 - newHeight)
      // }
      // 设置地图的宽度
      const map = document.getElementById('map-container')
      if (map) {
        const width = window.innerWidth - newWidth - 180 - 20
        if (width < (window.innerWidth - 180 - 20) * 0.35) {
          return
        }
        map.style.width = `${width}px`
      }
      if (tableFlag.value === 'map') {
        nextTick(() => {
          tableRef.value?.setScrollLeft(10000)
        })
      }
    }
  })
  // 监听目标div元素的宽度变化
  const targetDiv = document.getElementById('container-table') as Element
  observer.value.observe(targetDiv)
}
// 查看报警
const mapRef = ref()
const mapData = ref({})
const cacheRow = ref({})
async function detail(row: any) {
  // 分公司、集团点查看不切换状态
  // if (row.processStatusName === '未读' && !userStore.roleTips.includes('buxiugai')) {
  //   list1.value[list1.value.findIndex((item: any) => item.id === row.id)].processStatusName = '已读'
  //   row.processStatusName = '已读'
  //   viewAlarm(row.id)
  // }
  const res = await detailAlarm(row.id)
  // 重新查询列表
  fetchData(true)
  const data = toHumpObject(res.data)
  if (!data.latGaode || !data.lngGaode) {
    if (mapRef.value) {
      mapRef.value.mapRef.removeMarker()
    }
    ElMessage.warning('该报警缺少坐标信息')
    return
  }
  mapData.value = row
  cacheRow.value = row
  switchMode('map')
  // 绘制点
  const draw = () => {
    mapRef.value.mapRef.removeMarker()
    mapRef.value.mapRef.addMarker({
      position: [data.lngGaode, data.latGaode],
      // content: '<div class="spread-circle"></div>',
      content: row.alarmLevelName === '预警' || row.alarmLevelName === '一级' ? '<div class="spread-circle1"></div>' : '<div class="spread-circle2"></div>',
      label: '',
      offsetX: -25,
      offsetY: -25,
    })
    mapRef.value.mapRef.map.setFitView()
    mapRef.value.closeInfoDetail()
    // mapRef.value.mapRef.map.setZoom(15)
    // mapRef.value.openInfoDetail({
    //   ...row,
    //   lnglat: [data.lngGaode, data.latGaode],
    // })
  }
  // console.log(mapRef.value, 'mapRef.value')
  setTimeout(() => {
    if (!data.lngGaode || !data.latGaode) {
      ElMessage.warning('该数据缺少坐标信息')
      return
    }
    // 已读
    if (mapRef.value?.completeFlag) {
      draw()
    }
    else {
      let timer = null
      timer = setInterval(() => {
        // console.log('定时器')
        if (mapRef.value?.completeFlag) {
          draw()
          clearInterval(timer)
          timer = null
        }
      }, 1000)
    }
  }, 500)
}
// 双击列表行数据
const rowClick = (data: any) => {
  detail(data)
}

const { proxy } = getCurrentInstance() as any
// 多选
const multipleTable = ref([])
const handleSelectionChange = (val: any) => {
  // console.log(val, '多选数据')
  multipleTable.value = val
}
// 导出列表
const exportList = () => {
  if (!list1.value.length) {
    ElMessage.warning('暂无导出数据')
    return
  }
  const loading = ElLoading.service({
    lock: true,
    background: 'rgba(255, 255, 255, 0.8)',
  })
  exportCurrentAlarm(listQuery.value).then((res) => {
    exportFile(res.data, '当前报警列表(数据).xlsx')
    loading.close()
  }).catch(() => {
    loading.close()
  })
}
// 批量删除
const batchDeleteRow = () => {
  if (!multipleTable.value.length) {
    ElMessage.warning('请先选中数据')
    return
  }
  ElMessageBox.confirm(
    '确定要处置选中的数据吗？',
    '确认操作',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    },
  ).then(() => {
    batchDelete(multipleTable.value.map((item: any) => item.id)).then(() => {
      ElMessage.success('操作成功')
      // 清空多选
      multipleTable.value = []
      tableRef.value.clearMulti()
      fetchData()

    })
  })
}
// 跳转设备详情
const toDeviceDetail = (row: any) => {
  if (!row.devcode || !row.devTypeName) {
    ElMessage.warning('缺少设备关键信息')
    return
  }
  $router.push({
    name: 'DeviceManageDetail',
    params: {
      type: 'detail',
    },
    query: {
      row: JSON.stringify({
        devcode: row.devcode,
        deviceType: row.devTypeName,
        deviceTypeName: row.devTypeName,
        devTypeName: row.devTypeName,
      }),
    },
  })
}
// 跳转闸井管线详情
const goDetailWell = (row: any) => {
  // console.log(row, 'row')
  if (!row.ledgerNumber || !row.ledgerCode || !row.watchObject || !row.devcode || !row.devTypeName) {
    ElMessage.warning('缺少关键信息')
    return
  }
  const routerTo = (watchObjectName: string, row: any) => {
    const watchObject = {
      1: 'WellMonitorDetail',
      2: 'StationMonitorDetail',
      3: 'PipelineMonitorDetail',
    } as { [key: string]: string }
    // 判断是否有菜单权限
    const watchObjectAuth = {
      1: '/well',
      2: '/station/monitor',
      3: '/pipeline',
    } as { [key: string]: string }
    // console.log(watchObjectAuth[watchObjectName])
    if (!proxy.hasPerm(watchObjectAuth[watchObjectName])) {
      ElMessage.warning('没有对应权限菜单')
      return
    }
    $router.push({
      name: watchObject[watchObjectName],
      query: {
        id: row.ledgerId,
        deviceCode: row.devcode,
        typeName: row.devTypeName,
        row: JSON.stringify({
          id: row.ledgerId,
          typeName: row.devTypeName,
          deviceCode: row.devcode,
        }),
      },
    })
  }
  // 先找闸井或者管线或者场站
  if (row.watchObject === '1') {
    getWellListPage({ offset: 1, limit: 1, tagNumber: row.ledgerNumber, ledgerCode: row.ledgerCode }).then(res => {
      if (res.data.rows.length) {
        routerTo('1', { ledgerId: res.data.rows[0].id, devcode: row.devcode, typeName: row.devTypeName })
      }
      else {
        ElMessage.warning('未找到该位置信息')
      }
    })
  }
  else if (row.watchObject === '3') {
    getPipelineListPage({ offset: 1, limit: 1, devCode: row.devcode, pipeCode: row.ledgerCode, tagNumber: row.ledgerNumber }).then(res => {
      if (res.data.rows.length) {
        routerTo('3', { ledgerId: res.data.rows[0].id, devcode: row.devcode, typeName: row.devTypeName })
      }
      else {
        ElMessage.warning('未找到该位置信息')
      }
    })
  }

}
const cache = ref('')
onBeforeRouteLeave((to: any) => {
  keepSearchParams(to.path, 'CurrentAlarm')
  cache.value = tableFlag.value
  // 销毁ResizeObserver实例
  if (observer.value) {
    observer.value.disconnect()
  }
})
onActivated(() => {
  // console.log('需要还原页面')
  // 从编辑或者新增页面回来需要重新获取列表数据
  // $router.options.history.state.back 上一次路由地址
  if (!($router.options.history.state.back as string || '').includes('detail')) {
    // console.log('需要重新获取列表')
    fetchData()
  }
  if (cache.value === 'map') {
    // console.log('重置地图')
    tableFlag.value = 'normal'
    setTimeout(() => {
      switchMode('map')
      if (cacheRow.value.id) {
        detail(cacheRow.value)
      }
    })
  }
})
// 状态栏标签样式
const computedStyle = (name: string) => {
  const style = {
    padding: '0 9px',
    'font-size': '12px',
    'border-radius': '4px',
    height: '24px',
    display: 'display: inline-flex',
    'vertical-align': 'middle',
    'justify-content': 'center',
    // 'margin-left': '10px',
    'line-height': '1',
    'align-items': 'center',
    'box-sizing': 'border-box',
  } as { [key: string]: string }
  const handlerStyle = (color: string) => {
    style['color'] = color
    style['border'] = `0.5px solid rgba(${hexToRgb(color)}, 0.5)`
    style['background'] = `rgba(${hexToRgb(color)}, 0.08)`
  }
  if (name.includes('未读')) {
    handlerStyle('#f56c6c')
  }
  else if (name.includes('已读')) {
    handlerStyle('#0D76D4')
  }
  else if (name.includes('待现场确认') || name.includes('待处置')) {
    handlerStyle('#F7C948')
  }
  else if (name.includes('挂起')) {
    handlerStyle('#F58800')
  }
  else if (name.includes('已处置') || name.includes('已确认')) {
    handlerStyle('#67c23a')
  }
  return style
}
const isShowMore = ref(false)
const toggleSearchMore = () => {
  isShowMore.value = !isShowMore.value
}
</script>

<template>
  <!-- 布局 -->
  <app-container>
    <!-- 筛选条件 -->
    <search-area :need-clear="true" @search="fetchData" @clear="reset">
      <template #middle-btns>
        <el-button type="primary" class="search-btn" @click="toggleSearchMore">
          高级检索
        </el-button>
      </template>
      <search-item>
        <el-select v-model="listQuery.alarmCategory" placeholder="报警类别" clearable class="select" style="width: 162px;">
          <el-option v-for="item in alarmCategoryList" :key="item.id" :value="item.value" :label="item.name" />
        </el-select>
      </search-item>
      <search-item>
        <el-select v-model="listQuery.alarmTypeId" placeholder="报警类型" clearable class="select" style="width: 162px;">
          <el-option v-for="item in alarmTypeList" :key="item.id" :value="item.value" :label="item.name" />
        </el-select>
      </search-item>
      <search-item>
        <el-select v-model="listQuery.processStatus" placeholder="报警状态" clearable class="select" style="width: 162px;">
          <el-option v-for="item in alarmStatusList" :key="item.id" :value="item.value" :label="item.name" />
        </el-select>
      </search-item>
      <search-item v-show="!isShowMore">
        <el-checkbox v-model="listQuery.overtime" label="48小时未处置" />
      </search-item>
      <search-item v-show="isShowMore">
        <el-select v-model="listQuery.alarmLevel" placeholder="报警等级" clearable class="select" style="width: 162px;">
          <el-option v-for="item in alarmLevelList" :key="item.id" :value="item.value" :label="item.name" />
        </el-select>
      </search-item>
      <search-item v-show="isShowMore">
        <el-input v-model.trim="listQuery.position" placeholder="位置" clearable style="width: 162px;" />
      </search-item>
      <search-item v-show="isShowMore">
        <dept-select v-model="listQuery.deptId" placeholder="管理单位" :clearable="true" class="select"
          style="width: 162px;" />
      </search-item>
      <search-item v-show="isShowMore">
        <el-date-picker v-model="datetimerange" type="datetimerange" format="YYYY-MM-DD HH:mm:ss" :shortcuts="shortcuts"
          value-format="YYYY-MM-DD HH:mm:ss" range-separator="至" start-placeholder="报警开始时间" end-placeholder="报警结束时间"
          clearable />
      </search-item>
      <search-item v-show="isShowMore">
        <el-input v-model.trim="listQuery.devCode" placeholder="设备编号" clearable style="width: 162px;" />
      </search-item>
      <search-item v-show="isShowMore">
        <el-select v-model="listQuery.devTypeId" placeholder="设备类型" clearable class="select" style="width: 162px;">
          <el-option v-for="item in deviceTypeList" :key="item.id" :value="item.value" :label="item.name" />
        </el-select>
      </search-item>
      <search-item v-show="isShowMore">
        <el-checkbox v-model="listQuery.overtime" label="48小时未处置" />
      </search-item>
    </search-area>
    <div id="container-all" style="width: 100%;display: flex;">
      <!-- 表头标题 -->
      <!--  -->
      <div id="container-table" v-drag-width="320" class="container-table"
        :style="{ width: `${tableFlag === 'normal' ? '100%' : '65%'}` }">
        <table-container :is-config="true" config-title="current-alarm" :columns="columns"
          :config-columns="columnsConfig" :edit="editColumns">
          <template #btns-right>
            <!-- 操作 -->
            <div>
              <el-button v-if="proxy.hasPerm('/alarm/current/delete')" type="primary" @click="batchDeleteRow">
                批量处置
              </el-button>
              <el-button v-if="proxy.hasPerm('/alarm/current/export')" type="primary" @click="exportList">
                导出
              </el-button>
            </div>
          </template>
          <!-- 查询结果Table显示 -->
          <normal-table ref="tableRef" :data="list1" :total="total" :columns="columnsConfig" :query="listQuery"
            :list-loading="loadingTable" :height="tableHeight - 50 - 70"
            :is-multi="proxy.hasPerm('/alarm/current/delete')"
            :is-showmulti-select="proxy.hasPerm('/alarm/current/delete')" @change="changePage"
            @multiSelect="handleSelectionChange" @rowDbClick="rowClick">
            <template #preColumns>
              <el-table-column label="序号" width="80" align="center">
                <template #default="scope">
                  {{ (listQuery.offset - 1) * listQuery.limit + scope.$index + 1 }}
                </template>
              </el-table-column>
            </template>
            <template #isCustom="{ scope, column }">
              <!-- 设备编号 -->
              <span v-if="column.text === '设备编号'" class="pointer link" @click="toDeviceDetail(scope.row)">
                <el-tooltip v-if="scope.row.devTypeName" class="box-item" effect="dark"
                  :content="`${scope.row.devTypeName}(${scope.row.manufactureName})`" placement="top">
                  {{ scope.row[column.value] }}
                </el-tooltip>
                <template v-else>
                  {{ scope.row[column.value] }}
                </template>
              </span>
              <!-- 位置 -->
              <span v-if="column.text === '位置'" class="pointer link" @click="goDetailWell(scope.row)">
                {{ scope.row[column.value] }}
              </span>
              <!-- 状态 -->
              <span v-if="column.text === '状态'" :style="computedStyle(scope.row[column.value])">
                {{ scope.row[column.value] }}
              </span>
            </template>
            <template #columns>
              <el-table-column v-if="proxy.hasPerm('/alarm/current/detail')" label="操作" align="center" width="80">
                <template #default="scope">
                  <el-button type="primary" link size="small" @click="detail(scope.row)">
                    查看
                  </el-button>
                </template>
              </el-table-column>
            </template>
          </normal-table>
          <!-- 打开关闭地图模式 -->
          <div v-show="tableFlag !== 'normal'" id="mapMode" class="mapMode" :style="`height: ${tableHeight}px`">
            <!-- 打开 -->
            <div v-show="tableFlag === 'normal'" class="open" @click="switchMode('map')">
              <el-icon :size="30">
                <arrow-left-bold :size="30" />
              </el-icon>
            </div>
            <div v-show="tableFlag === 'map'" class="open" @click="switchMode('normal')">
              <el-icon :size="30">
                <arrow-right-bold :size="30" />
              </el-icon>
            </div>
          </div>
        </table-container>
      </div>
      <!-- 地图 -->
      <div v-if="tableFlag === 'map'" :style="`height: ${tableHeight}px`" class="map" id="map-container">
        <map-com ref="mapRef" :height="tableHeight - 10" :data="mapData" @refresh="fetchData(true)" />
      </div>
    </div>
  </app-container>
</template>

<style lang="scss">
.spread-circle1 {
  width: 50px;
  height: 50px;
  // background-color: #EE9611;
  border-radius: 50%;
  background: url("@/assets/images/red-spread.svg") no-repeat center center / cover;
}

.spread-circle2 {
  width: 50px;
  height: 50px;
  // background-color: #EE9611;
  border-radius: 50%;
  background: url("@/assets/images/orange-spread.svg") no-repeat center center / cover;
}
</style>

<style lang="scss" scoped>
.pointer {
  &:hover {
    cursor: pointer;
  }
}

.link {
  color: #0d76d4 !important;

  &:hover {
    text-decoration: underline !important;
  }
}

.table {
  width: 100%;
}

.table-map {
  width: 65%;
}

.map {
  width: 35%;
  // background-color: antiquewhite;
}

.container-table {
  position: relative;

  .mapMode {
    // background-color: aqua;
    width: 1.5%;
    //  height: 100vh;
    position: absolute;
    right: -6px;
    top: 50%;
    z-index: 9;
    transform: translateY(-50%);

    &:hover {
      // cursor: col-resize;

      .open,
      .close {
        display: block;
      }
    }

    .open {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      display: none;

      &:hover {
        cursor: pointer;
      }
    }
  }
}

.select {
  width: 100%;
}
</style>

<style>
.select {
  width: 162px !important;
}
</style>