<!--
 * @Company: 沈阳信诚科技
 * @Email: html_venustar@163.com
 * @Author: Liuqiming
 * @Description: 设备参数实时看板
 * @LastEditors: Liuqiming
 * @LastEditTime: 2024-03-27 09:26:22
 * @Date: 2024-02-26 14:38:28
-->
<template>
  <div class="app-container">
    <div class="search">
      <el-radio-group v-model="status" @change="handlerStatusChange">
        <el-radio-button label="实时监控" name="realTime" />
        <el-radio-button label="历史趋势" name="historicalTrend" />
      </el-radio-group>
      <span v-if="status === '实时监控'">{{ realTime[0] }} 至 {{ realTime[1] }}</span>
      <el-button v-if="status === '实时监控'" type="primary" @click="refresh">刷新</el-button>
      <el-form inline :model="searchData" v-else>
        <el-form-item label="浇次">
          <el-select v-model="searchData.castTimesNo" placeholder="请选择">
            <el-option
              v-for="item in castTimesNoList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="时间范围">
          <DateTimeRange width="340px" v-model="searchData.dateTime" @change="handlerTimeRangeChange"></DateTimeRange>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handlerSearch">搜索</el-button>
          <el-button @click="handlerReset">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <el-row :gutter="20">
      <el-col :span="12" style="height: 400px;">
        <EchartsFoldLine :fatherMessage="tundishEcharts" @echartsChange="tundishEchartChange"></EchartsFoldLine>
      </el-col>
      <el-col :span="12" style="height: 400px;">
        <EchartsFoldLine :fatherMessage="superheatEcharts"></EchartsFoldLine>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="12" style="height: 400px;">
        <EchartsFoldLine :fatherMessage="crystallizerEcharts" @echartsChange="crystallizerEchartChange"></EchartsFoldLine>
      </el-col>
      <el-col :span="12" style="height: 400px;">
        <EchartsFoldLine :fatherMessage="crystallizerVibrationEcharts" @echartsChange="crystallizerVibrationEchartChange"></EchartsFoldLine>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="12" style="height: 400px;">
        <EchartsFoldLine :fatherMessage="castingEcharts" @echartsChange="castingEchartChange"></EchartsFoldLine>
      </el-col>
      <el-col :span="12" style="height: 400px;">
        <EchartsFoldLine :fatherMessage="endEcharts" @echartsChange="endEchartChange"></EchartsFoldLine>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="12" style="height: 400px;">
        <EchartsFoldLine :fatherMessage="inductanceEcharts" @echartsChange="inductanceEchartChange"></EchartsFoldLine>
      </el-col>
    </el-row>
  </div>
</template>

<script setup name="RealTime">
import { init } from './index.js'
import { getCastTimesNoList } from '@A/monitor/realTime'
import { parseTime } from '@U/cfhi.js'
import { nextTick } from 'vue';

// 定时器定时时常统一配置
const regular = ref(5000)
// radio状态
const status = ref('实时监控')
const searchData = ref({
  castTimesNo: '',
  dateTime: []
  // dateTime: [new Date(), new Date()]
})

// 浇次下拉框
const castTimesNoList = ref([])
// 实时状态下的时间范围展示
const realTime = ref([])
const timer = ref(null)
const getRealTime = () => {
  const getCurrent = () => {
    realTime.value = [
      parseTime(new Date().getTime() - 3600000, '{y}-{m}-{d} {h}:{i}:{s}'),
      parseTime(new Date(), '{y}-{m}-{d} {h}:{i}:{s}')
    ]
  }
  getCurrent()
  if (!timer.value) {
    timer.value = setInterval(()=>{
      getCurrent()
    },regular.value)
  }
}

// 刷新按钮点击
const refresh = () => {
  getRealTime()
}
// 单选按钮切换
const handlerStatusChange = (val) => {
  if (val === '实时监控') {
    refresh()
  } else {
    // 选择历史趋势时清除所有实时监控的定时器
    clearTimer()
  }
}
// 获取浇次列表
const getCastingList = () => {
   // 获取浇次数据
  getCastTimesNoList({ castTimesNo: searchData.value.castTimesNo }).then(res => {
    castTimesNoList.value = res.data.map(item => {
      return { label: item.castTimesNo, value: item.castTimesNo }
    })
  }).catch(err => console.log(err))
}
// 时间范围change事件
const handlerTimeRangeChange = (val) => {
  searchData.value.castTimesNo = ''
}
// 搜索
const handlerSearch = () => {
  console.log(searchData.value)
}
// 重置
const handlerReset = () => {
  console.log('重置')
  searchData.value = {
    castTimesNo: '',
    dateTime: []
  }
}
// 中间包下拉选择
const tundishEchartChange = (val) => {
  console.log(val)
}
// 结晶器下拉选择
const crystallizerEchartChange = (val) => {
  console.log(val)
}
// 结晶器振动下拉选择
const crystallizerVibrationEchartChange = (val) => {
  console.log(val)
}
// 铸流电搅下拉选择
const castingEchartChange = (val) => {
  console.log(val)
}
// 末端电搅下拉选择
const endEchartChange = (val) => {
  console.log(val)
}
// 电感加热下拉选择
const inductanceEchartChange = (val) => {
  console.log(val)
}




// 统一清除定时器函数
const clearTimer = () => {
  clearInterval(timer.value)
  timer.value = null
}
// 实例销毁前清除所有定时器
onBeforeUnmount(() => {
  clearTimer()
})
nextTick(() => {
  getRealTime()
  getCastingList()
})
const {
  tundishEcharts,
  superheatEcharts,
  crystallizerEcharts,
  crystallizerVibrationEcharts,
  castingEcharts,
  endEcharts,
  inductanceEcharts
} = init()
</script>

<style lang="scss" scoped>
.app-container{
  height: auto;
}
.el-row {
  margin-bottom: 20px;
}
.search{
  >div{
    vertical-align: top;
    margin-right: 10px;
  }
  >button{
    margin-left: 10px;
    vertical-align: top;
  }
  >form{
    display: inline-block;
    vertical-align: top;
    .el-form-item--default{
      margin-bottom: 0;
    }
  }
  >span{
    display: inline-block;
    height: 32px;
    line-height: 32px;
    margin: 0 10px;
    font-size: 14px;
    color: rgba(67, 77, 93, 1);
  }
}
</style>
