<!--
  Description: 设备详情-耗电分析
  Author: 李亚光
  Date: 2023-09-03
 -->
<script lang="ts" setup name="DeviceDetailOfflineAnalyse">
import dayjs from 'dayjs'
import { getElectricityAnalyse } from '@/api/home/device/device'
import { getDeviceTypeListPage } from '@/api/home/device/type'
const $route = useRoute()
const listQuery = ref({
  devcode: '',
  beginTime: '',
  endTime: '',
  typeName: '',
})
const deviceTypeList = ref<any[]>([])
const xAxisData = ref<any[]>([])
const data = ref<any[]>([])
// 时间查询条件
const timerangForReport = ref<string[]>([])
watch(() => timerangForReport.value, (newVal) => {
  listQuery.value.beginTime = ''
  listQuery.value.endTime = ''
  if (Array.isArray(newVal)) {
    if (newVal.length) {
      listQuery.value.beginTime = `${newVal[0]}`
      listQuery.value.endTime = `${newVal[1]}`
    }
  }
})
timerangForReport.value = [dayjs().subtract(1, 'year').format('YYYY-MM-DD HH:mm:ss'), dayjs().format('YYYY-MM-DD HH:mm:ss')]
// 列表loading
const loadingTable = ref(true)
//  列表展示数据
const list = ref([])
//  列表展示列
const columns = ref<any>([
  { text: '电量', value: 'cell', align: 'center' },
  { text: '采集时间', value: 'uptime', align: 'center' },
])
const resizePage = () => {
  setTimeout(() => {
    const resize = new Event('resize')
    window.dispatchEvent(resize)
  }, 500)
}
const fetchData = () => {
  const result = JSON.parse($route.query.row as string)
  listQuery.value.devcode = result.devcode
  listQuery.value.typeName = deviceTypeList.value.filter((item: any) => item.typeName === result.deviceType || item.id === result.deviceType)[0]?.typeName || ''
  loadingTable.value = true
  getElectricityAnalyse({ ...listQuery.value, offset: 1, limit: 9999 }).then((res) => {
    list.value = res.data
    loadingTable.value = false

    xAxisData.value = JSON.parse(JSON.stringify(list.value)).slice().reverse().map((item: any) => item.uptime)
    data.value = [
      {
        name: '电量',
        // data: ['100', '87', '73', '53', '41', '32', '17'],
        data: JSON.parse(JSON.stringify(list.value)).slice().reverse().map((item: any) => item.cell).reverse(),
        symbol: 'none',
      },
    ]
    resizePage()
  }).catch(() => {
    loadingTable.value = false
  })
}
onMounted(() => {
  getDeviceTypeListPage({ offset: 1, limit: 99999 }).then((res) => {
    deviceTypeList.value = res.data.rows
    fetchData()
  })
})
</script>

<template>
  <div style="width: 100%;display: flex;">
    <table-container title="" class="table">
      <template #btns-left>
        <div style="display: flex;align-items: center;">
          <span style="margin-right: 5px;white-space: nowrap;">采集时间:</span>
          <!-- 查询条件 -->
          <el-date-picker v-model="timerangForReport" 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>
          <!-- <el-button type="primary" style="margin-left: 10px;">
          导出
        </el-button> -->
        </div>
      </template>
      <normal-table :data="list" :total="0" :columns="columns" :query="listQuery" :list-loading="loadingTable"
        :pagination="false" :height="300">
        <template #preColumns>
          <el-table-column label="序号" width="55" align="center">
            <template #default="scope">
              {{ scope.$index + 1 }}
            </template>
          </el-table-column>
        </template>
      </normal-table>
    </table-container>
    <div style="width: 50%;height: 360px;">
      <line-chart v-show="list.length" :loading="loadingTable" :x-axis-data="xAxisData" unit="%" :data="data"
        :gradient="false" :smooth="false"
        :legend="{ itemWidth: 8, itemHeight: 8, type: 'scroll', orient: 'horizontal', icon: 'roundRect', right: '60', top: '10' }"
        :grid="{
          top: 50,
          left: 60,
          right: 60,
          bottom: 20,
          containLabel: true, // 是否包含坐标轴的刻度标签
        }" />
        <el-empty v-show="!list.length" description="暂无数据"  />
    </div>
  </div>
</template>

<style lang="scss" scoped>
// .table {
//   ::v-deep(.table-container) {
//     width: 50%;
//   }
// }
::v-deep(.table-container) {
  width: 50%;
}
</style>