<!--
  Description: 闸井管理-信息窗体
  Author: 李亚光
  Date: 2024-07-18
 -->
<script lang="ts" setup name="infoWindow">
import gasDialog from './gasDialog.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: '',
    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',
        },
      ])
    }
    loading.value = false
    getGasData({
      wellId: res.data.id,
      devCode: '',
    }).then((res) => {
      // const data = {
      //   燃气智能监测终端: {
      //     devcode: '1221212',
      //     state: '1',
      //     value: '2',
      //   },
      // }
      for (const i in res.data) {
        gasData.value.push({
          name: i,
          devcode: res.data[i].devcode,
          state: res.data[i].state,
          value: res.data[i].value || '-',
          text: i.includes('燃气') ? '燃气浓度' : i.includes('液位') ? '液位状态' : i.includes('井盖') ? '井盖状态' : '',
          unit: i.includes('燃气') ? '    %LEL' : '',
          stateName: res.data[i].state === '1' ? '正常' : res.data[i].state === '0' ? '离线' : res.data[i].state === '2' ? '报警' : '',
        })
      }
    })
    // 获取燃气
  }).catch(() => {
    loading.value = false
  })
}
// 关闭
const close = () => {
  infoWindow.value?.close()
}
// 详情
const $router = useRouter()
const goDetail = () => {
  $router.push({
    path: '/well/detail',
    query: {
      id: baseInfo.value.id,
      row: JSON.stringify(baseInfo.value),
    },
  })
}

// 燃气数据-更多
const gasRef = ref()
const more = () => {
  gasRef.value.initDialog(baseInfo.value.id)
}
defineExpose({ initDialog, close })

const goDeviceDetail = (code: string) => {
  $router.push({
    path: '/manage/detail',
    query: {
      row: JSON.stringify({ devcode: code }),
    },
  })
}
</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 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>
      </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] || '' }}</span>
            <span v-else>{{ detailInfo[item.value] || '' }}</span>
          </div>
        </div>
      </div>
    </div>
    <!-- 燃气浓度等信息 -->
    <div v-if="gasData.length" class="dirver" style="margin-top: 10px;" />
    <div v-if="gasData.length" class="gas">
      <div v-for="item in gasData" v-show="item.text" :key="item.name" class="gas-item">
        <div>
          {{ item.text }} :
          <span :class="`${item.state === '2' ? 'error' : ''}`"> {{ item.name.includes('燃气') ? item.value
            : item.stateName }}</span>
          <span v-if="item.name.includes('燃气')" :class="`${item.state === '2' ? 'error' : ''}`"> {{ item.unit }}</span>
          <el-button v-if="item.name.includes('燃气')" size="small" style="margin-left: 10px;" @click="more">
            更多
          </el-button>
        </div>
      </div>
    </div>
    <!-- 感知设备运行情况 -->
    <div v-if="gasData.length" class="dirver" style="margin-top: 10px;" />
    <div v-if="gasData.length" class="gas">
      <div class="device-title">
        感知设备运行情况
      </div>
      <div v-for="item in gasData" :key="item.name" class="gas-item">
        <span class="devoce-code" style="width: 25%;display: inline-block;" @click="goDeviceDetail(item.devcode)">{{
          item.devcode }}</span>
        <span
          style="margin-left: 10px;width: 38%;display: inline-block; overflow: hidden;white-space: nowrap;text-overflow: ellipsis;"
          :title="item.name">{{ item.name }}</span>
        <span
          :class="item.state === '1' ? 'normal' : item.state === '0' ? 'offline' : item.state === '2' ? 'error' : ''"
          style="margin-left: 10px;"
          :style="{ color: item.state === '1' ? '#3cc53c' : item.state === '0' ? 'rgb(238, 182, 78)' : item.state === '2' ? 'red' : '' }">{{
            item.stateName }}</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;
}

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

    .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: 100px;

      .name {
        padding: 0 1px;
        font-size: 15px;
        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: 15px;
        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;
    }

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