<!--
  Description: 报警管理-信息窗体
  Author: 李亚光
  Date: 2024-09-10
 -->
<script lang="ts" setup name="infoWindow">
import pendingDialog from './pendingDialog.vue'
import remindDialog from './remindDialog.vue'
import monitorDataDialog from './monitorDataDialog.vue'
import gasDataDialog from './gasDataDialog.vue'
import processDialog from './processDialog.vue'
import handlerDialog from './handlerDialog.vue'
import { detailAlarm, getPrincipals } from '@/api/home/alarm/current'
import { deviceAlarmView } from '@/api/home/operation/alarm'
import { toHumpObject } from '@/utils/String'
import { hexToRgb } from '@/utils/String'
import { getDeviceListPage } from '@/api/home/device/device'
import { ElMessage } from 'element-plus'
import { alarmValue } from './dict'
const emits = defineEmits(['refresh'])
const dialogFormVisible = ref(false)
const overlay = ref()
const infoWindow = ref()
const info = ref<any>({
  alarmContent: '',
  alarmMsg: '',
  alarmCategoryName: '',
  alarmCategory: '',
  devcode: '',
  ts: '',
  position: '',
  deptName: '',
  responsibleDeptName: '',
  manageType: '',
  propertyOwner: '',
  status: '',
  processStatusName: '',
  devTypeName: '',
  confirmContent: '',
  processContent: '',
  processStatus: '',
  id: '',
  type: '',
})
const type = ref('')
const showDeviceTips = ref(false) // 是否展示设备tips
const deviceTips = ref({
  typeName: '',
  manufactureName: '',
})
const initDialog = (e: any) => {
  showDeviceTips.value = false
  deviceTips.value = {
    typeName: '',
    manufactureName: '',
  }
  console.log(e, '信息窗体接收的数据')
  overlay.value = e.overlay
  infoWindow.value = e.infoWindow
  dialogFormVisible.value = true
  type.value = e.type
  info.value = e.info;
  // e.map.setFitView()
  (type.value === 'data' ? detailAlarm : deviceAlarmView)(e.info.id).then((res) => {
    info.value = toHumpObject(res.data) as any
    info.value.alarmType = e.info.alarmType
    console.log(type.value, 'type.value')
    if (type.value === 'data') {
      console.log(type.value, 'type.value')
      // alarmValue   watchObject
      info.value.alarmContent = info.value.alarmCategory.includes('浓度') ? `${info.value.alarmValue}${info.value.watchObject === '2' ? 'PPM.M' : '%LEL'}` : (alarmValue[info.value.alarmValue] || '其他')
      // console.log(info.value.alarmContent, 'info.value.alarmContent')
    }
    // console.log(e.info.alarmType, 'e.info.alarmType')
    // console.log(info.value, 'info.value')
    // 获取责任人
    // getPrincipals(info.value.deptid).then((res) => {
    //   console.log(res.data, '责任人')
    // })
    // 查询设备类型和厂商
    getDeviceListPage({ offset: 1, limit: 1, devCode: info.value.devcode }).then(res => {
      if (res.data.rows.length) {
        showDeviceTips.value = true
        deviceTips.value.typeName = res.data.rows[0].deviceName || info.value.devTypeName
        deviceTips.value.manufactureName = res.data.rows[0].manufactureName
      }
      else {
        showDeviceTips.value = false
      }
    })
  })
}

// 查看数据
const dataRef = ref()
const gasRef = ref()
const viewData = () => {
  if (info.value.devTypeName.includes('燃气智能监测终端')) {
    dataRef.value.initDialog(info.value)
  }
  else {
    gasRef.value.initDialog(info.value)
  }
}
// 更多
const $router = useRouter()
const moreData = () => {
  $router.push({
    name: type.value === 'data' ? 'AlarmCurrentDetail' : 'operationAlarmDetail',
    query: {
      id: info.value.id,
      row: JSON.stringify(info.value),
    },
  })
}
// 设备详情
const goDevice = () => {
  if (!proxy.hasPerm('/device/manage/detail/menu')) {
    ElMessage.warning('没有对应权限菜单')
    return
  }
  $router.push({
    path: '/manage/detail',
    query: {
      id: info.value.ledgerId,
      row: JSON.stringify({
        ...info.value,
        id: info.value.ledgerId,
      }),
    },
  })
}
// 闸井详情
const goDetailWell = () => {
  // console.log(info.value, 'info.value')
  // ledgerId
  if (info.value.watchObject && info.value.devcode && info.value.ledgerId) {
    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 }
    if (!proxy.hasPerm(watchObjectAuth[info.value.watchObject])) {
      ElMessage.warning('没有对应权限菜单')
      return
    }
    $router.push({
      name: watchObject[info.value.watchObject],
      query: {
        id: info.value.ledgerId,
        deviceCode: info.value.devcode,
        typeName: info.value.devTypeName,
        row: JSON.stringify({
          id: info.value.ledgerId,
          typeName: info.value.devTypeName,
          deviceCode: info.value.devcode,
        }),
      },
    })
  }
  else {
    ElMessage.warning('缺少详细位置信息')
  }
}
// 提醒责任人
const remindRef = ref()
const remind = () => {
  remindRef.value.initDialog(info.value)
}
// 挂起
const pendingRef = ref()
const pending = () => {
  pendingRef.value.initDialog({ ...info.value, type: type.value })
}
// 查看流程
const processRef = ref()
const viewProcess = () => {
  processRef.value.initDialog(info.value)
}
// 报警处置
const handlerRef = ref()
const handler = () => {
  handlerRef.value.initDialog(info.value)
}

const refresh = () => {
  emits('refresh');
  (type.value === 'data' ? detailAlarm : deviceAlarmView)(info.value.id).then((res) => {
    info.value = toHumpObject(res.data) as any
    console.log(info.value, 'info.value')
  })
}
defineExpose({ initDialog, close })
const { proxy } = getCurrentInstance() as any
// 标签样式
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
}
</script>

<template>
  <div v-show="dialogFormVisible" class="container clearfix" @mouseleave="() => { }">
    <!-- 挂起 -->
    <pending-dialog ref="pendingRef" @refresh="refresh" />
    <!-- 提醒责任人 -->
    <remind-dialog ref="remindRef" @refresh="refresh" />
    <!-- 查看数据 -->
    <monitor-data-dialog ref="dataRef" @refresh="refresh" />
    <gas-data-dialog ref="gasRef" @refresh="refresh" />
    <!-- 流程图 -->
    <process-dialog ref="processRef" @refresh="refresh" />
    <!-- 是否误报 -->
    <handler-dialog ref="handlerRef" @refresh="refresh" />
    <!-- 头部 -->
    <div class="header">
      <span class="alarm-content" :title="info.alarmType">{{ info.alarmType }}</span>
      <span v-if="proxy.hasPerm(type === 'data' ? '/alarm/current/more' : '/alarm/device/more')" class="more"
        @click="moreData">>>更多</span>
    </div>
    <div class="content">
      <div v-show="type === 'device'" class="item">
        设备编号:
        <el-tooltip v-if="showDeviceTips" class="box-item" effect="dark"
          :content="`${deviceTips.typeName}(${deviceTips.manufactureName})`" placement="top">
          <span style="padding-left: 6px;" class="more" @click="goDevice">
            {{ info.devcode }}
          </span>
        </el-tooltip>
        <span v-else style="padding-left: 6px;" class="more" @click="goDevice">
          {{ info.devcode }}
        </span>
      </div>
      <div v-show="type === 'data'" class="item">
        报警类别:
        <span style="padding-left: 6px;" class="alarm-color">
          {{ info.alarmCategory }}
        </span>
      </div>
      <div class="item">
        报警原因:
        <span style="padding-left: 6px;" class="alarm-color">
          {{ info.alarmContent }}
        </span>
      </div>
      <div v-show="type === 'device'" class="item">
        设备类型:
        <span style="padding-left: 6px;">
          {{ info.devTypeName }}
        </span>
      </div>
      <div v-show="type === 'data'" class="item">
        报警设备:
        <el-tooltip v-if="showDeviceTips" class="box-item" effect="dark"
          :content="`${deviceTips.typeName}(${deviceTips.manufactureName})`" placement="top">
          <span style="padding-left: 6px;" class="more" @click="goDevice">{{ info.devcode }} </span>
        </el-tooltip>
        <span v-else style="padding-left: 6px;" class="more" @click="goDevice">{{ info.devcode }} </span>
        <!-- v-if="(info.devTypeName === '燃气智能监测终端' || info.devTypeName === '管网哨兵' || info.devTypeName === '液位检测仪' || info.devTypeName === '井盖监测仪') && proxy.hasPerm('/alarm/current/data')" -->
        <el-button v-if="info.alarmCategory?.includes('浓度') && proxy.hasPerm('/alarm/current/data')" type="primary"
          size="small" style="margin-left: 6px;" @click="viewData">
          查看数据
        </el-button>
      </div>
      <div class="item">
        报警时间:
        <span style="padding-left: 6px;">
          {{ info.alarmTime }}
        </span>
      </div>
      <div v-if="type === 'device'" class="item">
        位置:
        <span style="padding-left: 6px;">
          <!-- {{ `${info.ledgerCode} ${info.ledgerCode ? '|' : ''}${info.ledgerName}` }} -->
          {{ info?.address }}
        </span>
      </div>
      <div v-if="type === 'data'" class="item">
        位置:
        <span style="padding-left: 6px;" class="more" @click="goDetailWell">
          {{ info?.address }}
          <!-- {{ `${info.ledgerNumber} ${info.ledgerNumber ? '|' : ''}${info.ledgerName}` }} -->
        </span>
      </div>
      <div class="item">
        详细地址:
        <span style="padding-left: 6px;">
          {{ info.position }}
        </span>
      </div>
      <!-- <div>详细地址:{{ info.ledgerNumber }}</div> -->
      <div class="item">
        管理单位:
        <span style="padding-left: 6px;">
          {{ info.deptName }}
        </span>
      </div>
      <div class="item">
        产权单位:
        <span style="padding-left: 6px;">
          {{ info.propertyOwner }}
        </span>
      </div>
      <div class="item">
        管理方式:
        <span style="padding-left: 6px;">
          {{ info.manageType }}
        </span>
      </div>
      <div class="item">
        负责人:
        <span style="padding-left: 6px;">
          {{ info.personName }}
        </span>
      </div>
      <div class="item">
        状态:
        <span :style="computedStyle(info.processStatusName)">
          {{ info.processStatusName }}
        </span>
      </div>
      <div v-if="type === 'data' && info.processStatusName !== '已读' && Number(info.processStatus) > 4" class="item">
        现场确认情况:
        <span style="padding-left: 6px;">
          {{ info.confirmContent }}
        </span>
        <el-button v-if="type === 'data' && proxy.hasPerm('/alarm/current/process')" size="small"
          style="padding-left: 6px;" @click="viewProcess">
          流程图
        </el-button>
      </div>
      <div class="item" v-if="info.processStatusName !== '已读' && Number(info.processStatus) >= 6">
        处置情况:
        <span style="padding-left: 6px;">
          {{ type === 'data' ? info.processContent : info.processStatusName }}
        </span>
      </div>
      <div v-if="type === 'device'" class="item">
        处置时间:
        <span style="padding-left: 6px;">
          {{ info.processTime }}
        </span>
      </div>
    </div>
    <div class="footer">
      <el-button v-if="(Number(info.processStatus) < 4 && type === 'data') && proxy.hasPerm('/alarm/current/remind')"
        size="small" @click="remind">
        提醒责任人
      </el-button>
      <el-button
        v-if="(type === 'device' && (info.processStatusName === '待处置' || info.processStatusName === '挂起' || info.processStatusName === '已读' || info.processStatusName === '未读')) && proxy.hasPerm('/alarm/device/handler')"
        size="small" @click="handler">
        报警处置
      </el-button>
      <!-- (Number(info.processStatus) <= 3 || (type === 'device' && info.processStatusName === '待处置') || info.processStatusName === '挂起') && -->
      <el-button
        v-if="proxy.hasPerm(type === 'device' ? '/alarm/device/pending' : '/alarm/current/pending') && !info.confirmContent?.includes('完成')"
        type="primary" size="small" @click="pending">
        挂起
      </el-button>
    </div>
  </div>
</template>

<style lang="scss" scoped>
::v-deep(.el-descriptions__cell) {
  padding: 0 !important;

  ::v-deep(.is-bordered-label) {
    width: 100px !important;
  }

  ::v-deep(.el-descriptions__label) {
    width: 100px !important;
  }

  ::v-deep(.el-descriptions__content) {
    width: 170px !important;
  }

  ::v-deep(.is-bordered-content) {
    width: 170px !important;
  }
}

.alarm-color {
  color: #f56c6c;
}

.nowrap {
  width: 170px;
  white-space: nowrap;

  /* 确保文本在一行内显示 */
  overflow: hidden;

  /* 超出容器部分隐藏 */
  text-overflow: ellipsis;

  /* 文字溢出显示省略号 */
}

.container {
  width: 270px;
  padding: 10px;
  background: rgba($color: #feffff, $alpha: 100%);
  position: relative;
  color: #464444;
  font-size: 14px;
  border-radius: 4px;

  .header {
    display: flex;
    justify-content: space-between;
    font-size: 16px;

    .alarm-content {
      width: 75%;
      white-space: nowrap;

      /* 确保文本在一行内显示 */
      overflow: hidden;

      /* 超出容器部分隐藏 */
      text-overflow: ellipsis;

      /* 文字溢出显示省略号 */
    }
  }

  .more {
    color: #0d76d4;

    &:hover {
      cursor: pointer;
      text-decoration: underline;
    }
  }

  .item {
    margin: 5px 0;
  }

  .footer {
    margin-top: 10px;
  }
}

.clearfix::after {
  content: "";
  display: table;
  clear: both;
}
</style>