<template>
  <div class="app-container">
    <el-form :model="meterResult" label-position="top" ref="queryRef" size="small" :inline="false" label-width="160px" class="flex-form">
      <el-form-item :style="{ width: selectWidth + 'px' }" label="求渐近速度系数 E" prop="dE">
        <el-input class="el-input" readonly v-model="meterResult.dE" placeholder=" " />
      </el-form-item>
      <el-form-item label="求相对密度系数 FG" prop="dFG">
        <el-input readonly v-model="meterResult.dFG" placeholder=" " />
      </el-form-item>
      <el-form-item label="求流动温度系数 FT" prop="dFT">
        <el-input readonly v-model="meterResult.dFT" placeholder="" />
      </el-form-item>
      <el-form-item label="求动力粘度dlnd" prop="dDViscosity">
        <el-input readonly v-model="meterResult.dDViscosity" placeholder="" />
      </el-form-item>
      <el-form-item label="求可膨胀系数" prop="dDExpCoefficient">
        <el-input readonly v-model="meterResult.dDExpCoefficient" placeholder="" />
      </el-form-item>
      <el-form-item label="管道雷诺数" prop="dRnPipe">
        <el-input readonly v-model="meterResult.dRnPipe" placeholder="" />
      </el-form-item>
      <el-form-item label="孔板锐利度系数Bk" prop="dBk">
        <el-input readonly v-model="meterResult.dBk" placeholder="" />
      </el-form-item>
      <el-form-item label="管道粗糙度系数 Gme" prop="dRoughNessPipe">
        <el-input readonly v-model="meterResult.dRoughNessPipe" placeholder="" />
      </el-form-item>
      <el-form-item label="修正后的流出系数" prop="dCdCorrect">
        <el-input readonly v-model="meterResult.dCdCorrect" placeholder="" />
      </el-form-item>
      <el-form-item label="喷嘴的流出系数" prop="dCdNozell">
        <el-input readonly v-model="meterResult.dCdNozell" placeholder="" />
      </el-form-item>
      <el-form-item label="标况体积流量m³/s" prop="dVFlowb">
        <unit-converter
          v-model="meterResult.dVFlowb"
          :unit-type="'volumeflow'"
          :unit-order.sync="meterResult.dVFlowUnit"
          :show-english-only="true"
          :decimal-places="5"
          :width="selectWidth"
          :input-disable="true"
        />
      </el-form-item>
      <el-form-item label="工况体积流量" prop="dVFlowf">
        <unit-converter
          v-model="meterResult.dVFlowf"
          :unit-type="'volumeflow'"
          :unit-order.sync="meterResult.dVFlowWorkUnit"
          :show-english-only="true"
          :decimal-places="5"
          :input-disable="true"
          :width="selectWidth"
        />
      </el-form-item>
      <el-form-item label="标况质量流量" prop="dMFlowb">
        <unit-converter
          v-model="meterResult.dMFlowb"
          :unit-type="'massflow'"
          :unit-order.sync="meterResult.dMFlowUnit"
          :input-disable="true"
          :show-english-only="true"
          :decimal-places="5"
          :width="selectWidth"
        />
      </el-form-item>
      <el-form-item label="标况能量流量" prop="dEFlowb">
        <unit-converter
          v-model="meterResult.dEFlowb"
          :unit-type="'energyflow'"
          :unit-order.sync="meterResult.dEFlowUnit"
          :show-english-only="true"
          :decimal-places="5"
          :width="selectWidth"
          :input-disable="true"
        />
      </el-form-item>
      <el-form-item label="管道内天然气流速" prop="dVelocityFlow">
        <unit-converter
          v-model="meterResult.dVelocityFlow"
          :unit-type="'speed'"
          :unit-order.sync="meterResult.dVelocityUnit"
          :show-english-only="true"
          :decimal-places="5"
          :input-disable="true"
          :width="selectWidth"
        />
      </el-form-item>
      <el-form-item label="压力损失" prop="dPressLost">
        <unit-converter
          v-model="meterResult.dPressLost"
          :unit-type="'pressure'"
          :unit-order.sync="meterResult.dPressLostUnit"
          :show-english-only="true"
          :decimal-places="5"
          :input-disable="true"
          :width="selectWidth"
        />
      </el-form-item>
      <el-form-item label="直径比" prop="dBeta">
        <el-input readonly v-model="meterResult.dBeta" placeholder="" />
      </el-form-item>
      <el-form-item label="等熵指数" prop="dKappa">
        <el-input readonly v-model="meterResult.dKappa" placeholder="" />
      </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: () => ({
        dE: 0,
        dFG: 0,
        dFT: 0,
        dDViscosity: 0,
        dDExpCoefficient: 0,
        dRnPipe: 0,
        dBk: 0,
        dRoughNessPipe: 0,
        dCdCorrect: 0,
        dCdNozell: 0,
        dVFlowb: 0,
        dVFlowf: 0,
        dVFlowUnit: 0,
        dMFlowb: 0,
        dMFlowUnit: 0,
        dEFlowb: 0,
        dEFlowUnit: 0,
        dVelocityFlow: 0,
        dVelocityUnit: 0,
        dPressLost: 0,
        dPressLostUnit: 0,
        dBeta: 0,
        dKappa: 0
      })
    },
    elFormWidth: {
      type: Number,
      default: 180
    }
  },
  mounted() {
    this.selectWidth = this.elFormWidth;
  },
  data() {
    return {
      meterResult: {
        dE: 0,
        dFG: 0,
        dFT: 0,
        dDViscosity: 0,
        dDExpCoefficient: 0,
        dRnPipe: 0,
        dBk: 0,
        dRoughNessPipe: 0,
        dCdCorrect: 0,
        dCdNozell: 0,
        dVFlowb: 0,
        dVFlowf: 0,
        dVFlowUnit: 0,
        dMFlowb: 0,
        dMFlowUnit: 0,
        dEFlowb: 0,
        dEFlowUnit: 0,
        dVelocityFlow: 0,
        dVelocityUnit: 0,
        dPressLost: 0,
        dPressLostUnit: 0,
        dBeta: 0,
        dKappa: 0
      },
      selectWidth: 0
    };
  },

  watch: {
    elFormWidth: {
      deep: true,
      handler(newVal) {
        this.selectWidth = newVal;
      }
    },
    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.meterResult = JSON.parse(JSON.stringify(newVal));
      }
    }
  },
  mounted() {
    this.$nextTick(() => {
      // 在 DOM 更新后获取宽度
      this.selectWidth = this.elFormWidth;
    });
  },
  methods: {}
};
</script>

<style scoped>
/* 可按需添加样式 */
.app-container {
  height: 100%;
}
.flex-form {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); /* 自适应列宽 */
  gap: 10px; /* 设置表单项之间的间距 */
}
</style>
