
<template>
  <div class="bigBox">
    <div class="hearder">
      <svg-icon style="font-size: 20px;" icon-class="castingDetailsGygccs" class="sidebar-logo" />
      <span>工艺过程参数</span>
    </div>
    <div class="content">
      <div style="display:flex;flex-wrap:wrap;width:100%">
        <EchartsFoldLine v-for="item in processParametersLineChartArr" :fatherMessage="item" style="width:50%;height:400px" />
      </div>
    </div>
  </div>
</template>

<script setup >
import { configQueryList, processParametersLineChart } from "@/api/digitalCasting/report/report";
const props = defineProps({
  technologyData: {
    type: Object,
    default: "",
  },
});
watch(
  () => props.technologyData,
  (newValue, oldValue) => {
    if (!newValue.prdNo) {
      return
    }
    configQueryListArr.value = []
    processParametersLineChartArr.value = []
    craft()
  },
  {
    deep: true,
});
//新产生图表请求参数数组
let configQueryListArr = ref([])
let processParametersLineChartArr = ref([])
let craft = () => {
  configQueryList().then(res => {
    res.data.forEach(item => {
      item.prdNo = props.technologyData.prdNo
    })
    configQueryListArr.value = res.data
    processParametersLineChartApi()

  }).catch(err => {
    console.log(err)
  })
}
let processParametersLineChartApi = () => {
  let processParametersData
  const craftVo = { prdNo: props.technologyData.prdNo }
  processParametersLineChart(craftVo).then(res => {
    console.log("processParametersLineChart", res.data)
    processParametersData = res.data
  })

  if (!processParametersData) {
    return
  }
  configQueryListArr.value.forEach(item => {
    const echartsData = processParametersData.get(item.plcPointCode)
    if (!echartsData) {
      return
    }
    let obj = {
      //排序
      index: item.orderSort,
      // //是否显示当前日期
      // timeDay:true,
      //是否显示滚动条 （大量数据 数据卡顿设置）
      dataZoom: true,
      //是否显示边框
      borderSwitch: 'borderSwitch',
      //标题
      title: item.description,
      //Y轴单位
      Yname: `单位: ${item.description?.substring(item.description.indexOf('(') + 1, item.description.indexOf(')'))}`,
      //数据是否从0开始  true不从0开始  false从0开始  如果是柱形图设计到两个量 一定要true 否则 样式回丢失
      boundaryGap: false,
      //横轴X 数据
      XAxle: echartsData.xAxisData,
      //实际数据如果多条数据 数组里传入两个对象
      actualData: [
        {
          //上方对应名称
          name: 'A流',
          //平滑的线还带弧度  true弧度  false直线
          smooth: true,
          //数据Y
          dataAxle: echartsData.rows[0].data,
          //线条颜色
          color: '#005AE0',
          //图形 line折现 bar柱
          type: 'line'
        },
      ],
      // 是否显示右上角下拉框  ture显示 false不显示
      swtichSelect: false,
      //又上角下拉默认值
      optionsDefault: 'Option2',
      //又上角下拉选着数组
      options: [{ value: 'Option1', label: 'Option1', }, { value: 'Option2', label: 'Option2', },]
    }
    processParametersLineChartArr.value.push(obj)
    if (processParametersLineChartArr.value.length == configQueryListArr.value.length) {
      processParametersLineChartArr.value.sort((a, b) => { return a.index - b.index })
    }

  })

}
// craft()
</script>

<style lang="scss" scoped>
.bigBox {
  border: 1px solid rgba(235, 237, 238, 1);
  border-radius: 4px;

  .hearder {
    height: 44px;
    line-height: 44px;
    border-top-right-radius: 4px;
    border-top-left-radius: 4px;
    background-color: rgba(250, 251, 252, 1);
    border-bottom: 1px solid rgba(235, 237, 238, 1);
    padding-left: 15px;

    .sidebar-logo {
      vertical-align: middle;
    }

    span {
      vertical-align: middle;
      display: inline-block;
      color: rgba(11, 24, 45, 1);
      font-weight: 600;
      font-size: 14px;
      height: 22px;
      line-height: 22px;
      margin-left: 7px;
    }


  }
}
</style>
