<template>
  <div class="app-container">
    <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">
        <el-input v-model="NGResult.dMrx" placeholder="请输入分子量" />
      </el-form-item>
      <el-form-item label="标况压缩因子" prop="dZb">
        <el-input v-model="NGResult.dZb" placeholder="请输入标况压缩因子" />
      </el-form-item>
      <el-form-item label="工况压缩因子" prop="dZf">
        <el-input v-model="NGResult.dZf" placeholder="请输入工况压缩因子" />
      </el-form-item>
      <el-form-item label="超压缩系数" prop="dFpv">
        <el-input v-model="NGResult.dFpv" placeholder="请输入超压缩系数" />
      </el-form-item>
      <el-form-item label="标况摩尔密度" prop="dDb">
        <el-input v-model="NGResult.dDb" placeholder="请输入标况摩尔密度" />
      </el-form-item>
      <el-form-item label="工况摩尔密度" prop="dDf">
        <el-input v-model="NGResult.dDf" placeholder="请输入工况摩尔密度" />
      </el-form-item>
      <el-form-item label="标况质量密度" prop="dRhob">
        <el-input v-model="NGResult.dRhob" placeholder="请输入标况质量密度" />
      </el-form-item>
      <el-form-item label="工况质量密度" prop="dRhof">
        <el-input v-model="NGResult.dRhof" placeholder="请输入工况质量密度" />
      </el-form-item>
      <el-form-item label="理想气体的相对密度" prop="drdIdeal">
        <el-input v-model="NGResult.drdIdeal" placeholder="请输入理想气体的相对密度" />
      </el-form-item>
      <el-form-item label="真实气体的相对密度" prop="drdReal">
        <el-input v-model="NGResult.drdReal" placeholder="请输入真实气体的相对密度" />
      </el-form-item>
      <el-form-item label="理想气体的比焓" prop="dHo">
        <el-input v-model="NGResult.dHo" placeholder="请输入理想气体的比焓" />
      </el-form-item>
      <el-form-item label="真实气体的焓" prop="dH">
        <el-input v-model="NGResult.dH" placeholder="请输入真实气体的焓" />
      </el-form-item>
      <el-form-item label="真实气体的熵" prop="dS">
        <el-input v-model="NGResult.dS" placeholder="请输入真实气体的熵" />
      </el-form-item>
      <el-form-item label="理想气体定压热容" prop="dCpi">
        <el-input v-model="NGResult.dCpi" placeholder="请输入理想气体定压热容" />
      </el-form-item>
      <el-form-item label="定压热容" prop="dCp">
        <el-input v-model="NGResult.dCp" placeholder="请输入定压热容" />
      </el-form-item>
      <el-form-item label="定容积热容" prop="dCv">
        <el-input v-model="NGResult.dCv" placeholder="请输入定容积热容" />
      </el-form-item>
      <el-form-item label="比热比" prop="dk">
        <el-input v-model="NGResult.dk" placeholder="请输入比热比" />
      </el-form-item>
      <el-form-item label="等熵指数" prop="dKappa">
        <el-input v-model="NGResult.dKappa" placeholder="请输入等熵指数" />
      </el-form-item>
      <el-form-item label="声速" prop="dSOS">
        <el-input v-model="NGResult.dSOS" placeholder="请输入声速" />
      </el-form-item>
      <el-form-item label="临界流函数" prop="dCstar">
        <el-input v-model="NGResult.dCstar" placeholder="请输入临界流函数" />
      </el-form-item>
      <el-form-item label="摩尔高位发热量" prop="dHhvMol">
        <el-input v-model="NGResult.dHhvMol" placeholder="请输入摩尔高位发热量" />
      </el-form-item>
      <el-form-item label="摩尔低位发热量" prop="dLhvMol">
        <el-input v-model="NGResult.dLhvMol" placeholder="请输入摩尔低位发热量" />
      </el-form-item>
      <el-form-item label="体积高位发热量" prop="dHhvv">
        <el-input v-model="NGResult.dHhvv" placeholder="请输入体积高位发热量" />
      </el-form-item>
      <el-form-item label="体积低位发热量" prop="dLhvv">
        <el-input v-model="NGResult.dLhvv" placeholder="请输入体积低位发热量" />
      </el-form-item>
      <el-form-item label="质量高位发热量" prop="dHhvm">
        <el-input v-model="NGResult.dHhvm" placeholder="请输入质量高位发热量" />
      </el-form-item>
      <el-form-item label="质量地位发热量" prop="dLhvm">
        <el-input v-model="NGResult.dLhvm" placeholder="请输入质量地位发热量" />
      </el-form-item>
      <el-form-item label="标况压缩因子" prop="dZb11062">
        <el-input v-model="NGResult.dZb11062" placeholder="请输入标况压缩因子" />
      </el-form-item>
      <el-form-item label="标况质量密度" prop="dRhob11062">
        <el-input v-model="NGResult.dRhob11062" placeholder="请输入标况质量密度" />
      </el-form-item>
      <el-form-item label="工况质量密度" prop="dRhof11062">
        <el-input v-model="NGResult.dRhof11062" placeholder="请输入工况质量密度" />
      </el-form-item>
      <el-form-item label="理想气体的相对密度" prop="drdIdeal11062">
        <el-input v-model="NGResult.drdIdeal11062" placeholder="请输入理想气体的相对密度" />
      </el-form-item>
      <el-form-item label="真实气体的相对密度" prop="drdReal11062">
        <el-input v-model="NGResult.drdReal11062" placeholder="请输入真实气体的相对密度" />
      </el-form-item>
      <el-form-item label="真实气体的沃泊指数" prop="dWobbeIndex">
        <el-input v-model="NGResult.dWobbeIndex" placeholder="请输入真实气体的沃泊指数" />
      </el-form-item>
      <el-form-item label="临界压力" prop="dPc">
        <el-input v-model="NGResult.dPc" placeholder="请输入临界压力" />
      </el-form-item>
      <el-form-item label="临界温度" prop="dTC">
        <el-input v-model="NGResult.dTC" placeholder="请输入临界温度" />
      </el-form-item>
      <el-form-item label="爆炸上限" prop="dBzsx">
        <el-input v-model="NGResult.dBzsx" placeholder="请输入爆炸上限" />
      </el-form-item>
      <el-form-item label="爆炸下限" prop="dBzxx">
        <el-input v-model="NGResult.dBzxx" placeholder="请输入爆炸下限" />
      </el-form-item>
      <el-form-item label="总炭含量(kg/m3)" prop="dTotalC">
        <el-input v-model="NGResult.dTotalC" placeholder="请输入总炭含量(kg/m3)" />
      </el-form-item>
      <el-form-item label="C2组分含量(kg/m3)" prop="dC2">
        <el-input v-model="NGResult.dC2" placeholder="请输入C2组分含量(kg/m3)" />
      </el-form-item>
      <el-form-item label="C2以上组分含量(kg/m3)" prop="dC2j">
        <el-input v-model="NGResult.dC2j" placeholder="请输入C2以上组分含量(kg/m3)" />
      </el-form-item>
      <el-form-item label="C3以上组分含量(kg/m3)" prop="dC3j">
        <el-input v-model="NGResult.dC3j" placeholder="请输入C3以上组分含量(kg/m3)" />
      </el-form-item>
      <el-form-item label="C4以上组分含量(kg/m3)" prop="dC4j">
        <el-input v-model="NGResult.dC4j" placeholder="请输入C4以上组分含量(kg/m3)" />
      </el-form-item>
      <el-form-item label="C5以上组分含量(kg/m3)" prop="dC5j">
        <el-input v-model="NGResult.dC5j" placeholder="请输入C5以上组分含量(kg/m3)" />
      </el-form-item>
      <el-form-item label="C6以上组分含量(kg/m3)" prop="dC6j">
        <el-input v-model="NGResult.dC6j" placeholder="请输入C6以上组分含量(kg/m3)" />
      </el-form-item>
      <el-form-item label="C3C4组分含量(kg/m3)" prop="dC3C4">
        <el-input 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: null,
          dZb: null,
          dZf: null,
          dFpv: null,
          dDb: null,
          dDf: null,
          dRhob: null,
          dRhof: null,
          drdIdeal: null,
          drdReal: null,
          dHo: null,
          dH: null,
          dS: null,
          dCpi: null,
          dCp: null,
          dCv: null,
          dk: null,
          dKappa: null,
          dSOS: null,
          dCstar: null,
          dHhvMol: null,
          dLhvMol: null,
          dHhvv: null,
          dLhvv: null,
          dHhvm: null,
          dLhvm: null,
          dZb11062: null,
          dRhob11062: null,
          dRhof11062: null,
          drdIdeal11062: null,
          drdReal11062: null,
          dWobbeIndex: null,
          dPc: null,
          dTC: null,
          dBzsx: null,
          dBzxx: null,
          dTotalC: null,
          dC2: null,
          dC2j: null,
          dC3j: null,
          dC4j: null,
          dC5j: null,
          dC6j: null,
          dC3C4: null,
        })
      }
    },

    data() {
      return {
        NGResult: [],
        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%;
  }

  .result-form {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 10px;
  }

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