<template>
  <div class="app-container">
    <el-form :model="meterPar" ref="dataForm" label-position="top" size="small" :inline="true" label-width="160px" class="flex-form">
      <el-form-item v-if="['0', '1', '2', '3'].includes(meterPar.dMeterType)" :style="{ width: selectWidth + 'px' }" label="流量计类别" prop="dMeterType">
        <el-select :key="'meter-type-' + meterPar.dMeterType" v-model="meterPar.dMeterType" placeholder="请选择流量计类别 " clearable>
          <el-option v-for="dict in dict.type.ngtools_lljlx" :key="dict.value" :label="dict.label" :value="dict.value" />
        </el-select>
      </el-form-item>
      <el-form-item v-if="meterPar.dMeterType === '0'" :style="{ width: selectWidth + 'px' }" label="计算标准" prop="dFlowCalbz">
        <el-select v-model="meterPar.dFlowCalbz" placeholder="请选择计算标准 " clearable>
          <el-option v-for="dict in dict.type.ngtools_lljsbz" :key="dict.value" :label="dict.label" :value="dict.value" />
        </el-select>
      </el-form-item>
      <el-form-item :style="{ width: selectWidth + 'px' }" label="压缩因子计算标准" prop="dZcalbz">
        <el-select v-model="meterPar.dZcalbz" placeholder="请选择压缩因子计算标准 " clearable>
          <el-option v-for="dict in dict.type.ngtools_ysyzjsbz" :key="dict.value" :label="dict.label" :value="dict.value" />
        </el-select>
      </el-form-item>
      <el-form-item :style="{ width: selectWidth + 'px' }" label="计量参比条件压力" prop="dCbtj">
        <el-select v-model="meterPar.dCbtj" placeholder="请选择计量参比条件压力 " clearable>
          <el-option v-for="dict in dict.type.ngtools_cbtj" :key="dict.value" :label="dict.label" :value="dict.value" />
        </el-select>
      </el-form-item>

      <el-form-item v-if="meterPar.dMeterType === '0'" :style="{ width: selectWidth + 'px' }" label="节流装置类型" prop="dCoreType">
        <el-select v-model="meterPar.dCoreType" placeholder="请选择节流装置类型 " clearable>
          <el-option v-for="dict in dict.type.ngtools_jlzzlx" :key="dict.value" :label="dict.label" :value="dict.value" />
        </el-select>
      </el-form-item>
      <el-form-item v-if="meterPar.dMeterType === '0'" :style="{ width: selectWidth + 'px' }" label="取压方式" prop="dPtmode">
        <el-select v-model="meterPar.dPtmode" placeholder="请选择取压方式 " clearable>
          <el-option v-for="dict in dict.type.ngtools_qyfs" :key="dict.value" :label="dict.label" :value="dict.value" />
        </el-select>
      </el-form-item>
      <el-form-item v-if="meterPar.dMeterType === '0'" :style="{ width: selectWidth + 'px' }" label="管道类型" prop="dPipeType">
        <el-select v-model="meterPar.dPipeType" placeholder="请选择管道类型 " clearable>
          <el-option v-for="dict in dict.type.ngtools_gdlx" :key="dict.value" :label="dict.label" :value="dict.value" />
        </el-select>
      </el-form-item>

      <el-form-item v-if="meterPar.dMeterType === '0'" :style="{ width: selectWidth + 'px' }" label="管道材料" prop="dPipeMaterial">
        <el-select v-model="meterPar.dPipeMaterial" placeholder="请选择管道材料 " clearable>
          <el-option v-for="dict in dict.type.ngtools_gdcz" :key="dict.value" :label="dict.label" :value="dict.value" />
        </el-select>
      </el-form-item>

      <el-form-item v-if="meterPar.dMeterType === '0'" :style="{ width: selectWidth + 'px' }" label="孔板材料" prop="dOrificeMaterial">
        <el-select v-model="meterPar.dOrificeMaterial" placeholder="请选择孔板材料 " clearable>
          <el-option v-for="dict in dict.type.ngtools_gdcz" :key="dict.value" :label="dict.label" :value="dict.value" />
        </el-select>
      </el-form-item>

      <el-form-item v-if="meterPar.dMeterType === '0' || meterPar.dMeterType === '3'" :style="{ width: selectWidth + 'px' }" label="管道内径" prop="dPipeD">
        <unit-converter v-model="meterPar.dPipeD" :unit-type="'length'" :unit-order.sync="meterPar.dLenUnit" :show-english-only="false" :decimal-places="5" :width="selectWidth" />
      </el-form-item>

      <el-form-item v-if="meterPar.dMeterType === '0'" :style="{ width: selectWidth + 'px' }" label="孔板孔径" prop="dOrificeD">
        <unit-converter
          v-model="meterPar.dOrificeD"
          :unit-type="'length'"
          :unit-order.sync="meterPar.dOrificeUnit"
          :show-english-only="false"
          :decimal-places="5"
          :width="selectWidth"
        />
      </el-form-item>
      <el-form-item v-if="meterPar.dMeterType === '3'" :style="{ width: selectWidth + 'px' }" label="喉部直径" prop="dOrificeD">
        <unit-converter
          v-model="meterPar.dOrificeD"
          :unit-type="'length'"
          :unit-order.sync="meterPar.dOrificeUnit"
          :show-english-only="false"
          :decimal-places="5"
          :width="selectWidth"
        />
      </el-form-item>

      <el-form-item :style="{ width: selectWidth + 'px' }" label="压力类型" prop="dPfType">
        <el-select v-model="meterPar.dPfType" placeholder="请选择压力类型 " clearable>
          <el-option v-for="dict in dict.type.ngtools_yllx" :key="dict.value" :label="dict.label" :value="dict.value" />
        </el-select>
      </el-form-item>
      <el-form-item v-if="meterPar.dPfType === '0'" :style="{ width: selectWidth + 'px' }" label="当地大气压" prop="dPatm">
        <unit-converter
          v-model="meterPar.dPatm"
          :unit-type="'pressure'"
          :unit-order.sync="meterPar.dPatmUnit"
          :show-english-only="false"
          :decimal-places="6"
          :width="selectWidth"
        />
      </el-form-item>
      <el-form-item :style="{ width: selectWidth + 'px' }" label="输入压力" prop="dPf">
        <unit-converter v-model="meterPar.dPf" :unit-type="'pressure'" :unit-order.sync="meterPar.dPfUnit" :show-english-only="false" :decimal-places="5" :width="selectWidth" />
      </el-form-item>
      <el-form-item :style="{ width: selectWidth + 'px' }" label="输入温度" prop="dTf">
        <unit-converter v-model="meterPar.dTf" :unit-type="'temperature'" :unit-order.sync="meterPar.dTfUnit" :show-english-only="false" :decimal-places="5" :width="selectWidth" />
      </el-form-item>
      <el-form-item v-if="meterPar.dMeterType === '0'" :style="{ width: selectWidth + 'px' }" label="输入差压" prop="dDp">
        <unit-converter v-model="meterPar.dDp" :unit-type="'pressure'" :unit-order.sync="meterPar.dDpUnit" :show-english-only="false" :decimal-places="5" :width="selectWidth" />
      </el-form-item>

      <!--  <el-form-item :style="{ width: selectWidth + 'px' }"    label="体积流量单位" prop="dVFlowUnit">
        <el-input v-model="meterPar.dVFlowUnit" placeholder="请输入体积流量单位 " clearable  />
      </el-form-item >
      <el-form-item :style="{ width: selectWidth + 'px' }"    label="质量流量单位" prop="dMFlowUnit">
        <el-input v-model="meterPar.dMFlowUnit" placeholder="请输入质量流量单位 " clearable  />
      </el-form-item >
      <el-form-item :style="{ width: selectWidth + 'px' }"    label="能量流量单位" prop="dEFlowUnit">
        <el-input v-model="meterPar.dEFlowUnit" placeholder="请输入能量流量单位 " clearable  />
      </el-form-item > -->

      <el-form-item v-if="meterPar.dMeterType === '3'" :style="{ width: selectWidth + 'px' }" label="流出系数" prop="dCd">
        <el-input v-model="meterPar.dCd" placeholder="请输入流出系数 " clearable />
      </el-form-item>
      <!-- <el-form-item :style="{ width: selectWidth + 'px' }"    label="流出系数计算方法" prop="dCdCalMethod">
        <el-select v-model="meterPar.dCdCalMethod" placeholder="请选择流出系数计算方法 " clearable >
          <el-option  v-for="dict in dict.type.ngtools_lcxsjsff" :key="dict.value" :label="dict.label" :value="dict.value" />
        </el-select>
      </el-form-item > -->
      <el-form-item v-if="meterPar.dMeterType === '1' || meterPar.dMeterType === '2'" :style="{ width: selectWidth + 'px' }" label="仪表系数" prop="dMeterFactor">
        <el-input v-model="meterPar.dMeterFactor" placeholder="请输入仪表系数 " clearable />
      </el-form-item>
      <el-form-item v-if="meterPar.dMeterType === '1' || meterPar.dMeterType === '2'" :style="{ width: selectWidth + 'px' }" label="脉冲数" prop="dPulseNum">
        <unit-converter
          v-model="meterPar.dPulseNum"
          :unit-type="'user'"
          :unit-order.sync="meterPar.dVGscUnit"
          :show-english-only="false"
          :decimal-places="5"
          :user-defined="true"
          :user-definedunit-name="'个'"
          :enable-convert="false"
          :width="selectWidth"
        />
      </el-form-item>

      <el-form-item v-if="meterPar.dMeterType === '5'" :style="{ width: selectWidth + 'px' }" label="管束车容积" prop="dVGsc">
        <unit-converter v-model="meterPar.dVGsc" :unit-type="'volume'" :unit-order.sync="meterPar.dVGscUnit" :show-english-only="false" :decimal-places="5" :width="selectWidth" />
      </el-form-item>

      <el-form-item v-if="meterPar.dBqdd === '1'" :style="{ width: selectWidth + 'px' }" label="最大体积流量" prop="dVFlowMax">
        <unit-converter
          v-model="meterPar.dVFlowMax"
          :unit-type="'volumeflow'"
          :unit-order.sync="meterPar.dVFlowUnit"
          :show-english-only="false"
          :decimal-places="5"
          :width="selectWidth"
        />
      </el-form-item>
      <el-form-item v-if="meterPar.dBqdd === '1'" :style="{ width: selectWidth + 'px' }" label="最小体积流量" prop="dVFlowMin">
        <unit-converter
          v-model="meterPar.dVFlowMin"
          :unit-type="'volumeflow'"
          :unit-order.sync="meterPar.dVFlowUnit"
          :show-english-only="false"
          :decimal-places="5"
          :width="selectWidth"
        />
      </el-form-item>
      <el-form-item v-if="meterPar.dBqdd === '1'" :style="{ width: selectWidth + 'px' }" label="常用流量" prop="dVFlowCon">
        <unit-converter
          v-model="meterPar.dVFlowCon"
          :unit-type="'volumeflow'"
          :unit-order.sync="meterPar.dVFlowUnit"
          :show-english-only="false"
          :decimal-places="5"
          :enable-convert="true"
          :width="selectWidth"
        />
      </el-form-item>

      <el-form-item v-if="meterPar.dBqdd === '1'" :style="{ width: selectWidth + 'px' }" label="压力量程下限" prop="dPfRangeMin">
        <unit-converter
          v-model="meterPar.dPfRangeMin"
          :unit-type="'pressure'"
          :unit-order.sync="meterPar.dPfUnit"
          :show-english-only="false"
          :decimal-places="5"
          :width="selectWidth"
        />
      </el-form-item>
      <el-form-item v-if="meterPar.dBqdd === '1'" :style="{ width: selectWidth + 'px' }" label="压力量程上限" prop="dPfRangeMax">
        <unit-converter
          v-model="meterPar.dPfRangeMax"
          :unit-type="'pressure'"
          :unit-order.sync="meterPar.dPfUnit"
          :show-english-only="false"
          :decimal-places="5"
          :width="selectWidth"
        />
      </el-form-item>
      <el-form-item v-if="meterPar.dBqdd === '1'" :style="{ width: selectWidth + 'px' }" label="差压量程下限" prop="dDpRangeMin">
        <unit-converter
          v-model="meterPar.dDpRangeMin"
          :unit-type="'pressure'"
          :unit-order.sync="meterPar.dDpUnit"
          :show-english-only="false"
          :decimal-places="5"
          :width="selectWidth"
        />
      </el-form-item>
      <el-form-item v-if="meterPar.dBqdd === '1'" :style="{ width: selectWidth + 'px' }" label="差压量程上限" prop="dDpRangeMax">
        <unit-converter
          v-model="meterPar.dDpRangeMax"
          :unit-type="'pressure'"
          :unit-order.sync="meterPar.dDpUnit"
          :show-english-only="false"
          :decimal-places="5"
          :width="selectWidth"
        />
      </el-form-item>
      <el-form-item v-if="meterPar.dBqdd === '1'" :style="{ width: selectWidth + 'px' }" label="温度计量程下限" prop="dTfRangeMin">
        <unit-converter
          v-model="meterPar.dTfRangeMin"
          :unit-type="'temperature'"
          :unit-order.sync="meterPar.dTfUnit"
          :show-english-only="false"
          :decimal-places="5"
          :width="selectWidth"
        />
      </el-form-item>
      <el-form-item v-if="meterPar.dBqdd === '1'" :style="{ width: selectWidth + 'px' }" label="温度计量程上限" prop="dTfRangeMax">
        <unit-converter
          v-model="meterPar.dTfRangeMax"
          :unit-type="'temperature'"
          :unit-order.sync="meterPar.dTfUnit"
          :show-english-only="false"
          :decimal-places="5"
          :width="selectWidth"
        />
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import unitConverter from '@/components/inputValueUnit/index';
export default {
  name: 'meterParComponents',
  components: {
    unitConverter
  },
  dicts: [
    'ngtools_cbtj',
    'ngtools_jlzzlx',
    'ngtools_lljlx',
    'ngtools_qyfs',
    'ngtools_gdcz',
    'ngtools_lcxsjsff',
    'ngtools_gdlx',
    'ngtools_yllx',
    'ngtools_lljsbz',
    'ngtools_ysyzjsbz'
  ],
  mounted() {
    this.selectWidth = this.elFormWidth;
  },
  props: {
    value: {
      type: Object,
      default: () => ({
        dFlowCalbz: null,
        dZcalbz: null,
        dCbtj: null,
        dpbM: null,
        dtbM: null,
        dpbE: null,
        dtbE: null,
        dPatm: null,
        dPatmUnit: null,
        dngCompents: null,
        dMeterType: null,
        dCoreType: null,
        dPtmode: null,
        dPipeType: null,
        dPipeD: null,
        dLenUnit: null,
        dPipeDtemp: null,
        dPileDtempU: null,
        dPipeMaterial: null,
        dOrificeD: null,
        dOrificeUnit: null,
        dOrificeDtemp: null,
        dOrificeDtempUnit: null,
        dOrificeMaterial: null,
        dOrificeSharpness: null,
        dOrificeRk: null,
        dOrificeRkLenU: null,
        dPf: null,
        dPfUnit: null,
        dPfType: null,
        dTf: null,
        dTfUnit: null,
        dDp: null,
        dDpUnit: null,
        dVFlowUnit: 0,
        dVFlowWorkUnit: 0,
        dMFlowUnit: 0,
        dEFlowUnit: 6,
        dCd: null,
        dCdCalMethod: null,
        dMeterFactor: null,
        dPulseNum: null,
        dVFlowMax: null,
        dVFlowMin: null,
        dVFlowCon: null,
        dPfRangeMin: null,
        dPfRangeMax: null,
        dDpRangeMin: null,
        dDpRangeMax: null,
        dTfRangeMin: null,
        dTfRangeMax: null,
        dVGsc: null,
        dCalcType: 0, //0 流量 1  天然气  3 管束车
        dBqdd: 0 //0 不计算，1 计算
      })
    },
    elFormWidth: {
      type: Number,
      default: 180
    }
  },
  data() {
    return {
      selectWidth: 0, //下拉选择组件的宽度
      meterPar: _.cloneDeep(this.value)
    };
  },
  watch: {
    elFormWidth: {
      deep: true,
      handler(newVal) {
        this.selectWidth = newVal;
      }
    },
    value: {
      deep: true,
      handler(newVal) {
        console.log('-------------------', newVal, newVal.dMeterType);
        this.meterPar = _.cloneDeep(newVal);
        // 强制类型转换（如果必要）
        this.meterPar.dMeterType = String(this.meterPar.dMeterType);
      }
    }
  },
  methods: {}
};
</script>

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