<template>
  <div class="app-container">
    <h3>GB/T 17747</h3>
    <el-form :model="NGResult" label-position="top" ref="queryRef" size="small" :inline="false" label-width="160px" class="result-form">
      <el-form-item label="分子量" prop="dMrx" ref="selectRef">
        <el-input readonly v-model="NGResult.dMrx" placeholder="请输入分子量" />
      </el-form-item>
      <el-form-item label="标况压缩因子" prop="dZb">
        <el-input readonly v-model="NGResult.dZb" placeholder="请输入标况压缩因子" />
      </el-form-item>
      <el-form-item label="工况压缩因子" prop="dZf">
        <el-input readonly v-model="NGResult.dZf" placeholder="请输入工况压缩因子" />
      </el-form-item>
      <el-form-item label="超压缩系数" prop="dFpv">
        <el-input readonly v-model="NGResult.dFpv" placeholder="请输入超压缩系数" />
      </el-form-item>
      <el-form-item label="标况摩尔密度" prop="dDb">
        <el-input readonly v-model="NGResult.dDb" placeholder="请输入标况摩尔密度" />
      </el-form-item>
      <el-form-item label="工况摩尔密度" prop="dDf">
        <el-input readonly v-model="NGResult.dDf" placeholder="请输入工况摩尔密度" />
      </el-form-item>
      <el-form-item label="标况质量密度" prop="dRhob">
        <el-input readonly v-model="NGResult.dRhob" placeholder="请输入标况质量密度" />
      </el-form-item>
      <el-form-item label="工况质量密度" prop="dRhof">
        <el-input readonly v-model="NGResult.dRhof" placeholder="请输入工况质量密度" />
      </el-form-item>
      <el-form-item label="理想气体的相对密度" prop="dRD_Ideal">
        <el-input readonly v-model="NGResult.dRD_Ideal" placeholder="请输入理想气体的相对密度" />
      </el-form-item>
      <el-form-item label="真实气体的相对密度" prop="dRD_Real">
        <el-input readonly v-model="NGResult.dRD_Real" placeholder="请输入真实气体的相对密度" />
      </el-form-item>
    </el-form>
    <h3>AGA No10</h3>
    <el-form :model="NGResult" label-position="top" ref="queryRef" size="small" :inline="false" label-width="160px" class="result-form">
      <el-form-item label="理想气体的比焓" prop="dHo">
        <el-input readonly v-model="NGResult.dHo" placeholder="请输入理想气体的比焓" />
      </el-form-item>
      <el-form-item label="真实气体的焓" prop="dH">
        <el-input readonly v-model="NGResult.dH" placeholder="请输入真实气体的焓" />
      </el-form-item>
      <el-form-item label="真实气体的熵" prop="dS">
        <el-input readonly v-model="NGResult.dS" placeholder="请输入真实气体的熵" />
      </el-form-item>
      <el-form-item label="理想气体定压热容" prop="dCpi">
        <el-input readonly v-model="NGResult.dCpi" placeholder="请输入理想气体定压热容" />
      </el-form-item>
      <el-form-item label="定压热容" prop="dCp">
        <el-input readonly v-model="NGResult.dCp" placeholder="请输入定压热容" />
      </el-form-item>
      <el-form-item label="定容积热容" prop="dCv">
        <el-input readonly v-model="NGResult.dCv" placeholder="请输入定容积热容" />
      </el-form-item>
      <el-form-item label="比热比" prop="dk">
        <el-input readonly v-model="NGResult.dk" placeholder="请输入比热比" />
      </el-form-item>
      <el-form-item label="等熵指数" prop="dKappa">
        <el-input readonly v-model="NGResult.dKappa" placeholder="请输入等熵指数" />
      </el-form-item>
      <el-form-item label="声速" prop="dSOS">
        <el-input readonly v-model="NGResult.dSOS" placeholder="请输入声速" />
      </el-form-item>
      <el-form-item label="临界流函数" prop="dCstar">
        <el-input readonly v-model="NGResult.dCstar" placeholder="请输入临界流函数" />
      </el-form-item>
    </el-form>
    <h3>GB/T 11063</h3>
    <el-form :model="NGResult" label-position="top" ref="queryRef" size="small" :inline="false" label-width="160px" class="result-form">
      <el-form-item label="摩尔高位发热量" prop="dHhvMol">
        <el-input readonly v-model="NGResult.dHhvMol" placeholder="请输入摩尔高位发热量" />
      </el-form-item>
      <el-form-item label="摩尔低位发热量" prop="dLhvMol">
        <el-input readonly v-model="NGResult.dLhvMol" placeholder="请输入摩尔低位发热量" />
      </el-form-item>
      <el-form-item label="体积高位发热量" prop="dHhvv">
        <el-input readonly v-model="NGResult.dHhvv" placeholder="请输入体积高位发热量" />
      </el-form-item>
      <el-form-item label="体积低位发热量" prop="dLhvv">
        <el-input readonly v-model="NGResult.dLhvv" placeholder="请输入体积低位发热量" />
      </el-form-item>
      <el-form-item label="质量高位发热量" prop="dHhvm">
        <el-input readonly v-model="NGResult.dHhvm" placeholder="请输入质量高位发热量" />
      </el-form-item>
      <el-form-item label="质量地位发热量" prop="dLhvm">
        <el-input readonly v-model="NGResult.dLhvm" placeholder="请输入质量地位发热量" />
      </el-form-item>
      <el-form-item label="标况压缩因子" prop="dZb11062">
        <el-input readonly v-model="NGResult.dZb11062" placeholder="请输入标况压缩因子" />
      </el-form-item>
      <el-form-item label="标况质量密度" prop="dRhob11062">
        <el-input readonly v-model="NGResult.dRhob11062" placeholder="请输入标况质量密度" />
      </el-form-item>
      <el-form-item label="工况质量密度" prop="dRhof11062">
        <el-input readonly v-model="NGResult.dRhof11062" placeholder="请输入工况质量密度" />
      </el-form-item>
      <el-form-item label="理想气体的相对密度" prop="dRD_Ideal11062">
        <el-input readonly v-model="NGResult.dRD_Ideal11062" placeholder="请输入理想气体的相对密度" />
      </el-form-item>
      <el-form-item label="真实气体的相对密度" prop="dRD_Real11062">
        <el-input readonly v-model="NGResult.dRD_Real11062" placeholder="请输入真实气体的相对密度" />
      </el-form-item>
      <el-form-item label="真实气体的沃泊指数" prop="dWobbeIndex">
        <el-input readonly v-model="NGResult.dWobbeIndex" placeholder="请输入真实气体的沃泊指数" />
      </el-form-item>
    </el-form>
    <h3>其他</h3>
    <el-form :model="NGResult" label-position="top" ref="queryRef" size="small" :inline="false" label-width="160px" class="result-form">
      <el-form-item label="临界压力" prop="dPc">
        <el-input readonly v-model="NGResult.dPc" placeholder="请输入临界压力" />
      </el-form-item>
      <el-form-item label="临界温度" prop="dTC">
        <el-input readonly v-model="NGResult.dTC" placeholder="请输入临界温度" />
      </el-form-item>
      <el-form-item label="爆炸上限" prop="dBzsx">
        <el-input readonly v-model="NGResult.dBzsx" placeholder="请输入爆炸上限" />
      </el-form-item>
      <el-form-item label="爆炸下限" prop="dBzxx">
        <el-input readonly v-model="NGResult.dBzxx" placeholder="请输入爆炸下限" />
      </el-form-item>
      <el-form-item label="总炭含量(kg/m3)" prop="dTotalC">
        <el-input readonly v-model="NGResult.dTotalC" placeholder="请输入总炭含量(kg/m3)" />
      </el-form-item>
      <el-form-item label="C2组分含量(kg/m3)" prop="dC2">
        <el-input readonly v-model="NGResult.dC2" placeholder="请输入C2组分含量(kg/m3)" />
      </el-form-item>
      <el-form-item label="C2以上组分含量(kg/m3)" prop="dC2j">
        <el-input readonly v-model="NGResult.dC2j" placeholder="请输入C2以上组分含量(kg/m3)" />
      </el-form-item>
      <el-form-item label="C3以上组分含量(kg/m3)" prop="dC3j">
        <el-input readonly v-model="NGResult.dC3j" placeholder="请输入C3以上组分含量(kg/m3)" />
      </el-form-item>
      <el-form-item label="C4以上组分含量(kg/m3)" prop="dC4j">
        <el-input readonly v-model="NGResult.dC4j" placeholder="请输入C4以上组分含量(kg/m3)" />
      </el-form-item>
      <el-form-item label="C5以上组分含量(kg/m3)" prop="dC5j">
        <el-input readonly v-model="NGResult.dC5j" placeholder="请输入C5以上组分含量(kg/m3)" />
      </el-form-item>
      <el-form-item label="C6以上组分含量(kg/m3)" prop="dC6j">
        <el-input readonly v-model="NGResult.dC6j" placeholder="请输入C6以上组分含量(kg/m3)" />
      </el-form-item>
      <el-form-item label="C3C4组分含量(kg/m3)" prop="dC3C4">
        <el-input readonly v-model="NGResult.dC3C4" placeholder="请输入C3C4组分含量(kg/m3)" />
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import unitConverter from '@/components/inputValueUnit/index';
export default {
  name: 'MeterresultComponent',
  components: {
    unitConverter
  },

  props: {
    value: {
      type: Object,
      default: () => ({
        dMrx: 0,
        dZb: 0,
        dZf: 0,
        dFpv: 0,
        dDb: 0,
        dDf: 0,
        dRhob: 0,
        dRhof: 0,
        dRD_Ideal: 0,
        dRD_Real: 0,
        dHo: 0,
        dH: 0,
        dS: 0,
        dCpi: 0,
        dCp: 0,
        dCv: 0,
        dk: 0,
        dKappa: 0,
        dSOS: 0,
        dCstar: 0,
        dHhvMol: 0,
        dLhvMol: 0,
        dHhvv: 0,
        dLhvv: 0,
        dHhvm: 0,
        dLhvm: 0,
        dZb11062: 0,
        dRhob11062: 0,
        dRhof11062: 0,
        dRD_Ideal11062: 0,
        dRD_Real11062: 0,
        dWobbeIndex: 0,
        dPc: 0,
        dTC: 0,
        dBzsx: 0,
        dBzxx: 0,
        dTotalC: 0,
        dC2: 0,
        dC2j: 0,
        dC3j: 0,
        dC4j: 0,
        dC5j: 0,
        dC6j: 0,
        dC3C4: 0
      })
    }
  },

  data() {
    return {
      NGResult: {
        dMrx: 0,
        dZb: 0,
        dZf: 0,
        dFpv: 0,
        dDb: 0,
        dDf: 0,
        dRhob: 0,
        dRhof: 0,
        dRD_Ideal: 0,
        dRD_Real: 0,
        dHo: 0,
        dH: 0,
        dS: 0,
        dCpi: 0,
        dCp: 0,
        dCv: 0,
        dk: 0,
        dKappa: 0,
        dSOS: 0,
        dCstar: 0,
        dHhvMol: 0,
        dLhvMol: 0,
        dHhvv: 0,
        dLhvv: 0,
        dHhvm: 0,
        dLhvm: 0,
        dZb11062: 0,
        dRhob11062: 0,
        dRhof11062: 0,
        dRD_Ideal11062: 0,
        dRD_Real11062: 0,
        dWobbeIndex: 0,
        dPc: 0,
        dTC: 0,
        dBzsx: 0,
        dBzxx: 0,
        dTotalC: 0,
        dC2: 0,
        dC2j: 0,
        dC3j: 0,
        dC4j: 0,
        dC5j: 0,
        dC6j: 0,
        dC3C4: 0
      },
      selectWidth: 180
    };
  },

  watch: {
    value: {
      deep: true,
      handler(newVal) {
        // console.log(newVal);
        for (const key in newVal) {
          if (newVal.hasOwnProperty(key)) {
            const value = newVal[key];
            // 判断是否为有效的数值
            if (typeof value === 'number' && !isNaN(value) && isFinite(value)) {
              // 使用 toFixed 方法设置小数点位数
              newVal[key] = parseFloat(value.toFixed(6));
            }
          }
        }
        this.NGResult = JSON.parse(JSON.stringify(newVal));
      }
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.selectWidth = this.$refs.selectRef.$el.offsetWidth;
      if (this.selectWidth === 0) this.selectWidth = 180;
      // console.log('wwww', this.selectWidth);
    });
  },
  methods: {}
};
</script>

<style scoped>
/* 可按需添加样式 */
.app-container {
  height: 100%;
}
.el-input .el-input__inner {
  color: #0000ff; /* 你想要的字体颜色 */
}
.result-form {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 10px;
  color: red;
}

.total-input >>> .el-input readonly__inner {
  font-weight: bold;
  color: #409eff;
}
</style>
