<!--
  Description: 场站管理-信息窗体
  Author: 李亚光
  Date: 2024-07-18
 -->
<script lang="ts" setup name="infoWindow">
import { getTemporaryDetail } from '@/api/home/temporary/temporary'
import { getGasData } from '@/api/home/well/well'
import { getDictByCode } from '@/api/system/dict'
// import gasDialog from '@/views/home/well/components/gasDialog.vue'
import gasDialog from './gasDataDialog.vue'
import dayjs from 'dayjs'
const dialogFormVisible = ref(false)
const overlay = ref()
const infoWindow = ref()
// 基本数据
const baseInfo = ref({
  deviceTypeName: '',
  deviceCode: '',
  tagNumber: ''
})
const loading = ref(true)
// 详细信息
const detailInfo = ref<{ [key: string]: string }>({})
const locationTypeList = ref<{ id: string; name: string; value: string }[]>([])
const descriptionListTop = ref([
  {
    text: '管理单位',
    value: 'deptName',
    align: 'center'
  },

  {
    text: '设备编号',
    value: 'devcode',
    align: 'center'
  },
  {
    text: '设备类型',
    value: 'typeName',
    align: 'center',
  },
  {
    text: '安装日期',
    value: 'installDate',
    align: 'center',
  },
  {
    text: '厂商',
    value: 'manufactureName',
    align: 'center'
  },
  {
    text: '详细位置',
    value: 'position',
    align: 'center'
  },
])
// 描述列表数据
const descriptionsList = ref([

  // {
  //   text: '负责人',
  //   value: 'personName',
  //   align: 'center'
  // },
  // {
  //   text: '在用状态',
  //   value: 'onState',
  //   align: 'center'
  // },
  {
    text: '监控状态',
    value: 'monitorStateName',
    align: 'center'
  },
  // {
  //   text: '设备运行状态',
  //   value: 'runStatus',
  //   align: 'center'
  // },
  // {
  //   text: '',
  //   value: '',
  //   align: 'center'
  // }
  // {
  //   text: '设备编号',
  //   value: 'devcode',
  //   align: 'center',
  // },
  // {
  //   text: '设备类型',
  //   value: 'typeName',
  //   align: 'center',
  // },
  // {
  //   text: '设备型号',
  //   value: 'modelName',
  //   align: 'center',
  // },
  // {
  //   text: '管理方式',
  //   value: 'manageType',
  //   align: 'center',
  // },
])
// 初始化
const gasData = ref<any[]>([])
const rowData = ref()
const initDialog = (e: any) => {
  // console.log(e, '信息窗体接收的数据')
  overlay.value = e.overlay
  infoWindow.value = e.infoWindow
  baseInfo.value = e.info.row
  dialogFormVisible.value = true
  if (e.map) {
    e.map.setZoom(15)
  }
  // 获取详细信息
  detailInfo.value = e.info.row
  rowData.value = e.info.row
  loading.value = true
  gasData.value = []
  if (
    rowData.value.deviceTypeName?.includes('燃气智能监测终端') ||
    rowData.value.deviceTypeName?.includes('管网哨兵') ||
    rowData.value.deviceTypeName?.includes('智能警示桩')
  ) {
    // if (descriptionsList.value[descriptionsList.value.length - 1].text === '燃气浓度') { return }
    descriptionsList.value = descriptionsList.value.filter(
      (item: any) => item.text !== '燃气浓度'
    )
    descriptionsList.value.push({
      text: '燃气浓度',
      value: 'manageType',
      align: 'center'
    })
  } else {
    descriptionsList.value = descriptionsList.value.filter(
      (item: any) => item.text !== '燃气浓度'
    )
  }
  // console.log(e.info.row, 'e.info.row')
  getTemporaryDetail({
    id: e.info.row.id,
    devcode: e.info.row.deviceCode
  })
    .then(res => {
      loading.value = false
      detailInfo.value = res.data
      if (res.data.locationCategory) {
        detailInfo.value.locationCategoryName = locationTypeList.value.filter(citem => citem.value === res.data.locationCategory)[0]?.name || ''
      }
      if (!(rowData.value.deviceTypeName?.includes('燃气智能监测终端') || rowData.value.deviceTypeName?.includes('管网哨兵') || rowData.value.deviceTypeName?.includes('智能警示桩'))) {
        return
      }
      if(res.data.installDate) {
      detailInfo.value.installDate = dayjs(res.data.installDate).format('YYYY-MM-DD')
     }
      //
      if (detailInfo.value.onlineState) {
        // detailInfo.value.onlineState  = detailInfo.value.onlineState === '0' ? '3' : detailInfo.value.onlineState
        const onLineDict = {
          '1': '正常',
          '0': '故障(离线)',
          '2': '报警',
          '3': '故障',
        } as { [key: string]: string }
        detailInfo.value.monitorStateName = onLineDict[detailInfo.value.onlineState] || ' '
      }
      // 获取燃气浓度
      getGasData({
        wellId: rowData.value.id,
        devCode: rowData.value.deviceCode
      }).then(res => {
        gasData.value = []
        for (const i in res.data) {
          if (res.data[i].devTypeName?.includes('燃气') || res.data[i].devTypeName?.includes('管网哨兵') || res.data[i].devTypeName?.includes('智能警示桩')) {
            gasData.value.push({
              name: res.data[i].devTypeName,
              devcode: res.data[i].devcode,
              state: res.data[i].state,
              value: res.data[i].latestValue || '-',
              offDays: res.data[i].offDays,
              alarmContent: res.data[i].alarmContent,
              text:
                res.data[i].devTypeName?.includes('燃气') || res.data[i].devTypeName?.includes('管网哨兵') || res.data[i].devTypeName?.includes('智能警示桩')
                  ? '燃气浓度'
                  : res.data[i].devTypeName?.includes('液位')
                    ? '液位状态'
                    : res.data[i].devTypeName?.includes('井盖')
                      ? '井盖状态'
                      : '',
              unit: res.data[i].devTypeName.includes('燃气') || res.data[i].devTypeName?.includes('管网哨兵') || res.data[i].devTypeName?.includes('智能警示桩') ? '%LEL' : '',
              stateName:
                res.data[i].state === '1'
                  ? '正常'
                  : res.data[i].state === '0'
                    ? '离线'
                    : res.data[i].state === '2'
                      ? '异常'
                      : ''
            })

          }
        }
        gasData.value = gasData.value.filter(item => (item.name === rowData.value.deviceTypeName || rowData.value.deviceTypeName?.includes(item.name) || item.name?.includes(rowData.value.deviceTypeName)) && item.devcode === detailInfo.value.devcode)
        if (gasData.value.length) {
          detailInfo.value.offDays = gasData.value[0].offDays
          detailInfo.value.alarmContent = gasData.value[0].alarmContent
          detailInfo.value.runStatus = gasData.value[0].stateName
        }
      })
    })
    .catch(() => {
      loading.value = false
    })
}

// 关闭
const close = () => {
  infoWindow.value?.close()
}
// 详情
const $router = useRouter()
const $route = useRoute()
const goDetail = () => {
  $router.push({
    // name: 'TemporaryMonitorDetail',
    path: '/temporary/detail',
    query: {
      id: rowData.value.id,
      deviceCode: rowData.value.deviceCode,
      typeName: rowData.value.deviceTypeName
    }
  })
}
// 燃气数据-更多
const gasRef = ref()
const more = () => {
  // detailInfo.value
  gasRef.value.initDialog(rowData.value)
}
const fetchDict = async () => {
  const res = await getDictByCode('locationType')
  locationTypeList.value = res.data
}
fetchDict()
defineExpose({ initDialog, close })
</script>

<template>
  <div v-show="dialogFormVisible" class="container clearfix" @mouseleave="() => { }">
    <gas-dialog ref="gasRef" />
    <div class="header">
      <div style="display: flex; align-items: center">
        <el-tooltip class="box-item" effect="dark"
          :content="`${detailInfo.tagNumber} | ${detailInfo.locationCategoryName}`" placement="top">
          <span class="title">{{ baseInfo.tagNumber }} | {{ detailInfo.locationCategoryName }}
          </span>
        </el-tooltip>
        <el-button style="margin-left: 10px" size="small" @click="goDetail">
          详情
        </el-button>
      </div>
      <span class="close" @click="close">×</span>
    </div>
    <div v-loading="loading" class="body">
      <div class="descriptions">
        <!--  -->
        <div v-for="item in descriptionListTop" :key="item.text" class="descriptions-item"
          :style="{ width: item.text === '详细位置' || item.text === '管理单位' ? '95%' : '48%' }">
          <div class="label" :style="{ width: item.text === '详细位置' || item.text === '管理单位' ? '16%' : '34%' }">{{
            item.text }}</div>
          <div class="value" style="margin-left: 10px"
            :style="{ width: item.text === '详细位置' || item.text === '管理单位' ? '80%' : '68%' }"
            :title="item.text === '详细位置' ? detailInfo[item.value] : ''"
            > {{
              detailInfo[item.value] || '' }}</div>
        </div>
        <div v-for="item in descriptionsList" :key="item.text" class="descriptions-item"
          :class="item.text === '燃气浓度' ? 'last-value' : ''" :style="{ width: item.text === '设备运行状态' ? '95%' : '48%' }">
          <div class="label" :class="item.text === '燃气浓度' ? 'last-label' : ''"
            :style="{ width: item.text === '设备运行状态' ? '18%' : '34%' }">
            {{ item.text }}
          </div>
          <div v-if="
            item.text !== '燃气浓度' &&
            item.text !== '监控状态' &&
            item.text !== '设备运行状态'
          " class="value" :title="detailInfo[item.value] || ''" style="margin-left: 10px">
            {{ detailInfo[item.value] || '' }}
          </div>
          <!-- 设备运行状态 -->
          <div v-if="item.text === '设备运行状态'" class="value" :title="detailInfo[item.value] || ''">
            <span style="margin-left: 10px" :style="{
              color:
                detailInfo[item.value] === '正常'
                  ? '#3cc53c'
                  : detailInfo[item.value]?.includes('故障') || detailInfo[item.value]?.includes('离线')
                    ? 'rgb(238, 182, 78)'
                    : detailInfo[item.value] === '异常'
                      ? 'red'
                      : ''
            }">{{ (detailInfo[item.value] || '') === '离线' ? '故障(离线)' :
              (detailInfo[item.value] || '') }}</span>
            <span v-if="detailInfo[item.value] === '离线' && detailInfo.offDays" style="color: rgb(238, 182, 78);">{{
              `(离线天数:${detailInfo.offDays}天)` }}</span>
            <span v-if="detailInfo[item.value] === '异常' && detailInfo.alarmContent" style="color: red">{{
              `(${detailInfo.alarmContent})` }}</span>
          </div>
          <!-- 监控状态 -->
          <div v-if="item.text === '监控状态'" class="value" :title="detailInfo[item.value] || ''"
            style="margin-left: 10px">
            <span :style="{
              color:
                detailInfo[item.value] === '正常'
                  ? '#3cc53c'
                  : detailInfo[item.value]?.includes('故障') || detailInfo[item.value]?.includes('离线')
                    ? 'rgb(238, 182, 78)'
                    : detailInfo[item.value] === '异常'
                      ? 'red'
                      : detailInfo[item.value] === '未监控'
                        ? '#a39f9f'
                        : '#a39f9f'
            }">{{ detailInfo[item.value] || '' }}</span>
            <span v-if="detailInfo[item.value] === '离线' && detailInfo.offDays" style="color: rgb(238, 182, 78);">{{
              `(离线天数:${detailInfo.offDays}天)` }}</span>
            <span v-if="detailInfo[item.value] === '异常' && detailInfo.alarmContent" style="color: red">{{
              `(${detailInfo.alarmContent})` }}</span>
          </div>

          <!-- 燃气浓度 -->
          <div v-if="item.text === '燃气浓度' && gasData.length" class="value" style="width: 80%;margin-left: 10px;">
            <div v-for="item in gasData" v-show="item.text" :key="item.name">
              <!-- {{ item.name }} : -->
              <span :class="`${item.state === '2' ? 'error' : ''}`">
                {{
                  item.name.includes('燃气') || item.name.includes('哨兵') || item.name.includes('智能警示桩')
                    ? item.value
                    : item.stateName
                }}</span>
              <span v-if="item.name.includes('燃气') || item.name.includes('哨兵') || item.name.includes('智能警示桩')"
                :class="`${item.state === '2' ? 'error' : ''}`">
                {{ item.unit }}</span>
              <el-button v-if="item.name.includes('燃气') || item.name.includes('哨兵') || item.name.includes('智能警示桩')"
                size="small" style="margin-left: 10px" @click="more">
                更多
              </el-button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.error {
  color: red !important;
}

.container {
  width: 600px;
  background: #fff;
  position: relative;
  border-radius: 8px;
  border: 1px solid #e4e7ed;
  overflow: hidden;
  box-shadow: 0 0 12px rgb(0 0 0 / 12%);

  .header {
    float: right;
    background-color: #0d76d4;
    width: 100%;
    display: flex;
    justify-content: space-between;
    padding: 8px 10px;
    align-items: center;
    color: #fff;
    position: relative;
    z-index: 901;

    .title {
      font-weight: 700;
      display: inline-block;
      width: 90%;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }

    .close {
      font-size: 22px;
      font-weight: 700;
      text-align: right;
      padding-right: 10px;

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

  .body {
    width: 100%;
    padding-left: 10px;

    .descriptions {
      width: 100%;
      display: flex;
      flex-wrap: wrap;
      box-sizing: border-box;
      padding: 6px 0;

      .last-value {
        width: 100% !important;
      }

      .descriptions-item {
        width: 48%;
        margin: 4px 5px;
        box-sizing: border-box;
        display: flex;
        padding: 0 3px;

        .label-no {
          width: 28% !important;
        }

        .last-label {
          width: 16% !important;
        }

        .label {
          width: 34%;
          box-sizing: border-box;
          padding: 0 1px;
          font-size: 15px;
          text-align: justify;
          text-align-last: justify;
        }

        .value {
          padding-left: 5px;
          width: 68%;
          box-sizing: border-box;
          white-space: nowrap;
          font-size: 14px;
          color: #a39f9f;

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

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

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