<script lang="ts" setup name="GasDialog">
// import monitorDataGasList from './monitorDataGasList.vue'
import dayjs from 'dayjs'
// import { getMonitorData } from '@/api/home/pipeline/pipeline'
import { getDataSearch } from '@/api/home/device/device'
import { toHumpObject } from '@/utils/String'
const dialogFormVisible = ref(false)
// const wellId = ref('')
// 初始化对话框
// const gasRef = ref()
const initDialog = (row: any) => {
  console.log(row)
  // wellId.value = id
  if (row.deviceTypeName === '燃气智能监测终端') {
    columns.value = columns1.value
  } else if (row.deviceTypeName === '管网哨兵') {
    columns.value = columns2.value
  } else if (row.deviceTypeName === '智能警示桩') {
    columns.value = columns3.value
  } else if (row.deviceTypeName === '场站监测云台') {
    columns.value = columns4.value
  }
  dialogFormVisible.value = true
  listQuery.value.devcode = row.deviceCode
  listQuery.value.typeName = row.deviceTypeName
  datetimerange1.value = [
    dayjs().subtract(7, 'day').format('YYYY-MM-DD HH:mm:ss'),
    dayjs().format('YYYY-MM-DD HH:mm:ss')
  ]
  datetimerange2.value = [
    dayjs().subtract(7, 'day').format('YYYY-MM-DD HH:mm:ss'),
    dayjs().format('YYYY-MM-DD HH:mm:ss')
  ]
  setTimeout(() => {
    fetchData()
  })
  // nextTick(() => {
  //   gasRef.value.switchView()
  // })
}
defineExpose({
  initDialog
})

const cancel = () => {
  dialogFormVisible.value = false
}
// 列表loading
const loadingTable = ref(true)
//  列表展示数据
const list = ref([])
//  列表展示列
const columns = ref<any>([])
// 燃气智能监测终端
const columns1 = ref<any>([
  { text: '设备编号', value: 'devcode', align: 'center' },
  { text: '燃气浓度（%LEL)', value: 'strength', align: 'center' },
  { text: '电量(%)', value: 'cell', align: 'center' },
  { text: '信号强度', value: 'pci', align: 'center' },
  { text: '采集时间', value: 'uptime', align: 'center' },
  { text: '上传时间', value: 'logtime', align: 'center' }
])
// 管网哨兵
const columns2 = ref<any>([
  { text: '设备编号', value: 'devcode', align: 'center' },
  { text: '燃气浓度（%LEL)', value: 'gasval', align: 'center' },
  { text: '电池电压(V)', value: 'vbat', align: 'center' },
  { text: '采集时间', value: 'uptime', align: 'center' },
  { text: '上传时间', value: 'logtime', align: 'center' }
])
// 智能警示桩
const columns3 = ref<any>([
  { text: '左侧甲烷值', value: 'leftGas', align: 'center', width: '110' },
  { text: '右侧甲烷值', value: 'rightGas', align: 'center', width: '110' },
  { text: '电池电压(V)', value: 'vbat', align: 'center', width: '110' },
  {
    text: '桩倾斜报警',
    value: 'pipeInclineAlarm',
    align: 'center',
    width: '110'
  },
  {
    text: '桩拆卸报警',
    value: 'pipeBreakAlarm',
    align: 'center',
    width: '110'
  },
  {
    text: '左断线报警',
    value: 'leftOffLineAlarm',
    align: 'center',
    width: '110'
  },
  {
    text: '左振动报警',
    value: 'leftVibrateAlarm',
    align: 'center',
    width: '110'
  },
  {
    text: '右断线报警',
    value: 'rightOffLineAlarm',
    align: 'center',
    width: '110'
  },
  {
    text: '右振动报警',
    value: 'rightVibrateAlarm',
    align: 'center',
    width: '110'
  },
  { text: '采集时间', value: 'uptime', align: 'center' },
  { text: '上传时间', value: 'logtime', align: 'center' }
])
// 场站监测云台
const columns4 = ref<any>([
  { text: '设备编号', value: 'deviceCode', align: 'center' },
  { text: '浓度', value: 'concentration', align: 'center' },
  { text: '水平位置', value: 'dircetion', align: 'center' },
  { text: '垂直位置', value: 'pitch', align: 'center' },
  { text: '采集时间', value: 'uptime', align: 'center' },
  { text: '上传时间', value: 'logtime', align: 'center' }
])

const listQuery = ref({
  devcode: '',
  logBegTime: '',
  logEndTime: '',
  typeName: '',
  upBegTime: '',
  upEndTime: ''
})
// 开始结束时间
const datetimerange1 = ref()
watch(
  () => datetimerange1.value,
  newVal => {
    listQuery.value.upBegTime = ''
    listQuery.value.upEndTime = ''
    if (Array.isArray(newVal)) {
      if (newVal.length) {
        listQuery.value.upBegTime = `${newVal[0]}`
        listQuery.value.upEndTime = `${newVal[1]}`
      }
    }
  },
  {
    deep: true,
    immediate: true
  }
)
const datetimerange2 = ref()
watch(
  () => datetimerange2.value,
  newVal => {
    listQuery.value.logBegTime = ''
    listQuery.value.logEndTime = ''
    if (Array.isArray(newVal)) {
      if (newVal.length) {
        listQuery.value.logBegTime = `${newVal[0]}`
        listQuery.value.logEndTime = `${newVal[1]}`
      }
    }
  },
  {
    deep: true,
    immediate: true
  }
)
const resizePage = () => {
  setTimeout(() => {
    const resize = new Event('resize')
    window.dispatchEvent(resize)
  }, 500)
}
const fetchData = () => {
  loadingTable.value = true
  // listQuery.value.devcode = $route.query.deviceCode as string
  // listQuery.value.typeName = $route.query.typeName as string
  getDataSearch(listQuery.value)
    .then(res => {
      // list.value = res.data.map((item: any) => {
      //   for (const i in item) {
      //     if (i.includes('ALARM')) {
      //       if (i === 'PICTURE_ALARM') {
      //         item[i] = item[i] === '0' ? '/' : item[i]
      //       }
      //       else {
      //         item[i] = item[i] === '0' ? '正常' : '报警'
      //       }
      //     }
      //   }
      //   return item
      // })
      list.value = res.data.map((item: any) => toHumpObject(item))
      loadingTable.value = false
    })
    .catch(() => {
      loadingTable.value = false
    })
}
// onMounted(() => {
//   datetimerange1.value = [dayjs().subtract(7, 'day').format('YYYY-MM-DD HH:mm:ss'), dayjs().format('YYYY-MM-DD HH:mm:ss')]
//   datetimerange2.value = [dayjs().subtract(7, 'day').format('YYYY-MM-DD HH:mm:ss'), dayjs().format('YYYY-MM-DD HH:mm:ss')]
//   setTimeout(() => {
//     fetchData()
//   })
// })
// 是否展示表格
const isShowTable = ref(true)
// 切换视图
const switchView = () => {
  isShowTable.value = !isShowTable.value
  if (!isShowTable.value) {
    resizePage()
  }
}
</script>

<template>
  <el-dialog
    v-model="dialogFormVisible"
    title="燃气浓度"
    append-to-body
    width="1100px"
  >
    <table-container title="">
      <template #btns-left>
        <!-- 查询条件 -->
        <div style="display: flex; align-items: center">
          <span style="margin-right: 5px; white-space: nowrap">采集时间:</span>
          <el-date-picker
            v-model="datetimerange1"
            type="datetimerange"
            range-separator="至"
            start-placeholder="采集开始时间"
            end-placeholder="采集结束时间"
            format="YYYY-MM-DD HH:mm:ss"
            value-format="YYYY-MM-DD HH:mm:ss"
          />
          <span
            style="margin-right: 5px; margin-left: 10px; white-space: nowrap"
            >上传时间:</span
          >
          <el-date-picker
            v-model="datetimerange2"
            type="datetimerange"
            range-separator="至"
            start-placeholder="上传开始时间"
            end-placeholder="上传结束时间"
            format="YYYY-MM-DD HH:mm:ss"
            value-format="YYYY-MM-DD HH:mm:ss"
          />
          <el-button
            type="primary"
            style="margin-left: 10px"
            @click="fetchData"
          >
            搜索
          </el-button>
        </div>
      </template>
      <normal-table
        v-show="isShowTable"
        :data="list"
        :total="0"
        :columns="columns"
        :height="350"
        :query="{}"
        :list-loading="loadingTable"
        :pagination="false"
      />
    </table-container>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="cancel"> 关闭 </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<style lang="scss" scoped>
.body {
  width: 100%;

  ::v-deep(.table-container) {
    .button-area {
      .custom {
        width: 100%;
      }
    }
  }
}

.el-dialog {
  width: 700px;
}

.el-select {
  width: 100%;
}

// .body {
//   ::v-deep(.button-left) {
//     width: 100%;
//   }
// }
::v-deep(.table-container) {
  .button-left {
    width: 100%;
  }
}
</style>