<!--
  Description: 报警管理-查看数据(监控数据)
  Author: 李亚光
  Date: 2024-09-10
 -->
<script lang="ts" setup name="MonitorDataDialog">
import dayjs from 'dayjs'
import { getMonitorData } from '@/api/home/pipeline/pipeline'
const emits = defineEmits(['refresh'])
const dialogFormVisible = ref(false) // 对话框是否显示
const info = ref()
// 列表loading
const loadingTable = ref(true)
//  列表展示数据
const list = ref([])
// 图表数据
const xAxisData = ref<any[]>([])
const data = ref<any[]>([])
//  列表展示列
const columns = ref<any>([
  { text: '燃气浓度（%LEL)', value: 'strength', align: 'center' },
  { text: '信号强度', value: 'pci', align: 'center' },
  { text: '电量(%)', value: 'cell', align: 'center' },
  { text: '采集时间', value: 'logtime', align: 'center' },
  { text: '上传时间', value: 'uptime', align: 'center' },
])
const listQuery = ref({
  upBegTime: '',
  upEndTime: '',
  typeName: '',
  devcode: '',
})
// 开始结束时间
const datetimerange = ref()
watch(() => datetimerange.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 resizePage = () => {
  setTimeout(() => {
    const resize = new Event('resize')
    window.dispatchEvent(resize)
  }, 500)
}
const fetchData = () => {
  loadingTable.value = true
  listQuery.value.typeName = info.value.devTypeName
  listQuery.value.devcode = info.value.devcode
  getMonitorData(listQuery.value).then((res) => {
    list.value = res.data
    loadingTable.value = false
    xAxisData.value = list.value.map((item: any) => item.logtime)
    data.value = [
      {
        name: '燃气浓度',
        data: list.value.map((item: any) => item.strength),
      },
    ]
    resizePage()
  }).catch(() => {
    loadingTable.value = false
  })
}
onMounted(() => {
  datetimerange.value = [dayjs().subtract(7, 'day').format('YYYY-MM-DD HH:mm:ss'), dayjs().format('YYYY-MM-DD HH:mm:ss')]
})
// 是否展示表格
const isShowTable = ref(false)
// 切换视图
const switchView = () => {
  isShowTable.value = !isShowTable.value
  if (!isShowTable.value) {
    resizePage()
  }
}
// 初始化对话框
const initDialog = (row: any) => {
  dialogFormVisible.value = true
  info.value = row
  fetchData()
}
defineExpose({
  initDialog,
  switchView,
})

const cancel = () => {
  dialogFormVisible.value = false
}
</script>

<template>
  <el-dialog v-model="dialogFormVisible" title="查看数据" append-to-body>
    <table-container title="">
      <template #btns-left>
        <!-- 查询条件 -->
        <el-date-picker
          v-model="datetimerange" type="datetimerange" range-separator="至" start-placeholder="采集开始时间"
          end-placeholder="采集结束时间" format="YYYY-MM-DD HH:mm:ss" value-format="YYYY-MM-DD HH:mm:ss"
        />
        <!-- <el-date-picker
        v-model="timerang" type="datetimerange" range-separator="至" start-placeholder="上传开始时间"
        end-placeholder="上传结束时间" format="YYYY-MM-DD HH:mm:ss" value-format="YYYY-MM-DD HH:mm:ss" style="margin-left: 10px;"
      /> -->
        <el-button type="primary" style="margin-left: 10px;" @click="fetchData">
          搜索
        </el-button>
        <el-button @click="switchView">
          切换视图
        </el-button>
      </template>
      <normal-table
        v-show="isShowTable" :data="list" :total="0" :columns="columns" :query="{}"
        :list-loading="loadingTable" :pagination="false"
      />
      <div v-show="!isShowTable" style="width: 100%;height: 240px;">
        <line-chart
          v-show="xAxisData.length" :loading="loadingTable" :x-axis-data="xAxisData" :data="data" :gradient="false" :smooth="false"
          unit="%LEL"
          :legend="{ itemWidth: 8, itemHeight: 8, type: 'scroll', orient: 'horizontal', icon: 'roundRect', right: '0', top: '10' }"
          :grid="{
            top: 50,
            left: 30,
            right: 30,
            bottom: 20,
            containLabel: true, // 是否包含坐标轴的刻度标签
          }"
        />
        <el-empty v-show="!xAxisData.length" description="暂无数据" />
      </div>
    </table-container>
    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="cancel">
          确认
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<style lang="scss" scoped>
.el-dialog {
  width: 700px;
}

.el-select {
  width: 100%;
}
</style>