<!--
  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 { detailAlarm } from '@/api/home/alarm/current'
import { toHumpObject } from '@/utils/String'
const dialogFormVisible = ref(false)
const overlay = ref()
const infoWindow = ref()
const info = ref({
  alarmContent: '',
  alarmMsg: '',
  alarmCategoryName: '',
  alarmCategory: '',
  devcode: '',
  ts: '',
  position: '',
  deptName: '',
  responsibleDeptName: '',
  manageType: '',
  propertyOwner: '',
  status: '',
  processStatusName: '',
  devTypeName: '',
  confirmContent: '',
  processContent: '',
  processStatus: '',
  id: '',
})
const initDialog = (e: any) => {
  console.log(e, '信息窗体接收的数据')
  overlay.value = e.overlay
  infoWindow.value = e.infoWindow
  dialogFormVisible.value = true
  info.value = e.info
  detailAlarm(e.info.id).then((res) => {
    info.value = toHumpObject(res.data) as any
  })
}

// 查看数据
const dataRef = ref()
const viewData = () => {
  dataRef.value.initDialog(info.value)
}
// 更多
const $router = useRouter()
const moreData = () => {
  $router.push({
    name: 'AlarmCurrentDetail',
    query: {
      id: info.value.id,
      row: JSON.stringify(info.value),
    },
  })
}
// 提醒责任人
const remindRef = ref()
const remind = () => {
  remindRef.value.initDialog(info.value)
}
// 挂起
const pendingRef = ref()
const pending = () => {
  pendingRef.value.initDialog(info.value)
}
// 查看流程
const processRef = ref()
const viewProcess = () => {
  processRef.value.initDialog(info.value)
}
defineExpose({ initDialog, close })
</script>

<template>
  <div v-show="dialogFormVisible" class="container clearfix" @mouseleave="() => { }">
    <!-- 挂起 -->
    <pending-dialog ref="pendingRef" />
    <!-- 提醒责任人 -->
    <remind-dialog ref="remindRef" />
    <!-- 查看数据 -->
    <monitor-data-dialog ref="dataRef" />
    <!-- 流程图 -->
    <process-dialog ref="processRef" />
    <!-- 头部 -->
    <div class="header">
      <span>{{ info.alarmContent }}</span>
      <span class="more" @click="moreData">>>更多</span>
    </div>
    <div class="content">
      <div class="item">
        报警类别:
        <span style="padding-left: 6px;">
          {{ info.alarmCategory }}
        </span>
      </div>
      <div class="item">
        报警原因:
        <span style="padding-left: 6px;">
          {{ info.alarmMsg }}
        </span>
      </div>
      <div class="item">
        报警设备:
        <span style="padding-left: 6px;">{{ info.devcode }} </span>
        <el-button
          v-if="info.devTypeName === '燃气智能监测终端' || info.devTypeName === '液位检测仪' || info.devTypeName === '井盖监测仪'"
          size="small" style="margin-left: 6px;" @click="viewData"
        >
          查看数据
        </el-button>
      </div>
      <div class="item">
        报警时间:
        <span style="padding-left: 6px;">
          {{ info.ts }}
        </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.propertyOwner }}
        </span>
      </div> -->
      <div class="item">
        状态:
        <span style="padding-left: 6px;">
          {{ info.processStatusName }}
        </span>
      </div>
      <div class="item">
        现场确认情况:
        <span style="padding-left: 6px;">
          {{ info.confirmContent }}
        </span>
        <el-button size="small" style="padding-left: 6px;" @click="viewProcess">
          流程图
        </el-button>
      </div>
      <div class="item">
        处置情况:
        <span style="padding-left: 6px;">
          {{ info.processContent }}
        </span>
      </div>
    </div>
    <div class="footer">
      <el-button v-if="Number(info.processStatus) < 4" size="small" @click="remind">
        提醒责任人
      </el-button>
      <el-button v-if="Number(info.processStatus) <= 3" 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;

    .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>