<template>
  <div>
    <div>
      <button @click="calc" type="primary" class="animated-button">计算组分参数</button>
      <button @click="calcFlow" type="primary" class="animated-button">计算流量</button>
    </div>

    <el-tabs v-model="activeTab">
      <el-tab-pane label="流量计参数" name="meterpar">
        <meterPar v-model="parentMeterPar" />
      </el-tab-pane>

      <el-tab-pane label="天然气组分" name="ngComponents">
        <ngComponents v-model="parentMeterPar.dngComponents" />
      </el-tab-pane>
      <el-tab-pane label="流量计算结果" name="meterresult">
        <meterResult v-model:meterResult="parentMeterResult" />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import meterPar from '@/components/NGTools/meterPar';
import ngComponents from '@/components/NGTools/NGCom';
import meterResult from '@/components/NGTools/meterResult';

import { calcNGPar, calcFlow } from '@/api/ngtools/NGCalcTools.js';

export default {
  name: 'TabbedComponentWrapper',
  components: {
    meterPar,
    ngComponents,
    meterResult
  },
  data() {
    return {
      activeTab: 'meterpar',
      parentMeterPar: {
        dFlowCalbz: '0',
        dZcalbz: '0',
        dCbtj: '0',
        dpbM: 0,
        dtbM: 0,
        dpbE: 0,
        dtbE: 0,
        dPatm: 0.101325,
        dPatmUnit: 2,
        dngComponents: '',
        dMeterType: '0',
        dCoreType: '0',
        dPtmode: '0',
        dPipeType: '0',
        dPipeD: 259.38,
        dLenUnit: 3,
        dPipeDtemp: 20,
        dPileDtempU: 0,
        dPipeMaterial: '11.16',
        dOrificeD: 150.25,
        dOrificeUnit: 3,
        dOrificeDtemp: 0,
        dOrificeDtempUnit: 0,
        dOrificeMaterial: '16.6',
        dOrificeSharpness: 0,
        dOrificeRk: 0,
        dOrificeRkLenU: 0,
        dPf: 1.48,
        dPfUnit: 2,
        dPfType: '0',
        dTf: 15,
        dTfUnit: 0,
        dDp: 12.5,
        dDpUnit: 1,
        dVFlowUnit: 0,
        dMFlowUnit: 0,
        dEFlowUnit: 0,
        dCd: 0,
        dCdCalMethod: 0,
        dMeterFactor: 2354,
        dPulseNum: 12000,
        dVFlowMax: 6,
        dVFlowMin: 3,
        dVFlowCon: 5,
        dPfRangeMin: 0,
        dPfRangeMax: 0,
        dDpRangeMin: 0,
        dDpRangeMax: 0,
        dTfRangeMin: 0,
        dTfRangeMax: 0,
        dVGsc: 300,
        dVGscUnit: 0
      },

      parentMeterResult: {
        dE: 10,
        dFG: null,
        dFT: null,
        dDViscosity: null,
        dDExpCoefficient: null,
        dRnPipe: null,
        dBk: null,
        dRoughNessPipe: null,
        dCdCorrect: null,
        dCdNozell: null,
        dVFlowb: 100,
        dVFlowf: 100,
        dVFlowUnit: 2,
        dMFlowb: 44,
        dMFlowUnit: 0,
        dEFlowb: 33,
        dEFlowUnit: 0,
        dVelocityFlow: 3,
        dVelocityUnit: 1,
        dPressLost: 300,
        dPressLostUnit: 0,
        dBeta: null,
        dKappa: null
      },
      componentString: ''
    };
  },
  methods: {
    calc() {
      console.log(this.parentMeterPar);
      calcNGPar(this.parentMeterPar)
        .then((res) => {
          console.log('Response:', res);
        })
        .catch((error) => {
          console.error('Request error:', error);
        });
    },
    calcFlow() {
      console.log(this.parentMeterPar);
      calcFlow(this.parentMeterPar)
        .then((res) => {
          console.log('Response:', res);
        })
        .catch((error) => {
          console.error('Request error:', error);
        });
    }
  }
};
</script>

<style scoped>
.animated-button {
  background-color: #007bff;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  margin-right: 10px;
  transition: background-color 0.3s ease;
}
.animated-button:last-child {
  margin-right: 0;
}
.animated-button:hover {
  background-color: #0056b3;
  transform: scale(1.05);
}
.animated-button:active {
  transform: scale(0.95);
}
</style>
