<!--
 * @Company: 沈阳信诚科技
 * @Email: html_venustar@163.com
 * @Author: Liuqiming
 * @Description: 铸坯生产对标
 * @LastEditors: Liuqiming
 * @LastEditTime: 2024-03-29 11:35:19
 * @Date: 2024-02-26 12:25:10
-->
<template>
  <div class="app-container Benchmarking">
    <els-table
      :btnList="btnList"
      :columns="columns"
      :tableData="tableData"
      :searchList="searchList"
      @getTableData="getTableData"
      :pageSet="pageSet"
      @produceBenchmark="produceBenchmark"
      :option="tableOption"
      :tableLoading="loading"
      @handleSelectionChange="selectionChange"
    ></els-table>
    <el-drawer
      v-model="drawer"
      direction="rtl"
      :before-close="handleClose"
      :size="'70%'"
      destroy-on-close
    >
      <template #header>
        <span style="font-size: 20px;font-weight: 600;color: #303133;">铸坯生产对标</span>
      </template>
      <div style="display: flex; flex-wrap: wrap;justify-content: space-between;">
        <div style="width: calc(50% - 10px);margin-bottom: 16px;height: 400px;">
          <EchartsFoldLine :fatherMessage="barData" v-loading="barData.loading"></EchartsFoldLine>
        </div>
        <div v-for="item in chartList" style="width: calc(50% - 10px);margin-bottom: 16px;height: 400px;">
          <EchartsFoldLine :fatherMessage="state[item.title]" v-loading="item.loading"></EchartsFoldLine>
        </div>
      </div>
    </el-drawer>
  </div>
</template>

<script setup name="Benchmarking">
import { init } from './index.jsx'
import { compareLineDetails, compareBarDetails } from '@A/digitalCasting/from/benchmarking.js'
import { reportList } from '@A/digitalCasting/report/report.js'

const { proxy } = getCurrentInstance();
/** 加料信息 数据 */
const loading = ref(false)
const selectList = ref([])
const tableData = ref([])
const drawer = ref(false)
const chartList = ref([])
// 表格数据获取
const getList = (searchVal) => {
  loading.value = true
  // 获取表格数据
  reportList(searchVal).then(res => {
    tableData.value = res.rows
    pageSet.value.total = res.total
    loading.value = false
  }).catch(err => {console.log(err)})
}
// 查询及重置翻页等回调方法
const getTableData = (searchVal) => {
  getList(searchVal)
}
// 多选框选中
const selectionChange = (row) => {
  selectList.value = row
}
// 生产对标
const produceBenchmark = () => {
  // console.log(selectList.value)
  if (selectList.value.length <= 0) {
    proxy.$modal.msgWarning('请先选择数据项！')
    return
  }
  drawer.value = true
  const params = [
    {text: '表面温度(℃)', title: 'DBD0024', loading: false},
    {text: '中间包重量(t)', title: 'DBD48', loading: false},
    {text: '中间包温度(℃)', title: 'DBD28', loading: false},
    {text: '过热度(℃)', title: 'DBD32', loading: false},
    {text: '拉速(m/s)', title: 'DBD3008', loading: false},
    {text: '末端电搅-电流(A)', title: 'DBD2060', loading: false},
    {text: '末端电搅-电压(V)', title: 'DBD3048', loading: false},
    {text: '末端电搅-频率(Hz)', title: 'DBD2064', loading: false},
    {text: '末端电搅-位置(m)', title: 'DBD3056', loading: false},
    {text: '铸流电搅-电流(A)', title: 'DBD2016', loading: false},
    {text: '铸流电搅-电压(V)', title: 'DBD3040', loading: false},
    {text: '铸流电搅-频率(Hz)', title: 'DBD2020', loading: false},
    {text: '坯尾感应加热-温度(℃)', title: 'DBD2116', loading: false},
    {text: '坯尾感应加热-功率(kw)', title: 'DBD2132', loading: false},
    {text: '振动台-振幅(m)', title: 'DBD1726', loading: false},
    {text: '振动台-频率(Hz)', title: 'DBD1730', loading: false},
  ]
  chartList.value = params
  const colors = ['#005AE0', '#FC9700', '#39BA15']
  barData.value.loading = true
  barData.value.XAxle = []
  barData.value.actualData = []

  compareBarDetails(selectList.value).then(res => {
    barData.value.XAxle = res.xAxisData
    barData.value.actualData = res.row.map((item,i) => ({
      name: item.name,
      smooth: true,
      dataAxle: item.yAxisData,
      color: colors[i],
      type: 'bar',
      stack: 'item'
    }))
    barData.value.loading = false
  }).catch(err => console.log(err))

  compareLineDetails(selectList).then(res => {
    if(!res.data) {
      return
    }
    chartList.value.forEach(async param => {
      const data = res.data.get(param.title)
      state[param.title].XAxle = data.xAxisData
      state[param.title].Yname = '单位：' + param.text.match(/\((.*?)\)/)[1]
      state[param.title].actualData = data.rows.map((item,i) => ({
        name: item.name,
        smooth: true,
        dataAxle: item.data,
        color: colors[i],
        type: 'line'
      }))
      console.log(state[param.title])
    })
  }).catch(err => {console.log(err)})

}
// 弹窗关闭
const handleClose = () => {
  drawer.value = false
}
getList({ pageSize:10, pageNum:1 })
const {
  searchList,
  btnList,
  columns,
  pageSet,
  tableOption,
  barData,
  state
} = init()
</script>

<style lang="scss" scoped>
</style>
