<!--
  Description: 事件大屏-信息窗体
  Author: 李亚光
  Date: 2024-07-18
 -->
<script lang="ts" setup name="infoWindow">
import { detailAlarm } from '@/api/home/alarm/current'
import { toHumpObject } from '@/utils/String'
import { hexToRgb } from '@/utils/String'
import { ElMessage } from 'element-plus'
import monitorDataDialog from '@/views/home/alarm/current/components/monitorDataDialog.vue'
import gasDataDialog from '@/views/home/alarm/current/components/gasDataDialog.vue'
import processDialog from '@/views/home/alarm/current/components/processDialog.vue'
const dialogFormVisible = ref(false)
const overlay = ref()
const infoWindow = ref()
// 弹窗展示数据信息
const info = ref<any>({
  alarmMsg: '',
  alarmTime: '',
  alarmContent: '',
  position: '',
  address: '',
})
// 弹窗展示的内容
// 初始化
const loading = ref(true)
const initDialog = (e: any) => {
  console.log(e, '报警信息')
  overlay.value = e.overlay
  infoWindow.value = e.infoWindow
  info.value = e.info
  dialogFormVisible.value = true
  // 获取报警信息
  loading.value = true
  detailAlarm(info.value.id).then((res) => {
    info.value = toHumpObject(res.data)
    console.log(info.value, 'info.value')
    info.value.alarmType = e.info.alarmType
    loading.value = false
  }).catch(() => {
    loading.value = false
  })
}
defineExpose({ initDialog })
// 关闭
const close = () => {
  infoWindow.value.close()
}
const $router = useRouter()
const detail = () => {
  $router.push({
    name: 'AlarmCurrent',
    query: {
      row: JSON.stringify({ ...info.value, id: info.value.id, alarmId: info.value.id }),
    },
  })
}
// 标签样式
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) {
    return style
  }
  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('已确认')|| name?.includes('处置中')) {
    handlerStyle('#67c23a')
  }
  return style
}
// 查看数据
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 { proxy } = getCurrentInstance() as any
const goDevice = () => {
  if (!proxy.hasPerm('/device/manage')) {
    ElMessage.warning('没有对应权限菜单')
    return
  }
  $router.push({
    path: '/manage/detail',
    query: {
      id: info.value.ledgerId,
      row: JSON.stringify({
        ...info.value,
        id: info.value.ledgerId,
      }),
    },
  })
}
// 查看流程
const processRef = ref()
const viewProcess = () => {
  processRef.value.initDialog(info.value)
}
</script>

<template>
  <div v-show="dialogFormVisible" class="container" @mouseleave="() => { }">
    <!-- 查看数据 -->
    <monitor-data-dialog ref="dataRef" />
    <gas-data-dialog ref="gasRef" />
    <!-- 流程图 -->
    <process-dialog ref="processRef" />
    <div class="header">
      <div style="display: flex;align-items: center;">
        <div class="icon-alarm" />
        <div class="title">
          {{ info?.alarmType }}
        </div>
      </div>
      <span class="close11" @click="close">×</span>
    </div>
    <div v-loading="loading" class="contnt-alarm">
      <div class="item-alarm">
        <div class="alarm-name">
          报警原因:
        </div>
        <div class="alarm-value" style="color: red;">
          {{ info?.alarmContent }}
        </div>
      </div>
      <div class="item-alarm">
        <div class="alarm-name">
          报警设备:
        </div>
        <div class="alarm-value">
          <span class="more" @click="goDevice">{{ info?.devcode }}</span>
          <el-button v-if="info.alarmType?.includes('浓度')" type="primary" size="small" style="margin-left: 6px;"
            @click="viewData">
            查看数据
          </el-button>
        </div>
      </div>
      <div class="item-alarm">
        <div class="alarm-name">
          报警时间:
        </div>
        <div class="alarm-value">
          {{ info?.alarmTime }}
        </div>
      </div>
      <div v-if="info.alarmType?.includes('浓度')" class="item-alarm">
        <div class="alarm-name">
          位置:
        </div>
        <div class="alarm-value">
          <!-- {{ info?.ledgerNumber }} {{ info?.ledgerName }} -->
          {{ info?.address }}
        </div>
      </div>
      <div class="item-alarm">
        <div class="alarm-name">
          详细地址:
        </div>
        <div class="alarm-value">
          {{ info?.position }}
        </div>
      </div>
      <div class="item-alarm">
        <div class="alarm-name">
          管理单位:
        </div>
        <div class="alarm-value">
          {{ info?.deptName }}
        </div>
      </div>
      <div class="item-alarm">
        <div class="alarm-name">
          产权单位:
        </div>
        <div class="alarm-value">
          {{ info?.propertyOwner }}
        </div>
      </div>
      <div class="item-alarm">
        <div class="alarm-name">
          管理方式:
        </div>
        <div class="alarm-value">
          {{ info?.manageType }}
        </div>
      </div>
      <div class="item-alarm">
        <div class="alarm-name">
          负责人:
        </div>
        <div class="alarm-value">
          {{ info?.personName }}
        </div>
      </div>
      <div class="item-alarm">
        <div class="alarm-name">
          状态:
        </div>
        <div class="alarm-value">
          <span :style="computedStyle(info.processStatusName)">
            {{ info.processStatusName }}
          </span>
        </div>
      </div>
      <div v-if="info.processStatusName !== '已读' && Number(info.processStatus) > 4" class="item-alarm">
        <div class="alarm-name">
          现场确认:
        </div>
        <div class="alarm-value">
          {{ info.confirmContent }}
          <el-button size="small"
          style="padding-left: 6px;" @click="viewProcess">
          流程图
        </el-button>
        </div>
      </div>
      <div v-if="info.processStatusName !== '已读' && Number(info.processStatus) >= 6" class="item-alarm">
        <div class="alarm-name">
          处置情况:
        </div>
        <div class="alarm-value">
          {{ info?.processContent }}
        </div>
      </div>
      <!-- <div class="btns">
        <el-button size="small" @click="detail">
          查看
        </el-button>
        <el-button size="small" style="margin-left: 15px;" @click="close">
          关闭
        </el-button>
      </div> -->
    </div>
  </div>
</template>

<style lang="scss" scoped>
::v-deep(.el-loading-mask) {
  background-color: rgba($color: #0b0b0f, $alpha: 95%);
}

.more {
  color: #0d76d4;

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

.container {
  width: 390px;
  // padding: 0 10px;
  background: rgba($color: #0d263b, $alpha: 95%);
  // border: 2px solid #79b5e6;
  position: relative;

  .header {
    background-color: #ee6c7c;
    padding: 0 10px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .icon-alarm {
      width: 25px;
      height: 25px;
      background: url("@/assets/images/dashboard/alarm-icon.png") no-repeat center / cover;
    }

    .title {
      padding-left: 10px;
      color: #fff;
    }

    .close11 {
      font-size: 18px;
      color: #fff;

      &:hover {
        cursor: pointer;
        color: #ccc;
      }
    }
  }

  .contnt-alarm {
    padding: 10px;

    .item-alarm {
      display: flex;
      color: #fff;
      padding: 3px 0;

      .alarm-name {
        padding-left: 10px;
        width: 25%;
        box-sizing: border-box;
        text-align: justify;
        text-align-last: justify;
      }

      .alarm-value {
        padding-left: 10px;
        padding-right: 10px;
        box-sizing: border-box;
        // .alarm-name{
        width: 75%;
        // }
      }
    }

    .btns {
      width: 100%;
      margin-top: 10px;
      display: flex;
      justify-items: center;
      // justify-content: center;
      justify-content: end;
    }
  }
}
</style>