<template>
  <div class="screen-dialog">
    <el-dialog :title="title" v-model="open" width="500px">
      <div style="height: 350px">
        <div v-if="datas.length === 0" class="empty"><div>暂无历史数据</div></div>
        <screen-line-chart v-else height="350px" :title="chartTitle" :feilds="feilds" :datas="datas" :suffix="chartSuffix"></screen-line-chart>
      </div>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="cancel">取 消</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { getHistory } from "@/api/screen/screen"
import ScreenLineChart from "./ScreenLineChart.vue"
const open = ref(false)
const title = ref("历史数据查看")

const chartTitle = ref("溶解氧")
const chartSuffix = ref("mg/L")
const feilds = ref(["名称", "溶解氧"])
const datas = ref([])

// 查看
const show = id => {
  getHistory({ deviceId: id }).then(res => {
    datas.value = res.data.map(item => {
      return {
        name: data.day + " " + data.time,
        value1: item.dissolvedOxygen,
      }
    })
    open.value = true
  })
}

// 取消
const cancel = () => {
  open.value = false
}

defineExpose({
  show,
})
</script>

<style lang="scss" scoped>
.empty {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  font-size: 20px;
  letter-spacing: 5px;
  color: #fff;
}
</style>
