<!--
  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 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'
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 initDialog = (e: any) => {
  console.log(e, '信息窗体接收的数据')
  overlay.value = e.overlay
  infoWindow.value = e.infoWindow
  dialogFormVisible.value = true
  type.value = e.type
  info.value = e.info;

  (type.value === 'data' ? detailAlarm : deviceAlarmView)(e.info.id).then((res) => {
    info.value = toHumpObject(res.data) as any
    console.log(info.value, 'info.value')
    // 获取责任人
    // getPrincipals(info.value.deptid).then((res) => {
    //   console.log(res.data, '责任人')
    // })
  })
}

// 查看数据
const dataRef = ref()
const viewData = () => {
  dataRef.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 = () => {
  $router.push({
    path: '/manage/detail',
    query: {
      id: info.value.ledgerId,
      row: JSON.stringify({
        ...info.value,
        id: info.value.ledgerId,
      }),
    },
  })
}
// 提醒责任人
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
</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" />
    <!-- 流程图 -->
    <process-dialog ref="processRef" @refresh="refresh" />
    <!-- 是否误报 -->
    <handler-dialog ref="handlerRef" @refresh="refresh" />
    <!-- 头部 -->
    <div class="header">
      <span class="alarm-content" :title="info.alarmContent">{{ info.alarmContent }}</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">
        设备编号:
        <span style="padding-left: 6px;" class="more" @click="goDevice">
          {{ info.devcode }}
        </span>
      </div>
      <div v-show="type === 'data'" class="item">
        报警类别:
        <span style="padding-left: 6px;">
          {{ info.alarmCategory }}
        </span>
      </div>
      <div class="item">
        报警原因:
        <span style="padding-left: 6px;">
          {{ 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">
        报警设备:
        <span style="padding-left: 6px;">{{ info.devcode }} </span>
        <el-button
          v-if="(info.devTypeName === '燃气智能监测终端' || info.devTypeName === '液位检测仪' || info.devTypeName === '井盖监测仪') && proxy.hasPerm('/alarm/current/data')"
          size="small" style="margin-left: 6px;" @click="viewData"
        >
          查看数据
        </el-button>
      </div>
      <div class="item">
        报警时间:
        <span style="padding-left: 6px;">
          {{ info.ts }}
        </span>
      </div>
      <div v-if="type === 'device'" class="item">
        位置:
        <span style="padding-left: 6px;">
          {{ `${info.ledgerCode} ${info.ledgerCode ? '|' : ''}${info.ledgerName}` }}
        </span>
      </div>
      <div v-if="type === 'data'" class="item">
        位置:
        <span style="padding-left: 6px;">
          {{ `${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.principal }}
        </span>
      </div>
      <div class="item">
        状态:
        <span style="padding-left: 6px;">
          {{ info.processStatusName }}
        </span>
      </div>
      <div v-if="type === 'data'" 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">
        处置情况:
        <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;
  }
}

.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: #3d7eff;

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

  .item {
    margin: 5px 0;
  }

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

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