<!--
  Description: 闸井管理-信息窗体
  Author: 李亚光
  Date: 2024-07-18
 -->
<script lang="ts" setup name="infoWindow">
// import gasDialog from './gasDialog.vue'
import gasDialog from '@/views/home/temporary/components/gasDataDialog.vue'
import { getGasData, getWellDetail } from '@/api/home/well/well'
const dialogFormVisible = ref(false)
const overlay = ref()
const infoWindow = ref()

// 基本数据
const baseInfo = ref({
  ledgerCode: '', // 闸井编号
  ledgerName: '', // 闸井名称
  lngGaode: '',
  latGaode: '',
  tagNumber: '',
})
const gasData = ref<any>([])
// 详细信息
const detailInfo = ref<{ [key: string]: string }>({})
// 描述列表数据
const descriptionsList = ref([
  // {
  //   text: '管理单位',
  //   value: 'deptName',
  //   align: 'center',
  // },
  // {
  //   text: '管理方式',
  //   value: 'manageTypeName',
  //   align: 'center',
  // },
  // {
  //   text: '产权单位',
  //   value: 'propertyOwner',
  //   align: 'center',
  // },
  // {
  //   text: '产权单位联系人',
  //   value: 'propertyOwner',
  //   align: 'center',
  // },
  // {
  //   text: '详细位置',
  //   value: 'position',
  //   align: 'center',
  // },
  // {
  //   text: '',
  //   value: '',
  //   align: '',
  // },
  {
    text: '负责人',
    value: 'personName',
    align: 'center',
  },
  {
    text: '标签',
    value: 'marker',
    align: 'center',
  },
  {
    text: '使用状态',
    value: 'onStateName',
    align: 'center',
  },
  {
    text: '监控状态',
    value: 'monitorStateName',
    align: 'center',
  },
  // {
  //   text: '闸井位号',
  //   value: 'tagNumber',
  //   align: 'center',
  // },
  // {
  //   text: '联系人',
  //   value: 'propertyPerson',
  //   align: 'center',
  // },
  // {
  //   text: '联系方式',
  //   value: 'propertyPhone',
  //   align: 'center',
  // },
  // {
  //   text: '所在区域',
  //   value: 'area',
  //   align: 'center',
  // },

  // {
  //   text: '经度',
  //   value: 'lngGaode',
  //   align: 'center',
  // },
  // {
  //   text: '纬度',
  //   value: 'latGaode',
  //   align: 'center',
  // },

])
// 初始化
const loading = ref(true)
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(18.8)
  }
  gasData.value = []
  // 获取详细信息
  loading.value = true
  getWellDetail(e.info.id).then((res) => {
    baseInfo.value = res.data
    detailInfo.value = res.data
    descriptionsList.value = descriptionsList.value.filter((item: any) => !item.text.includes('产权单位') && !item.text.includes('联系人'))
    if (baseInfo.value.manageTypeName === '自有' || baseInfo.value.manageTypeName === '') {
      // console.log(1)
    }
    else {
      descriptionsList.value.splice(2, 0, ...[
        {
          text: '产权单位',
          value: 'propertyOwner',
          align: 'center',
        },
        {
          text: '联系人',
          value: 'propertyOwner',
          align: 'center',
        },
      ])
    }
    if (detailInfo.value.telephone) {
      detailInfo.value.personName = `${detailInfo.value.personName}(${detailInfo.value.telephone})`
    }
    loading.value = false
    gasData.value = []
    getGasData({
      wellId: res.data.id,
      devCode: '',
    }).then((res) => {
      for (const i in res.data) {
        gasData.value.push({
          name: res.data[i].devTypeName,
          devcode: res.data[i].devcode,
          state: res.data[i].state,
          value: res.data[i].latestValue || '-',
          text: 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('管网哨兵') ? '    %LEL' : '',
          stateName: res.data[i].state === '1' ? '正常' : res.data[i].state === '0' ? '离线' : res.data[i].state === '2' ? '异常' : '',
          alarmContent: res.data[i].alarmContent,
          offDays: res.data[i].offDays,
          manufacturerName: res.data[i].manufacturerName
        })
      }
      gasData.value = gasData.value.map((item: any) => ({
        ...item,
        content: item.stateName === '异常' ? item.alarmContent : item.stateName === '离线' ? item.offDays : ''
      }))
    })
    // 获取燃气
  }).catch(() => {
    loading.value = false
  })
}
// 关闭
const close = () => {
  infoWindow.value?.close()
}
// 详情
const $router = useRouter()
const $route = useRoute()
const goDetail = () => {
  $router.push({
    path: '/well/detail',
    query: {
      id: baseInfo.value.id,
      row: JSON.stringify(baseInfo.value),
    },
  })
}

// 燃气数据-更多
const gasRef = ref()
const more = (item) => {
  gasRef.value.initDialog({
    deviceTypeName: item.name,
    deviceCode: item.devcode,
  })
}
defineExpose({ initDialog, close })

const goDeviceDetail = (item: any) => {
  // console.log(item, 'item')
  $router.push({
    path: '/manage/detail',
    query: {
      row: JSON.stringify({
        devcode: item.devcode,
        devTypeName: item.name,
        deviceType: item.typeName,
        deviceTypeName: item.typeName,
      })
    },
  })
}
</script>

<template>
  <div v-show="dialogFormVisible" class="container clearfix" @mouseleave="() => { }">
    <div class="header">
      <div style="display: flex;align-items: center;">
        <el-tooltip class="box-item" effect="dark" :content="`${baseInfo.tagNumber} | ${baseInfo.ledgerName}`"
          placement="top">
          <span class="title">{{ baseInfo.tagNumber }} | {{ baseInfo.ledgerName }}</span>
        </el-tooltip>
        <el-button size="small" style="margin-left: 10px;" @click="goDetail">
          详情
        </el-button>
      </div>
      <span class="close" @click="close">×</span>
    </div>
    <div v-loading="loading" class="body">
      <!-- 管理单位  deptName  管理方式 manageTypeName-->
      <div class="custom-descriptions">
        <span class="name">管理单位</span>
        <span class="value1">{{ baseInfo.deptName }}</span>
        <span class="name">管理方式</span>
        <span class="value2">{{ baseInfo.manageTypeName }}</span>
        <span class="name">详细位置</span>
        <span class="value2" :title="baseInfo.position">{{ baseInfo.position }}</span>
      </div>
      <div class="descriptions">
        <div v-for="(item, index) in descriptionsList" :key="item.text"
          :class="`${index % 2 === 0 ? 'descriptions-item1' : 'descriptions-item2'}`" class="descriptions-item">
          <div :class="`${descriptionsList.filter(item => item.text.includes('产权单位')).length ? '' : 'label-no'}`"
            class="label">
            {{ item.text }}
          </div>
          <div class="value" :title="detailInfo[item.value] || ''">
            <span v-if="item.text === '监控状态'"
              :style="{ color: detailInfo[item.value] === '正常' ? '#3cc53c' : detailInfo[item.value] === '离线' ? 'rgb(238, 182, 78)' : detailInfo[item.value] === '异常' ? 'red' : detailInfo[item.value] === '未监控' ? '#a39f9f' : '#a39f9f' }">
              {{ (detailInfo[item.value] || '') === '离线' && !$route.path.includes('well') ? '故障(离线)' :
                (detailInfo[item.value] || '') }}</span>
            <span v-else>{{ detailInfo[item.value] || '' }}</span>
          </div>
        </div>
      </div>
    </div>
    <!-- 燃气浓度等信息 -->
    <div v-show="gasData.length" class="dirver" style="margin-top: 10px;" />
    <div v-show="gasData.length" class="gas">
      <div v-for="item, index in gasData" :key="`${item.state}${item.index}${item.text}${item.name}${item.value}`" v-show="item.text"  class="gas-item">
        <div>
          {{ item.text }} :
          <span
            :class="`${item.state === '2' ? 'error' : item.state === '0' && item.value !== '-' ? 'offline-color' : ''}`">
            {{ item.name.includes('燃气智能监测终端') || item.name.includes('管网哨兵') ? item.value
              : item.stateName }}</span>
          <span v-if="item.name.includes('燃气智能监测终端') || item.name.includes('管网哨兵')"
            :class="`${item.state === '2' ? 'error' : ''}`"> {{ item.unit }}</span>
          <el-button type="primary" v-if="item.name.includes('燃气智能监测终端') || item.name.includes('管网哨兵')" size="small"
            style="margin-left: 10px;" @click="more(item)">
            更多
          </el-button>
        </div>
      </div>
    </div>
    <!-- 感知设备运行情况 -->
    <div v-show="gasData.length" class="dirver" style="margin-top: 10px;" />
    <div v-show="gasData.length" class="gas">
      <div class="device-title">
        感知设备运行情况
      </div>
      <div v-for="item,index in gasData" :key="`${item.name}${item.devcode}${index}${item.manufacturerName}`" class="gas-item">
        <span class="devoce-code" style="width: 25%;display: inline-block;" @click="goDeviceDetail(item)">{{
          item.devcode }}</span>
        <el-tooltip class="box-item" effect="dark"
          :content="`${item.name}${item.manufacturerName ? '(' : ''}${item.manufacturerName}${item.manufacturerName ? ')' : ''}`" placement="top">
          <span style="width: 38%;display: inline-block; overflow: hidden;white-space: nowrap;text-overflow: ellipsis;"
            :title="item.name">{{ item.name }}
            {{ item.manufacturerName ? '(' : '' }}
            {{ item.manufacturerName }}
            {{ item.manufacturerName ? ')' : '' }}
          </span>
        </el-tooltip>


        <span
          :class="item.state === '1' ? 'normal' : item.state === '0' ? 'offline' : item.state === '2' ? 'error' : ''"
          style=""
          :style="{ color: item.state === '1' ? '#3cc53c' : item.state === '0' ? 'rgb(238, 182, 78)' : item.state === '2' ? 'red' : '', 'white-space': 'nowrap' }">{{
            item.stateName }}
          <!-- 离线 -->
          <span v-if="item.state === '0' && item.content" style="color: rgb(238, 182, 78);white-space: nowrap;">{{
            `(离线天数:${item.content}天)` }}</span>
          <span v-if="item.state === '2' && item.content" style="color: red;white-space: nowrap;">{{ `(${item.content})`
          }}</span>
        </span>

      </div>
    </div>
    <gas-dialog ref="gasRef" />
  </div>
</template>

<style lang="scss" scoped>
.dirver {
  border: 0;
  height: 2px;
  background-image: linear-gradient(to right, rgb(239 236 236 / 27%), rgb(236 236 236 / 90%), rgba(239 236 236 / 27%));
}

.devoce-code {
  color: #0d76d4;

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

.error {
  color: red !important;
}

.normal {
  color: green($color: #3cc53c) !important;
}

.offline {
  color: rgb(238 182 78) !important;
}

.offline-color {
  background-color: #999;
}

.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%);
  padding-bottom: 10px;

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

    .custom-descriptions {
      width: 100%;
      padding: 0 3px;
      height: 127px;

      .name {
        padding: 0 1px;
        font-size: 16px;
        text-align: justify;
        text-align-last: justify;
        margin: 4px 5px;
        display: inline-block;
        width: 12%;

      }

      .value1,
      .value2 {
        display: inline-block;
        width: 80%;
        white-space: nowrap;
        font-size: 16px;
        margin: -4px 0px;
        padding: 0 1px;
        color: #a39f9f;
        /* 确保文本在一行内显示 */
        overflow: hidden;

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

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

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

      .descriptions-item1 {
        width: 60% !important;
      }

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

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

        .label {
          width: 20%;
          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;
          font-size: 15px;
          color: #a39f9f;
          // color: #3cc53c;

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

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

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

      .descriptions-item2 {
        width: 30% !important;

        .label {
          width: 40% !important;
        }
      }
    }
  }

  .gas {
    .error {
      color: red !important;
    }

    .normal {
      color: green($color: #3cc53c) !important;
    }

    .offline {
      color: rgb(243 183 71) !important;
    }

    width: 98%;
    // border-top: 1px solid #ccc;
    margin: 0 auto;
    margin-top: 5px;
    padding-top: 10px;
    padding-left: 10px;

    .gas-item {
      padding: 3px 5px;
      font-size: 15px;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .device-title {
      padding-left: 5px;
      font-weight: 700;
      font-size: 16px;
      margin-bottom: 8px;
    }
  }
}
</style>